Can reset password

geneit_app/src/routes/auth/OIDCCbRoute.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { AuthApi } from "../../api/AuthApi";
 import { useSetAtom } from "jotai";
+import { AuthSingleMessage } from "../../widgets/AuthSingleMessage";
 
 /**
  * OpenID login callback route
@@ -37,16 +38,11 @@ export function OIDCCbRoute(): React.ReactElement {
     };
 
     load();
-  }, [code, state]);
+  });
 
   if (error)
     return (
-      <>
-        <p>Echec de la finalisation de l'authentification !</p>
-        <Link to={"/"}>
-          <Button>Retour à l'accueil</Button>
-        </Link>
-      </>
+      <AuthSingleMessage message="Echec de la finalisation de l'authentification !" />
     );
 
   return (

geneit_app/src/routes/auth/ResetPasswordRoute.tsx

@@ -1,7 +1,17 @@
-import { Alert, CircularProgress } from "@mui/material";
-import React, { useEffect, useRef } from "react";
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  TextField,
+  Typography,
+} from "@mui/material";
+import React, { useEffect, useRef, useState } 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";
 
 export function ResetPasswordRoute(): React.ReactElement {
   const [error, setError] = React.useState<string | null>(null);
@@ -9,7 +19,7 @@ export function ResetPasswordRoute(): React.ReactElement {
   const { hash } = useLocation();
   const token = hash.substring(1);
 
-  const info = React.useState<null | CheckResetTokenResponse>(null);
+  const [info, setInfo] = React.useState<null | CheckResetTokenResponse>(null);
   const checkedToken = useRef<null | string>(null);
 
   useEffect(() => {
@@ -19,7 +29,8 @@ export function ResetPasswordRoute(): React.ReactElement {
 
       try {
         setError(null);
-        await AuthApi.CheckResetPasswordToken(token);
+        const info = await AuthApi.CheckResetPasswordToken(token);
+        setInfo(info);
       } catch (e) {
         console.error(e);
         setError(
@@ -43,12 +54,105 @@ export function ResetPasswordRoute(): React.ReactElement {
       </>
     );
 
-  return <ResetPasswordForm token={token} info={info as any} />;
+  return <ResetPasswordForm token={token} info={info} />;
 }
 
 function ResetPasswordForm(p: {
   token: string;
   info: CheckResetTokenResponse;
 }): React.ReactElement {
-  return <p>TODO</p>;
+  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;
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!canSubmit) return;
+
+    setLoading(true);
+
+    try {
+      await AuthApi.ResetPassword(p.token, password);
+      setSuccess(true);
+    } catch (e) {
+      console.error(e);
+      setError("Echec de la réinitialisation du mot de passe !");
+    }
+
+    setLoading(false);
+  };
+
+  if (loading)
+    return (
+      <>
+        <CircularProgress />
+      </>
+    );
+
+  if (success)
+    return (
+      <AuthSingleMessage message="Mot de passe réinitialisé avec succès. Vous pouvez dès à présent l'utiliser pour accéder à votre compte." />
+    );
+
+  return (
+    <>
+      {error && (
+        <Alert style={{ width: "100%" }} severity="error">
+          {error}
+        </Alert>
+      )}
+
+      <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>
+    </>
+  );
 }