gender mandatory

.env.example

@@ -1,3 +1,8 @@
 VITE_BASE_URL=
 SECRET_KEY="tg07Cp0daCpcbeeFw+lI4RG2lEuT8oq5xOwB5ETs9YaJTylG1euC4ogjTK4zym/d"
-ACCESS_TOKEN_EXPIRE_MINUTES = 30
+ACCESS_TOKEN_EXPIRE_MINUTES=30
+DB_HOST=db
+DB_NAME=cutt
+DB_USER=postgres
+DB_PASS=password
+DB_PORT=5432

.python-version

@@ -0,0 +1 @@
+3.13

Dockerfile

@@ -0,0 +1,16 @@
+FROM ghcr.io/astral-sh/uv:alpine
+
+EXPOSE 8000
+
+ENV PYTHONUNBUFFERED=1 \
+    PYTHONDONTWRITEBYTECODE=1 \
+    PORT=8000 \
+    UV_NO_DEV=1
+
+WORKDIR /app
+COPY pyproject.toml .python-version /app
+RUN uv sync
+
+COPY . /app
+
+CMD uv run fastapi run cutt/main.py

compose.yml

@@ -0,0 +1,48 @@
+services:
+  frontend-build:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile.frontend
+    container_name: cutt-frontend
+    environment:
+      VITE_BASE_URL: ${VITE_BASE_URL}
+    volumes:
+      - dist:/app/dist
+
+  backend:
+    build: .
+    container_name: cutt-backend
+    depends_on:
+      frontend-build:
+        condition: service_completed_successfully
+      db:
+        condition: service_healthy
+        restart: true
+    restart: unless-stopped
+    env_file:
+      - .env
+    volumes:
+      - dist:/app/dist
+    ports:
+      - 8000:8000
+
+  db:
+    image: postgres:18
+    container_name: cutt-db
+    restart: unless-stopped
+    volumes:
+      - db:/var/lib/postgresql
+    environment:
+      - POSTGRES_DB=${DB_NAME}
+      - POSTGRES_USER=${DB_USER}
+      - POSTGRES_PASSWORD=${DB_PASS}
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}"]
+      interval: 10s
+      retries: 5
+      start_period: 30s
+      timeout: 10s
+
+volumes:
+  dist:
+  db:

cutt/analysis.py

@@ -344,6 +344,7 @@ def last_submissions(
                     times[r.time.date()] = {}
                 times[r.time.date()][r.user] = (
                     times[r.time.date()].get(r.user, "")
+                    + " "
                     + translate_tablename[survey.__tablename__]
                 )
         return times

cutt/player.py

@@ -110,7 +110,7 @@ class DisablePlayerRequest(BaseModel):
     player_id: int
 
 
-def disable_player(
+def remove_player_from_team(
     r: DisablePlayerRequest,
     request: Annotated[TeamScopedRequest, Depends(verify_team_scope)],
 ):
@@ -123,6 +123,47 @@ def disable_player(
             .join(Team)
             .where(Team.id == request.team_id, P.id == r.player_id)
         ).one_or_none()
+        if player:
+            team = session.exec(select(Team).where(Team.id == request.team_id)).one()
+            player.teams.remove(team)
+            session.add(team)
+            session.commit()
+            return PlainTextResponse(f"removed {player.display_name} from {team.name}.")
+        else:
+            raise HTTPException(
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail="no such player found in your team",
+            )
+
+
+def disable_player_team(
+    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)
+            .join(PlayerTeamLink)
+            .join(Team)
+            .where(Team.id == request.team_id, P.id == r.player_id)
+        ).one_or_none()
+        if player:
+            player.disabled = True
+            session.add(player)
+            session.commit()
+            return PlainTextResponse(f"disabled {player.display_name}")
+        else:
+            raise HTTPException(
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail="no such player found in your team",
+            )
+
+
+def disable_player(r: DisablePlayerRequest):
+    with Session(engine) as session:
+        player = session.exec(select(P).where(P.id == r.player_id)).one_or_none()
         if player:
             player.disabled = True
             session.add(player)
@@ -170,6 +211,8 @@ async def list_players(
             )
         ] + demo_players
 
