add page to register
This commit is contained in:
@@ -7,6 +7,8 @@ import Rankings from "./Form";
|
|||||||
import TeamPanel from "./TeamPanel";
|
import TeamPanel from "./TeamPanel";
|
||||||
import { GraphComponent } from "./Network";
|
import { GraphComponent } from "./Network";
|
||||||
import MVPChart from "./MVPChart";
|
import MVPChart from "./MVPChart";
|
||||||
|
import { SetPassword } from "./SetPassword";
|
||||||
|
import { Register } from "./Register";
|
||||||
|
|
||||||
const Maintenance = () => {
|
const Maintenance = () => {
|
||||||
return (
|
return (
|
||||||
@@ -24,6 +26,7 @@ function App() {
|
|||||||
return (
|
return (
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Routes>
|
<Routes>
|
||||||
|
<Route path="/register" element={<Register />} />
|
||||||
<Route
|
<Route
|
||||||
path="/*"
|
path="/*"
|
||||||
element={
|
element={
|
||||||
|
|||||||
236
frontend/src/Register.tsx
Normal file
236
frontend/src/Register.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user