Add signup page

This commit is contained in:
1ilit
2023-09-24 19:38:39 +03:00
parent 72ad69bc66
commit bb0229ac5c
8 changed files with 103 additions and 18 deletions

View File

@@ -151,7 +151,7 @@ export default function BugReport() {
body.setAttribute("theme-mode", "light");
}
}
document.title = "Report a bug - drawDB";
document.title = "Report a bug | drawDB";
document.body.setAttribute("class", "theme");
}, [setTheme]);

View File

@@ -454,7 +454,7 @@ export default function Editor(props) {
);
useEffect(() => {
document.title = "Editor - drawDB";
document.title = "Editor | drawDB";
socket.connect();

View File

@@ -21,7 +21,7 @@ export default function LandingPage() {
</div>
)}
<div>
<div className="py-5 px-6 flex justify-between">
<div className="py-5 px-6 flex justify-between items-center">
<div className="flex items-center justify-start">
<Link to="/">
<img src={logo} alt="logo" className="me-2" />
@@ -42,9 +42,17 @@ export default function LandingPage() {
Download
</Link>
</div>
<button className="px-6 py-2 bg-[#386b8f] text-white font-semibold rounded">
Log in
</button>
<div>
<Link to="" className="me-5 font-semibold">
Log in
</Link>
<Link
to="/signup"
className="px-5 py-2.5 bg-[#386b8f] hover:bg-[#4e8bb6] text-white font-semibold rounded-md"
>
Sign up
</Link>
</div>
</div>
<hr />
</div>

View File

@@ -81,7 +81,7 @@ export default function Shortcuts() {
body.setAttribute("theme-mode", "light");
}
}
document.title = "Shortcuts - drawDB";
document.title = "Shortcuts | drawDB";
document.body.setAttribute("class", "theme");
}, [setTheme]);

38
src/pages/signup.jsx Normal file
View File

@@ -0,0 +1,38 @@
import React, { useEffect } from "react";
import { Link } from "react-router-dom";
import logo from "../assets/logo_light_46.png";
import ReCAPTCHA from "react-google-recaptcha";
export default function SignUp() {
useEffect(() => {
document.title = "Create account | drawDB";
});
return (
<div className="flex h-screen">
<div className="bg-indigo-300 w-[50%]"></div>
<div className="m-auto">
<div>
<Link to="/" className="text-center">
<img src={logo} alt="logo" className="me-2" />
</Link>
<div className="text-xl my-2">Create your account</div>
<div className="flex items-center justify-center my-2">
<hr className="border-slate-400 flex-grow" />
<div className="text-sm font-semibold m-2 text-slate-400">or</div>
<hr className="border-slate-400 flex-grow" />
</div>
<input className="py-2 px-3 block w-full my-2 border rounded border-slate-400" />
<input className="py-2 px-3 block w-full my-2 border rounded border-slate-400" />
<input className="py-2 px-3 block w-full my-2 border rounded border-slate-400" />
<ReCAPTCHA
sitekey={process.env.REACT_APP_CAPTCHA_SITE_KEY}
onChange={() => {}}
/>
<button className="px-3 py-2.5 my-2 bg-[#386b8f] hover:bg-[#4e8bb6] rounded text-white text-sm font-semibold">
Submit
</button>
</div>
</div>
</div>
);
}