feat: demo MVP list

revamp entire `SetPassword` page

cutt/analysis.py

@@ -1,4 +1,6 @@
 import io
+import itertools
+import random
 import base64
 from typing import Annotated
 from fastapi import APIRouter, HTTPException, Security, status
@@ -6,12 +8,13 @@ from fastapi.responses import JSONResponse
 from pydantic import BaseModel, Field
 from sqlmodel import Session, func, select
 from sqlmodel.sql.expression import SelectOfScalar
-from cutt.db import Chemistry, MVPRanking, Player, Team, engine
+from cutt.db import Chemistry, MVPRanking, Player, PlayerTeamLink, Team, engine
 import networkx as nx
 import numpy as np
 import matplotlib
 
 from cutt.security import TeamScopedRequest, verify_team_scope
+from cutt.demo import demo_players
 
 matplotlib.use("agg")
 import matplotlib.pyplot as plt
@@ -55,18 +58,77 @@ def sociogram_json():
 
 
 def graph_json(
-    request: Annotated[
-        TeamScopedRequest, Security(verify_team_scope, scopes=["analysis"])
-    ],
+    request: Annotated[TeamScopedRequest, Security(verify_team_scope)],
+    networkx_graph: bool = False,
 ):
     nodes = []
     edges = []
     player_map = {}
+    if request.team_id == 42:
+        players = [request.user] + demo_players
+        random.seed(42)
+        for p in players:
+            nodes.append({"id": p.display_name, "label": p.display_name})
+        for p, other in itertools.permutations(players, 2):
+            value = random.random()
+            if value > 0.5:
+                edges.append(
+                    {
+                        "id": f"{p.display_name}->{other.display_name}",
+                        "source": p.display_name,
+                        "target": other.display_name,
+                        "size": max(value, 0.3),
+                        "data": {
+                            "relation": 2,
+                            "origSize": max(value, 0.3),
+                            "origFill": "#bed4ff",
+                        },
+                    }
+                )
+            elif value < 0.1:
+                edges.append(
+                    {
+                        "id": f"{p.display_name}-x>{other.display_name}",
+                        "source": p.display_name,
+                        "target": other.display_name,
+                        "size": 0.3,
+                        "data": {"relation": 0, "origSize": 0.3, "origFill": "#ff7c7c"},
+                        "fill": "#ff7c7c",
+                    }
+                )
+        G = nx.DiGraph()
+        G.add_nodes_from([n["id"] for n in nodes])
+        G.add_weighted_edges_from(
+            [
+                (
+                    e["source"],
+                    e["target"],
+                    e["size"] if e["data"]["relation"] == 2 else -e["size"],
+                )
+                for e in edges
+            ]
+        )
+        in_degrees = G.in_degree(weight="weight")
+        nodes = [
+            dict(node, **{"data": {"inDegree": in_degrees[node["id"]]}})
+            for node in nodes
+        ]
+        if networkx_graph:
+            return G
+        return JSONResponse({"nodes": nodes, "edges": edges})
+
     with Session(engine) as session:
-        statement = select(Team).where(Team.id == request.team_id)
-        players = [t.players for t in session.exec(statement)][0]
+        players = session.exec(
+            select(P)
+            .join(PlayerTeamLink)
+            .join(Team)
+            .where(Team.id == request.team_id, P.disabled == False)
+        ).all()
         if not players:
-            raise HTTPException(status_code=status.HTTP_404_NOT_FOUND)
+            raise HTTPException(
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail="no players found in your team",
+            )
         for p in players:
             player_map[p.id] = p.display_name
             nodes.append({"id": p.display_name, "label": p.display_name})
@@ -117,11 +179,22 @@ def graph_json(
         )
     G = nx.DiGraph()
     G.add_nodes_from([n["id"] for n in nodes])
-    G.add_weighted_edges_from([(e["source"], e["target"], e["size"]) for e in edges])
+    G.add_weighted_edges_from(
+        [
+            (
+                e["source"],
+                e["target"],
+                e["size"] if e["data"]["relation"] == 2 else -e["size"],
+            )
+            for e in edges
+        ]
+    )
     in_degrees = G.in_degree(weight="weight")
     nodes = [
         dict(node, **{"data": {"inDegree": in_degrees[node["id"]]}}) for node in nodes
     ]
