add gender to registering

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],

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,7 @@ function App() {
   return (
     <BrowserRouter>
       <Routes>
+        <Route path="/register" element={<Register />} />
         <Route
           path="/*"
           element={

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/Register.tsx

@@ -0,0 +1,236 @@
+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");
+  }
+
+  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">
+      <div className="container is-max-tablet">
+        <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">
+              <label className="label">repeat password</label>
+              <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);
+                  passwordCheck();
+                }}
+              />
+              <p className={"help is-danger"}>{passwordHint}</p>
+            </div>
+            <hr />
+            <div className="field">
+              <label className="label">
+                gender <small>(optional)</small>
+              </label>
+              <div className="control">
+                <div className="select">
+                  <select
+                    name="gender"
+                    value={gender}
+                    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" + (error ? " is-danger" : " is-success")}>
+                {error}
+              </p>
+            </div>
+          </div>
+          <div className="field is-grouped is-grouped-centered">
+            <button className="button is-light is-success">register</button>
+          </div>
+        </form>
+      </div>
+    </section>
+  );
+};

frontend/src/TeamPanel.tsx

@@ -77,8 +77,9 @@ const TeamPanel = () => {
             <h2 className="subtitle">
               {activeTeam.location}, {activeTeam.country}
             </h2>
-            <div className="box">
-              <h2 className="title is-4">Players</h2>
+            <div className="panel">
+              <h2 className="panel-heading is-4">Players</h2>
+              <div className="panel-block">
                 {players ? (
                   <div className="buttons">
                     {players.map((p) => (
@@ -113,7 +114,9 @@ const TeamPanel = () => {
                 )}
               </div>
 
-            <form className="container block" onSubmit={handleSubmit}>
+              <div className="panel-block">
+                <form onSubmit={handleSubmit}>
+                  <div className="field is-grouped is-grouped-multiline">
                     <div className="field">
                       <label className="label">name</label>
                       <div className="control">
@@ -176,7 +179,9 @@ const TeamPanel = () => {
                       </div>
                     </div>
                     <div className="field">
-                <label className="label">number (optional)</label>
+                      <label className="label">
+                        number <small>(optional)</small>
+                      </label>
                       <div className="control">
                         <input
                           className="input"
@@ -190,7 +195,9 @@ const TeamPanel = () => {
                       </div>
                     </div>
                     <div className="field">
-                <label className="label">email (optional)</label>
+                      <label className="label">
+                        email <small>(optional)</small>
+                      </label>
                       <div className="control">
                         <input
                           className="input"
@@ -212,7 +219,8 @@ const TeamPanel = () => {
                         </p>
                       )}
                     </div>
-              <div className="field is-grouped">
+                  </div>
+                  <div className="field is-grouped is-grouped-centered">
                     <button
                       className={
                         "button is-light" +
@@ -232,6 +240,8 @@ const TeamPanel = () => {
                   </div>
                 </form>
               </div>
+            </div>
+          </div>
         </section>
         <section className="section">
           <div className="container">