analysis.py

@@ -1,3 +1,4 @@
+from datetime import datetime
 import io
 import base64
 from fastapi import APIRouter
@@ -26,13 +27,14 @@ def sociogram_json():
     nodes = []
     necessary_nodes = set()
     edges = []
-    players = {}
     with Session(engine) as session:
         for p in session.exec(select(P)).fetchall():
-            nodes.append({"id": p.display_name, "label": p.display_name})
-            players[p.id] = p.display_name
+            nodes.append({"id": p.name, "label": p.name})
         subquery = (
-            select(C.user, func.max(C.time).label("latest")).group_by(C.user).subquery()
+            select(C.user, func.max(C.time).label("latest"))
+            .where(C.time > datetime(2025, 2, 1, 10))
+            .group_by(C.user)
+            .subquery()
         )
         statement2 = select(C).join(
             subquery, (C.user == subquery.c.user) & (C.time == subquery.c.latest)
@@ -40,13 +42,13 @@ def sociogram_json():
         for c in session.exec(statement2):
             # G.add_node(c.user)
             necessary_nodes.add(c.user)
-            for p in [players[p_id] for p_id in c.love]:
+            for p in c.love:
                 # G.add_edge(c.user, p)
                 # p_id = session.exec(select(P.id).where(P.name == p)).one()
                 necessary_nodes.add(p)
-                edges.append({"from": players[c.user], "to": p, "relation": "likes"})
-            for p in [players[p_id] for p_id in c.hate]:
-                edges.append({"from": players[c.user], "to": p, "relation": "dislikes"})
+                edges.append({"from": c.user, "to": p, "relation": "likes"})
+            for p in c.hate:
+                edges.append({"from": c.user, "to": p, "relation": "dislikes"})
     # nodes = [n for n in nodes if n["name"] in necessary_nodes]
     return JSONResponse({"nodes": nodes, "edges": edges})
 
@@ -54,25 +56,24 @@ def sociogram_json():
 def graph_json():
     nodes = []
     edges = []
-    players = {}
     with Session(engine) as session:
         for p in session.exec(select(P)).fetchall():
-            players[p.id] = p.display_name
-            nodes.append({"id": p.display_name, "label": p.display_name})
+            nodes.append({"id": p.name, "label": p.name})
         subquery = (
-            select(C.user, func.max(C.time).label("latest")).group_by(C.user).subquery()
+            select(C.user, func.max(C.time).label("latest"))
+            .where(C.time > datetime(2025, 2, 1, 10))
+            .group_by(C.user)
+            .subquery()
         )
         statement2 = select(C).join(
             subquery, (C.user == subquery.c.user) & (C.time == subquery.c.latest)
         )
         for c in session.exec(statement2):
-            user = players[c.user]
-            for i, p_id in enumerate(c.love):
-                p = players[p_id]
+            for i, p in enumerate(c.love):
                 edges.append(
                     {
-                        "id": f"{user}->{p}",
-                        "source": user,
+                        "id": f"{c.user}->{p}",
+                        "source": c.user,
                         "target": p,
                         "size": max(1.0 - 0.1 * i, 0.3),
                         "data": {
@@ -82,12 +83,11 @@ def graph_json():
                         },
                     }
                 )
-            for p_id in c.hate:
-                p = players[p_id]
+            for p in c.hate:
                 edges.append(
                     {
-                        "id": f"{user}-x>{p}",
-                        "source": user,
+                        "id": f"{c.user}-x>{p}",
+                        "source": c.user,
                         "target": p,
                         "size": 0.3,
                         "data": {"relation": 0, "origSize": 0.3, "origFill": "#ff7c7c"},
@@ -107,12 +107,13 @@ def graph_json():
 def sociogram_data(show: int | None = 2):
     G = nx.DiGraph()
     with Session(engine) as session:
-        players = {}
         for p in session.exec(select(P)).fetchall():
-            G.add_node(p.display_name)
-            players[p.id] = p.display_name
+            G.add_node(p.name)
         subquery = (
-            select(C.user, func.max(C.time).label("latest")).group_by(C.user).subquery()
+            select(C.user, func.max(C.time).label("latest"))
+            .where(C.time > datetime(2025, 2, 1, 10))
+            .group_by(C.user)
+            .subquery()
         )
         statement2 = (
             select(C)
@@ -121,12 +122,10 @@ def sociogram_data(show: int | None = 2):
         )
         for c in session.exec(statement2):
             if show >= 1:
-                for i, p_id in enumerate(c.love):
-                    p = players[p_id]
+                for i, p in enumerate(c.love):
                     G.add_edge(c.user, p, group="love", rank=i, popularity=1 - 0.08 * i)
             if show <= 1:
-                for i, p_id in enumerate(c.hate):
-                    p = players[p_id]
+                for i, p in enumerate(c.hate):
                     G.add_edge(c.user, p, group="hate", rank=8, popularity=-0.16)
     return G
 
@@ -202,16 +201,17 @@ async def render_sociogram(params: Params):
 def mvp():
     ranks = dict()
     with Session(engine) as session:
-        players = {p.id: p.display_name for p in session.exec(select(P)).fetchall()}
         subquery = (
-            select(R.user, func.max(R.time).label("latest")).group_by(R.user).subquery()
+            select(R.user, func.max(R.time).label("latest"))
+            .where(R.time > datetime(2025, 2, 8))
+            .group_by(R.user)
+            .subquery()
         )
         statement2 = select(R).join(
             subquery, (R.user == subquery.c.user) & (R.time == subquery.c.latest)
         )
         for r in session.exec(statement2):
-            for i, p_id in enumerate(r.mvps):
-                p = players[p_id]
+            for i, p in enumerate(r.mvps):
                 ranks[p] = ranks.get(p, []) + [i + 1]
     return [
         {

db.py

@@ -2,22 +2,17 @@ from datetime import datetime, timezone
 from sqlmodel import (
     ARRAY,
     Column,
-    Integer,
     Relationship,
     SQLModel,
     Field,
     create_engine,
+    String,
 )
 
 with open("db.secrets", "r") as f:
     db_secrets = f.readline().strip()
 
-engine = create_engine(
-    db_secrets,
-    pool_timeout=20,
-    pool_size=2,
-    connect_args={"connect_timeout": 8},
-)
+engine = create_engine(db_secrets, connect_args={"connect_timeout": 8})
 del db_secrets
 
 
@@ -44,33 +39,37 @@ class Team(SQLModel, table=True):
 
 class Player(SQLModel, table=True):
     id: int | None = Field(default=None, primary_key=True)
-    username: str = Field(default=None, unique=True)
-    display_name: str
-    email: str | None = None
-    full_name: str | None = None
-    disabled: bool | None = None
-    hashed_password: str | None = None
+    name: str
     number: str | None = None
     teams: list[Team] | None = Relationship(
         back_populates="players", link_model=PlayerTeamLink
     )
-    scopes: str = ""
 
 
 class Chemistry(SQLModel, table=True):
     id: int | None = Field(default=None, primary_key=True)
     time: datetime | None = Field(default_factory=utctime)
-    user: int | None = Field(default=None, foreign_key="player.id")
-    hate: list[int] = Field(sa_column=Column(ARRAY(Integer)))
-    undecided: list[int] = Field(sa_column=Column(ARRAY(Integer)))
-    love: list[int] = Field(sa_column=Column(ARRAY(Integer)))
+    user: str
+    love: list[str] = Field(sa_column=Column(ARRAY(String)))
+    hate: list[str] = Field(sa_column=Column(ARRAY(String)))
+    undecided: list[str] = Field(sa_column=Column(ARRAY(String)))
 
 
 class MVPRanking(SQLModel, table=True):
     id: int | None = Field(default=None, primary_key=True)
     time: datetime | None = Field(default_factory=utctime)
-    user: int | None = Field(default=None, foreign_key="player.id")
-    mvps: list[int] = Field(sa_column=Column(ARRAY(Integer)))
+    user: str
+    mvps: list[str] = Field(sa_column=Column(ARRAY(String)))
+
+
+class User(SQLModel, table=True):
+    username: str = Field(default=None, primary_key=True)
+    email: str | None = None
+    full_name: str | None = None
+    disabled: bool | None = None
+    hashed_password: str | None = None
+    player_id: int | None = Field(default=None, foreign_key="player.id")
+    scopes: str = ""
 
 
 SQLModel.metadata.create_all(engine)

main.py

@@ -8,13 +8,10 @@ from sqlmodel import (
 from fastapi.middleware.cors import CORSMiddleware
 from analysis import analysis_router
 from security import (
-    change_password,
     get_current_active_user,
     login_for_access_token,
-    logout,
-    read_player_me,
+    read_users_me,
     read_own_items,
-    set_first_password,
 )
 
 
@@ -55,7 +52,7 @@ def add_players(players: list[Player]):
 
 def list_players():
     with Session(engine) as session:
-        statement = select(Player).order_by(Player.display_name)
+        statement = select(Player).order_by(Player.name)
         return session.exec(statement).fetchall()
 
 
@@ -67,16 +64,21 @@ def list_teams():
 
 player_router = APIRouter(prefix="/player")
 player_router.add_api_route("/list", endpoint=list_players, methods=["GET"])
-player_router.add_api_route("/add", endpoint=add_player, methods=["POST"])
-player_router.add_api_route("/me", endpoint=read_player_me, methods=["GET"])
-player_router.add_api_route("/me/items", endpoint=read_own_items, methods=["GET"])
 player_router.add_api_route(
-    "/change_password", endpoint=change_password, methods=["POST"]
+    "/add",
+    endpoint=add_player,
+    methods=["POST"],
+    dependencies=[Depends(get_current_active_user)],
 )
 
 team_router = APIRouter(prefix="/team")
 team_router.add_api_route("/list", endpoint=list_teams, methods=["GET"])
-team_router.add_api_route("/add", endpoint=add_team, methods=["POST"])
+team_router.add_api_route(
+    "/add",
+    endpoint=add_team,
+    methods=["POST"],
+    dependencies=[Depends(get_current_active_user)],
+)
 
 
 @app.post("/mvps/", status_code=status.HTTP_200_OK)
@@ -101,16 +103,14 @@ class SPAStaticFiles(StaticFiles):
         return response
 
 
-api_router.include_router(
-    player_router, dependencies=[Depends(get_current_active_user)]
-)
-api_router.include_router(team_router, dependencies=[Depends(get_current_active_user)])
+api_router.include_router(player_router)
+api_router.include_router(team_router)
 api_router.include_router(
     analysis_router,
     dependencies=[Security(get_current_active_user, scopes=["analysis"])],
 )
 api_router.add_api_route("/token", endpoint=login_for_access_token, methods=["POST"])
-api_router.add_api_route("/set_password", endpoint=set_first_password, methods=["POST"])
-api_router.add_api_route("/logout", endpoint=logout, methods=["POST"])
+api_router.add_api_route("/users/me/", endpoint=read_users_me, methods=["GET"])
+api_router.add_api_route("/users/me/items/", endpoint=read_own_items, methods=["GET"])
 app.include_router(api_router)
 app.mount("/", SPAStaticFiles(directory="dist", html=True), name="site")

package.json

@@ -10,7 +10,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "jwt-decode": "^4.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-sortablejs": "^6.1.4",

security.py

@@ -1,12 +1,11 @@
 from datetime import timedelta, timezone, datetime
 from typing import Annotated
-from fastapi import Depends, HTTPException, Request, Response, status
-from fastapi.responses import PlainTextResponse
+from fastapi import Depends, HTTPException, Response, status
 from pydantic import BaseModel, ValidationError
 import jwt
-from jwt.exceptions import ExpiredSignatureError, InvalidTokenError
+from jwt.exceptions import InvalidTokenError
 from sqlmodel import Session, select
-from db import engine, Player
+from db import engine, User
 from fastapi.security import (
     OAuth2PasswordBearer,
     OAuth2PasswordRequestForm,
@@ -19,7 +18,7 @@ from sqlalchemy.exc import OperationalError
 
 class Config(BaseSettings):
     secret_key: str = ""
-    access_token_expire_minutes: int = 15
+    access_token_expire_minutes: int = 30
     model_config = SettingsConfigDict(
         env_file=".env", env_file_encoding="utf-8", extra="ignore"
     )
@@ -30,6 +29,7 @@ config = Config()
 
 class Token(BaseModel):
     access_token: str
+    token_type: str
 
 
 class TokenData(BaseModel):
@@ -40,23 +40,7 @@ class TokenData(BaseModel):
 pwd_context = CryptContext(schemes=["argon2"], deprecated="auto")
 
 
-class CookieOAuth2(OAuth2PasswordBearer):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
-
-    async def __call__(self, request: Request):
-        cookie_token = request.cookies.get("access_token")
-        if cookie_token:
-            return cookie_token
-        else:
-            header_token = await super().__call__(request)
-            if header_token:
-                return header_token
-            else:
-                raise HTTPException(status_code=401)
-
-
-oauth2_scheme = CookieOAuth2(
+oauth2_scheme = OAuth2PasswordBearer(
     tokenUrl="api/token",
     scopes={
         "analysis": "Access the results.",
@@ -77,7 +61,7 @@ def get_user(username: str | None):
         try:
             with Session(engine) as session:
                 return session.exec(
-                    select(Player).where(Player.username == username)
+                    select(User).where(User.username == username)
                 ).one_or_none()
         except OperationalError:
             return
@@ -97,17 +81,14 @@ def create_access_token(data: dict, expires_delta: timedelta | None = None):
     if expires_delta:
         expire = datetime.now(timezone.utc) + expires_delta
     else:
-        expire = datetime.now(timezone.utc) + timedelta(
-            minutes=config.access_token_expire_minutes
-        )
+        expire = datetime.now(timezone.utc) + timedelta(minutes=15)
     to_encode.update({"exp": expire})
     encoded_jwt = jwt.encode(to_encode, config.secret_key, algorithm="HS256")
     return encoded_jwt
 
 
 async def get_current_user(
-    token: Annotated[str, Depends(oauth2_scheme)],
-    security_scopes: SecurityScopes,
+    security_scopes: SecurityScopes, token: Annotated[str, Depends(oauth2_scheme)]
 ):
     if security_scopes.scopes:
         authenticate_value = f'Bearer scope="{security_scopes.scope_str}"'
@@ -118,23 +99,13 @@ async def get_current_user(
         detail="Could not validate credentials",
         headers={"WWW-Authenticate": authenticate_value},
     )
-    # access_token = request.cookies.get("access_token")
-    access_token = token
-    if not access_token:
-        raise credentials_exception
     try:
-        payload = jwt.decode(access_token, config.secret_key, algorithms=["HS256"])
+        payload = jwt.decode(token, config.secret_key, algorithms=["HS256"])
         username: str = payload.get("sub")
         if username is None:
             raise credentials_exception
         token_scopes = payload.get("scopes", [])
         token_data = TokenData(username=username, scopes=token_scopes)
-    except ExpiredSignatureError:
-        raise HTTPException(
-            status_code=status.HTTP_401_UNAUTHORIZED,
-            detail="Access token expired",
-            headers={"WWW-Authenticate": authenticate_value},
-        )
     except (InvalidTokenError, ValidationError):
         raise credentials_exception
     user = get_user(username=token_data.username)
@@ -151,7 +122,7 @@ async def get_current_user(
 
 
 async def get_current_active_user(
-    current_user: Annotated[Player, Depends(get_current_user)],
+    current_user: Annotated[User, Depends(get_current_user)],
 ):
     if current_user.disabled:
         raise HTTPException(status_code=400, detail="Inactive user")
@@ -168,99 +139,26 @@ async def login_for_access_token(
             detail="Incorrect username or password",
             headers={"WWW-Authenticate": "Bearer"},
         )
+    access_token_expires = timedelta(minutes=config.access_token_expire_minutes)
     allowed_scopes = set(user.scopes.split())
     requested_scopes = set(form_data.scopes)
     access_token = create_access_token(
-        data={"sub": user.username, "scopes": list(allowed_scopes)}
+        data={"sub": user.username, "scopes": list(allowed_scopes)},
+        expires_delta=access_token_expires,
     )
     response.set_cookie(
-        "access_token",
-        value=access_token,
-        httponly=True,
-        samesite="strict",
+        "Authorization", value=f"Bearer {access_token}", httponly=True, samesite="none"
     )
-    return Token(access_token=access_token)
+    return Token(access_token=access_token, token_type="bearer")
 
 
-async def logout(response: Response):
-    response.set_cookie("access_token", "", expires=0, httponly=True, samesite="strict")
-    return {"message": "Successfully logged out"}
-
-
-def generate_one_time_token(username):
-    user = get_user(username)
-    if user:
-        expire = timedelta(days=7)
-        token = create_access_token(
-            data={"sub": username, "name": user.display_name},
-            expires_delta=expire,
-        )
-        return token
-
-
-class FirstPassword(BaseModel):
-    token: str
-    password: str
-
-
-async def set_first_password(req: FirstPassword):
-    credentials_exception = HTTPException(
-        status_code=status.HTTP_401_UNAUTHORIZED,
-        detail="Could not validate token",
-    )
-    try:
-        payload = jwt.decode(req.token, config.secret_key, algorithms=["HS256"])
-        username: str = payload.get("sub")
-        if username is None:
-            raise credentials_exception
-    except ExpiredSignatureError:
-        raise HTTPException(
-            status_code=status.HTTP_401_UNAUTHORIZED,
-            detail="Access token expired",
-        )
-    except (InvalidTokenError, ValidationError):
-        raise credentials_exception
-
-    user = get_user(username)
-    if user:
-        with Session(engine) as session:
-            user.hashed_password = get_password_hash(req.password)
-            session.add(user)
-            session.commit()
-            return Response("Password set successfully", status_code=status.HTTP_200_OK)
-
-
-async def change_password(
-    current_password: str,
-    new_password: str,
-    user: Annotated[Player, Depends(get_current_active_user)],
-):
-    if (
-        new_password
-        and user.hashed_password
-        and verify_password(current_password, user.hashed_password)
-    ):
-        with Session(engine) as session:
-            user.hashed_password = get_password_hash(new_password)
-            session.add(user)
-            session.commit()
-            return PlainTextResponse(
-                "Password changed successfully", status_code=status.HTTP_200_OK
-            )
-    else:
-        raise HTTPException(
-            status_code=status.HTTP_400_BAD_REQUEST,
-            detail="Wrong password",
-        )
-
-
-async def read_player_me(
-    current_user: Annotated[Player, Depends(get_current_active_user)],
+async def read_users_me(
+    current_user: Annotated[User, Depends(get_current_active_user)],
 ):
     return current_user
 
 
 async def read_own_items(
-    current_user: Annotated[Player, Depends(get_current_active_user)],
+    current_user: Annotated[User, Depends(get_current_active_user)],
 ):
     return [{"item_id": "Foo", "owner": current_user.username}]

src/App.css

@@ -237,7 +237,6 @@ h3 {
 
 button,
 .button {
-  margin: 4px;
   font-weight: bold;
   font-size: large;
   color: aliceblue;
@@ -396,27 +395,11 @@ button,
 
 .avatar {
   background-color: lightsteelblue;
-  padding: 3px 8px;
+  padding: 2px 8px;
   width: fit-content;
-  border: 3px solid black;
-  margin: 0 auto 16px auto;
-
-  ul {
-    min-width: 100px;
-  }
+  margin: auto;
 }
 
-.user-info {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 2px 16px;
-
-  div {
-    text-align: left;
-  }
-}
-
-
 .networkroute {
   z-index: 3;
   position: absolute;

src/App.tsx

@@ -7,29 +7,21 @@ import { BrowserRouter, Routes, Route } from "react-router";
 import { SessionProvider } from "./Session";
 import { GraphComponent } from "./Network";
 import MVPChart from "./MVPChart";
-import { SetPassword } from "./SetPassword";
+import Avatar from "./Avatar";
 
 function App() {
   return (
     <BrowserRouter>
-      <Routes>
-        <Route path="/password" element={<SetPassword />} />
-        <Route
-          path="/*"
-          element={
-            <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>
-          }
-        />
-      </Routes>
+      <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

@@ -1,62 +1,34 @@
-import { createRef, MouseEventHandler, useEffect, useState } from "react";
+import { MouseEventHandler, useEffect, useState } from "react";
 import { useSession } from "./Session";
-import { User } from "./api";
+import { logout } from "./api";
 
 interface ContextMenuItem {
   label: string;
   onClick: () => void;
 }
 
-const UserInfo = (user: User) => {
-  return (
-    <div className="user-info">
-      <div>
-        <b>username: </b>
-      </div>
-      <div>{user?.username}</div>
-      <div>
-        <b>display name: </b>
-      </div>
-      <div>{user?.display_name}</div>
-      <div>
-        <b>number: </b>
-      </div>
-      <div>{user?.number ? user?.number : "-"}</div>
-      <div>
-        <b>email: </b>
-      </div>
-      <div>{user?.email ? user?.email : "-"}</div>
-    </div>
-  );
-};
-
 export default function Avatar() {
   const { user, onLogout } = useSession();
   const [contextMenu, setContextMenu] = useState<{
     open: boolean;
-    allowOpen: boolean;
     mouseX: number;
     mouseY: number;
-  }>({ open: false, allowOpen: true, mouseX: 0, mouseY: 0 });
-  const contextMenuRef = createRef<HTMLUListElement>();
-  const avatarRef = createRef<HTMLDivElement>();
+  }>({ open: false, mouseX: 0, mouseY: 0 });
 
   const contextMenuItems: ContextMenuItem[] = [
-    { label: "View Profile", onClick: handleViewProfile },
+    { 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) => {
-    if (!contextMenu.allowOpen) return;
     event.preventDefault();
     setContextMenu({
       open: !contextMenu.open,
-      allowOpen: contextMenu.allowOpen,
       mouseX: event.clientX + 4,
       mouseY: event.clientY + 2,
     });
   };
-
   useEffect(() => {
     if (contextMenu.open) {
       document.addEventListener("click", handleCloseContextMenuOutside);
@@ -68,58 +40,30 @@ export default function Avatar() {
 
   const handleMenuClose = () => {
     setContextMenu({ ...contextMenu, open: false });
-    setContextMenu((prevContextMenu) => ({
-      ...prevContextMenu,
-      allowOpen: false,
-    }));
-    setTimeout(() => {
-      setContextMenu((prevContextMenu) => ({
-        ...prevContextMenu,
-        allowOpen: true,
-      }));
-    }, 100);
   };
-
-  const handleCloseContextMenuOutside: (event: MouseEvent) => void = (ev) => {
+  const handleCloseContextMenuOutside: MouseEventHandler<Document> = (
+    event
+  ) => {
     if (
-      !(
-        contextMenuRef.current?.contains(ev.target as Node) ||
-        avatarRef.current?.contains(ev.target as Node)
-      )
-    )
+      !event.target ||
+      (!(event.target as Element).closest(".context-menu") &&
+        !(event.target as Element).closest(".avatar"))
+    ) {
       handleMenuClose();
-  };
-
-  const [dialog, setDialog] = useState(<></>);
-  const dialogRef = createRef<HTMLDialogElement>();
-
-  function handleViewProfile() {
-    handleMenuClose();
-    if (user) {
-      dialogRef.current?.showModal();
-      setDialog(UserInfo(user));
     }
-  }
+  };
 
   return (
     <div
       className="avatar"
       onContextMenu={handleMenuClick}
       style={{ display: user ? "block" : "none" }}
-      onClick={(event) => {
-        if (contextMenu.open && event.target === avatarRef.current) {
-          handleMenuClose();
-        } else {
-          handleMenuClick(event);
-        }
-      }}
-      ref={avatarRef}
+      onClick={handleMenuClick}
     >
-      👤 {user?.username}
+      {user?.username}
       {contextMenu.open && (
         <ul
           className="context-menu"
-          ref={contextMenuRef}
           style={{
             zIndex: 3,
             position: "absolute",
@@ -150,16 +94,6 @@ export default function Avatar() {
           ))}
         </ul>
       )}
-      <dialog
-        id="AvatarDialog"
-        ref={dialogRef}
-        onClick={(event) => {
-          event.stopPropagation();
-          event.currentTarget.close();
-        }}
-      >
-        {dialog}
-      </dialog>
     </div>
   );
 }

src/Footer.tsx

@@ -1,27 +1,23 @@
 import { useLocation } from "react-router";
 import { Link } from "react-router";
-import { useSession } from "./Session";
 
 export default function Footer() {
   const location = useLocation();
-  const { user } = useSession();
   return (
     <footer className={location.pathname === "/network" ? "fixed-footer" : ""}>
-      {user?.scopes.split(" ").includes("analysis") && (
-        <div className="navbar">
-          <Link to="/">
-            <span>Form</span>
-          </Link>
-          <span>|</span>
-          <Link to="/network">
-            <span>Trainer Analysis</span>
-          </Link>
-          <span>|</span>
-          <Link to="/mvp">
-            <span>MVP</span>
-          </Link>
-        </div>
-      )}
+      <div className="navbar">
+        <Link to="/">
+          <span>Form</span>
+        </Link>
+        <span>|</span>
+        <Link to="/network">
+          <span>Trainer Analysis</span>
+        </Link>
+        <span>|</span>
+        <Link to="/mvp">
+          <span>MVP</span>
+        </Link>
+      </div>
       <p className="grey extra-margin">
         something not working?
         <br />

src/Login.tsx

@@ -1,7 +1,6 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { currentUser, login, User } from "./api";
 import Header from "./Header";
-import { useLocation, useNavigate } from "react-router";
 
 export interface LoginProps {
   onLogin: (user: User) => void;
@@ -10,14 +9,12 @@ export interface LoginProps {
 export const Login = ({ onLogin }: LoginProps) => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
+  const [error, setError] = useState<unknown>(null);
   const [loading, setLoading] = useState(false);
-  const navigate = useNavigate();
-  const location = useLocation();
 
   async function doLogin() {
     setLoading(true);
-    setError("");
+    setError(null);
     const timeout = new Promise((r) => setTimeout(r, 1000));
     let user: User;
     try {
@@ -25,7 +22,7 @@ export const Login = ({ onLogin }: LoginProps) => {
       user = await currentUser();
     } catch (e) {
       await timeout;
-      setError("failed");
+      setError(e);
       setLoading(false);
       return;
     }
@@ -38,16 +35,6 @@ export const Login = ({ onLogin }: LoginProps) => {
     doLogin();
   }
 
-  useEffect(() => {
-    if (location.state) {
-      const queryUsername = location.state.username;
-      const queryPassword = location.state.password;
-      if (queryUsername) setUsername(queryUsername);
-      if (queryPassword) setPassword(queryPassword);
-      navigate(location.pathname, { replace: true });
-    }
-  }, []);
-
   return (
     <>
       <Header />
@@ -60,10 +47,7 @@ export const Login = ({ onLogin }: LoginProps) => {
             placeholder="username"
             required
             value={username}
-            onChange={(evt) => {
-              setError("");
-              setUsername(evt.target.value);
-            }}
+            onChange={(evt) => setUsername(evt.target.value)}
           />
         </div>
         <div>
@@ -75,13 +59,9 @@ export const Login = ({ onLogin }: LoginProps) => {
             minLength={8}
             value={password}
             required
-            onChange={(evt) => {
-              setError("");
-              setPassword(evt.target.value);
-            }}
+            onChange={(evt) => setPassword(evt.target.value)}
           />
         </div>
-        <div>{error && <span style={{ color: "red" }}>{error}</span>}</div>
         <button type="submit" value="login" style={{ fontSize: "small" }}>
           login
         </button>

src/Network.tsx

@@ -151,7 +151,7 @@ export const GraphComponent = () => {
       <div className="controls">
         <div className="control" onClick={handleMutuality}>
           <div className="switch">
-            <input type="checkbox" checked={mutuality} onChange={() => {}} />
+            <input type="checkbox" checked={mutuality} />
             <span className="slider round"></span>
           </div>
           <span>mutuality</span>
@@ -160,7 +160,7 @@ export const GraphComponent = () => {
         <div className="control" onClick={handleThreed}>
           <span>2D</span>
           <div className="switch">
-            <input type="checkbox" checked={threed} onChange={() => {}} />
+            <input type="checkbox" checked={threed} />
             <span className="slider round"></span>
           </div>
           <span>3D</span>
@@ -192,7 +192,7 @@ export const GraphComponent = () => {
 
         <div className="control" onClick={handlePopularity}>
           <div className="switch">
-            <input type="checkbox" checked={popularity} onChange={() => {}} />
+            <input type="checkbox" checked={popularity} />
             <span className="slider round"></span>
           </div>
           <span>

src/Rankings.tsx

@@ -1,7 +1,12 @@
-import { useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
 import { ReactSortable, ReactSortableProps } from "react-sortablejs";
-import { apiAuth, User } from "./api";
-import { useSession } from "./Session";
+import api, { baseUrl } from "./api";
+
+interface Player {
+  id: number;
+  name: string;
+  number: string | null;
+}
 
 type PlayerListProps = Partial<ReactSortableProps<any>> & {
   orderedList?: boolean;
@@ -12,44 +17,116 @@ function PlayerList(props: PlayerListProps) {
     <ReactSortable {...props} animation={200}>
       {props.list?.map((item, index) => (
         <div key={item.id} className="item">
-          {props.orderedList
-            ? index + 1 + ". " + item.display_name
-            : item.display_name}
+          {props.orderedList ? index + 1 + ". " + item.name : item.name}
         </div>
       ))}
     </ReactSortable>
   );
 }
 
+interface SelectUserProps {
+  user: Player[];
+  setUser: Dispatch<SetStateAction<Player[]>>;
+  players: Player[];
+  setPlayers: Dispatch<SetStateAction<Player[]>>;
+}
+
+export function SelectUser({
+  user,
+  setUser,
+  players,
+  setPlayers,
+}: SelectUserProps) {
+  return (
+    <>
+      <div className="box user">
+        {user.length < 1 ? (
+          <>
+            <span>your name?</span>
+            <br /> <span className="grey hint">drag your name here</span>
+          </>
+        ) : (
+          <>
+            <span
+              className="renew"
+              onClick={() => {
+                setUser([]);
+              }}
+            >
+              {" ✕"}
+            </span>
+          </>
+        )}
+        <PlayerList
+          list={user}
+          setList={setUser}
+          group={{
+            name: "user-shared",
+            put: function (to) {
+              return to.el.children.length < 1;
+            },
+          }}
+          className="dragbox"
+        />
+      </div>
+      {user.length < 1 && (
+        <div className="box one">
+          <h2>🥏🏃</h2>
+          <ReactSortable
+            list={players}
+            setList={setPlayers}
+            group={{ name: "user-shared", pull: "clone" }}
+            className="dragbox reservoir"
+            animation={200}
+          >
+            {players.length < 1 ? (
+              <span className="loader"></span>
+            ) : (
+              players.map((item, _) => (
+                <div key={"extra" + item.id} className="extra-margin">
+                  <div key={item.id} className="item">
+                    {item.name}
+                  </div>
+                </div>
+              ))
+            )}
+          </ReactSortable>
+        </div>
+      )}
+    </>
+  );
+}
+
 interface PlayerInfoProps {
-  user: User;
-  players: User[];
+  user: Player[];
+  players: Player[];
 }
 
 export function Chemistry({ user, players }: PlayerInfoProps) {
-  const index = players.indexOf(user);
+  const index = players.indexOf(user[0]);
   var otherPlayers = players.slice();
   otherPlayers.splice(index, 1);
-  const [playersLeft, setPlayersLeft] = useState<User[]>([]);
-  const [playersMiddle, setPlayersMiddle] = useState<User[]>(otherPlayers);
-  const [playersRight, setPlayersRight] = useState<User[]>([]);
-
-  useEffect(() => {
-    setPlayersMiddle(otherPlayers);
-  }, [players]);
+  const [playersLeft, setPlayersLeft] = useState<Player[]>([]);
+  const [playersMiddle, setPlayersMiddle] = useState<Player[]>(otherPlayers);
+  const [playersRight, setPlayersRight] = useState<Player[]>([]);
 
   const [dialog, setDialog] = useState("dialog");
 
   async function handleSubmit() {
     const dialog = document.querySelector("dialog[id='ChemistryDialog']");
     (dialog as HTMLDialogElement).showModal();
-    setDialog("sending...");
-    let left = playersLeft.map(({ display_name }) => display_name);
-    let middle = playersMiddle.map(({ display_name }) => display_name);
-    let right = playersRight.map(({ display_name }) => display_name);
-    const data = { user: user, hate: left, undecided: middle, love: right };
-    const response = await apiAuth("chemistry", data);
-    response.ok ? setDialog("success!") : setDialog("try sending again");
+    if (user.length < 1) {
+      setDialog("who are you?");
+    } else {
+      setDialog("sending...");
+      let _user = user.map(({ name }) => name)[0];
+      let left = playersLeft.map(({ name }) => name);
+      let middle = playersMiddle.map(({ name }) => name);
+      let right = playersRight.map(({ name }) => name);
+      const data = { user: _user, hate: left, undecided: middle, love: right };
+      const response = await api("chemistry", data);
+      response.ok ? setDialog("success!") : setDialog("try sending again");
+    }
   }
 
   return (
@@ -111,23 +188,24 @@ export function Chemistry({ user, players }: PlayerInfoProps) {
 }
 
 export function MVP({ user, players }: PlayerInfoProps) {
-  const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
-  const [rankedPlayers, setRankedPlayers] = useState<User[]>([]);
+  const [availablePlayers, setAvailablePlayers] = useState<Player[]>(players);
+  const [rankedPlayers, setRankedPlayers] = useState<Player[]>([]);
 
   const [dialog, setDialog] = useState("dialog");
 
-  useEffect(() => {
-    setAvailablePlayers(players);
-  }, [players]);
-
   async function handleSubmit() {
     const dialog = document.querySelector("dialog[id='MVPDialog']");
     (dialog as HTMLDialogElement).showModal();
-    setDialog("sending...");
-    let mvps = rankedPlayers.map(({ display_name }) => display_name);
-    const data = { user: user, mvps: mvps };
-    const response = await apiAuth("mvps", data);
-    response.ok ? setDialog("success!") : setDialog("try sending again");
+    if (user.length < 1) {
+      setDialog("who are you?");
+    } else {
+      setDialog("sending...");
+      let _user = user.map(({ name }) => name)[0];
+      let mvps = rankedPlayers.map(({ name }) => name);
+      const data = { user: _user, mvps: mvps };
+      const response = await api("mvps", data);
+      response.ok ? setDialog("success!") : setDialog("try sending again");
+    }
   }
 
   return (
@@ -189,25 +267,24 @@ export function MVP({ user, players }: PlayerInfoProps) {
 }
 
 export default function Rankings() {
-  const { user } = useSession();
-  const [players, setPlayers] = useState<User[]>([]);
+  const [user, setUser] = useState<Player[]>([]);
+  const [players, setPlayers] = useState<Player[]>([]);
   const [openTab, setOpenTab] = useState("Chemistry");
 
   async function loadPlayers() {
-    try {
-      const data = await apiAuth("player/list", null, "GET");
-      setPlayers(data as User[]);
-    } catch (error) {
-      console.error(error);
-    }
+    const response = await fetch(`${baseUrl}api/player/list`, {
+      method: "GET",
+    });
+    const data = await response.json();
+    setPlayers(data as Player[]);
   }
 
-  useEffect(() => {
+  useMemo(() => {
     loadPlayers();
   }, []);
 
   useEffect(() => {
-    openPage(openTab, "aliceblue");
+    user.length === 1 && openPage(openTab, "aliceblue");
   }, [user]);
 
   function openPage(pageName: string, color: string) {
@@ -237,35 +314,37 @@ export default function Rankings() {
 
   return (
     <>
-      <div className="container navbar">
-        <button
-          className="tablink"
-          id="ChemistryButton"
-          onClick={() => openPage("Chemistry", "aliceblue")}
-        >
-          🧪 Chemistry
-        </button>
-        <button
-          className="tablink"
-          id="MVPButton"
-          onClick={() => openPage("MVP", "aliceblue")}
-        >
-          🏆 MVP
-        </button>
-      </div>
+      <SelectUser {...{ user, setUser, players, setPlayers }} />
+      {user.length === 1 && (
+        <>
+          <div className="container navbar">
+            <button
+              className="tablink"
+              id="ChemistryButton"
+              onClick={() => openPage("Chemistry", "aliceblue")}
+            >
+              🧪 Chemistry
+            </button>
+            <button
+              className="tablink"
+              id="MVPButton"
+              onClick={() => openPage("MVP", "aliceblue")}
+            >
+              🏆 MVP
+            </button>
+          </div>
 
-      <span className="grey">
-        assign as many or as few players as you want
-        <br />
-        and don't forget to <b>submit</b> (💾) when you're done :)
-      </span>
+          <span className="grey">assign as many or as few players as you want<br />
+            and don't forget to <b>submit</b> (💾) when you're done :)</span>
 
-      <div id="Chemistry" className="tabcontent">
-        {user && <Chemistry {...{ user, players }} />}
-      </div>
-      <div id="MVP" className="tabcontent">
-        {user && <MVP {...{ user, players }} />}
-      </div>
+          <div id="Chemistry" className="tabcontent">
+            <Chemistry {...{ user, players }} />
+          </div>
+          <div id="MVP" className="tabcontent">
+            <MVP {...{ user, players }} />
+          </div>
+        </>
+      )}
     </>
   );
 }

src/Session.tsx

@@ -59,9 +59,11 @@ export function SessionProvider(props: SessionProviderProps) {
       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);
+      setErr(e); // Update the error state if logout fails
     }
   }
   console.log("sanity", user);
@@ -75,7 +77,12 @@ export function SessionProvider(props: SessionProviderProps) {
       </>
     );
   else if (err) {
-    content = <Login onLogin={onLogin} />;
+    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 }}>

src/SetPassword.tsx

@@ -1,126 +0,0 @@
-import { InvalidTokenError, jwtDecode, JwtPayload } from "jwt-decode";
-import { useEffect, useState } from "react";
-import { baseUrl } from "./api";
-import { redirect, useNavigate } from "react-router";
-
-interface SetPassToken extends JwtPayload {
-  name: string;
-}
-
-export const SetPassword = () => {
-  const [name, setName] = useState("after getting your token.");
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [passwordr, setPasswordr] = useState("");
-  const [token, setToken] = useState("");
-  const [error, setError] = useState("");
-  const [loading, setLoading] = useState(false);
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const token = params.get("token");
-    if (token) {
-      setToken(token);
-      try {
-        const payload = jwtDecode<SetPassToken>(token);
-        if (payload.name) setName(payload.name);
-        else if (payload.sub) setName(payload.sub);
-        else setName("Mr. I-have-no Token");
-        payload.sub && setUsername(payload.sub);
-      } catch (InvalidTokenError) {
-        setName("Mr. I-have-no-valid Token");
-      }
-    }
-  }, []);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (password === passwordr) {
-      setLoading(true);
-      const req = new Request(`${baseUrl}api/set_password`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ token: token, password: password }),
-      });
-      let resp: Response;
-      try {
-        resp = await fetch(req);
-      } catch (e) {
-        throw new Error(`request failed: ${e}`);
-      }
-      setLoading(false);
-
-      if (resp.ok) {
-        console.log(resp);
-        navigate("/", {
-          replace: true,
-          state: { username: username, password: password },
-        });
-      }
-
-      if (!resp.ok) {
-        if (resp.status === 401) {
-          resp.statusText
-            ? setError(resp.statusText)
-            : setError("unauthorized");
-          throw new Error("Unauthorized");
-        }
-      }
-    } else setError("passwords are not the same");
-  }
-
-  return (
-    <>
-      <h2>
-        set your password,
-        <br />
-        {name}
-      </h2>
-      {username && (
-        <span>
-          your username is: <i>{username}</i>
-        </span>
-      )}
-      <form onSubmit={handleSubmit}>
-        <div>
-          <input
-            type="password"
-            id="password"
-            name="password"
-            placeholder="password"
-            minLength={8}
-            value={password}
-            required
-            onChange={(evt) => {
-              setError("");
-              setPassword(evt.target.value);
-            }}
-          />
-        </div>
-        <div>
-          <input
-            type="password"
-            id="password-repeat"
-            name="password-repeat"
-            placeholder="repeat password"
-            minLength={8}
-            value={passwordr}
-            required
-            onChange={(evt) => {
-              setError("");
-              setPasswordr(evt.target.value);
-            }}
-          />
-        </div>
-        <div>{error && <span style={{ color: "red" }}>{error}</span>}</div>
-        <button type="submit" value="login" style={{ fontSize: "small" }}>
-          login
-        </button>
-        {loading && <span className="loader" />}
-      </form>
-    </>
-  );
-};

src/api.ts

@@ -1,4 +1,22 @@
 export const baseUrl = import.meta.env.VITE_BASE_URL as string;
+export const token = () => localStorage.getItem("access_token") as string;
+
+export default async function api(path: string, data: any): Promise<any> {
+  const request = new Request(`${baseUrl}${path}/`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  });
+  let response: Response;
+  try {
+    response = await fetch(request);
+  } catch (e) {
+    throw new Error(`request failed: ${e}`);
+  }
+  return response;
+}
 
 export async function apiAuth(
   path: string,
@@ -8,9 +26,9 @@ export async function apiAuth(
   const req = new Request(`${baseUrl}api/${path}`, {
     method: method,
     headers: {
+      Authorization: `Bearer ${token()} `,
       "Content-Type": "application/json",
     },
-    credentials: "include",
     ...(data && { body: JSON.stringify(data) }),
   });
   let resp: Response;
@@ -30,23 +48,20 @@ export async function apiAuth(
 }
 
 export type User = {
-  id: number;
   username: string;
-  display_name: string;
   full_name: string;
   email: string;
   player_id: number;
-  number: string;
-  scopes: string;
 };
 
 export async function currentUser(): Promise<User> {
-  const req = new Request(`${baseUrl}api/player/me`, {
+  if (!token()) throw new Error("you have no access token");
+  const req = new Request(`${baseUrl}api/users/me/`, {
     method: "GET",
     headers: {
+      Authorization: `Bearer ${token()} `,
       "Content-Type": "application/json",
     },
-    credentials: "include",
   });
   let resp: Response;
   try {
@@ -68,7 +83,12 @@ export type LoginRequest = {
   username: string;
   password: string;
 };
+export type Token = {
+  access_token: string;
+  token_type: string;
+};
 
+// api.js
 export const login = async (req: LoginRequest): Promise<void> => {
   try {
     const response = await fetch(`${baseUrl}api/token`, {
@@ -77,24 +97,20 @@ export const login = async (req: LoginRequest): Promise<void> => {
         "Content-Type": "application/x-www-form-urlencoded",
       },
       body: new URLSearchParams(req).toString(),
-      credentials: "include",
     });
     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 = async () => {
-  try {
-    await fetch(`${baseUrl}api/logout`, {
-      method: "POST",
-      credentials: "include",
-    });
-  } catch (e) {
-    console.error(e);
-  }
-};
+export const logout = () => localStorage.removeItem("access_token");