From 8b092fed5152cfd994f5766d2dca1ea640b9a16f Mon Sep 17 00:00:00 2001
From: julius <julius@0124816.xyz>
Date: Thu, 6 Mar 2025 13:29:10 +0100
Subject: [PATCH] feat: implement login auth for all

also show the username underneath the logo
---
 src/App.css     |  3 +-
 src/App.tsx     |  4 --
 src/Avatar.tsx  | 99 +++++++++++++++++++++++++++++++++++++++++++++++++
 src/Footer.tsx  | 16 ++++----
 src/Header.tsx  | 19 +++++++---
 src/Login.tsx   | 94 ++++++++++++++++++++--------------------------
 src/Network.tsx | 10 -----
 src/Session.tsx | 76 ++++++++++++++++++++++++++++++++-----
 src/api.ts      | 39 +++++++++++--------
 9 files changed, 252 insertions(+), 108 deletions(-)
 create mode 100644 src/Avatar.tsx

diff --git a/src/App.css b/src/App.css
index 876888f..a2937f1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -398,11 +398,10 @@ button,
   padding: 2px 8px;
   width: fit-content;
   margin: auto;
-  z-index: 3;
 }
 
 .networkroute {
-  z-index: 10;
+  z-index: 3;
   position: absolute;
   top: 24px;
   left: 48px;
diff --git a/src/App.tsx b/src/App.tsx
index 7fcb82b..7da942f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,14 +14,10 @@ function App() {
     <BrowserRouter>
       <SessionProvider>
         <Header />
-        <Avatar />
         <Routes>
           <Route index element={<Rankings />} />
-
           <Route path="/network" element={<GraphComponent />} />
-
           <Route path="/analysis" element={<Analysis />} />
-
           <Route path="/mvp" element={<MVPChart />} />
         </Routes>
         <Footer />
diff --git a/src/Avatar.tsx b/src/Avatar.tsx
new file mode 100644
index 0000000..41ca04f
--- /dev/null
+++ b/src/Avatar.tsx
@@ -0,0 +1,99 @@
+import { MouseEventHandler, useEffect, useState } from "react";
+import { useSession } from "./Session";
+import { logout } from "./api";
+
+interface ContextMenuItem {
+  label: string;
+  onClick: () => void;
+}
+
+export default function Avatar() {
+  const { user, onLogout } = useSession();
+  const [contextMenu, setContextMenu] = useState<{
+    open: boolean;
+    mouseX: number;
+    mouseY: number;
+  }>({ open: false, mouseX: 0, mouseY: 0 });
+
+  const contextMenuItems: ContextMenuItem[] = [
+    { label: "View Profile", onClick: () => console.log("View Profile") },
+    { label: "Edit Profile", onClick: () => console.log("Edit Profile") },
+    { label: "Logout", onClick: onLogout },
+  ];
+
+  const handleMenuClick: MouseEventHandler<HTMLDivElement> = (event) => {
+    event.preventDefault();
+    setContextMenu({
+      open: !contextMenu.open,
+      mouseX: event.clientX + 4,
+      mouseY: event.clientY + 2,
+    });
+  };
+  useEffect(() => {
+    if (contextMenu.open) {
+      document.addEventListener("click", handleCloseContextMenuOutside);
+    }
+    return () => {
+      document.removeEventListener("click", handleCloseContextMenuOutside);
+    };
+  }, [contextMenu.open]);
+
+  const handleMenuClose = () => {
+    setContextMenu({ ...contextMenu, open: false });
+  };
+  const handleCloseContextMenuOutside: MouseEventHandler<Document> = (
+    event
+  ) => {
+    if (
+      !event.target ||
+      (!(event.target as Element).closest(".context-menu") &&
+        !(event.target as Element).closest(".avatar"))
+    ) {
+      handleMenuClose();
+    }
+  };
+
+  return (
+    <div
+      className="avatar"
+      onContextMenu={handleMenuClick}
+      style={{ display: user ? "block" : "none" }}
+      onClick={handleMenuClick}
+    >
+      {user?.username}
+      {contextMenu.open && (
+        <ul
+          className="context-menu"
+          style={{
+            zIndex: 3,
+            position: "absolute",
+            top: contextMenu.mouseY,
+            left: contextMenu.mouseX,
+            background: "white",
+            border: "1px solid #ddd",
+            padding: 0,
+            margin: 0,
+            listStyle: "none",
+          }}
+        >
+          {contextMenuItems.map((item, index) => (
+            <li
+              key={index}
+              style={{
+                padding: "10px",
+                borderBottom: "1px solid #ddd",
+                cursor: "pointer",
+              }}
+              onClick={() => {
+                item.onClick();
+                handleMenuClose();
+              }}
+            >
+              {item.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/src/Footer.tsx b/src/Footer.tsx
index 307afee..a513478 100644
--- a/src/Footer.tsx
+++ b/src/Footer.tsx
@@ -1,20 +1,22 @@
+import { useLocation } from "react-router";
 import { Link } from "react-router";
 
 export default function Footer() {
+  const location = useLocation();
   return (
-    <footer>
+    <footer className={location.pathname === "/network" ? "fixed-footer" : ""}>
       <div className="navbar">
-        <a href="/">
+        <Link to="/">
           <span>Form</span>
-        </a>
+        </Link>
         <span>|</span>
-        <a href="/network">
+        <Link to="/network">
           <span>Trainer Analysis</span>
-        </a>
+        </Link>
         <span>|</span>
-        <a href="/mvp">
+        <Link to="/mvp">
           <span>MVP</span>
-        </a>
+        </Link>
       </div>
       <p className="grey extra-margin">
         something not working?
diff --git a/src/Header.tsx b/src/Header.tsx
index 8663a7a..2fd8012 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -1,11 +1,18 @@
+import { Link, useLocation } from "react-router";
+import Avatar from "./Avatar";
+
 export default function Header() {
+  const location = useLocation();
   return (
-    <div className="logo" id="logo">
-      <a href={"/"}>
-        <img alt="logo" height="66%" src="logo.svg" />
-        <h3 className="centered">cutt</h3>
-      </a>
-      <span className="grey">cool ultimate team tool</span>
+    <div className={location.pathname === "/network" ? "networkroute" : ""}>
+      <div className="logo">
+        <Link to="/">
+          <img alt="logo" height="66%" src="logo.svg" />
+          <h3 className="centered">cutt</h3>
+        </Link>
+        <span className="grey">cool ultimate team tool</span>
+      </div>
+      <Avatar />
     </div>
   );
 }
diff --git a/src/Login.tsx b/src/Login.tsx
index 31ae4ea..f872328 100644
--- a/src/Login.tsx
+++ b/src/Login.tsx
@@ -1,6 +1,6 @@
-import { FormEvent, useContext, useState } from "react";
-import { useNavigate } from "react-router";
-import { currentUser, login, LoginRequest, User } from "./api";
+import { useState } from "react";
+import { currentUser, login, User } from "./api";
+import Header from "./Header";
 
 export interface LoginProps {
   onLogin: (user: User) => void;
@@ -15,72 +15,58 @@ export const Login = ({ onLogin }: LoginProps) => {
   async function doLogin() {
     setLoading(true);
     setError(null);
-    const timeout = new Promise((r) => setTimeout(r, 1500));
+    const timeout = new Promise((r) => setTimeout(r, 1000));
     let user: User;
     try {
-      login({ username, password });
+      await login({ username, password });
       user = await currentUser();
     } catch (e) {
       await timeout;
       setError(e);
       setLoading(false);
-      return
+      return;
     }
-
     await timeout;
     onLogin(user);
   }
 
-  function handleClick() {
-    doLogin();
-  }
-
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     doLogin();
   }
 
   return (
-    <form onSubmit={handleSubmit}>
-      <div>
-        <input type="text" id="username" name="username" placeholder="username" required value={username} onChange={evt => setUsername(evt.target.value)} />
-      </div>
-      <div>
-        <input type="password" id="password" name="password" placeholder="password" minLength={8} value={password} required onChange={evt => setPassword(evt.target.value)} />
-      </div>
-      <button type="submit" value="login" style={{ fontSize: "small" }} onClick={handleClick} >login</button>
-      {loading && <span className="loader" />}
-    </form>
-  )
-}
-
-/*
-export default function Login(props: { onLogin: (user: User) => void }) {
-  const { onLogin } = props;
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-
-  async function handleLogin(e: FormEvent) {
-    e.preventDefault()
-    const timeout = new Promise((r) => setTimeout(r, 1500));
-    let user: User;
-    try {
-      login({ username, password })
-      user = await currentUser()
-    } catch (e) { await timeout; return }
-    await timeout;
-    onLogin(user);
-  }
-
-  return <div>
-    <form onSubmit={handleLogin}>
-      <div>
-        <input type="text" id="username" name="username" placeholder="username" required value={username} onChange={evt => setUsername(evt.target.value)} />
-      </div>
-      <div>
-        <input type="password" id="password" name="password" placeholder="password" minLength={8} value={password} required onChange={evt => setPassword(evt.target.value)} />
-      </div>
-      <input className="button" type="submit" value="login" onSubmit={handleLogin} />
-    </form>
-  </div>
-} */
+    <>
+      <Header />
+      <form onSubmit={handleSubmit}>
+        <div>
+          <input
+            type="text"
+            id="username"
+            name="username"
+            placeholder="username"
+            required
+            value={username}
+            onChange={(evt) => setUsername(evt.target.value)}
+          />
+        </div>
+        <div>
+          <input
+            type="password"
+            id="password"
+            name="password"
+            placeholder="password"
+            minLength={8}
+            value={password}
+            required
+            onChange={(evt) => setPassword(evt.target.value)}
+          />
+        </div>
+        <button type="submit" value="login" style={{ fontSize: "small" }}>
+          login
+        </button>
+        {loading && <span className="loader" />}
+      </form>
+    </>
+  );
+};
diff --git a/src/Network.tsx b/src/Network.tsx
index 3ec41b3..7658a70 100644
--- a/src/Network.tsx
+++ b/src/Network.tsx
@@ -43,16 +43,6 @@ export const GraphComponent = () => {
   const [popularity, setPopularity] = useState(false);
   const [mutuality, setMutuality] = useState(false);
 
-  const logo = document.getElementById("logo");
-  if (logo) {
-    logo.className = "logo networkroute";
-  }
-  const footer = document.getElementsByTagName("footer");
-  if (footer) {
-    footer.length &&
-      ((footer.item(0) as HTMLElement).className = "fixed-footer");
-  }
-
   async function loadData() {
     setLoading(true);
     await apiAuth("analysis/graph_json", null)
diff --git a/src/Session.tsx b/src/Session.tsx
index 4b080bb..12d6311 100644
--- a/src/Session.tsx
+++ b/src/Session.tsx
@@ -1,36 +1,94 @@
-import { createContext, ReactNode, useContext, useLayoutEffect, useState } from "react";
-import { currentUser, User } from "./api";
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { currentUser, logout, User } from "./api";
 import { Login } from "./Login";
+import Header from "./Header";
 
 export interface SessionProviderProps {
   children: ReactNode;
 }
 
-const sessionContext = createContext<User | null>(null);
+export interface Session {
+  user: User | null;
+  onLogout: () => void;
+}
+
+const sessionContext = createContext<Session>({
+  user: null,
+  onLogout: () => {},
+});
 
 export function SessionProvider(props: SessionProviderProps) {
   const { children } = props;
 
   const [user, setUser] = useState<User | null>(null);
   const [err, setErr] = useState<unknown>(null);
+  const [loading, setLoading] = useState(false);
 
   function loadUser() {
+    setLoading(true);
     currentUser()
-      .then((user) => { setUser(user); setErr(null); })
-      .catch((err) => { setUser(null); setErr(err); });
+      .then((user) => {
+        setUser(user);
+        setErr(null);
+      })
+      .catch((err) => {
+        setUser(null);
+        setErr(err);
+      })
+      .finally(() => setLoading(false));
   }
 
-  useLayoutEffect(() => { loadUser(); }, [err]);
+  useEffect(() => {
+    loadUser();
+  }, []);
 
   function onLogin(user: User) {
     setUser(user);
     setErr(null);
   }
 
+  async function onLogout() {
+    try {
+      logout();
+      setUser(null);
+      setErr({ message: "Logged out successfully" });
+      console.log("logged out.");
+      setLoading(true); // Set loading to true
+      loadUser();
+    } catch (e) {
+      console.error(e);
+      setErr(e); // Update the error state if logout fails
+    }
+  }
+  console.log("sanity", user);
+
   let content: ReactNode;
-  if (!err && !user) content = <span className="loader" />;
-  else if (err) content = <Login onLogin={onLogin} />;
-  else content = <sessionContext.Provider value={user}>{children}</sessionContext.Provider>;
+  if (loading || (!err && !user))
+    content = (
+      <>
+        <Header />
+        <span className="loader" />
+      </>
+    );
+  else if (err) {
+    if ((err as any).message === "Logged out successfully") {
+      setTimeout(() => setErr(null), 1000);
+      content = <Login onLogin={onLogin} />;
+    } else {
+      content = <Login onLogin={onLogin} />;
+    }
+  } else
+    content = (
+      <sessionContext.Provider value={{ user, onLogout }}>
+        {children}
+      </sessionContext.Provider>
+    );
 
   return content;
 }
diff --git a/src/api.ts b/src/api.ts
index 96beebb..e2526d9 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -88,22 +88,29 @@ export type Token = {
   token_type: string;
 };
 
-export const login = (req: LoginRequest) => {
-  fetch(`${baseUrl}api/token`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/x-www-form-urlencoded",
-    },
-    body: new URLSearchParams(req).toString(),
-  })
-    .then((resp) => resp.json() as Promise<Token>)
-    .then((token) =>
-      token
-        ? localStorage.setItem("access_token", token.access_token)
-        : console.log("token not acquired")
-    )
-    .catch((e) => console.log("catch error " + e + " in login"));
-  return Promise<void>;
+// api.js
+export const login = async (req: LoginRequest): Promise<void> => {
+  try {
+    const response = await fetch(`${baseUrl}api/token`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: new URLSearchParams(req).toString(),
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const token = (await response.json()) as Token;
+    if (token && token.access_token) {
+      localStorage.setItem("access_token", token.access_token);
+    } else {
+      console.log("Token not acquired");
+    }
+  } catch (e) {
+    console.error(e);
+    throw e; // rethrow the error so it can be caught by the caller
+  }
 };
 
 export const logout = () => localStorage.removeItem("access_token");