feat: implement login auth for all

also show the username underneath the logo

src/App.css

@@ -29,7 +29,6 @@ footer {
   left: 8px;
 }
 
-
 /*=========Network Controls=========*/
 
 .infobutton {
@@ -367,7 +366,11 @@ button,
   position: relative;
   text-align: center;
   height: 140px;
-  margin-bottom: 20px;
+
+  span {
+    display: block;
+    margin: 2px;
+  }
 
   img {
     display: block;
@@ -390,8 +393,15 @@ button,
   }
 }
 
+.avatar {
+  background-color: lightsteelblue;
+  padding: 2px 8px;
+  width: fit-content;
+  margin: auto;
+}
+
 .networkroute {
-  z-index: 10;
+  z-index: 3;
   position: absolute;
   top: 24px;
   left: 48px;

src/App.tsx

@@ -7,34 +7,21 @@ import { BrowserRouter, Routes, Route } from "react-router";
 import { SessionProvider } from "./Session";
 import { GraphComponent } from "./Network";
 import MVPChart from "./MVPChart";
+import Avatar from "./Avatar";
 
 function App() {
   return (
     <BrowserRouter>
-      <Header />
-      <Routes>
-        <Route index element={<Rankings />} />
-
-        <Route path="/network" element={
-          <SessionProvider>
-            <GraphComponent />
-          </SessionProvider>
-        } />
-
-        <Route path="/analysis" element={
-          <SessionProvider>
-            <Analysis />
-          </SessionProvider>
-        } />
-
-        <Route path="/mvp" element={
-          <SessionProvider>
-            <MVPChart />
-          </SessionProvider>
-        } />
-
-      </Routes>
-      <Footer />
+      <SessionProvider>
+        <Header />
+        <Routes>
+          <Route index element={<Rankings />} />
+          <Route path="/network" element={<GraphComponent />} />
+          <Route path="/analysis" element={<Analysis />} />
+          <Route path="/mvp" element={<MVPChart />} />
+        </Routes>
+        <Footer />
+      </SessionProvider>
     </BrowserRouter>
   );
 }

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>
+  );
+}

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?

src/Header.tsx

@@ -1,9 +1,18 @@
+import { Link, useLocation } from "react-router";
+import Avatar from "./Avatar";
+
 export default function Header() {
-  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>
+  const location = useLocation();
+  return (
+    <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>
+  );
 }

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>
+    </>
+  );
+};

src/Network.tsx

@@ -43,15 +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.item(0) as HTMLElement).className = "fixed-footer";
-  }
-
   async function loadData() {
     setLoading(true);
     await apiAuth("analysis/graph_json", null)

src/RaceChart.tsx

@@ -1,5 +1,6 @@
 import { FC, useEffect, useState } from "react";
 import { PlayerRanking } from "./types";
+import { useSession } from "./Session";
 
 interface RaceChartProps {
   players: PlayerRanking[];
@@ -34,13 +35,13 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
   const gap = 8;
   const maxValue = Math.max(...players.map((player) => player.rank)) + 1;
   const barHeight = (height - 2 * padding) / players.length;
-  const fontSize = Math.min(barHeight - 1.5 * gap, width / 20);
+  const fontSize = Math.min(barHeight - 1.5 * gap, width / 22);
 
   return (
-    <svg width={width} height={height}>
+    <svg width={width} height={height} id="RaceChartSVG">
       {players.map((player, index) => (
         <rect
-          key={index}
+          key={String(index)}
           x={0}
           y={index * barHeight + padding}
           width={(1 - player.rank / maxValue) * width}
@@ -50,7 +51,7 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
       ))}
 
       {players.map((player, index) => (
-        <g>
+        <g key={"group" + index}>
           <text
             key={index + "_name"}
             x={4}

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;
 }

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");