fix: add Session and Login

.env

@@ -1 +0,0 @@
-VITE_BASE_URL=

.env.example

@@ -0,0 +1,3 @@
+VITE_BASE_URL=
+SECRET_KEY="tg07Cp0daCpcbeeFw+lI4RG2lEuT8oq5xOwB5ETs9YaJTylG1euC4ogjTK4zym/d"
+ACCESS_TOKEN_EXPIRE_MINUTES = 30

README.md

@@ -1,3 +1,3 @@
-# cutt
+# cutt - cool ultimate team tool
 
-cool ultimate team tool
+app to survey the chemistry between the players in your team and determine the most valued players in your team

analysis.py

@@ -1,5 +1,4 @@
 from datetime import datetime
-import numpy as np
 import io
 import base64
 from fastapi import APIRouter
@@ -9,12 +8,12 @@ from sqlmodel import Session, func, select
 from sqlmodel.sql.expression import SelectOfScalar
 from db import Chemistry, Player, engine
 import networkx as nx
-
 import matplotlib
 
 matplotlib.use("agg")
 import matplotlib.pyplot as plt
 
+
 analysis_router = APIRouter(prefix="/analysis")
 
 
@@ -50,13 +49,10 @@ def sociogram_json():
     return JSONResponse({"nodes": nodes, "links": links})
 
 
-def sociogram_data():
+def sociogram_data(show: int | None = 2):
-    nodes = []
-    links = []
     G = nx.DiGraph()
     with Session(engine) as session:
         for p in session.exec(select(P)).fetchall():
-            nodes.append({"id": p.name})
             G.add_node(p.name)
         subquery = (
             select(C.user, func.max(C.time).label("latest"))
@@ -66,13 +62,16 @@ def sociogram_data():
         )
         statement2 = (
             select(C)
-            .where(C.user.in_(["Kruse", "Franz", "ck"]))
+            # .where(C.user.in_(["Kruse", "Franz", "ck"]))
             .join(subquery, (C.user == subquery.c.user) & (C.time == subquery.c.latest))
         )
         for c in session.exec(statement2):
-            for p in c.love:
+            if show >= 1:
-                G.add_edge(c.user, p)
+                for i, p in enumerate(c.love):
-                links.append({"source": c.user, "target": p})
+                    G.add_edge(c.user, p, group="love", rank=i, popularity=1 - 0.08 * i)
+            if show <= 1:
+                for i, p in enumerate(c.hate):
+                    G.add_edge(c.user, p, group="hate", rank=8, popularity=-0.16)
     return G
 
 
@@ -81,37 +80,58 @@ class Params(BaseModel):
     font_size: int | None = Field(default=10, alias="fontSize")
     arrow_size: int | None = Field(default=20, alias="arrowSize")
     edge_width: float | None = Field(default=1, alias="edgeWidth")
+    distance: float | None = 0.2
+    weighting: bool | None = True
+    popularity: bool | None = True
+    show: int | None = 2
 
 
-def sociogram_image(params: Params):
+ARROWSTYLE = {"love": "-|>", "hate": "-|>"}
-    print(params)
+EDGESTYLE = {"love": "-", "hate": ":"}
+EDGECOLOR = {"love": "#404040", "hate": "#cc0000"}
+
+
+async def render_sociogram(params: Params):
     plt.figure(figsize=(16, 10), facecolor="none")
     ax = plt.gca()
     ax.set_facecolor("none")  # Set the axis face color to none (transparent)
     ax.axis("off")  # Turn off axis ticks and frames
 
