Add signup page
This commit is contained in:
1ilit
parent
72ad69bc66
commit
bb0229ac5c
38
package-lock.json
generated
38
package-lock.json
generated
@ -23,6 +23,7 @@
|
||||
"node-sql-parser": "^4.7.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-google-recaptcha": "^3.1.0",
|
||||
"react-hotkeys-hook": "^4.4.1",
|
||||
"react-router-dom": "^6.11.2",
|
||||
"react-scripts": "5.0.1",
|
||||
@ -9350,6 +9351,19 @@
|
||||
"he": "bin/he"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"dependencies": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics/node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
|
||||
@ -15181,6 +15195,18 @@
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/react-async-script": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
|
||||
"integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
|
||||
"dependencies": {
|
||||
"hoist-non-react-statics": "^3.3.0",
|
||||
"prop-types": "^15.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dev-utils": {
|
||||
"version": "12.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
|
||||
@ -15283,6 +15309,18 @@
|
||||
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
|
||||
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
|
||||
},
|
||||
"node_modules/react-google-recaptcha": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
|
||||
"integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.5.0",
|
||||
"react-async-script": "^1.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-hotkeys-hook": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.4.1.tgz",
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
"node-sql-parser": "^4.7.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-google-recaptcha": "^3.1.0",
|
||||
"react-hotkeys-hook": "^4.4.1",
|
||||
"react-router-dom": "^6.11.2",
|
||||
"react-scripts": "5.0.1",
|
||||
|
||||
@ -4,20 +4,20 @@ import LandingPage from "./pages/landing_page";
|
||||
import Survey from "./pages/survey";
|
||||
import Shortcuts from "./pages/shortcuts";
|
||||
import BugReport from "./pages/bug_report";
|
||||
import SignUp from "./pages/signup";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<LandingPage />} />
|
||||
<Route path="/editor" element={<Editor name="Untitled" />} />
|
||||
<Route path="/survey" element={<Survey />} />
|
||||
<Route path="/shortcuts" element={<Shortcuts/>}/>
|
||||
<Route path="/bug_report" element={<BugReport/>}/>
|
||||
<Route path="/shortcuts" element={<Shortcuts />} />
|
||||
<Route path="/bug_report" element={<BugReport />} />
|
||||
<Route path="/signup" element={<SignUp />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -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]);
|
||||
|
||||
|
||||
@ -454,7 +454,7 @@ export default function Editor(props) {
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
document.title = "Editor - drawDB";
|
||||
document.title = "Editor | drawDB";
|
||||
|
||||
socket.connect();
|
||||
|
||||
|
||||
@ -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">
|
||||
<div>
|
||||
<Link to="" className="me-5 font-semibold">
|
||||
Log in
|
||||
</button>
|
||||
</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>
|
||||
|
||||
@ -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
38
src/pages/signup.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user