Connect to login endpoint

2024-01-07 05:10:34 +02:00 · 2024-01-07 05:10:34 +02:00 · fa1ea7a9d4
commit fa1ea7a9d4
parent 679a58a9a3
6 changed files with 101 additions and 28 deletions
--- a/package-lock.json
+++ b/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==",
-      "dev": true
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
    },
    "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",
--- a/package.json
+++ b/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",
--- a/src/App.jsx
+++ b/src/App.jsx
@ -1,18 +1,20 @@
 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 (
+    <CookiesProvider>
      <Router>
        <Routes>
-        <Route path="/" element={<LandingPage />} />
+          <Route path="/" element={<Home />} />
          <Route path="/editor" element={<Editor />} />
          <Route path="/survey" element={<Survey />} />
          <Route path="/shortcuts" element={<Shortcuts />} />
@ -22,6 +24,7 @@ function App() {
          <Route path="/templates" element={<Templates />} />
        </Routes>
      </Router>
+    </CookiesProvider>
  );
 }

--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@ -0,0 +1,5 @@
+export default function Dashboard() {
+  return (
+    <div>Dashboard</div>
+  )
+}
--- a/src/pages/Home.jsx
+++ b/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>;
+}
--- a/src/pages/login.jsx
+++ b/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(
+        `${import.meta.env.VITE_API_BACKEND_URL}/login`,
+        {
          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">
-            <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">
+          <div className="flex items-center sm:block my-6 gap-4 font-semibold text-sm">
+            <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>