-    G = sociogram_data()
+    G = sociogram_data(show=params.show)
-    pos = nx.spring_layout(
+    pos = nx.spring_layout(G, scale=2, k=params.distance, iterations=50, seed=None)
-        G, scale=2, k=1 / np.sqrt(G.number_of_edges()), iterations=50, seed=42
+    nodes = nx.draw_networkx_nodes(
-    )
-    nx.draw_networkx_nodes(
         G,
         pos,
-        node_color="#99ccff",
+        node_color=[
+            v for k, v in G.in_degree(weight="popularity" if params.weighting else None)
+        ]
+        if params.popularity
+        else "#99ccff",
         edgecolors="#404040",
-        linewidths=1,
+        linewidths=0,
+        # node_shape="8",
         node_size=params.node_size,
+        cmap="coolwarm",
         alpha=0.86,
     )
+    if params.popularity:
+        cbar = plt.colorbar(nodes)
+        cbar.ax.set_xlabel("popularity")
     nx.draw_networkx_labels(G, pos, font_size=params.font_size)
     nx.draw_networkx_edges(
         G,
         pos,
         arrows=True,
-        edge_color="#404040",
+        edge_color=[EDGECOLOR[G.edges()[*edge]["group"]] for edge in G.edges()],
         arrowsize=params.arrow_size,
         node_size=params.node_size,
         width=params.edge_width,
+        style=[EDGESTYLE[G.edges()[*edge]["group"]] for edge in G.edges()],
+        arrowstyle=[ARROWSTYLE[G.edges()[*edge]["group"]] for edge in G.edges()],
+        connectionstyle="arc3,rad=0.12",
+        alpha=[1 - 0.08 * G.edges()[*edge]["rank"] for edge in G.edges()]
+        if params.weighting
+        else 1,
     )
 
     buf = io.BytesIO()
@@ -124,7 +144,7 @@ def sociogram_image(params: Params):
 
 
 analysis_router.add_api_route("/json", endpoint=sociogram_json, methods=["GET"])
-analysis_router.add_api_route("/image", endpoint=sociogram_image, methods=["POST"])
+analysis_router.add_api_route("/image", endpoint=render_sociogram, methods=["POST"])
 
 if __name__ == "__main__":
     with Session(engine) as session:
@@ -132,13 +152,3 @@ if __name__ == "__main__":
         print("players in DB: ", session.exec(statement).first())
     G = sociogram_data()
     pos = nx.spring_layout(G, scale=1, k=2, iterations=50, seed=42)
-    edges = nx.draw_networkx_edges(
-        G,
-        pos,
-        arrows=True,
-        arrowsize=12,
-    )
-    nx.draw_networkx(
-        G, pos, with_labels=True, node_color="#99ccff", font_size=8, node_size=2000
-    )
-    plt.show()

db.py

@@ -1,5 +1,13 @@
 from datetime import datetime, timezone
-from sqlmodel import ARRAY, Column, Relationship, SQLModel, Field, create_engine, String
+from sqlmodel import (
+    ARRAY,
+    Column,
+    Relationship,
+    SQLModel,
+    Field,
+    create_engine,
+    String,
+)
 
 with open("db.secrets", "r") as f:
     db_secrets = f.readline().strip()
@@ -54,4 +62,13 @@ class MVPRanking(SQLModel, table=True):
     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")
+
+
 SQLModel.metadata.create_all(engine)

main.py

@@ -1,4 +1,4 @@
-from fastapi import APIRouter, FastAPI, status
+from fastapi import APIRouter, Depends, FastAPI, status
 from fastapi.staticfiles import StaticFiles
 from db import Player, Team, Chemistry, MVPRanking, engine
 from sqlmodel import (
@@ -7,9 +7,16 @@ from sqlmodel import (
 )
 from fastapi.middleware.cors import CORSMiddleware
 from analysis import analysis_router
+from security import (
+    get_current_active_user,
+    login_for_access_token,
+    read_users_me,
+    read_own_items,
+)
 
 
 app = FastAPI(title="cutt")
+api_router = APIRouter(prefix="/api")
 origins = [
     "*",
     "http://localhost",
@@ -80,7 +87,21 @@ def submit_chemistry(chemistry: Chemistry):
         session.commit()
 
 
-app.include_router(player_router)
+class SPAStaticFiles(StaticFiles):
-app.include_router(team_router)
+    async def get_response(self, path: str, scope):
-app.include_router(analysis_router)
+        response = await super().get_response(path, scope)
-app.mount("/", StaticFiles(directory="dist", html=True), name="site")
+        if response.status_code == 404:
+            response = await super().get_response(".", scope)
+        return response
+
+
+api_router.include_router(player_router)
+api_router.include_router(team_router)
+api_router.include_router(
+    analysis_router, dependencies=[Depends(get_current_active_user)]
+)
+api_router.add_api_route("/token", endpoint=login_for_access_token, 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

@@ -27,7 +27,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
-    "react-router-dom": "^7.1.5",
+    "react-router": "^7.1.5",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
     "vite": "^6.0.5"

pyproject.toml

@@ -1,15 +1,19 @@
 [project]
 name = "cutt"
-version = "0.1.0"
+version = "0.1.1"
-description = "Add your description here"
+description = "cool ultimate team tool"
 author = "julius"
 readme = "README.md"
 requires-python = ">=3.13"
 dependencies = [
+    "argon2-cffi>=23.1.0",
     "fastapi[standard]>=0.115.7",
     "matplotlib>=3.10.0",
     "networkx>=3.4.2",
+    "passlib>=1.7.4",
     "psycopg>=3.2.4",
+    "pydantic-settings>=2.7.1",
+    "pyjwt>=2.10.1",
     "pyqt6>=6.8.0",
     "sqlmodel>=0.0.22",
     "uvicorn>=0.34.0",

security.py

@@ -0,0 +1,133 @@
+from datetime import timedelta, timezone, datetime
+from typing import Annotated
+from fastapi import Depends, HTTPException, Response, status
+from pydantic import BaseModel
+import jwt
+from jwt.exceptions import InvalidTokenError
+from sqlmodel import Session, select
+from db import engine, User
+from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm
+from pydantic_settings import BaseSettings, SettingsConfigDict
+from passlib.context import CryptContext
+
+
+class Config(BaseSettings):
+    secret_key: str = ""
+    access_token_expire_minutes: int = 30
+    model_config = SettingsConfigDict(
+        env_file=".env", env_file_encoding="utf-8", extra="ignore"
+    )
+
+
+config = Config()
+
+
+class Token(BaseModel):
+    access_token: str
+    token_type: str
+
+
+class TokenData(BaseModel):
+    username: str | None = None
+
+
+pwd_context = CryptContext(schemes=["argon2"], deprecated="auto")
+
+
+oauth2_scheme = OAuth2PasswordBearer(tokenUrl="api/token")
+
+
+def verify_password(plain_password, hashed_password):
+    return pwd_context.verify(plain_password, hashed_password)
+
+
+def get_password_hash(password):
+    return pwd_context.hash(password)
+
+
+def get_user(username: str | None):
+    if username:
+        with Session(engine) as session:
+            return session.exec(
+                select(User).where(User.username == username)
+            ).one_or_none()
+
+
+def authenticate_user(username: str, password: str):
+    user = get_user(username)
+    if not user:
+        return False
+    if not verify_password(password, user.hashed_password):
+        return False
+    return user
+
+
+def create_access_token(data: dict, expires_delta: timedelta | None = None):
+    to_encode = data.copy()
+    if expires_delta:
+        expire = datetime.now(timezone.utc) + expires_delta
+    else:
+        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)]):
+    credentials_exception = HTTPException(
+        status_code=status.HTTP_401_UNAUTHORIZED,
+        detail="Could not validate credentials",
+        headers={"WWW-Authenticate": "Bearer"},
+    )
+    try:
+        payload = jwt.decode(token, config.secret_key, algorithms=["HS256"])
+        username: str = payload.get("sub")
+        if username is None:
+            raise credentials_exception
+        token_data = TokenData(username=username)
+    except InvalidTokenError:
+        raise credentials_exception
+    user = get_user(username=token_data.username)
+    if user is None:
+        raise credentials_exception
+    return user
+
+
+async def get_current_active_user(
+    current_user: Annotated[User, Depends(get_current_user)],
+):
+    if current_user.disabled:
+        raise HTTPException(status_code=400, detail="Inactive user")
+    return current_user
+
+
+async def login_for_access_token(
+    form_data: Annotated[OAuth2PasswordRequestForm, Depends()], response: Response
+) -> Token:
+    user = authenticate_user(form_data.username, form_data.password)
+    if not user:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Incorrect username or password",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+    access_token_expires = timedelta(minutes=config.access_token_expire_minutes)
+    access_token = create_access_token(
+        data={"sub": user.username}, expires_delta=access_token_expires
+    )
+    response.set_cookie(
+        "Authorization", value=f"Bearer {access_token}", httponly=True, samesite="none"
+    )
+    return Token(access_token=access_token, token_type="bearer")
+
+
+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[User, Depends(get_current_active_user)],
+):
+    return [{"item_id": "Foo", "owner": current_user.username}]

src/Analysis.tsx

@@ -1,75 +1,178 @@
 import { useEffect, useState } from "react";
-import { baseUrl } from "./api";
+import { apiAuth } from "./api";
+
+//const debounce = <T extends (...args: any[]) => void>(
+//  func: T,
+//  delay: number
+//): ((...args: Parameters<T>) => void) => {
+//  let timeoutId: number | null = null;
+//  return (...args: Parameters<T>) => {
+//    if (timeoutId !== null) {
+//      clearTimeout(timeoutId);
+//    }
+//    console.log(timeoutId);
+//    timeoutId = setTimeout(() => {
+//      func(...args);
+//    }, delay);
+//  };
+//};
+//
+interface Prop {
+  name: string;
+  min: string;
+  max: string;
+  step: string;
+  value: string;
+}
 
 interface Params {
   nodeSize: number;
   edgeWidth: number;
   arrowSize: number;
   fontSize: number;
+  distance: number;
+  weighting: boolean;
+  popularity: boolean;
+  show: number;
 }
 
+interface DeferredProps {
+  timeout: number;
+  func: () => void;
+}
+
+
+let timeoutID: number | null = null;
 export default function Analysis() {
   const [image, setImage] = useState("");
   const [params, setParams] = useState<Params>({
-    nodeSize: 1600,
+    nodeSize: 2000,
     edgeWidth: 1,
-    arrowSize: 20,
+    arrowSize: 16,
     fontSize: 10,
+    distance: 2,
+    weighting: true,
+    popularity: true,
+    show: 2,
   });
   const [showControlPanel, setShowControlPanel] = useState(false);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
 
   // Function to generate and fetch the graph image
   async function loadImage() {
     setLoading(true);
-    await fetch(`${baseUrl}analysis/image`, {
+    await apiAuth("analysis/image", params, "POST")
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(params)
-    })
-      .then((resp) => resp.json())
       .then((data) => {
         setImage(data.image);
         setLoading(false);
-      });
+      }).catch((e) => {
+        console.log("best to just reload... ", e);
+      })
   }
