From 3e5648afcaf9ad7f085703dbb3ff90ac7a04527b Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
Date: Fri, 9 Jun 2023 18:55:36 +0200
Subject: [PATCH] Add request password reset route

---
 geneit_app/src/App.tsx                        |   8 ++
 geneit_app/src/api/AuthApi.ts                 |  11 ++
 geneit_app/src/routes/auth/LoginRoute.tsx     |  25 +++--
 .../routes/auth/PasswordForgottenRoute.tsx    | 102 ++++++++++++++++++
 4 files changed, 139 insertions(+), 7 deletions(-)
 create mode 100644 geneit_app/src/routes/auth/PasswordForgottenRoute.tsx

diff --git a/geneit_app/src/App.tsx b/geneit_app/src/App.tsx
index eebd46e..b83f5f0 100644
--- a/geneit_app/src/App.tsx
+++ b/geneit_app/src/App.tsx
@@ -7,7 +7,11 @@ import { LoginRoute } from "./routes/auth/LoginRoute";
 import { OIDCCbRoute } from "./routes/auth/OIDCCbRoute";
 import { useAtom } from "jotai";
 import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
+import { PasswordForgottenRoute } from "./routes/auth/PasswordForgottenRoute";
 
+/**
+ * Core app
+ */
 function App() {
   const [signedIn] = useAtom(AuthApi.authStatus);
 
@@ -19,6 +23,10 @@ function App() {
         <Route path="*" element={<BaseLoginPage />}>
           <Route path="" element={<LoginRoute />} />
           <Route path="oidc_cb" element={<OIDCCbRoute />} />
+          <Route
+            path="password_forgotten"
+            element={<PasswordForgottenRoute />}
+          />
           <Route path="*" element={<NotFoundRoute />} />
         </Route>
       )}
diff --git a/geneit_app/src/api/AuthApi.ts b/geneit_app/src/api/AuthApi.ts
index 08266d0..3ed99a9 100644
--- a/geneit_app/src/api/AuthApi.ts
+++ b/geneit_app/src/api/AuthApi.ts
@@ -62,4 +62,15 @@ export class AuthApi {
 
     sessionStorage.removeItem(TokenStateKey);
   }
+
+  /**
+   * Request to reset password
+   */
+  static async RequestResetPassword(mail: string): Promise<void> {
+    await APIClient.exec({
+      uri: "/auth/request_reset_password",
+      method: "POST",
+      jsonData: { mail: mail },
+    });
+  }
 }
diff --git a/geneit_app/src/routes/auth/LoginRoute.tsx b/geneit_app/src/routes/auth/LoginRoute.tsx
index a24a00f..550dd03 100644
--- a/geneit_app/src/routes/auth/LoginRoute.tsx
+++ b/geneit_app/src/routes/auth/LoginRoute.tsx
@@ -2,12 +2,12 @@ import { Alert, CircularProgress } from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
-import Link from "@mui/material/Link";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
 import { AuthApi } from "../../api/AuthApi";
 import { ServerApi } from "../../api/ServerApi";
+import { Link } from "react-router-dom";
 
 /**
  * Login form
@@ -89,14 +89,25 @@ export function LoginRoute(): React.ReactElement {
 
         <Grid container>
           <Grid item xs>
-            <Link href="#" variant="body2">
-              Mot de passe oublié
-            </Link>
+            <Typography variant="body2" color={"primary"}>
+              <Link
+                to="/password_forgotten"
+                style={{ color: "inherit", textDecorationColor: "inherit" }}
+              >
+                Mot de passe oublié
+              </Link>
+            </Typography>
           </Grid>
           <Grid item>
-            <Link href="#" variant="body2">
-              Créer un nouveau compte
-            </Link>
+            <Typography variant="body2" color={"primary"}>
+              {" "}
+              <Link
+                to="#"
+                style={{ color: "inherit", textDecorationColor: "inherit" }}
+              >
+                Créer un nouveau compte
+              </Link>
+            </Typography>
           </Grid>
         </Grid>
 
diff --git a/geneit_app/src/routes/auth/PasswordForgottenRoute.tsx b/geneit_app/src/routes/auth/PasswordForgottenRoute.tsx
new file mode 100644
index 0000000..3c05e6d
--- /dev/null
+++ b/geneit_app/src/routes/auth/PasswordForgottenRoute.tsx
@@ -0,0 +1,102 @@
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Grid,
+  TextField,
+  Typography,
+} from "@mui/material";
+import React from "react";
+import { ServerApi } from "../../api/ServerApi";
+import { Link } from "react-router-dom";
+import { APIClient } from "../../api/ApiClient";
+import { AuthApi } from "../../api/AuthApi";
+
+export function PasswordForgottenRoute(): React.ReactElement {
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const [success, setSuccess] = React.useState<string | null>(null);
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+
+    try {
+      setError(null);
+      setSuccess(null);
+      setLoading(true);
+
+      await AuthApi.RequestResetPassword(data.get("email")!.toString());
+
+      setSuccess(
+        `Si l'adresse mail spécifiée est valide, alors la demande de réinitalisation de mot de passe a été traitée avec succès. Un courriel provenant de ${ServerApi.Config.mail} devrait alors être arrivé dans votre boîte mail.`
+      );
+    } catch (e) {
+      console.error(e);
+      setError("Echec de la demande de réinitialisation de mot de passe!");
+    }
+    setLoading(false);
+  };
+
+  if (loading)
+    return (
+      <>
+        <CircularProgress />
+      </>
+    );
+
+  return (
+    <>
+      {error && (
+        <Alert style={{ width: "100%" }} severity="error">
+          {error}
+        </Alert>
+      )}
+      {success && (
+        <Alert style={{ width: "100%" }} severity="success">
+          {success}
+        </Alert>
+      )}
+
+      <Typography component="h2" variant="body1">
+        Mot de passe oublié
+      </Typography>
+
+      <Box
+        component="form"
+        noValidate
+        onSubmit={handleSubmit}
+        sx={{ mt: 1 }}
+        style={{ width: "100%" }}
+      >
+        <TextField
+          margin="normal"
+          required
+          fullWidth
+          id="email"
+          label="Adresse mail"
+          name="email"
+          autoComplete="email"
+          autoFocus
+        />
+        <Button
+          type="submit"
+          fullWidth
+          variant="contained"
+          sx={{ mt: 3, mb: 2 }}
+        >
+          Valider
+        </Button>
+        <Typography variant="body2" color={"primary"}>
+          <Link
+            to="/"
+            style={{ color: "inherit", textDecorationColor: "inherit" }}
+          >
+            Retour au formulaire de connexion
+          </Link>{" "}
+        </Typography>
+      </Box>
+    </>
+  );
+}