Refactor rest password route

geneit_app/src/routes/auth/ResetPasswordRoute.tsx

@@ -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,6 +61,11 @@ function ResetPasswordForm(p: {
     );
 
   return (
+    <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">
@@ -114,9 +78,14 @@ function ResetPasswordForm(p: {
             variant="body1"
             style={{ marginBottom: "15px" }}
           >
-        Bonjour {p.info.name}, veuillez définir votre nouveau mot de passe :
+            Bonjour {info!.name}, veuillez définir votre nouveau mot de passe :
           </Typography>
-      <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 1 }}>
+          <Box
+            component="form"
+            noValidate
+            onSubmit={handleSubmit}
+            sx={{ mt: 1 }}
+          >
             <PasswordInput
               label="Nouveau mot de passe"
               value={password}
@@ -154,5 +123,7 @@ function ResetPasswordForm(p: {
             </Button>
           </Box>
         </>
+      )}
+    />
   );
 }