From 828b0ee7d205d53e29cf8fee772926d0ad91450f Mon Sep 17 00:00:00 2001 From: julius Date: Sun, 21 Dec 2025 17:08:24 +0100 Subject: [PATCH] reinstate set password page --- frontend/src/CUTT.tsx | 1 + frontend/src/Footer.tsx | 6 - frontend/src/Register.tsx | 2 +- frontend/src/SetPassword.tsx | 429 +++++++++-------------------------- 4 files changed, 114 insertions(+), 324 deletions(-) diff --git a/frontend/src/CUTT.tsx b/frontend/src/CUTT.tsx index 1dfce68..0d962c4 100644 --- a/frontend/src/CUTT.tsx +++ b/frontend/src/CUTT.tsx @@ -27,6 +27,7 @@ function App() { } /> + } />
diff --git a/frontend/src/Register.tsx b/frontend/src/Register.tsx index 0ae236b..f10cc88 100644 --- a/frontend/src/Register.tsx +++ b/frontend/src/Register.tsx @@ -96,7 +96,7 @@ export const Register = () => { } return ( -
+

diff --git a/frontend/src/SetPassword.tsx b/frontend/src/SetPassword.tsx index 90fce3c..1ac3903 100644 --- a/frontend/src/SetPassword.tsx +++ b/frontend/src/SetPassword.tsx @@ -1,11 +1,7 @@ import { jwtDecode, JwtPayload } from "jwt-decode"; -import { ReactNode, useEffect, useState } from "react"; -import { apiAuth, baseUrl, Gender, User } from "./api"; +import { useEffect, useState } from "react"; +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,115 +9,71 @@ interface PassToken extends JwtPayload { team_id: number; } -enum Mode { - register = "register", - set = "set password", - change = "change password", -} - export const SetPassword = () => { - const [mode, setMode] = useState(); - const [name, setName] = useState("after getting your token."); + const [name, setName] = useState(""); const [username, setUsername] = useState(""); - const [teamID, setTeamID] = useState(); - 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(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: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ token: token, password: password }), + const req = new Request(`${baseUrl}api/set_password`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ token: token, password: password }), + }); + let resp: Response; + try { + resp = await fetch(req); + } catch (e) { + throw new Error(`request failed: ${e}`); + } + setLoading(false); + + if (resp.ok) { + console.log(resp); + navigate("/", { + replace: true, + state: { username: username, password: password }, }); - let resp: Response; - try { - resp = await fetch(req); - } catch (e) { - throw new Error(`request failed: ${e}`); - } - setLoading(false); + } - if (resp.ok) { - console.log(resp); - navigate("/", { - replace: true, - state: { username: username, password: password }, - }); - } - - if (!resp.ok) { - if (resp.status === 401) { - const { detail } = await resp.json(); - if (detail) setError(detail); - else setError("unauthorized"); - 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) { + if (!resp.ok) { + if (resp.status === 401) { const { detail } = await resp.json(); if (detail) setError(detail); else setError("unauthorized"); @@ -131,225 +83,68 @@ export const SetPassword = () => { } else setError("passwords are not the same"); } - 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(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 =

change your password, {name}

; - break; - case Mode.set: - header = ( - <> -
-

set your password, {name}

- - ); - break; - case Mode.register: - header = ( - <> -
-

- register as a member of {name} -

- - ); - } - - let textInputs: ReactNode; - switch (mode) { - case Mode.change: - textInputs = ( -
- { - setError(""); - setCurrentPassword(evt.target.value); - }} - /> -
+ return ( +
+
+
+

+ cool ultimate team tool +

- ); - break; - case Mode.register: - textInputs = ( -
-
- - { - setPlayer({ - ...player, - display_name: e.target.value, - username: e.target.value.toLowerCase().replace(/\W/g, ""), - }); - }} - /> +

+ Set password for {name && username && `${name} (${username})`} +

+
+
+
+ + { + setError(""); + setPassword(evt.target.value); + }} + /> +
+
+ { + setError(""); + setPasswordr(evt.target.value); + }} + /> +

{passwordHint}

+
+
-
- - { - setPlayer({ ...player, username: e.target.value }); - }} - /> +

+ {error} +

+
+
-
- - -
-
- - { - setPlayer({ ...player, number: e.target.value }); - }} - /> -
-
- - { - setPlayer({ ...player, email: e.target.value }); - }} - /> -
-
-
- ); - break; - } - - let passwordInputs = ( - <> -
- { - setError(""); - setPassword(evt.target.value); - }} - /> +
-
- { - setError(""); - setPasswordr(evt.target.value); - }} - /> -
- - ); - - return mode ? ( - <> - {header} -
-
-
- {textInputs} - {passwordInputs} -
setVisible(!visible)} - > - {visible ? : } show passwords -
-
-
{error && {error}}
- - {loading && } - - - ) : ( - +
); };