+    allowed_scopes = set(user.scopes.split())
+
     with Session(engine) as session:
         current_user = session.exec(
             select(P)
@@ -177,7 +220,7 @@ async def list_players(
             .join(Team)
             .where(Team.id == team_id, P.disabled == False, P.id == user.id)
         ).one_or_none()
-        if not current_user:
+        if not current_user and f"team:{team_id}" not in allowed_scopes:
             raise HTTPException(
                 status_code=status.HTTP_400_BAD_REQUEST,
                 detail="you're not in this team",
@@ -208,10 +251,28 @@ async def list_players(
 
 
 def read_teams_me(user: Annotated[P, Depends(get_current_active_user)]):
+    allowed_scopes = set(user.scopes.split())
+    team_ids = {
+        int(scope.split(":")[1])
+        for scope in allowed_scopes
+        if scope.startswith("team:")
+    }
     with Session(engine) as session:
-        return [p.teams for p in session.exec(select(P).where(P.id == user.id))][0] + [
+        member_in = [p.teams for p in session.exec(select(P).where(P.id == user.id))][0]
-            {"country": "nowhere", "id": 42, "location": "everywhere", "name": "DEMO"}
+        team_ids -= {team.id for team in member_in}
+        team_manager_in = session.exec(select(Team).where(Team.id.in_(team_ids))).all()
+        return (
+            member_in
+            + list(team_manager_in)
+            + [
+                {
+                    "country": "nowhere",
+                    "id": 42,
+                    "location": "everywhere",
+                    "name": "DEMO",
+                }
             ]
+        )
 
 
 player_router.add_api_route(
@@ -226,7 +287,7 @@ player_router.add_api_route(
 )
 player_router.add_api_route(
     "/{team_id}",
-    endpoint=disable_player,
+    endpoint=remove_player_from_team,
     methods=["DELETE"],
 )
 player_router.add_api_route(
@@ -246,6 +307,12 @@ player_router.add_api_route(
     methods=["GET"],
     dependencies=[Security(get_current_active_user, scopes=["admin"])],
 )
+player_router.add_api_route(
+    "/disable",
+    endpoint=disable_player,
+    methods=["DELETE"],
+    dependencies=[Security(get_current_active_user, scopes=["admin"])],
+)
 player_router.add_api_route("/me", endpoint=read_player_me, methods=["GET"])
 player_router.add_api_route("/me/teams", endpoint=read_teams_me, methods=["GET"])
 player_router.add_api_route(

cutt/security.py

@@ -337,6 +337,7 @@ class RegisterRequest(BaseModel):
     team_id: int
     display_name: str
     username: str
+    gender: str | None
     password: str
     email: str | None
     number: str | None
@@ -379,6 +380,7 @@ async def register(req: RegisterRequest):
             hashed_password=get_password_hash(req.password),
             display_name=req.display_name,
             email=req.email if req.email else None,
+            gender=req.gender,
             number=req.number,
             disabled=False,
             teams=[team],

forgotten_password.py

@@ -0,0 +1,17 @@
+import sys
+from sqlmodel import Session, select
+from cutt.security import set_password_token
+from cutt.db import Player, TokenDB, engine
+
+
+if len(sys.argv) > 1:
+    with Session(engine) as session:
+        for p in session.exec(
+            select(Player.username).where(Player.username == sys.argv[1].strip())
+        ):
+            print(p)
+            token = set_password_token(p)
+            if token:
+                session.add(TokenDB(token=token))
+            print(f"https://cutt.0124816.xyz/setpassword?token={token}")
+            session.commit()

frontend/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "bulma": "^1.0.4",
     "jwt-decode": "^4.0.0",
+    "lucide-react": "^0.562.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-sortablejs": "^6.1.4",

frontend/src/App.css

@@ -1,734 +0,0 @@
-body {
-  background-color: aliceblue;
-  position: relative;
-  z-index: 0;
-  color: black;
-  text-align: center;
-  overflow-wrap: anywhere;
-  height: 100%;
-}
-
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 8px;
-}
-
-footer {
-  margin-top: 24px;
-  font-size: x-small;
-}
-
-.fixed-footer {
-  position: absolute;
-  bottom: 4px;
-  left: 8px;
-}
-
-dialog {
-  border-radius: 1em;
-}
-
-/*=========Network Controls=========*/
-
-.infobutton {
-  position: fixed;
-  right: 8px;
-  bottom: 8px;
-  padding: 0.4em;
-  border-radius: 1em;
-  background-color: rgba(0, 0, 0, 0.3);
-  font-size: medium;
-  margin-bottom: 16px;
-  margin-right: 16px;
-}
-
-.controls {
-  z-index: 9;
-  position: absolute;
-  color: black;
-  top: 1vh;
-  right: 0px;
-  padding: 8px;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
-
-  .control {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    max-width: 240px;
-    margin: 0px;
-    background-color: #f0f8ffdd;
-
-    .slider,
-    span {
-      padding-left: 4px;
-      padding-right: 4px;
-    }
-  }
-
-  #three-slider {
-    display: flex;
-    flex-direction: row;
-    margin: auto;
-    justify-content: center;
-    align-items: center;
-  }
-}
-
-/* The switch - the box around the slider */
-.switch {
-  position: relative;
-  width: 48px;
-  height: 24px;
-}
-
-/* Hide default HTML checkbox */
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-/* The slider */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  border-radius: 34px;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 18px;
-  width: 18px;
-  left: 3px;
-  bottom: 3px;
-  background-color: white;
-  border-radius: 50%;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-
-input:checked + .slider {
-  background-color: #2196f3;
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px #2196f3;
-}
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(24px);
-  -ms-transform: translateX(24px);
-  transform: translateX(24px);
-}
-
-.grey {
-  opacity: 66%;
-}
-
-.hint {
-  position: absolute;
-  font-size: 80%;
-  padding: 8px;
-  top: auto;
-  left: 4px;
-  bottom: auto;
-  right: 4px;
-  z-index: -1;
-}
-
-input,
-select {
-  padding: 0.2em 16px;
-  margin-top: 0.25em;
-  margin-bottom: 0.25em;
-  border-radius: 1em;
-  color: black;
-  background-color: white;
-}
-
-h1,
-h2,
-h3 {
-  margin-top: 0px;
-  margin-bottom: 0px;
-  padding: 8px 16px;
-}
-
-.stack {
-  display: flex;
-
-  button,
-  img {
-    padding: 0px 1em 4px 1em;
-    margin: 3px auto;
-  }
-}
-
-.column {
-  flex-direction: column;
-}
-
-.container {
-  display: flex;
-  flex-wrap: nowrap;
-  width: min(96vw, 900px);
-}
-
-.dragbox {
-  display: flex;
-  flex-direction: column;
-  min-height: 32px;
-  height: 92%;
-}
-
-.box {
-  position: relative;
-  flex: 1;
-  border-width: 3px;
-  border-style: solid;
-  border-radius: 16px;
-
-  h4 {
-    margin: 4px;
-  }
-  &.one {
-    max-width: min(96%, 768px);
-    margin: 4px auto;
-  }
-
-  padding: 4px;
-  margin: 4px 0.5%;
-}
-
-.reservoir {
-  display: flex;
-  flex-direction: unset;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  width: 100%;
-}
-
-.item {
-  cursor: pointer;
-  font-size: medium;
-  border: 2px solid;
-  border-radius: 1em;
-  margin: 3px auto;
-  padding: 5px 0.8em;
-}
-
-.extra-margin {
-  padding: 0px 8px;
-  margin: auto;
-}
-
-button {
-  margin: 4px;
-  font-weight: bold;
-  color: aliceblue;
-  background-color: black;
-  border-radius: 1.2em;
-  z-index: 1;
-
-  &:hover {
-    opacity: 80%;
-  }
-}
-
-#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;
-  border-radius: 16px;
-  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);
-  }
-
-  .control {
-    font-size: 80%;
-    margin: 0px;
-  }
-}
-
-@media only screen and (max-width: 768px) {
-  #control-panel {
-    grid-template-columns: 1fr;
-  }
-
-  .networkroute {
-    display: none;
-  }
-
-  .submit_text {
-    display: none;
-  }
-
-  .submit {
-    position: fixed;
-    right: 16px;
-    bottom: 16px;
-    padding: 0.4em;
-    border-radius: 1em;
-    background-color: #36c8;
-    font-size: xx-large;
-    margin-bottom: 16px;
-    margin-right: 16px;
-  }
-
-  .wavering {
-    animation: blink 40s infinite;
-  }
-}
-
-::backdrop {
-  background-image: linear-gradient(
-    45deg,
-    magenta,
-    rebeccapurple,
-    dodgerblue,
-    green
-  );
-  opacity: 0.75;
-}
-
-.tab-button {
-  color: black;
-  flex: 1;
-  background-color: #bfbfbf;
-  border: none;
-  margin: 4px auto;
-  cursor: pointer;
-  opacity: 80%;
-}
-
-.tab-button.active {
-  opacity: unset;
-  font-weight: bold;
-  background-color: black;
-  color: white;
-}
-
-.navbar {
-  span {
-    padding: 4px;
-  }
-
-  button {
-    font-size: medium;
-    margin: 4px 0.5%;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    opacity: 50%;
-
-    &:hover {
-      opacity: 80%;
-    }
-  }
-}
-
-/* Style the tab content (and add height:100% for full page content) */
-.tabcontent {
-  display: none;
-  height: 100%;
-}
-
-.renew {
-  cursor: pointer;
-  font-weight: bold;
-  position: absolute;
-  top: 0;
-  right: 8px;
-  font-size: 150%;
-}
-
-/*======LOGO=======*/
-
-.logo {
-  position: relative;
-  text-align: center;
-  height: 140px;
-
-  span {
-    display: block;
-    margin: 2px;
-  }
-
-  img {
-    display: block;
-    margin: auto;
-  }
-
-  h3 {
-    position: absolute;
-    font-size: medium;
-    width: 140px;
-    top: 33%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: aliceblue;
-    background-color: black;
-    border-radius: unset;
-    letter-spacing: 8px;
-    padding: 0px 40px;
-    font-family: monospace;
-  }
-}
-
-.avatars {
-  margin: 16px auto;
-}
-
-.avatar {
-  background-color: #f0f8ff88;
-  font-weight: bold;
-  font-size: 110%;
-  padding: 3px 1em;
-  width: fit-content;
-  border: 3px solid;
-  border-radius: 1em;
-  margin: 4px auto;
-}
-
-.group-avatar {
-  background-color: #f0f8ff88;
-  color: inherit;
-  font-weight: bold;
-  font-size: 90%;
-  padding: 3px 1em;
-  width: fit-content;
-  border: 3px solid;
-  border-radius: 1em;
-  margin: 4px auto;
-}
-
-.user-info {
-  display: grid;
-  grid-template-columns: 8em 12em;
-  gap: 2px 16px;
-
-  div {
-    text-align: left;
-  }
-}
-
-/*=======CONTEXT MENU=======*/
-.context-menu {
-  z-index: 3;
-  min-width: 8em;
-  position: absolute;
-  background: aliceblue;
-  box-shadow: 4px 4px black;
-  color: black;
-  border: 3px solid black;
-  border-radius: 16px;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-
-  li {
-    padding: 4px 0.5em;
-    border-bottom: 2px solid #0008;
-    border-radius: 0;
-    cursor: pointer;
-  }
-
-  li:last-child {
-    border-bottom: none;
-  }
-}
-
-.networkroute {
-  z-index: 3;
-  position: absolute;
-  top: 24px;
-  left: 48px;
-}
-
-/*========TEAM PANEL========*/
-.team-panel {
-  max-width: 800px;
-  padding: 1em;
-  border: 3px solid black;
-  box-shadow: 8px 8px black;
-  margin: 1em;
-
-  input {
-    max-width: 300px;
-  }
-  select {
-    max-width: 335px;
-  }
-}
-
-.team-player {
-  color: black;
-  background-color: #36c4;
-  border: 1px solid black;
-  border-radius: 1.5em;
-  margin: 4px;
-  padding: 0.2em 0.5em;
-
-  &:hover {
-    background-color: #36c8;
-  }
-
-  &.new-player {
-    background-color: #3838;
-  }
-
-  &.disable-player {
-    background-color: #e338;
-  }
-}
-
-.new-player-inputs {
-  display: flex;
-  flex-direction: column;
-  margin: auto;
-
-  div {
-    display: grid;
-    grid-template-columns: 20ch auto;
-
-    @media only screen and (max-width: 768px) {
-      grid-template-columns: auto;
-      place-items: center;
-    }
-
-    label {
-      text-align: left;
-      width: 20ch;
-      margin: auto 1em;
-    }
-
-    input,
-    select {
-      width: 90%;
-      margin: 4px 0;
-    }
-  }
-}
-
-.mmp {
-  background-color: lightskyblue;
-}
-
-.fmp {
-  background-color: salmon;
-}
-
-@keyframes blink {
-  0% {
-    background-color: #8888;
-  }
-
-  13% {
-    background-color: #8888;
-  }
-
-  15% {
-    background-color: #f00a;
-  }
-
-  17% {
-    background-color: #8888;
-  }
-
-  38% {
-    background-color: #8888;
-  }
-
-  40% {
-    background-color: #ff0a;
-  }
-
-  42% {
-    background-color: #8888;
-  }
-
-  63% {
-    background-color: #8888;
-  }
-
-  65% {
-    background-color: #248f24aa;
-  }
-
-  67% {
-    background-color: #8888;
-  }
-
-  88% {
-    background-color: #8888;
-  }
-
-  90% {
-    background-color: #4700b3aa;
-  }
-
-  92% {
-    background-color: #8888;
-  }
-
-  100% {
-    background-color: #8888;
-  }
-}
-
-/*======SPINNER=======*/
-
-.loader {
-  display: block;
-  border-radius: 16px;
-  position: relative;
-  height: 12px;
-  width: 96%;
-  margin: auto;
-  border: 4px solid black;
-  overflow: hidden;
-}
-
-.loader::after {
-  content: "";
-  width: 32%;
-  height: 120%;
-  background: #36c;
-  position: absolute;
-  top: -2px;
-  left: 0;
-  box-sizing: border-box;
-  animation: animloader 2s linear infinite;
-}
-
-@keyframes animloader {
-  0% {
-    left: 0;
-    transform: translateX(-100%);
-  }
-
-  100% {
-    left: 100%;
-    transform: translateX(0%);
-  }
-}
-
-.calendar-container {
-  position: relative;
-  margin: 20px auto;
-  font-size: small;
-}
-
-.month-navigation {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px;
-  border-top: 2px solid grey;
-  border-bottom: 2px solid grey;
-}
-
-.month-navigation button {
-  cursor: pointer;
-  padding: 4px 8px;
-  border: none;
-  color: black;
-  background-color: transparent;
-}
-
-.month-navigation span {
-  font-weight: bold;
-}
-
-.calendar {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 8px;
-}
-
-.day {
-  padding: 2px;
-  border: 1px solid grey;
-  cursor: pointer;
-  display: flex;
-}
-
-.selected-day {
-  border: 4px solid grey;
-}
-
-.weekday {
-  border-bottom: 3px solid black;
-  margin: 0 1em;
-}
-
-.day-circle {
-  text-align: center;
-  border-radius: 1.5em;
-  width: 1.5em;
-  height: 1.5em;
-  padding: 0;
-  margin: auto;
-  border: 2px solid transparent;
-}
-
-.today {
-  border-radius: 1.6em;
-  border: 4px solid red;
-  text-align: center;
-}
-
-.has-event {
-  border-radius: 1.5em;
-  background-color: lightskyblue;
-}
-
-.active-player {
-  border-radius: 1.5em;
-  border: 4px solid rebeccapurple;
-}
-
-.events {
-  font-size: large;
-  padding: 20px;
-  ul > li {
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
-  }
-}

