Connect to login endpoint

package-lock.json

@@ -20,6 +20,7 @@
         "jspdf": "^2.5.1",
         "lexical": "^0.12.5",
         "react": "^18.2.0",
+        "react-cookie": "^7.0.1",
         "react-dom": "^18.2.0",
         "react-google-recaptcha": "^3.1.0",
         "react-hotkeys-hook": "^4.4.1",
@@ -1584,11 +1585,24 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+    },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
-      "dev": true
     },
     "node_modules/@types/raf": {
       "version": "3.4.3",
@@ -1600,7 +1614,6 @@
       "version": "18.2.45",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.45.tgz",
       "integrity": "sha512-TtAxCNrlrBp8GoeEp1npd5g+d/OejJHFxS3OWmrPBMFaVQMSN0OFySozJio5BHxTuTeug00AVXVAjfDSfk+lUg==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -1619,8 +1632,7 @@
     "node_modules/@types/scheduler": {
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
-      "dev": true
     },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
@@ -2212,6 +2224,14 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/copy-text-to-clipboard": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-2.2.0.tgz",
@@ -2272,8 +2292,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
-      "dev": true
     },
     "node_modules/date-fns": {
       "version": "2.30.0",
@@ -4605,6 +4624,19 @@
         "react": ">=16.4.1"
       }
     },
+    "node_modules/react-cookie": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-7.0.1.tgz",
+      "integrity": "sha512-SmDjy2TFp+vS6BGOqW7HyaWKyJzVmIH74uP3mxq6kswlwLJEBtIbhkrioozdvQL9r81yprHYFQkSmcO4HiXPdA==",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.5",
+        "hoist-non-react-statics": "^3.3.2",
+        "universal-cookie": "^7.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -5484,6 +5516,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/universal-cookie": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.0.1.tgz",
+      "integrity": "sha512-6OuX9xELF6dsVJeADJAYNDOxQf/NR3Na5bGCRd+hkysMDkSt79jJ4tdv5OBe+ZgAks3ExHBdCXkD2SjqLyK59w==",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^0.6.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",

package.json

@@ -22,6 +22,7 @@
     "jspdf": "^2.5.1",
     "lexical": "^0.12.5",
     "react": "^18.2.0",
+    "react-cookie": "^7.0.1",
     "react-dom": "^18.2.0",
     "react-google-recaptcha": "^3.1.0",
     "react-hotkeys-hook": "^4.4.1",

src/App.jsx

@@ -1,27 +1,30 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Editor from "./pages/Editor";
-import LandingPage from "./pages/LandingPage";
 import Survey from "./pages/Survey";
 import BugReport from "./pages/BugReport";
 import SignUp from "./pages/Signup";
-import Shortcuts from "./pages/Shortcuts"
+import Shortcuts from "./pages/Shortcuts";
 import Login from "./pages/Login";
 import Templates from "./pages/Templates";
+import Home from "./pages/Home";
+import { CookiesProvider } from "react-cookie";
 
 function App() {
   return (
-    <Router>
+    <CookiesProvider>
-      <Routes>
+      <Router>
-        <Route path="/" element={<LandingPage />} />
+        <Routes>
-        <Route path="/editor" element={<Editor />} />
+          <Route path="/" element={<Home />} />
-        <Route path="/survey" element={<Survey />} />
+          <Route path="/editor" element={<Editor />} />
-        <Route path="/shortcuts" element={<Shortcuts />} />
+          <Route path="/survey" element={<Survey />} />
-        <Route path="/bug_report" element={<BugReport />} />
+          <Route path="/shortcuts" element={<Shortcuts />} />
-        <Route path="/signup" element={<SignUp />} />
+          <Route path="/bug_report" element={<BugReport />} />
-        <Route path="/login" element={<Login />} />
+          <Route path="/signup" element={<SignUp />} />
-        <Route path="/templates" element={<Templates />} />
+          <Route path="/login" element={<Login />} />
-      </Routes>
+          <Route path="/templates" element={<Templates />} />
-    </Router>
+        </Routes>
+      </Router>
+    </CookiesProvider>
   );
 }
 

src/pages/Dashboard.jsx

@@ -0,0 +1,5 @@
+export default function Dashboard() {
+  return (
+    <div>Dashboard</div>
+  )
+}

src/pages/Home.jsx

@@ -0,0 +1,8 @@
+import LandingPage from "./LandingPage";
+import Dashboard from "./Dashboard";
+import { useCookies } from "react-cookie";
+
+export default function Home() {
+  const [cookies] = useCookies(["logged_in"]);
+  return <div>{cookies.logged_in ? <Dashboard /> : <LandingPage />}</div>;
+}

src/pages/login.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import logo from "../assets/icon_dark_64.png";
 import google_logo from "../assets/google.png";
 import github_logo from "../assets/github.png";
@@ -7,12 +7,16 @@ import axios from "axios";
 import Canvas from "../components/AuthCanvas";
 import { diagram } from "../data/loginDiagram";
 
+import { useCookies } from "react-cookie";
+
 export default function Login() {
   const [formValues, setFormValues] = useState({
     email: "",
     password: "",
   });
   const [showPassword, setShowPassword] = useState(false);
+  const [, setCookie] = useCookies(["logged_in", "username"]);
+  const navigate = useNavigate();
 
   const handleChange = (e) =>
     setFormValues((prev) => ({
@@ -22,11 +26,22 @@ export default function Login() {
 
   const onSubmit = async () => {
     await axios
-      .post(`${import.meta.env.VITE_API_BACKEND_URL}/login`, {
+      .post(
-        email: formValues.email,
+        `${import.meta.env.VITE_API_BACKEND_URL}/login`,
-        password: formValues.password,
+        {
+          email: formValues.email,
+          password: formValues.password,
+        },
+        { withCredentials: true }
+      )
+      .then((res) => {
+        setCookie("logged_in", true, { path: "/", maxAge: 1000 * 60 * 60 });
+        setCookie("username", res.data.username, {
+          path: "/",
+          maxAge: 1000 * 60 * 60,
+        });
+        navigate("/");
       })
-      .then(() => {})
       .catch(() => {});
   };
 
@@ -41,8 +56,8 @@ export default function Login() {
           <div className="text-2xl font-bold text-zinc-800 tracking-wide">
             Welcome back!
           </div>
-          <div className="flex items-center my-6 gap-4 font-semibold text-sm">
+          <div className="flex items-center sm:block my-6 gap-4 font-semibold text-sm">
-            <button className="w-full flex gap-2 justify-center items-center px-3 py-2 rounded-md border border-zinc-300 hover:bg-neutral-100 transition-all duration-300">
+            <button className="sm:mb-2 w-full flex gap-2 justify-center items-center px-3 py-2 rounded-md border border-zinc-300 hover:bg-neutral-100 transition-all duration-300">
               <img src={google_logo} width={22} />
               <div>Log in with Google</div>
             </button>