feat: register new user with team-specific token
revamp entire `SetPassword` page
This commit is contained in:
@@ -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" />
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user