frontend/src/App.tsx

@@ -1,50 +0,0 @@
-import "./App.css";
-import Footer from "./Footer";
-import Header from "./Header";
-import Rankings from "./Rankings";
-import { BrowserRouter, Routes, Route } from "react-router";
-import { SessionProvider } from "./Session";
-import { GraphComponent } from "./Network";
-import MVPChart from "./MVPChart";
-import { SetPassword } from "./SetPassword";
-import { ThemeProvider } from "./ThemeProvider";
-import TeamPanel from "./TeamPanel";
-
-const Maintenance = () => {
-  return (
-    <div style={{ textAlign: "center", padding: "20px" }}>
-      <h2>We are under maintenance.</h2>
-      <p>Please check back later. Thank you for your patience.</p>
-      <span style={{ fontSize: "xx-large" }}>🚧</span>
-    </div>
-  );
-};
-
-function App() {
-  return (
-    <ThemeProvider>
-      <BrowserRouter>
-        <Routes>
-          <Route path="/password" element={<SetPassword />} />
-          <Route
-            path="/*"
-            element={
-              <SessionProvider>
-                <Header />
-                <Routes>
-                  <Route index element={<Rankings />} />
-                  <Route path="network" element={<GraphComponent />} />
-                  <Route path="mvp" element={<MVPChart />} />
-                  <Route path="changepassword" element={<SetPassword />} />
-                  <Route path="team" element={<TeamPanel />} />
-                </Routes>
-                <Footer />
-              </SessionProvider>
-            }
-          />
-        </Routes>
-      </BrowserRouter>
-    </ThemeProvider>
-  );
-}
-export default App;