+    if networkx_graph:
+        return G
     return JSONResponse({"nodes": nodes, "edges": edges})
 
 
@@ -221,14 +294,33 @@ async def render_sociogram(params: Params):
 
 
 def mvp(
-    request: Annotated[
-        TeamScopedRequest, Security(verify_team_scope, scopes=["analysis"])
-    ],
+    request: Annotated[TeamScopedRequest, Security(verify_team_scope)],
 ):
     ranks = dict()
+    if request.team_id == 42:
+        random.seed(42)
+        players = [request.user] + demo_players
+        for p in players:
+            random.shuffle(players)
+            for i, p in enumerate(players):
+                ranks[p.display_name] = ranks.get(p.display_name, []) + [i + 1]
+        return [
+            {
+                "name": p,
+                "rank": f"{np.mean(v):.02f}",
+                "std": f"{np.std(v):.02f}",
+                "n": len(v),
+            }
+            for p, v in ranks.items()
+        ]
+
     with Session(engine) as session:
-        statement = select(Team).where(Team.id == request.team_id)
-        players = [t.players for t in session.exec(statement)][0]
+        players = session.exec(
+            select(P)
+            .join(PlayerTeamLink)
+            .join(Team)
+            .where(Team.id == request.team_id, P.disabled == False)
+        ).all()
         if not players:
             raise HTTPException(status_code=status.HTTP_404_NOT_FOUND)
         player_map = {p.id: p.display_name for p in players}
@@ -268,8 +360,12 @@ async def turnout(
 ):
     player_map = {}
     with Session(engine) as session:
-        statement = select(Team).where(Team.id == request.team_id)
-        players = [t.players for t in session.exec(statement)][0]
+        players = session.exec(
+            select(P)
+            .join(PlayerTeamLink)
+            .join(Team)
+            .where(Team.id == request.team_id, P.disabled == False)
+        ).all()
         if not players:
             raise HTTPException(status_code=status.HTTP_404_NOT_FOUND)
         for p in players:

cutt/demo.py

@@ -0,0 +1,27 @@
+import random
+from cutt.db import Player
+
+names = [
+    "August",
+    "Beate",
+    "Ceasar",
+    "Daedalus",
+    "Elli",
+    "Ford P.",
+    "Gabriel",
+    "Hugo",
+    "Ivar Johansson",
+    "Jürgen Gordon Malinauskas",
+]
+demo_players = [
+    Player.model_validate(
+        {
+            "id": i,
+            "display_name": name,
+            "username": name.lower().replace(" ", "").replace(".", ""),
+            "number": str(random.randint(0, 100)),
+            "email": name.lower().replace(" ", "").replace(".", "") + "@example.org",
+        }
+    )
+    for i, name in enumerate(names)
+]

cutt/main.py

@@ -1,6 +1,6 @@
 from typing import Annotated
 from fastapi import APIRouter, Depends, FastAPI, HTTPException, Security, status
