Add signup page

package-lock.json

@@ -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",

package.json

@@ -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",

src/App.js

@@ -4,10 +4,10 @@ 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 />} />
@@ -15,9 +15,9 @@ function App() {
         <Route path="/survey" element={<Survey />} />
         <Route path="/shortcuts" element={<Shortcuts />} />
         <Route path="/bug_report" element={<BugReport />} />
+        <Route path="/signup" element={<SignUp />} />
       </Routes>
     </Router>
-    </>
   );
 }
 

src/pages/bug_report.jsx

@@ -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]);
 

src/pages/editor.jsx

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

src/pages/landing_page.jsx

@@ -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>

src/pages/shortcuts.jsx

@@ -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]);
 

src/pages/signup.jsx

@@ -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>
+  );
+}