frontend/src/CUTT.tsx

@@ -7,6 +7,8 @@ import Rankings from "./Form";
 import TeamPanel from "./TeamPanel";
 import { GraphComponent } from "./Network";
 import MVPChart from "./MVPChart";
+import { SetPassword } from "./SetPassword";
+import { Register } from "./Register";
 
 const Maintenance = () => {
   return (
@@ -24,6 +26,8 @@ function App() {
   return (
     <BrowserRouter>
       <Routes>
+        <Route path="/register" element={<Register />} />
+        <Route path="/setpassword" element={<SetPassword />} />
         <Route
           path="/*"
           element={

frontend/src/Calendar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { JSX, useEffect, useState } from "react";
 import { apiAuth } from "./api";
 import { useSession } from "./Session";
 
@@ -55,16 +55,35 @@ const Calendar = ({ playerId }: { playerId: number }) => {
   // Render month navigation
   const renderMonthNavigation = () => {
     return (
-      <div className="month-navigation">
+      <div className="field has-addons">
-        <button onClick={handlePrevMonth}>&lt;</button>
+        <p className="control">
-        <span>
+          <button
-          <button onClick={() => setSelectedDate(new Date())}>📅</button>
+            className="button is-light is-size-7-mobile"
+            onClick={handlePrevMonth}
+          >
+            &lt;
+          </button>
+        </p>
+        <p className="control">
+          <button
+            className="button is-light is-size-7-mobile"
+            onClick={() => setSelectedDate(new Date())}
+          >
+            📅{" "}
             {selectedDate.toLocaleString("default", {
               month: "long",
               year: "numeric",
             })}
-        </span>
+          </button>
-        <button onClick={handleNextMonth}>&gt;</button>
+        </p>
+        <p className="control">
+          <button
+            className="button is-light is-size-7-mobile"
+            onClick={handleNextMonth}
+          >
+            &gt;
+          </button>
+        </p>
       </div>
     );
   };
@@ -89,11 +108,14 @@ const Calendar = ({ playerId }: { playerId: number }) => {
       const date = new Date(0);
       date.setDate(i + 5);
       days.push(
-        <div key={"weekday_" + i} className="weekday">
+        <button
+          key={"weekday_" + i}
+          className="button is-size-7-mobile is-white is-static"
+        >
           {date.toLocaleString("default", {
             weekday: "narrow",
           })}
-        </div>
+        </button>
       );
     }
 
@@ -109,34 +131,34 @@ const Calendar = ({ playerId }: { playerId: number }) => {
       const todaysEvents = getEventsForDay(date);
 
       days.push(
-        <div
+        <button
           key={date.getDate()}
           className={
-            "day" +
+            "cell button is-size-7-mobile" +
             (date.toDateString() === selectedDate.toDateString()
-              ? " selected-day"
+              ? " is-focused is-active is-primary is-light"
+              : " is-white") +
+            (date.toDateString() === new Date().toDateString()
+              ? " is-danger has-text-weight-extrabold"
+              : "") +
+            (todaysEvents ? " is-warning is-light" : "") +
+            (todaysEvents && playerId in todaysEvents
+              ? " is-hovered has-text-weight-semibold"
               : "")
           }
           onClick={() => handleDayClick(date)}
-        >
-          <div
-            className={
-              "day-circle" +
-              (date.toDateString() === new Date().toDateString()
-                ? " today"
-                : "") +
-              (todaysEvents ? " has-event" : "") +
-              (todaysEvents && playerId in todaysEvents ? " active-player" : "")
-            }
         >
           {day}
-          </div>
+        </button>
-        </div>
       );
       day++;
     }
 
-    return <div className="calendar">{days}</div>;
+    return (
+      <div className="fixed-grid has-7-cols">
+        <div className="grid is-gap-0.5">{days}</div>
+      </div>
+    );
   };
 
   // Render events for the selected day
@@ -144,29 +166,38 @@ const Calendar = ({ playerId }: { playerId: number }) => {
     const eventsForDay = getEventsForDay(selectedDate);
     return (
       <div className="events">
-        {eventsForDay && (
+        {eventsForDay &&
-          <ul>
+          Object.entries(eventsForDay).map(([id, sub]) => {
-            {Object.entries(eventsForDay).map(([id, sub]) => {
             const name = players?.find((p) => p.id === Number(id));
             return (
-                <li key={id}>
+              <p className="field">
-                  {name !== undefined ? name.display_name : ""}:{" "}
+                <div className="control" key={id}>
-                  <span style={{ letterSpacing: 8 }}>{sub}</span>
+                  <div className="tags are-medium has-addons">
-                </li>
+                    <span className="tag is-warning is-size-7-mobile">
+                      {name !== undefined ? name.display_name : ""}
+                    </span>
+                    <span className="tag is-primary is-light is-size-7-mobile">
+                      {sub}
+                    </span>
+                  </div>
+                </div>
+              </p>
             );
           })}
-          </ul>
-        )}
       </div>
     );
   };
 
   return (
-    <div className="calendar-container">
+    <div className="block is-size-7-mobile">
-      <h2>Latest Submissions</h2>
+      <h2 className="title is-4">Latest Submissions</h2>
+      <div className="columns is-6">
+        <div className="column" style={{ maxWidth: 600 }}>
           {renderMonthNavigation()}
           {renderCalendar()}
-      {renderEvents()}
+        </div>
+        <div className="column is-narrow">{renderEvents()}</div>
+      </div>
     </div>
   );
 };

frontend/src/Footer.tsx

@@ -1,10 +1,4 @@
-import { useLocation } from "react-router";
-import { Link } from "react-router";
-import { useSession } from "./Session";
-
 export default function Footer() {
-  const location = useLocation();
-  const { user, teams } = useSession();
   return (
     <footer className="footer">
       <div className="content has-text-centered">

frontend/src/Form.tsx

@@ -300,7 +300,9 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
         onSubmit={handleSubmit}
       />
       {loading ? (
+        <div className="container">
           <progress className="progress is-primary" max="100"></progress>
+        </div>
       ) : (
         <div className="columns container is-mobile is-1-mobile">
           <div className="column">
@@ -420,7 +422,9 @@ function ChemistryDnDMobile({ user, teams, players }: PlayerInfoProps) {
         onSubmit={handleSubmit}
       />
       {loading ? (
+        <div className="container">
           <progress className="progress is-primary" max="100"></progress>
+        </div>
       ) : (
         <div className="columns container is-multiline is-mobile is-1-mobile">
           <div className="column is-full is-flex is-justify-content-center">
@@ -521,7 +525,9 @@ export default function Rankings() {
           <TypeDnD {...{ user, teams, players }} />
         </TabController>
       ) : (
+        <div className="container">
           <progress className="progress is-primary" max="100"></progress>
+        </div>
       )}
     </div>
   );

frontend/src/Header.tsx

@@ -38,13 +38,25 @@ export default function Header() {
       >
         {user?.scopes.includes(`team:${teams?.activeTeam}`) && (
           <div className="navbar-start">
-            <Link className="navbar-item" to="/network">
+            <Link
+              onClick={() => setBurgerActive(false)}
+              className="navbar-item"
+              to="/network"
+            >
               <span>Sociogram</span>
             </Link>
-            <Link className="navbar-item" to="/mvp">
+            <Link
+              onClick={() => setBurgerActive(false)}
+              className="navbar-item"
+              to="/mvp"
+            >
               <span>MVP</span>
             </Link>
-            <Link className="navbar-item" to="/team">
+            <Link
+              onClick={() => setBurgerActive(false)}
+              className="navbar-item"
+              to="/team"
+            >
               <span>Team</span>
             </Link>
           </div>

frontend/src/Register.tsx

@@ -0,0 +1,245 @@
+import { jwtDecode, JwtPayload } from "jwt-decode";
+import { FormEvent, useEffect, useState } from "react";
+import { baseUrl, Gender } from "./api";
+import { useNavigate } from "react-router";
+
+interface PassToken extends JwtPayload {
+  username: string;
+  name: string;
+  team_id: number;
+}
+
+export const Register = () => {
+  const [name, setName] = useState("");
+  const [username, setUsername] = useState("");
+  const [gender, setGender] = useState<Gender>();
+  const [number, setNumber] = useState("");
+  const [email, setEmail] = useState("");
+  const [teamName, setTeamName] = useState("");
+  const [teamID, setTeamID] = useState<number>();
+  const [password, setPassword] = useState("");
+  const [passwordr, setPasswordr] = useState("");
+  const [passwordHint, setPasswordHint] = 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<PassToken>(token);
+        if (payload.sub === "register") {
+          if (payload.team_id) setTeamID(payload.team_id);
+        } else {
+          setError("not a valid token for registration");
+        }
+        if (payload.name) setTeamName(payload.name);
+      } catch (InvalidTokenError) {
+        setError("not a valid token");
+      }
+    } else setError("no token found");
+  }, []);
+
+  function passwordCheck() {
+    if (password === passwordr) {
+      setPasswordHint("");
+    } else setPasswordHint("passwords do not match");
+  }
+  useEffect(() => passwordCheck(), [passwordr]);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (password === passwordr) {
+      const req = new Request(`${baseUrl}api/register`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          display_name: name,
+          username: username,
+          email: email,
+          number: number,
+          gender: gender,
+          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: username, password: password },
+        });
+      }
+
+      if (!resp.ok) {
+        const { detail } = await resp.json();
+        if (detail) setError(detail);
+        else setError("unauthorized");
+        throw new Error("Unauthorized");
+      }
+    } else setError("the passwords did not match");
+  }
+
+  return (
+    <section className="section is-medium">
+      <div className="container is-max-tablet">
+        <div className="block">
+          <p className="level-item has-text-centered">
+            <img
+              className="image"
+              alt="cool ultimate team tool"
+              src="cutt.svg"
+              style={{ width: 200 }}
+            />
+          </p>
+        </div>
+        <h1 className="title">
+          Register {teamName && `in team "${teamName}"`}
+        </h1>
+        <form onSubmit={handleSubmit}>
+          <div className="field">
+            <div className="field">
+              <label className="label">name</label>
+              <div className="control">
+                <input
+                  className="input"
+                  type="text"
+                  required
+                  value={name}
+                  onChange={(e) => {
+                    setName(e.target.value);
+                    setError("");
+                  }}
+                />
+              </div>
+            </div>
+            <div className="field">
+              <label className="label">username</label>
+              <div className="control">
+                <input
+                  className="input"
+                  type="text"
+                  required
+                  value={username}
+                  onChange={(e) => {
+                    setUsername(e.target.value);
+                    setError("");
+                  }}
+                />
+              </div>
+            </div>
+            <div className="field">
+              <label className="label">password</label>
+              <input
+                className="input"
+                type={"password"}
+                id="password"
+                name="password"
+                placeholder="password"
+                minLength={8}
+                value={password}
+                required
+                onChange={(evt) => {
+                  setError("");
+                  setPassword(evt.target.value);
+                }}
+              />
+            </div>
+            <div className="field">
+              <input
+                className={"input" + (passwordHint ? " is-danger" : "")}
+                type={"password"}
+                id="password-repeat"
+                name="password-repeat"
+                placeholder="repeat password"
+                minLength={8}
+                value={passwordr}
+                required
+                onChange={(evt) => {
+                  setError("");
+                  setPasswordr(evt.target.value);
+                }}
+              />
+              <p className={"help is-danger"}>{passwordHint}</p>
+            </div>
+            <hr />
+            <div className="field">
+              <label className="label">gender</label>
+              <div className="control">
+                <div className="select">
+                  <select
+                    name="gender"
+                    value={gender}
+                    required
+                    onChange={(e) => {
+                      setGender(e.target.value as Gender);
+                      setError("");
+                    }}
+                  >
+                    <option value={undefined}></option>
+                    <option value="fmp">FMP</option>
+                    <option value="mmp">MMP</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div className="field">
+              <label className="label">
+                number <small>(optional)</small>
+              </label>
+              <div className="control">
+                <input
+                  className="input"
+                  type="text"
+                  value={number}
+                  onChange={(e) => {
+                    setNumber(e.target.value);
+                    setError("");
+                  }}
+                />
+              </div>
+            </div>
+            <div className="field">
+              <label className="label">
+                email <small>(optional)</small>
+              </label>
+              <div className="control">
+                <input
+                  className="input"
+                  type="email"
+                  value={email}
+                  onChange={(e) => {
+                    setEmail(e.target.value);
+                    setError("");
+                  }}
+                />
+              </div>
+              <p className="help">helpful in case of a forgotten password</p>
+            </div>
+          </div>
+          <p className={"help" + (error ? " is-danger" : " is-success")}>
+            {error}
+          </p>
+          <div className="field is-grouped is-grouped-centered">
+            <button className="button is-light is-success">register</button>
+          </div>
+        </form>
+      </div>
+    </section>
+  );
+};

frontend/src/SetPassword.tsx

@@ -1,11 +1,7 @@
 import { jwtDecode, JwtPayload } from "jwt-decode";
-import { ReactNode, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
-import { apiAuth, baseUrl, Gender, User } from "./api";
+import { baseUrl } 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 PassToken extends JwtPayload {
   username: string;
@@ -13,53 +9,46 @@ interface PassToken extends JwtPayload {
   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("");
-  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("");
+  const [passwordHint, setPasswordHint] = useState("");
   const [token, setToken] = useState("");
   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(() => {
+    const params = new URLSearchParams(window.location.search);
+    const token = params.get("token");
+    if (token) {
+      setToken(token);
+      try {
+        const payload = jwtDecode<PassToken>(token);
+        if (payload.sub === "set password") {
+          if (payload.name) setName(payload.name);
+          if (payload.username) setUsername(payload.username);
+        } else {
+          setError("not a valid token for setting your password");
+        }
+      } catch (InvalidTokenError) {
+        setError("not a valid token");
+      }
+    } else setError("no token found");
+  }, []);
+
+  function passwordCheck() {
+    if (password === passwordr) {
+      setPasswordHint("");
+    } else setPasswordHint("passwords do not match");
+  }
+  useEffect(() => passwordCheck(), [passwordr]);
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (password === passwordr) {
-      setLoading(true);
-      if (mode === Mode.change) {
-        //====CHANGING PASSWORD====
-        const resp = await apiAuth(
-          "player/change_password",
-          { current_password: currentPassword, new_password: password },
-          "POST"
-        );
-        setLoading(false);
-        if (resp.detail) setError(resp.detail);
-        else {
-          setError(resp);
-          setTimeout(() => navigate("/"), 2000);
-        }
-      } else if (mode === Mode.set) {
-        //====SETTING PASSWORD====
       const req = new Request(`${baseUrl}api/set_password`, {
         method: "POST",
         headers: {
@@ -91,198 +80,32 @@ 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");
   }
 
-  useEffect(() => {
+  return (
-    if (user) {
+    <section className="section is-medium">
-      setUsername(user.username);
+      <div className="container is-max-tablet">
-      setName(user.display_name);
+        <div className="block">
-      setMode(Mode.change);
+          <p className="level-item has-text-centered">
-    } else {
+            <img
-      const params = new URLSearchParams(window.location.search);
+              className="image"
-      const token = params.get("token");
+              alt="cool ultimate team tool"
-      if (token) {
+              src="cutt.svg"
-        setToken(token);
+              style={{ width: 200 }}
-        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" }} />
+          </p>
         </div>
-      );
+        <h1 className="title">
-      break;
+          Set password for {name && username && `${name} (${username})`}
-    case Mode.register:
+        </h1>
-      textInputs = (
+        <form onSubmit={handleSubmit}>
-        <div className="new-player-inputs">
+          <div className="field">
-          <div>
+            <div className="field">
-            <label>name</label>
+              <label className="label">password</label>
               <input
-              type="text"
+                className="input"
-              required
+                type={"password"}
-              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>gender</label>
-            <select
-              name="gender"
-              required
-              value={player.gender}
-              onChange={(e) => {
-                setPlayer({ ...player, gender: e.target.value as Gender });
-              }}
-            >
-              <option value={undefined}></option>
-              <option value="fmp">FMP</option>
-              <option value="mmp">MMP</option>
-            </select>
-          </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 = (
-    <>
-      <div>
-        <input
-          type={visible ? "text" : "password"}
                 id="password"
                 name="password"
                 placeholder="password"
@@ -295,9 +118,10 @@ export const SetPassword = () => {
                 }}
               />
             </div>
-      <div>
+            <div className="field">
               <input
-          type={visible ? "text" : "password"}
+                className={"input" + (passwordHint ? " is-danger" : "")}
+                type={"password"}
                 id="password-repeat"
                 name="password-repeat"
                 placeholder="repeat password"
@@ -309,47 +133,18 @@ export const SetPassword = () => {
                   setPasswordr(evt.target.value);
                 }}
               />
+              <p className={"help is-danger"}>{passwordHint}</p>
             </div>
-    </>
+            <hr />
-  );
-
-  return mode ? (
-    <>
-      {header}
-      <hr style={{ width: "100%" }} />
-      <form onSubmit={handleSubmit}>
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            flexDirection: "column",
-          }}
-        >
-          {textInputs}
-          {passwordInputs}
-          <div
-            style={{
-              background: "unset",
-              fontSize: "medium",
-              cursor: "pointer",
-              display: "flex",
-              alignItems: "center",
-              gap: "8px",
-            }}
-            onClick={() => setVisible(!visible)}
-          >
-            {visible ? <Eye /> : <EyeSlash />} show passwords
           </div>
+          <p className={"help" + (error ? " is-danger" : " is-success")}>
+            {error}
+          </p>
+          <div className="field is-grouped is-grouped-centered">
+            <button className="button is-light is-link">change password</button>
           </div>
-        <div>{error && <span style={{ color: "red" }}>{error}</span>}</div>
-        <button type="submit" value="login" style={{ fontSize: "small" }}>
-          submit
-        </button>
-        {loading && <span className="loader" />}
         </form>
-    </>
+      </div>
-  ) : (
+    </section>
-    <span className="loader" />
   );
 };

frontend/src/TeamPanel.tsx

@@ -70,29 +70,24 @@ const TeamPanel = () => {
       (team) => team.id == teams?.activeTeam
     )[0];
     return (
-      <div className="team-panel">
+      <>
-        <h1>{activeTeam.name}</h1>
+        <section className="section">
-        <div>
+          <div className="container">
-          <input type="text" value={activeTeam.location || ""} disabled />
+            <h1 className="title">{activeTeam.name}</h1>
-          <br />
+            <h2 className="subtitle">
-          <input type="text" value={activeTeam.country || ""} disabled />
+              {activeTeam.location}, {activeTeam.country}
-          <hr style={{ width: "100%" }} />
+            </h2>
-
+            <div className="panel">
-          <h2>players</h2>
+              <h2 className="panel-heading is-4">Players</h2>
+              <div className="panel-block">
                 {players ? (
-            <div
+                  <div className="buttons">
-              style={{
-                display: "flex",
-                flexWrap: "wrap",
-                justifyContent: "center",
-              }}
-            >
                     {players.map((p) => (
                       <button
                         className={
-                    "team-player " +
+                          "button is-primary is-light " +
                           p.gender +
-                    (p.id === player.id ? " active-player" : "")
+                          (p.id === player.id ? " is-focused is-active" : "")
                         }
                         key={p.id}
                         onClick={() => {
@@ -104,7 +99,7 @@ const TeamPanel = () => {
                       </button>
                     ))}
                     <button
-                className="team-player new-player"
+                      className="button is-success is-light new-player"
                       key="add-player"
                       onClick={() => {
                         setPlayer(newPlayerTemplate);
@@ -117,12 +112,16 @@ const TeamPanel = () => {
                 ) : (
                   <span className="loader" />
                 )}
-          <hr style={{ width: "100%" }} />
+              </div>
 
-          <form className="new-player-inputs" onSubmit={handleSubmit}>
+              <div className="panel-block">
-            <div>
+                <form onSubmit={handleSubmit}>
-              <label>name</label>
+                  <div className="field is-grouped is-grouped-multiline">
+                    <div className="field">
+                      <label className="label">name</label>
+                      <div className="control">
                         <input
+                          className="input"
                           type="text"
                           required
                           value={player.display_name}
@@ -130,7 +129,9 @@ const TeamPanel = () => {
                             setPlayer({
                               ...player,
                               ...(player.id === 0 && {
-                      username: e.target.value.toLowerCase().replace(/\W/g, ""),
+                                username: e.target.value
+                                  .toLowerCase()
+                                  .replace(/\W/g, ""),
                               }),
                               display_name: e.target.value,
                             });
@@ -138,9 +139,12 @@ const TeamPanel = () => {
                           }}
                         />
                       </div>
-            <div>
+                    </div>
-              <label>username</label>
+                    <div className="field">
+                      <label className="label">username</label>
+                      <div className="control">
                         <input
+                          className="input"
                           type="text"
                           required
                           disabled={player.id !== 0}
@@ -151,13 +155,19 @@ const TeamPanel = () => {
                           }}
                         />
                       </div>
-            <div>
+                    </div>
-              <label>gender</label>
+                    <div className="field">
+                      <label className="label">gender</label>
+                      <div className="control">
+                        <div className="select">
                           <select
                             name="gender"
                             value={player.gender}
                             onChange={(e) => {
-                  setPlayer({ ...player, gender: e.target.value as Gender });
+                              setPlayer({
+                                ...player,
+                                gender: e.target.value as Gender,
+                              });
                               setError({ ok: true, message: "" });
                             }}
                           >
@@ -166,9 +176,15 @@ const TeamPanel = () => {
                             <option value="mmp">MMP</option>
                           </select>
                         </div>
-            <div>
+                      </div>
-              <label>number (optional)</label>
+                    </div>
+                    <div className="field">
+                      <label className="label">
+                        number <small>(optional)</small>
+                      </label>
+                      <div className="control">
                         <input
+                          className="input"
                           type="text"
                           value={player.number || ""}
                           onChange={(e) => {
@@ -177,9 +193,14 @@ const TeamPanel = () => {
                           }}
                         />
                       </div>
-            <div>
+                    </div>
-              <label>email (optional)</label>
+                    <div className="field">
+                      <label className="label">
+                        email <small>(optional)</small>
+                      </label>
+                      <div className="control">
                         <input
+                          className="input"
                           type="email"
                           value={player.email || ""}
                           onChange={(e) => {
@@ -188,36 +209,46 @@ const TeamPanel = () => {
                           }}
                         />
                       </div>
-            <div style={{ margin: "auto" }}>
                       {error?.message && (
-                <span
+                        <p
-                  style={{
+                          className={
-                    color: error.ok ? "green" : "red",
+                            "help" + (error.ok ? " is-success" : " is-danger")
-                  }}
+                          }
                         >
                           {error.message}
-                </span>
+                        </p>
                       )}
                     </div>
-            <div style={{ margin: "auto" }}>
+                  </div>
-              <button className="team-player new-player">
+                  <div className="field is-grouped is-grouped-centered">
+                    <button
+                      className={
+                        "button is-light" +
+                        (player.id === 0 ? " is-success" : " is-link")
+                      }
+                    >
                       {player.id === 0 ? "add player" : "modify player"}
                     </button>
-            </div>
                     {player.id !== 0 && (
-              <div style={{ margin: "auto" }}>
                       <button
-                  className="team-player disable-player"
+                        className="button is-danger is-light"
                         onClick={handleDisable}
                       >
                         remove player
                       </button>
-              </div>
                     )}
+                  </div>
                 </form>
               </div>
+            </div>
+          </div>
+        </section>
+        <section className="section">
+          <div className="container">
             <Calendar playerId={player.id} />
           </div>
+        </section>
+      </>
     );
   } else <span className="loader" />;
 };

frontend/src/main.css

@@ -7,7 +7,6 @@
 }
 
 .navbar {
-  --bulma-navbar-burger-color: var(--bulma-white);
   --bulma-navbar-dropdown-border-color: var(--bulma-primary);
 }