-from fastapi.responses import JSONResponse
+from fastapi.responses import FileResponse, JSONResponse
 from fastapi.staticfiles import StaticFiles
 from cutt.db import Player, Team, Chemistry, MVPRanking, engine
 from sqlmodel import (
@@ -14,6 +14,7 @@ from cutt.security import (
     get_current_active_user,
     login_for_access_token,
     logout,
+    register,
     set_first_password,
 )
 from cutt.player import player_router
@@ -53,7 +54,7 @@ def list_teams():
 
 
 team_router = APIRouter(
-    prefix="/team",
+    prefix="/teams",
     dependencies=[Security(get_current_active_user, scopes=["admin"])],
     tags=["team"],
 )
@@ -75,6 +76,8 @@ def submit_mvps(
     mvps: MVPRanking,
     user: Annotated[Player, Depends(get_current_active_user)],
 ):
+    if mvps.team == 42:
+        return JSONResponse("DEMO team, nothing happens")
     if user.id == mvps.user:
         with Session(engine) as session:
             statement = select(Team).where(Team.id == mvps.team)
@@ -120,6 +123,8 @@ def get_mvps(
 def submit_chemistry(
     chemistry: Chemistry, user: Annotated[Player, Depends(get_current_active_user)]
 ):
+    if chemistry.team == 42:
+        return JSONResponse("DEMO team, nothing happens")
     if user.id == chemistry.user:
         with Session(engine) as session:
             statement = select(Team).where(Team.id == chemistry.team)
@@ -177,6 +182,20 @@ api_router.include_router(team_router, dependencies=[Depends(get_current_active_
 api_router.include_router(analysis_router)
 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("/register", endpoint=register, methods=["POST"])
 api_router.add_api_route("/logout", endpoint=logout, methods=["POST"])
 app.include_router(api_router)
-app.mount("/", SPAStaticFiles(directory="dist", html=True), name="site")
+
+
+# app.mount("/", SPAStaticFiles(directory="dist", html=True), name="site")
+@app.get("/")
+async def root():
+    return FileResponse("dist/index.html")
+
+
+@app.exception_handler(404)
+async def exception_404_handler(request, exc):
+    return FileResponse("dist/index.html")
+
+
+app.mount("/", StaticFiles(directory="dist"), name="ui")

cutt/player.py

@@ -12,6 +12,7 @@ from cutt.security import (
     read_player_me,
     verify_team_scope,
 )
+from cutt.demo import demo_players
 
 P = Player
 
@@ -28,6 +29,12 @@ class PlayerRequest(BaseModel):
 class AddPlayerRequest(PlayerRequest): ...
 
 
+DEMO_TEAM_REQUEST = HTTPException(
+    status_code=status.HTTP_400_BAD_REQUEST,
+    detail="DEMO Team, nothing happens",
+)
+
+
 def add_player(
     r: AddPlayerRequest,
     request: Annotated[TeamScopedRequest, Depends(verify_team_scope)],
@@ -56,6 +63,7 @@ def add_player(
             display_name=r.display_name,
             email=r.email if r.email else None,
             number=r.number,
+            disabled=False,
             teams=[team],
         )
         session.add(new_player)
@@ -71,6 +79,8 @@ def modify_player(
     r: ModifyPlayerRequest,
     request: Annotated[TeamScopedRequest, Depends(verify_team_scope)],
 ):
+    if request.team_id == 42:
+        raise DEMO_TEAM_REQUEST
     with Session(engine) as session:
         player = session.exec(
             select(P)
@@ -100,6 +110,8 @@ def disable_player(
     r: DisablePlayerRequest,
     request: Annotated[TeamScopedRequest, Depends(verify_team_scope)],
 ):
+    if request.team_id == 42:
+        raise DEMO_TEAM_REQUEST
     with Session(engine) as session:
         player = session.exec(
             select(P)
@@ -144,8 +156,29 @@ async def list_all_players():
         return session.exec(select(P)).all()
 
 
-async def list_players(team_id: int):
+async def list_players(
+    team_id: int, user: Annotated[Player, Depends(get_current_active_user)]
+):
+    if team_id == 42:
+        return [
+            user.model_dump(
+                include={"id", "display_name", "username", "number", "email"}
+            )
+        ] + demo_players
+
     with Session(engine) as session:
+        current_user = session.exec(
+            select(P)
+            .join(PlayerTeamLink)
+            .join(Team)
+            .where(Team.id == team_id, P.disabled == False, P.id == user.id)
+        ).one_or_none()
+        if not current_user:
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail="you're not in this team",
+            )
+
         players = session.exec(
             select(P)
             .join(PlayerTeamLink)
@@ -164,7 +197,9 @@ async def list_players(team_id: int):
 
 def read_teams_me(user: Annotated[P, Depends(get_current_active_user)]):
     with Session(engine) as session:
-        return [p.teams for p in session.exec(select(P).where(P.id == user.id))][0]
+        return [p.teams for p in session.exec(select(P).where(P.id == user.id))][0] + [
+            {"country": "nowhere", "id": 42, "location": "everywhere", "name": "DEMO"}
+        ]
 
 
 player_router.add_api_route(
@@ -186,7 +221,6 @@ player_router.add_api_route(
     "/{team_id}/list",
     endpoint=list_players,
     methods=["GET"],
-    dependencies=[Depends(get_current_active_user)],
 )
 player_router.add_api_route(
     "/list",

cutt/security.py

@@ -6,7 +6,7 @@ from pydantic import BaseModel, ValidationError
 import jwt
 from jwt.exceptions import ExpiredSignatureError, InvalidTokenError
 from sqlmodel import Session, select
-from cutt.db import TokenDB, engine, Player
+from cutt.db import PlayerTeamLink, Team, TokenDB, engine, Player
 from fastapi.security import (
     OAuth2PasswordBearer,
     OAuth2PasswordRequestForm,
@@ -16,6 +16,8 @@ from pydantic_settings import BaseSettings, SettingsConfigDict
 from passlib.context import CryptContext
 from sqlalchemy.exc import OperationalError
 
+P = Player
+
 
 class Config(BaseSettings):
     secret_key: str = ""
@@ -168,6 +170,8 @@ class TeamScopedRequest(BaseModel):
 async def verify_team_scope(
     team_id: int, user: Annotated[Player, Depends(get_current_active_user)]
 ):
+    if team_id == 42:
+        return TeamScopedRequest(user=user, team_id=team_id)
     allowed_scopes = set(user.scopes.split())
     if f"team:{team_id}" not in allowed_scopes:
         raise HTTPException(
@@ -208,72 +212,94 @@ async def logout(response: Response):
     return {"message": "Successfully logged out"}
 
 
-def generate_one_time_token(username):
+def set_password_token(username: str):
     user = get_user(username)
     if user:
-        expire = timedelta(days=7)
+        expire = timedelta(days=30)
         token = create_access_token(
-            data={"sub": username, "name": user.display_name},
+            data={
+                "sub": "set password",
+                "username": username,
+                "name": user.display_name,
+            },
             expires_delta=expire,
         )
         return token
 
 
+def register_token(team_id: int):
+    with Session(engine) as session:
+        team = session.exec(select(Team).where(Team.id == team_id)).one()
+        if team:
+            expire = timedelta(days=30)
+            token = create_access_token(
+                data={"sub": "register", "team_id": team_id, "name": team.name},
+                expires_delta=expire,
+            )
+            return token
+
+
+def verify_one_time_token(token: str):
+    credentials_exception = HTTPException(
+        status_code=status.HTTP_401_UNAUTHORIZED,
+        detail="could not validate token",
+    )
+    with Session(engine) as session:
+        token_in_db = session.exec(
+            select(TokenDB).where(TokenDB.token == token).where(TokenDB.used == False)
+        ).one_or_none()
+        if token_in_db:
+            try:
+                payload = jwt.decode(token, config.secret_key, algorithms=["HS256"])
+                return payload
+            except ExpiredSignatureError:
+                raise HTTPException(
+                    status_code=status.HTTP_401_UNAUTHORIZED,
+                    detail="access token expired",
+                )
+            except (InvalidTokenError, ValidationError):
+                raise credentials_exception
+        elif session.exec(
+            select(TokenDB).where(TokenDB.token == token).where(TokenDB.used == True)
+        ).one_or_none():
+            raise HTTPException(
+                status_code=status.HTTP_401_UNAUTHORIZED,
+                detail="token already used",
+            )
+        else:
+            raise credentials_exception
+
+
+def invalidate_one_time_token(token: str):
+    with Session(engine) as session:
+        token_in_db = session.exec(select(TokenDB).where(TokenDB.token == token)).one()
+        token_in_db.used = True
+        session.add(token_in_db)
+        session.commit()
+
+
 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",
-    )
+    payload = verify_one_time_token(req.token)
+    action: str = payload.get("sub")
+    if action != "set password":
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="wrong type of token.",
+        )
+    username: str = payload.get("username")
     with Session(engine) as session:
-        token_in_db = session.exec(
-            select(TokenDB)
-            .where(TokenDB.token == req.token)
-            .where(TokenDB.used == False)
-        ).one_or_none()
-        if token_in_db:
-            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:
-                user.hashed_password = get_password_hash(req.password)
-                session.add(user)
-                token_in_db.used = True
-                session.add(token_in_db)
-                session.commit()
-                return Response(
-                    "Password set successfully", status_code=status.HTTP_200_OK
-                )
-        elif session.exec(
-            select(TokenDB)
-            .where(TokenDB.token == req.token)
-            .where(TokenDB.used == True)
-        ).one_or_none():
-            raise HTTPException(
-                status_code=status.HTTP_401_UNAUTHORIZED,
-                detail="Token already used",
-            )
-        else:
-            raise credentials_exception
+        user = get_user(username)
+        if user:
+            user.hashed_password = get_password_hash(req.password)
+            session.add(user)
+            session.commit()
+            invalidate_one_time_token(req.token)
+            return Response("password set successfully", status_code=status.HTTP_200_OK)
 
 
 class ChangedPassword(BaseModel):
@@ -295,17 +321,74 @@ async def change_password(
             session.add(user)
             session.commit()
             return PlainTextResponse(
-                "Password changed successfully",
+                "password changed successfully",
                 status_code=status.HTTP_200_OK,
                 media_type="text/plain",
             )
     else:
         raise HTTPException(
             status_code=status.HTTP_400_BAD_REQUEST,
-            detail="Wrong password",
+            detail="wrong password",
         )
 
 
+class RegisterRequest(BaseModel):
+    token: str
+    team_id: int
+    display_name: str
+    username: str
+    password: str
+    email: str | None
+    number: str | None
+
+
+async def register(req: RegisterRequest):
+    payload = verify_one_time_token(req.token)
+    action: str = payload.get("sub")
+    if action != "register":
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="wrong type of token.",
+        )
+    team_id: int = payload.get("team_id")
+    if team_id != req.team_id:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="wrong team",
+        )
+    with Session(engine) as session:
+        if session.exec(select(P).where(P.username == req.username)).one_or_none():
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail="username exists",
+            )
+        stmt = (
+            select(P)
+            .join(PlayerTeamLink)
+            .join(Team)
+            .where(Team.id == team_id, P.display_name == req.display_name)
+        )
+        if session.exec(stmt).one_or_none():
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail="the name is already taken on this team",
+            )
+        team = session.exec(select(Team).where(Team.id == team_id)).one()
+        new_player = Player(
+            username=req.username,
+            hashed_password=get_password_hash(req.password),
+            display_name=req.display_name,
+            email=req.email if req.email else None,
+            number=req.number,
+            disabled=False,
+            teams=[team],
+        )
+        session.add(new_player)
+        session.commit()
+        # invalidate_one_time_token(req.token)
+        return PlainTextResponse(f"added {new_player.display_name}")
+
+
 async def read_player_me(
     current_user: Annotated[Player, Depends(get_current_active_user)],
 ):

src/App.tsx

@@ -9,7 +9,7 @@ import { GraphComponent } from "./Network";
 import MVPChart from "./MVPChart";
 import { SetPassword } from "./SetPassword";
 import { ThemeProvider } from "./ThemeProvider";
-import { TeamPanel } from "./TeamPanel";
+import TeamPanel from "./TeamPanel";
 
 const Maintenance = () => {
   return (
@@ -34,11 +34,11 @@ function App() {
                 <Header />
                 <Routes>
                   <Route index element={<Rankings />} />
-                  <Route path="/network" element={<GraphComponent />} />
-                  <Route path="/analysis" element={<Analysis />} />
-                  <Route path="/mvp" element={<MVPChart />} />
-                  <Route path="/changepassword" element={<SetPassword />} />
-                  <Route path="/team" element={<TeamPanel />} />
+                  <Route path="network" element={<GraphComponent />} />
+                  <Route path="analysis" element={<Analysis />} />
+                  <Route path="mvp" element={<MVPChart />} />
+                  <Route path="changepassword" element={<SetPassword />} />
+                  <Route path="team" element={<TeamPanel />} />
                 </Routes>
                 <Footer />
               </SessionProvider>

src/Avatar.tsx

@@ -148,11 +148,10 @@ export default function Avatar() {
 
   return (
     <>
-      <div className="avatars">
+      <div className="avatars" style={{ display: user ? "block" : "none" }}>
         <div
           className="avatar"
           onContextMenu={handleMenuClick}
-          style={{ display: user ? "block" : "none" }}
           onClick={(event) => {
             if (contextMenu.open && event.target === avatarRef.current) {
               handleMenuClose();

src/Footer.tsx

@@ -4,10 +4,11 @@ import { useSession } from "./Session";
 
 export default function Footer() {
   const location = useLocation();
-  const { user } = useSession();
+  const { user, teams } = useSession();
   return (
     <footer className={location.pathname === "/network" ? "fixed-footer" : ""}>
-      {user?.scopes.split(" ").includes("analysis") && (
+      {(user?.scopes.split(" ").includes("analysis") ||
+        teams?.activeTeam === 42) && (
         <div className="navbar">
           <Link to="/">
             <span>Form</span>
@@ -20,6 +21,10 @@ export default function Footer() {
           <Link to="/mvp">
             <span>MVP</span>
           </Link>
+          <span>|</span>
+          <Link to="/team">
+            <span>Team</span>
+          </Link>
         </div>
       )}
       <p className="grey extra-margin">

src/MVPChart.tsx

@@ -3,6 +3,7 @@ import { apiAuth } from "./api";
 import { PlayerRanking } from "./types";
 import RaceChart from "./RaceChart";
 import { useSession } from "./Session";
+import { useNavigate } from "react-router";
 
 const MVPChart = () => {
   let initialData = {} as PlayerRanking[];
@@ -10,7 +11,13 @@ const MVPChart = () => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
   const [showStd, setShowStd] = useState(false);
-  const { teams } = useSession();
+  const { user, teams } = useSession();
+  const navigate = useNavigate();
+  useEffect(() => {
+    user?.scopes.includes(`team:${teams?.activeTeam}`) ||
+      teams?.activeTeam === 42 ||
+      navigate("/", { replace: true });
+  }, [user]);
 
   async function loadData() {
     setLoading(true);

src/Network.tsx

@@ -11,6 +11,7 @@ import {
 } from "reagraph";
 import { customTheme } from "./NetworkTheme";
 import { useSession } from "./Session";
+import { useNavigate } from "react-router";
 
 interface NetworkData {
   nodes: GraphNode[];
@@ -45,7 +46,13 @@ export const GraphComponent = () => {
   const [likes, setLikes] = useState(2);
   const [popularity, setPopularity] = useState(false);
   const [mutuality, setMutuality] = useState(false);
-  const { teams } = useSession();
+  const { user, teams } = useSession();
+  const navigate = useNavigate();
+  useEffect(() => {
+    user?.scopes.includes(`team:${teams?.activeTeam}`) ||
+      teams?.activeTeam === 42 ||
+      navigate("/", { replace: true });
+  }, [user]);
 
   async function loadData() {
     setLoading(true);

src/RaceChart.tsx

@@ -16,7 +16,7 @@ const determineNiceWidth = (width: number) => {
 const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
   const [width, setWidth] = useState(determineNiceWidth(window.innerWidth));
   //const [height, setHeight] = useState(window.innerHeight);
-  const height = Math.max(3, players.length) * 40;
+  const height = (players.length + 1) * 40;
 
   useEffect(() => {
     const handleResize = () => {

src/Session.tsx

@@ -62,8 +62,10 @@ export function SessionProvider(props: SessionProviderProps) {
 
   useEffect(() => {
     loadUser();
-    loadTeam();
   }, []);
+  useEffect(() => {
+    loadTeam();
+  }, [user]);
 
   function onLogin(user: User) {
     setUser(user);

src/SetPassword.tsx

@@ -1,17 +1,29 @@
 import { jwtDecode, JwtPayload } from "jwt-decode";
-import { useEffect, useState } from "react";
-import { apiAuth, baseUrl } from "./api";
+import { ReactNode, useEffect, useState } from "react";
+import { apiAuth, baseUrl, User } from "./api";
 import { useNavigate } from "react-router";
 import { Eye, EyeSlash } from "./Icons";
 import { useSession } from "./Session";
+import { relative } from "path";
+import Header from "./Header";
 
-interface SetPassToken extends JwtPayload {
+interface PassToken extends JwtPayload {
+  username: string;
   name: string;
+  team_id: number;
+}
+
+enum Mode {
+  register = "register",
+  set = "set password",
+  change = "change password",
 }
 
 export const SetPassword = () => {
+  const [mode, setMode] = useState<Mode>();
   const [name, setName] = useState("after getting your token.");
   const [username, setUsername] = useState("");
+  const [teamID, setTeamID] = useState<number>();
   const [currentPassword, setCurrentPassword] = useState("");
   const [password, setPassword] = useState("");
   const [passwordr, setPasswordr] = useState("");
@@ -19,36 +31,22 @@ export const SetPassword = () => {
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
   const [visible, setVisible] = useState(false);
+  const newPlayerTemplate = {
+    username: "",
+    display_name: "",
+    number: "",
+    email: "",
+  } as User;
+  const [player, setPlayer] = useState(newPlayerTemplate);
   const navigate = useNavigate();
   const { user } = useSession();
 
-  useEffect(() => {
-    if (user) {
-      setUsername(user.username);
-      setName(user.display_name);
-    } else {
-      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);
-      if (user) {
+      if (mode === Mode.change) {
+        //====CHANGING PASSWORD====
         const resp = await apiAuth(
           "player/change_password",
           { current_password: currentPassword, new_password: password },
@@ -60,7 +58,8 @@ export const SetPassword = () => {
           setError(resp);
           setTimeout(() => navigate("/"), 2000);
         }
-      } else {
+      } else if (mode === Mode.set) {
+        //====SETTING PASSWORD====
         const req = new Request(`${baseUrl}api/set_password`, {
           method: "POST",
           headers: {
@@ -92,106 +91,240 @@ export const SetPassword = () => {
             throw new Error("Unauthorized");
           }
         }
+      } else if (mode === Mode.register) {
+        //====REGISTER NEW USER====
+        const req = new Request(`${baseUrl}api/register`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            ...player,
+            team_id: teamID,
+            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: player.username, password: password },
+          });
+        }
+
+        if (!resp.ok) {
+          const { detail } = await resp.json();
+          if (detail) setError(detail);
+          else setError("unauthorized");
+          throw new Error("Unauthorized");
+        }
       }
     } else setError("passwords are not the same");
   }
 
-  return (
+  useEffect(() => {
+    if (user) {
+      setUsername(user.username);
+      setName(user.display_name);
+      setMode(Mode.change);
+    } else {
+      const params = new URLSearchParams(window.location.search);
+      const token = params.get("token");
+      if (token) {
+        setToken(token);
+        try {
+          const payload = jwtDecode<PassToken>(token);
+          console.log(payload);
+          switch (payload.sub) {
+            case "register":
+              setMode(Mode.register);
+              if (payload.team_id) setTeamID(payload.team_id);
+              break;
+            case "set password":
+              setMode(Mode.set);
+              if (payload.username) setUsername(payload.username);
+              break;
+          }
+          if (payload.name) setName(payload.name);
+        } catch (InvalidTokenError) {
+          setName("Mr. I-have-no-valid Token");
+        }
+      }
+    }
+  }, []);
+
+  let header: ReactNode;
+  switch (mode) {
+    case Mode.change:
+      header = <h2>change your password, {name}</h2>;
+      break;
+    case Mode.set:
+      header = (
+        <>
+          <Header />
+          <h2>set your password, {name}</h2>
+        </>
+      );
+      break;
+    case Mode.register:
+      header = (
+        <>
+          <Header />
+          <h2>
+            register as a member of <i>{name}</i>
+          </h2>
+        </>
+      );
+  }
+
+  let textInputs: ReactNode;
+  switch (mode) {
+    case Mode.change:
+      textInputs = (
+        <div>
+          <input
+            type={visible ? "text" : "password"}
+            id="password"
+            name="password"
+            placeholder="current password"
+            minLength={8}
+            value={currentPassword}
+            required
+            onChange={(evt) => {
+              setError("");
+              setCurrentPassword(evt.target.value);
+            }}
+          />
+          <hr style={{ margin: "8px" }} />
+        </div>
+      );
+      break;
+    case Mode.register:
+      textInputs = (
+        <div className="new-player-inputs">
+          <div>
+            <label>name</label>
+            <input
+              type="text"
+              required
+              value={player.display_name}
+              onChange={(e) => {
+                setPlayer({
+                  ...player,
+                  display_name: e.target.value,
+                  username: e.target.value.toLowerCase().replace(/\W/g, ""),
+                });
+              }}
+            />
+          </div>
+          <div>
+            <label>username</label>
+            <input
+              type="text"
+              required
+              value={player.username}
+              onChange={(e) => {
+                setPlayer({ ...player, username: e.target.value });
+              }}
+            />
+          </div>
+          <div>
+            <label>number (optional)</label>
+            <input
+              type="text"
+              value={player.number || ""}
+              onChange={(e) => {
+                setPlayer({ ...player, number: e.target.value });
+              }}
+            />
+          </div>
+          <div>
+            <label>email (optional)</label>
+            <input
+              type="email"
+              value={player.email || ""}
+              onChange={(e) => {
+                setPlayer({ ...player, email: e.target.value });
+              }}
+            />
+          </div>
+          <hr style={{ margin: "8px" }} />
+        </div>
+      );
+      break;
+  }
+
+  let passwordInputs = (
     <>
-      {user ? (
-        <h2> change your password </h2>
-      ) : (
-        <h2>
-          set your password,
-          <br />
-          {name}
-        </h2>
-      )}
-      {!user && username && (
-        <span>
-          your username is: <i>{username}</i>
-        </span>
-      )}
+      <div>
+        <input
+          type={visible ? "text" : "password"}
+          id="password"
+          name="password"
+          placeholder="password"
+          minLength={8}
+          value={password}
+          required
+          onChange={(evt) => {
+            setError("");
+            setPassword(evt.target.value);
+          }}
+        />
+      </div>
+      <div>
+        <input
+          type={visible ? "text" : "password"}
+          id="password-repeat"
+          name="password-repeat"
+          placeholder="repeat password"
+          minLength={8}
+          value={passwordr}
+          required
+          onChange={(evt) => {
+            setError("");
+            setPasswordr(evt.target.value);
+          }}
+        />
+      </div>
+    </>
+  );
+
+  return mode ? (
+    <>
+      {header}
+      <hr style={{ width: "100%" }} />
       <form onSubmit={handleSubmit}>
         <div
           style={{
             display: "flex",
             alignItems: "center",
+            justifyContent: "center",
+            flexDirection: "column",
           }}
         >
-          <div
-            style={{
-              marginLeft: "48px",
-              marginRight: "8px",
-              display: "flex",
-              justifyContent: "center",
-              flexDirection: "column",
-            }}
-          >
-            {user && (
-              <div>
-                <input
-                  type={visible ? "text" : "password"}
-                  id="password"
-                  name="password"
-                  placeholder="current password"
-                  minLength={8}
-                  value={currentPassword}
-                  required
-                  onChange={(evt) => {
-                    setError("");
-                    setCurrentPassword(evt.target.value);
-                  }}
-                />
-                <hr
-                  style={{
-                    margin: "8px",
-                    borderStyle: "inset",
-                    display: "block",
-                  }}
-                />
-              </div>
-            )}
-            <div>
-              <input
-                type={visible ? "text" : "password"}
-                id="password"
-                name="password"
-                placeholder="password"
-                minLength={8}
-                value={password}
-                required
-                onChange={(evt) => {
-                  setError("");
-                  setPassword(evt.target.value);
-                }}
-              />
-            </div>
-            <div>
-              <input
-                type={visible ? "text" : "password"}
-                id="password-repeat"
-                name="password-repeat"
-                placeholder="repeat password"
-                minLength={8}
-                value={passwordr}
-                required
-                onChange={(evt) => {
-                  setError("");
-                  setPasswordr(evt.target.value);
-                }}
-              />
-            </div>
-          </div>
+          {textInputs}
+          {passwordInputs}
           <div
             style={{
               background: "unset",
-              fontSize: "xx-large",
+              fontSize: "medium",
               cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
             }}
             onClick={() => setVisible(!visible)}
           >
-            {visible ? <Eye /> : <EyeSlash />}
+            {visible ? <Eye /> : <EyeSlash />} show passwords
           </div>
         </div>
         <div>{error && <span style={{ color: "red" }}>{error}</span>}</div>
@@ -201,5 +334,7 @@ export const SetPassword = () => {
         {loading && <span className="loader" />}
       </form>
     </>
+  ) : (
+    <span className="loader" />
   );
 };

src/TeamPanel.tsx

@@ -2,9 +2,16 @@ import { FormEvent, useEffect, useState } from "react";
 import { apiAuth, loadPlayers, User } from "./api";
 import { useSession } from "./Session";
 import { ErrorState } from "./types";
+import { useNavigate } from "react-router";
 
-export const TeamPanel = () => {
-  const { teams } = useSession();
+const TeamPanel = () => {
+  const { user, teams } = useSession();
+  const navigate = useNavigate();
+  useEffect(() => {
+    user?.scopes.includes(`team:${teams?.activeTeam}`) ||
+      teams?.activeTeam === 42 ||
+      navigate("/", { replace: true });
+  }, [user]);
   const newPlayerTemplate = {
     id: 0,
     username: "",
@@ -199,3 +206,4 @@ export const TeamPanel = () => {
     );
   } else <span className="loader" />;
 };
+export default TeamPanel;