pierre/GeneIT
1
0
Fork 0
Code Issues Pull Requests 7 Packages Projects Releases Wiki Activity

Refactor rest password route

Browse Source
This commit is contained in:
Pierre HUBERT 2023-06-17 18:27:51 +02:00
parent 56f8dfeb9e
commit 93436fbc09
1 changed files with 73 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
geneit_app/src/routes/auth/ResetPasswordRoute.tsx
View File

@ -6,67 +6,26 @@ import {
TextField,
Typography,
} from "@mui/material";
import React, { useEffect, useRef, useState } from "react";
import React from "react";
import { useLocation } from "react-router-dom";
import { AuthApi, CheckResetTokenResponse } from "../../api/AuthApi";
import { PasswordInput } from "../../widgets/PasswordInput";
import { AuthSingleMessage } from "../../widgets/AuthSingleMessage";
import { ServerApi } from "../../api/ServerApi";
import { AsyncWidget } from "../../widgets/AsyncWidget";
import { AuthSingleMessage } from "../../widgets/AuthSingleMessage";
import { PasswordInput } from "../../widgets/PasswordInput";
export function ResetPasswordRoute(): React.ReactElement {
const [error, setError] = React.useState<string | null>(null);
const [loading, setLoading] = React.useState(false);
const [success, setSuccess] = React.useState(false);
const [password, setPassword] = React.useState("");
const [confirmPassword, setConfirmPassword] = React.useState("");
const { hash } = useLocation();
const token = hash.substring(1);
const [info, setInfo] = React.useState<null | CheckResetTokenResponse>(null);
const checkedToken = useRef<null | string>(null);
useEffect(() => {
(async () => {
if (token === checkedToken.current) return;
checkedToken.current = token;
try {
setError(null);
const info = await AuthApi.CheckResetPasswordToken(token);
setInfo(info);
} catch (e) {
console.error(e);
setError(
"Echec de validation du jeton de réinitialisation de mot de passe!"
);
}
})();
});
if (error)
return (
<Alert style={{ width: "100%" }} severity="error">
{error}
</Alert>
);
if (info === null)
return (
<>
<CircularProgress />
</>
);
return <ResetPasswordForm token={token} info={info} />;
}
function ResetPasswordForm(p: {
token: string;
info: CheckResetTokenResponse;
}): React.ReactElement {
const [error, setError] = React.useState<string | null>(null);
const [loading, setLoading] = React.useState(false);
const [success, setSuccess] = React.useState(false);
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const canSubmit =
ServerApi.CheckPassword(password) === null && password === confirmPassword;
@ -79,7 +38,7 @@ function ResetPasswordForm(p: {
setLoading(true);
try {
await AuthApi.ResetPassword(p.token, password);
await AuthApi.ResetPassword(token, password);
setSuccess(true);
} catch (e) {
console.error(e);
@ -102,57 +61,69 @@ function ResetPasswordForm(p: {
);
return (
<>
{error && (
<Alert style={{ width: "100%" }} severity="error">
{error}
</Alert>
<AsyncWidget
loadKey={token}
load={async () => setInfo(await AuthApi.CheckResetPasswordToken(token))}
errMsg="Echec de validation du jeton de réinitialisation de mot de passe !"
build={() => (
<>
{error && (
<Alert style={{ width: "100%" }} severity="error">
{error}
</Alert>
)}
<Typography
component="h2"
variant="body1"
style={{ marginBottom: "15px" }}
>
Bonjour {info!.name}, veuillez définir votre nouveau mot de passe :
</Typography>
<Box
component="form"
noValidate
onSubmit={handleSubmit}
sx={{ mt: 1 }}
>
<PasswordInput
label="Nouveau mot de passe"
value={password}
onChange={(n) => {
setPassword(n);
}}
/>
<TextField
margin="normal"
required
fullWidth
error={password !== confirmPassword}
helperText={
password !== confirmPassword
? "Les mots de passe saisis ne correspondent pas !"
: null
}
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
label="Confirmer le mot de passe"
type="password"
id="password"
autoComplete="current-password"
/>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
disabled={!canSubmit}
>
Valider
</Button>
</Box>
</>
)}
<Typography
component="h2"
variant="body1"
style={{ marginBottom: "15px" }}
>
Bonjour {p.info.name}, veuillez définir votre nouveau mot de passe :
</Typography>
<Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 1 }}>
<PasswordInput
label="Nouveau mot de passe"
value={password}
onChange={(n) => {
setPassword(n);
}}
/>
<TextField
margin="normal"
required
fullWidth
error={password !== confirmPassword}
helperText={
password !== confirmPassword
? "Les mots de passe saisis ne correspondent pas !"
: null
}
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
label="Confirmer le mot de passe"
type="password"
id="password"
autoComplete="current-password"
/>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
disabled={!canSubmit}
>
Valider
</Button>
</Box>
</>
/>
);
}