+
   useEffect(() => {
-    loadImage();
+    if (timeoutID) {
-  }, []);
+      clearTimeout(timeoutID);
+    }
+    timeoutID = setTimeout(() => {
+      loadImage();
+    }, 1000);
+  }, [params]);
+
+  function showLabel() {
+    switch (params.show) {
+      case 0: return "dislike";
+      case 1: return "both";
+      case 2: return "like";
+    }
+  }
 
   return (
     <div className="stack column dropdown">
       <button onClick={() => setShowControlPanel(!showControlPanel)}>
-        Parameters {showControlPanel ? "⮝" : "⮟"}
+        Parameters <svg viewBox="0 0 24 24" height="1.2em" style={{ fill: "#ffffff", display: "inline", top: "0.2em", position: "relative", transform: showControlPanel ? "rotate(180deg)" : "unset" }} > <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" > </path></svg >
       </button>
-      {showControlPanel && (
+      <div id="control-panel" className={showControlPanel ? "opened" : ""}>
-        <div id="control-panel">
 
-          <label>Node Size:</label>
+        <div className="control">
+          <datalist id="markers">
+            <option value="0"></option>
+            <option value="1"></option>
+            <option value="2"></option>
+          </datalist>
+          <div id="three-slider">
+            <label>😬</label>
+            <input
+              type="range"
+              list="markers"
+              min="0"
+              max="2"
+              step="1"
+              width="16px"
+              onChange={(evt) => setParams({ ...params, show: Number(evt.target.value) })}
+            />
+            <label>😍</label>
+          </div>
+          {showLabel()}
+        </div>
+        <div className="control">
+          <div className="checkBox">
+            <input
+              type="checkbox"
+              checked={params.weighting}
+              onChange={(evt) => setParams({ ...params, weighting: evt.target.checked })}
+            />
+            <label>weighting</label>
+          </div>
+
+          <div className="checkBox">
+            <input
+              type="checkbox"
+              checked={params.popularity}
+              onChange={(evt) => setParams({ ...params, popularity: evt.target.checked })}
+            />
+            <label>popularity</label>
+          </div>
+        </div>
+
+        <div className="control">
+          <label>distance between nodes</label>
+          <input
+            type="range"
+            min="0.01"
+            max="3.001"
+            step="0.05"
+            value={params.distance}
+            onChange={(evt) => setParams({ ...params, distance: Number(evt.target.value) })}
+          />
+          <span>{params.distance}</span></div>
+
+        <div className="control">
+          <label>node size</label>
           <input
             type="range"
             min="500"
             max="3000"
             value={params.nodeSize}
             onChange={(evt) => setParams({ ...params, nodeSize: Number(evt.target.value) })}
-            onMouseUp={() => loadImage()}
           />
           <span>{params.nodeSize}</span>
+        </div>
 
-          <label>Font Size:</label>
+        <div className="control">
+          <label>font size</label>
           <input
             type="range"
             min="4"
             max="24"
             value={params.fontSize}
             onChange={(evt) => setParams({ ...params, fontSize: Number(evt.target.value) })}
-            onMouseUp={() => loadImage()}
           />
           <span>{params.fontSize}</span>
+        </div>
 
-          <label>Edge Width:</label>
+        <div className="control">
+          <label>edge width</label>
           <input
             type="range"
             min="1"
@@ -77,28 +180,31 @@ export default function Analysis() {
             step="0.1"
             value={params.edgeWidth}
             onChange={(evt) => setParams({ ...params, edgeWidth: Number(evt.target.value) })}
-            onMouseUp={() => loadImage()}
           />
           <span>{params.edgeWidth}</span>
+        </div>
 
-          <label>Arrow Size:</label>
+        <div className="control">
+          <label>arrow size</label>
           <input
             type="range"
             min="10"
             max="50"
             value={params.arrowSize}
             onChange={(evt) => setParams({ ...params, arrowSize: Number(evt.target.value) })}
-            onMouseUp={() => loadImage()}
           />
           <span>{params.arrowSize}</span>
-
         </div>
-      )}
+
-      {loading ? (
+      </div>
-        <span className="loader"></span>
+      <button onClick={() => loadImage()}>reload ↻</button>
-      ) : (
+      {
-        <img src={"data:image/png;base64," + image} width="86%" />
+        loading ? (
-      )}
+          <span className="loader"></span>
-    </div>
+        ) : (
+          <img src={"data:image/png;base64," + image} width="86%" />
+        )
+      }
+    </div >
   );
 }

