Refactor rest password route
This commit is contained in:
parent
56f8dfeb9e
commit
93436fbc09
@ -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>
|
||||
</>
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user