Can delete account

geneit_app/src/App.tsx

@@ -11,6 +11,7 @@ import { PasswordForgottenRoute } from "./routes/auth/PasswordForgottenRoute";
 import { ResetPasswordRoute } from "./routes/auth/ResetPasswordRoute";
 import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
 import { BaseLoginPage } from "./widgets/BaseLoginpage";
+import { DeleteAccountRoute } from "./routes/DeleteAccountRoute";
 
 interface AuthContext {
   signedIn: boolean;
@@ -33,6 +34,8 @@ export function App(): React.ReactElement {
   return (
     <AuthContextK.Provider value={context}>
       <Routes>
+        <Route path="delete_account" element={<DeleteAccountRoute />} />
+
         {signedIn ? (
           <Route path="*" element={<BaseAuthenticatedPage />}>
             <Route path="profile" element={<ProfileRoute />} />

geneit_app/src/api/UserApi.ts

@@ -19,6 +19,10 @@ export enum ReplacePasswordResponse {
   TooManyRequests,
 }
 
+export interface DeleteAccountTokenInfo {
+  email: string;
+}
+
 export class UserApi {
   /**
    * Get current user information
@@ -89,4 +93,30 @@ export class UserApi {
       method: "GET",
     });
   }
+
+  /**
+   * Check delete account token
+   */
+  static async CheckDeleteAccountToken(
+    token: string
+  ): Promise<DeleteAccountTokenInfo> {
+    return (
+      await APIClient.exec({
+        uri: "/user/check_delete_token",
+        method: "POST",
+        jsonData: { token: token },
+      })
+    ).data;
+  }
+
+  /**
+   * Delete account
+   */
+  static async DeleteAccount(token: string): Promise<void> {
+    await APIClient.exec({
+      uri: "/user/delete_account",
+      method: "POST",
+      jsonData: { token: token },
+    });
+  }
 }

geneit_app/src/routes/DeleteAccountRoute.tsx

@@ -0,0 +1,80 @@
+import { Button, Typography } from "@mui/material";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { useAlert } from "../widgets/AlertDialogProvider";
+import { useConfirm } from "../widgets/ConfirmDialogProvider";
+import { DeleteAccountTokenInfo, UserApi } from "../api/UserApi";
+import React from "react";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { AuthApi } from "../api/AuthApi";
+
+export function DeleteAccountRoute(): React.ReactElement {
+  const alert = useAlert();
+  const confirm = useConfirm();
+  const navigate = useNavigate();
+
+  const { hash } = useLocation();
+  const token = hash.substring(1);
+
+  const [info, setInfo] = React.useState<DeleteAccountTokenInfo>();
+
+  const checkToken = async () => {
+    setInfo(await UserApi.CheckDeleteAccountToken(token));
+  };
+
+  const doDelete = async () => {
+    try {
+      if (
+        !(await confirm.confirm(
+          "Voulez-vous vraiment supprimer votre compte ?",
+          undefined,
+          "Supprimer mon compte"
+        ))
+      )
+        return;
+
+      await UserApi.DeleteAccount(token);
+      AuthApi.RemoveAuthToken();
+
+      await alert.alert("Votre compte a été supprimé avec succès !");
+
+      navigate("/");
+    } catch (e) {
+      console.error(e);
+      alert.alert("Echec de la suppression du compte !");
+    }
+  };
+
+  return (
+    <AsyncWidget
+      errMsg="Echec de la validation du jeton de suppression de compte !"
+      load={checkToken}
+      loadKey={token}
+      build={() => (
+        <div
+          style={{
+            height: "100vh",
+            backgroundColor: "#b23c17",
+            color: "white",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            flexDirection: "column",
+          }}
+        >
+          <Typography variant="h3">Suppression de compte</Typography>
+          <p>{info?.email}</p>
+          <p>
+            Voulez-vous vraiment supprimer votre compte ? Cette opération est
+            irréversible !
+          </p>
+          <Button onClick={doDelete} color="inherit">
+            Supprimer mon compte
+          </Button>
+          <Link to="/" style={{ color: "inherit", textDecoration: "none" }}>
+            <Button color="inherit">Annuler</Button>
+          </Link>
+        </div>
+      )}
+    />
+  );
+}

geneit_app/src/routes/ProfileRoute.tsx

@@ -274,7 +274,7 @@ function DeleteAccountButton(): React.ReactElement {
   };
 
   return (
-    <div style={{ textAlign: "center" }}>
+    <div style={{ textAlign: "center", margin: "15px 0px" }}>
       <Button onClick={requestDelete} color="error">
         Supprimer mon compte
       </Button>