src/App.css

@@ -12,16 +12,18 @@ body {
   height: 100%;
 }
 
-footer {
-  font-size: x-small;
-}
-
 #root {
   max-width: 1280px;
   margin: 0 auto;
   padding: 8px;
 }
 
+footer {
+  margin-top: 24px;
+  font-size: x-small;
+}
+
+
 .grey {
   color: #444;
 }
@@ -37,6 +39,11 @@ footer {
   z-index: -1;
 }
 
+input {
+  padding: 0.2em 16px;
+  margin-bottom: 0.5em;
+}
+
 h1,
 h2,
 h3 {
@@ -50,7 +57,7 @@ h3 {
 
   button,
   img {
-    padding: 0 1em;
+    padding: 0px 1em 4px 1em;
     margin: 3px auto;
   }
 }
@@ -60,15 +67,6 @@ h3 {
 }
 
 
-#control-panel {
-  display: flex;
-  flex-direction: column;
-
-  input {
-    margin: auto
-  }
-}
-
 .container {
   display: flex;
   flex-wrap: nowrap;
@@ -129,7 +127,8 @@ h3 {
   margin: auto;
 }
 
-button {
+button,
+.button {
   font-weight: bold;
   font-size: large;
   color: aliceblue;
@@ -138,7 +137,44 @@ button {
   z-index: 1;
 }
 
+#control-panel {
+  display: none;
+  overflow: hidden;
+  margin: auto;
+  gap: 16px;
+  grid-template-columns: repeat(3, 1fr);
+  transition: display 1s ease-out 0s;
+}
+
+#control-panel.opened {
+  display: grid;
+}
+
+.control {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #404040;
+  padding: 8px 16px;
+}
+
+#three-slider input {
+  margin: 4px;
+  width: 50%;
+}
+
+@media only screen and (max-width: 1000px) {
+  #control-panel {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
 @media only screen and (max-width: 768px) {
+  #control-panel {
+    grid-template-columns: 1fr;
+  }
+
   .submit_text {
     display: none;
   }
@@ -173,6 +209,10 @@ button {
 }
 
 .navbar {
+  span {
+    padding: 4px;
+  }
+
   button {
     font-size: medium;
     margin: 4px 0.5%;

src/App.tsx

@@ -3,12 +3,13 @@ import "./App.css";
 import Footer from "./Footer";
 import Header from "./Header";
 import Rankings from "./Rankings";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route } from "react-router";
+import { SessionProvider } from "./Session";
 
 function App() {
   //const [data, setData] = useState({ nodes: [], links: [] } as SociogramData);
   //async function loadData() {
-  //  await fetch(`${baseUrl}analysis/json`, { method: "GET" }).then(resp => resp.json() as unknown as SociogramData).then(json => { setData(json) })
+  //  await fetch(`${baseUrl}api/analysis/json`, { method: "GET" }).then(resp => resp.json() as unknown as SociogramData).then(json => { setData(json) })
   //}
   //useEffect(() => { loadData() }, [])
   //
@@ -17,7 +18,11 @@ function App() {
       <Header />
       <Routes>
         <Route index element={<Rankings />} />
-        <Route path="analysis" element={<Analysis />} />
+        <Route path="/analysis" element={
+          <SessionProvider>
+            <Analysis />
+          </SessionProvider>
+        } />
       </Routes>
       <Footer />
     </BrowserRouter>

src/Footer.tsx

@@ -1,6 +1,13 @@
+import { Link } from "react-router";
+
 export default function Footer() {
         return <footer>
-                <p className="grey">
+                <div className="navbar">
+                        <Link to="/" ><span>Form</span></Link>
+                        <span>|</span>
+                        <Link to="/analysis" ><span>Trainer Analysis</span></Link>
+                </div>
+                <p className="grey extra-margin">
                         something not working?
                         <br />
                         message <a href="https://t.me/x0124816">me</a>.

src/Login.tsx

@@ -0,0 +1,86 @@
+import { FormEvent, useContext, useState } from "react";
+import { useNavigate } from "react-router";
+import { currentUser, login, LoginRequest, User } from "./api";
+
+export interface LoginProps {
+  onLogin: (user: User) => void;
+}
+
+export const Login = ({ onLogin }: LoginProps) => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<unknown>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function doLogin() {
+    setLoading(true);
+    setError(null);
+    const timeout = new Promise((r) => setTimeout(r, 1500));
+    let user: User;
+    try {
+      login({ username, password });
+      user = await currentUser();
+    } catch (e) {
+      await timeout;
+      setError(e);
+      setLoading(false);
+      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>
+} */

src/Rankings.tsx

@@ -272,7 +272,7 @@ export default function Rankings() {
   const [openTab, setOpenTab] = useState("Chemistry");
 
   async function loadPlayers() {
-    const response = await fetch(`${baseUrl}player/list`, {
+    const response = await fetch(`${baseUrl}api/player/list`, {
       method: "GET",
     });
     const data = await response.json();
@@ -334,6 +334,9 @@ export default function Rankings() {
             </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>
+
           <div id="Chemistry" className="tabcontent">
             <Chemistry {...{ user, players }} />
           </div>

src/Session.tsx

@@ -0,0 +1,40 @@
+import { createContext, ReactNode, useContext, useLayoutEffect, useState } from "react";
+import { currentUser, User } from "./api";
+import { Login } from "./Login";
+
+export interface SessionProviderProps {
+  children: ReactNode;
+}
+
+const sessionContext = createContext<User | null>(null);
+
+export function SessionProvider(props: SessionProviderProps) {
+  const { children } = props;
+
+  const [user, setUser] = useState<User | null>(null);
+  const [err, setErr] = useState<unknown>(null);
+
+  function loadUser() {
+    currentUser()
+      .then((user) => { setUser(user); setErr(null); })
+      .catch((err) => { setUser(null); setErr(err); });
+  }
+
+  useLayoutEffect(() => { loadUser(); }, [err]);
+
+  function onLogin(user: User) {
+    setUser(user);
+    setErr(null);
+  }
+
+  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>;
+
+  return content;
+}
+
+export function useSession() {
+  return useContext(sessionContext);
+}

src/api.ts

@@ -1,4 +1,6 @@
 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",
@@ -15,3 +17,77 @@ export default async function api(path: string, data: any): Promise<any> {
   }
   return response;
 }
+
+export async function apiAuth(path: string, data: any, method: string = "GET"): Promise<any> {
+
+  const req = new Request(`${baseUrl}api/${path}`, {
+    method: method, headers: {
+      "Authorization": `Bearer ${token()} `,
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(data),
+  });
+  let resp: Response;
+  try {
+    resp = await fetch(req);
+  } catch (e) {
+    throw new Error(`request failed: ${e}`);
+  }
+
+  if (!resp.ok) {
+    if (resp.status === 401) {
+      logout()
+      throw new Error('Unauthorized');
+    }
+  }
+  return resp.json()
+}
+
+export type User = {
+  username: string;
+  fullName: string;
+}
+
+export async function currentUser(): Promise<User> {
+  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'
+    }
+  });
+  let resp: Response;
+  try {
+    resp = await fetch(req);
+  } catch (e) {
+    throw new Error(`request failed: ${e}`);
+  }
+
+  if (!resp.ok) {
+    if (resp.status === 401) {
+      logout()
+      throw new Error('Unauthorized');
+    }
+  }
+  return resp.json() as Promise<User>;
+}
+
+export type LoginRequest = {
+  username: string;
+  password: string;
+};
+export type Token = {
+  access_token: string;
+  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>
+}
+
+export const logout = () => localStorage.removeItem("access_token");