Implement working login/logout functionality

src/App.tsx

@@ -7,20 +7,50 @@ import NavbarUserInfo from "./components/NavbarUserInfo.tsx";
 
 import Home from "./pages/Home.tsx";
 import Login from "./pages/Login.tsx";
+import Logout from "./pages/Logout.tsx";
 import About from "./pages/About.tsx";
 
 import {
   usernameStorageHandlerInit,
   authTokenStorageHandlerInit,
+  userIDStorageHandlerInit,
 } from "./components/storageHandler.ts";
 
+function getUserIDbyAuthToken(
+  authTokenStorageHandler: object,
+  userIDStorageHandler: object,
+) {
+  if (
+    authTokenStorageHandler.authTokenValue &&
+    !userIDStorageHandler.userIDValue
+  ) {
+    fetch("http://127.0.0.1:8000/api/userIDByAuthToken", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        authToken: authTokenStorageHandler.authTokenValue,
+      },
+    })
+      .then((response) => response.json())
+      .then((responseParsed: Object) => {
+        console.log(responseParsed);
+        if (responseParsed.success) {
+          userIDStorageHandler.setUserIDValue(responseParsed.userID);
+        }
+      });
+  }
+}
+
+function testUserButton() {
+  return usernameStorageHandler.usernameValue ? "" : "Test User";
+}
+
 export default function App() {
   const usernameStorageHandler = usernameStorageHandlerInit();
   const authTokenStorageHandler = authTokenStorageHandlerInit();
+  const userIDStorageHandler = userIDStorageHandlerInit();
 
-  function testUserButton() {
-    return usernameStorageHandler.usernameValue ? "" : "Test User";
-  }
+  getUserIDbyAuthToken(authTokenStorageHandler, userIDStorageHandler);
 
   return (
     <>
@@ -28,21 +58,16 @@ export default function App() {
         <Navbar>
           <NavbarButton>Home</NavbarButton>
           <NavbarButton>About</NavbarButton>
-          {usernameStorageHandler.usernameValue ? (
-            <NavbarUserInfo
-              username={"Logged in as " + usernameStorageHandler.usernameValue}
-            ></NavbarUserInfo>
+          {userIDStorageHandler.userIDValue ? (
+            <>
+              <NavbarUserInfo
+                userID={userIDStorageHandler.userIDValue}
+              ></NavbarUserInfo>
+              <NavbarButton>Logout</NavbarButton>
+            </>
           ) : (
             <NavbarButton>Login</NavbarButton>
           )}
-          <button
-            onClick={() =>
-              usernameStorageHandler.setUsernameValue(testUserButton())
-            }
-            className="navBarItem navBarItemText"
-          >
-            Click me!
-          </button>
         </Navbar>
         <div id="page">
           <Routes>
@@ -50,6 +75,7 @@ export default function App() {
             <Route path="/home" exact element={<Home></Home>} />
             <Route path="/about" exact element={<About></About>} />
             <Route path="/login" exact element={<Login></Login>} />
+            <Route path="/logout" exact element={<Logout></Logout>} />
           </Routes>
         </div>
       </BrowserRouter>

src/components/NavbarUserInfo.tsx

@@ -1,13 +1,39 @@
 import * as React from "react";
+import { usernameStorageHandlerInit } from "../components/storageHandler.ts";
 
 interface Props {
-  username: string;
+  userID: number;
 }
 
-export default function NavbarUserInfo({ username }: Props) {
+/* Implement checking whether userInfo name etc reaches a certain character size, if it does then we'll split the string and add ... to the end instead*/
+
+export default function NavbarUserInfo({ userID }: Props) {
+  const usernameStorageHandler = usernameStorageHandlerInit();
+
+  if (!usernameStorageHandler.usernameValue) {
+    fetch("http://127.0.0.1:8000/api/publicInfo/" + userID.toString(), {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((response) => response.json())
+      .then((responseParsed: Object) => {
+        console.log(responseParsed);
+        if (responseParsed.success) {
+          usernameStorageHandler.setUsernameValue(responseParsed.username);
+        }
+      });
+  }
   return (
     <>
-      <p className="navBarItem navBarItemText">{username}</p>
+      {usernameStorageHandler.usernameValue ? (
+        <p className="navBarItem navBarItemText">
+          {usernameStorageHandler.usernameValue}
+        </p>
+      ) : (
+        <p className="navBarItem navBarItemText">Unknown User Logged In!</p>
+      )}
     </>
   );
 }

src/components/storageHandler.ts

@@ -8,6 +8,7 @@ Or could simply stop using react hooks for this role
 It appears to work for now so will leave be
 
 Confirmed that react cannot currently find and update DOM elements in other files. This will need to be changed
+For now when changing these values (Logging in etc) I just refresh the page
  */
 
 export const usernameStorageHandlerInit = () => {
@@ -21,6 +22,17 @@ export const usernameStorageHandlerInit = () => {
   };
 };
 
+export const userIDStorageHandlerInit = () => {
+  const [userIDValue, setUserIDValue, deleteUserIDValue] =
+    useLocalStorage("userID");
+
+  return {
+    userIDValue,
+    setUserIDValue,
+    deleteUserIDValue,
+  };
+};
+
 export const authTokenStorageHandlerInit = () => {
   const [authTokenValue, setAuthTokenValue, deleteAuthTokenValue] =
     useLocalStorage("authtoken");

src/pages/Login.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Navigate } from "react-router-dom";
 import {
   usernameStorageHandlerInit,
   authTokenStorageHandlerInit,
@@ -13,6 +14,10 @@ export default function Login() {
     setUsernameFormValue(eventData.target.value);
   }
 
+  if (authTokenStorageHandler.authTokenValue) {
+    return <Navigate to="/home"></Navigate>;
+  }
+
   function onUsernameInputDefocus(formEvent) {
     console.log("Down");
   }
@@ -41,6 +46,7 @@ export default function Login() {
         console.log(responseParsed);
         if (responseParsed.success) {
           authTokenStorageHandler.setAuthTokenValue(responseParsed.authToken);
+          window.location.reload();
         } else {
           console.log("Login failure!");
         }

src/pages/Logout.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { Navigate } from "react-router-dom";
+import {
+  usernameStorageHandlerInit,
+  authTokenStorageHandlerInit,
+  userIDStorageHandlerInit,
+} from "../components/storageHandler.ts";
+
+export default function Logout() {
+  const authTokenStorageHandler = authTokenStorageHandlerInit();
+  const userIDStorageHandler = userIDStorageHandlerInit();
+  const usernameStorageHandler = usernameStorageHandlerInit();
+
+  if (!authTokenStorageHandler.authTokenValue) {
+    return <Navigate to="/home"></Navigate>;
+  }
+
+  function onLogoutButtonClick() {
+    authTokenStorageHandler.deleteAuthTokenValue();
+    userIDStorageHandler.deleteUserIDValue();
+    usernameStorageHandler.deleteUsernameValue();
+    window.location.reload();
+  }
+
+  return (
+    <>
+      <div className="centeredBoxArea">
+        <div id="loginBox">
+          <div id="loginBoxContents">
+            <h1>Logout</h1>
+            <button onClick={onLogoutButtonClick}>Logout</button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}