Implement login post to endpoint, storage handling via react hooks which stores the authToken in localstorage

src/App.tsx

@@ -8,18 +8,14 @@ import Home from "./pages/Home.tsx";
 import Login from "./pages/Login.tsx";
 import About from "./pages/About.tsx";
 
-import useLocalStorage from "./components/useLocalStorage.ts";
+import {
+  usernameStorageHandlerInit,
+  authTokenStorageHandlerInit,
+} from "./components/storageHandler.ts";
 
 export default function App() {
-  const [usernameValue, setUsernameValue, deleteUsernameValue] =
-    useLocalStorage("username");
-
-  if (localStorage.getItem("username") === null) {
-    console.log("Username does not exist, creating!");
-  } else {
-    console.log("Username does exist!");
-    console.log(usernameValue);
-  }
+  const usernameStorageHandler = usernameStorageHandlerInit();
+  const authTokenStorageHandler = authTokenStorageHandlerInit();
 
   return (
     <>

src/components/storageHandler.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import useLocalStorage from "./useLocalStorage.ts";
+
+/*
+React Hooks may not be a good fit for this role as these functions need to be recalled within every page to be accessible
+Could look at using global variables to avoid this (But it appears to be frowned upon? And react has trouble updating usestate hooks when it comes to globals it seems)
+Or could simply stop using react hooks for this role
+It appears to work for now so will leave be
+ */
+
+export const usernameStorageHandlerInit = () => {
+  const [usernameValue, setUsernameValue, deleteUsernameValue] =
+    useLocalStorage("username");
+
+  return {
+    usernameValue,
+    setUsernameValue,
+    deleteUsernameValue,
+  };
+};
+
+export const authTokenStorageHandlerInit = () => {
+  const [authTokenValue, setAuthTokenValue, deleteAuthTokenValue] =
+    useLocalStorage("authtoken");
+
+  return {
+    authTokenValue,
+    setAuthTokenValue,
+    deleteAuthTokenValue,
+  };
+};

src/components/useCookie.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+
+export default function useCookie(cookieName) {
+  const [cookieValue, setCookieValue] = useState("");
+
+  useEffect(() => {
+    const cookie = document.cookie
+      .split("; ")
+      .find((row) => row.startsWith(`${cookieName}=`));
+
+    setCookieValue(cookie ? cookie.split("=")[1] : "");
+  }, [cookieName]);
+
+  const setCookie = (value: string, daysTillExpiry: int) => {
+    const expirationDate = new Date();
+    expirationDate.setDate(expirationDate.getDate() + daysTillExpiry);
+    document.cookie = `${cookieName}=${value}; expires=${expirationDate.toUTCString()}; path=/`;
+  };
+
+  const deleteCookie = () => {
+    document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
+  };
+
+  return [cookieValue, setCookie, deleteCookie];
+}

src/pages/Login.tsx

@@ -1,9 +1,16 @@
 import * as React from "react";
+import {
+  usernameStorageHandlerInit,
+  authTokenStorageHandlerInit,
+} from "../components/storageHandler.ts";
 
 export default function Login() {
-  const [usernameValue, setUsernameValue] = React.useState("");
-  function handleUsernameChange(eventData) {
-    setUsernameValue(eventData.target.value);
+  const usernameStorageHandler = usernameStorageHandlerInit();
+  const authTokenStorageHandler = authTokenStorageHandlerInit();
+
+  const [usernameFormValue, setUsernameFormValue] = React.useState("");
+  function handleUsernameFormChange(eventData) {
+    setUsernameFormValue(eventData.target.value);
   }
 
   function onUsernameInputDefocus(formEvent) {
@@ -14,17 +21,29 @@ export default function Login() {
     formEvent.preventDefault();
 
     const formData = new FormData(formEvent.target);
+    const formDataObject = Object.fromEntries(formData);
 
-    fetch("http://127.0.0.1:8000/api", {
+    const bodyRequest = {
+      username: formDataObject.username,
+      password: formDataObject.password,
+      rememberMe: formDataObject.rememberMe ? true : false,
+    };
+
+    fetch("http://127.0.0.1:8000/api/login", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify(Object.fromEntries(formData)),
+      body: JSON.stringify(bodyRequest),
     })
       .then((response) => response.json())
       .then((responseParsed: Object) => {
         console.log(responseParsed);
+        if (responseParsed.success) {
+          authTokenStorageHandler.setAuthTokenValue(responseParsed.authToken);
+        } else {
+          console.log("Login failure!");
+        }
       });
   }
 
@@ -38,11 +57,12 @@ export default function Login() {
               <input
                 type="text"
                 name="username"
-                value={usernameValue}
-                onChange={handleUsernameChange}
+                value={usernameFormValue}
+                onChange={handleUsernameFormChange}
                 onBlur={onUsernameInputDefocus}
               ></input>
               <input type="password" name="password"></input>
+              <input type="checkbox" name="rememberMe"></input>
               <button type="submit">Login</button>
             </form>
           </div>