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,57 +61,69 @@ function ResetPasswordForm(p: {
     );
 
   return (
-    <>
+    <AsyncWidget
-      {error && (
+      loadKey={token}
-        <Alert style={{ width: "100%" }} severity="error">
+      load={async () => setInfo(await AuthApi.CheckResetPasswordToken(token))}
-          {error}
+      errMsg="Echec de validation du jeton de réinitialisation de mot de passe !"
-        </Alert>
+      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>
-    </>
   );
 }