GeneIT/geneit_app/src/routes/DeleteAccountRoute.tsx

81 lines
2.3 KiB
TypeScript

import { Button, Typography } from "@mui/material";
import React from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { AuthApi } from "../api/AuthApi";
import { DeleteAccountTokenInfo, UserApi } from "../api/UserApi";
import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
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(
"Voulez-vous vraiment supprimer votre compte ?",
undefined,
"Supprimer mon compte"
))
)
return;
await UserApi.DeleteAccount(token);
AuthApi.RemoveAuthToken();
await alert("Votre compte a été supprimé avec succès !");
navigate("/");
} catch (e) {
console.error(e);
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>
)}
/>
);
}