Added ability to delete account

app/components/settings.tsx

@@ -9,8 +9,10 @@ import {
     Label,
     Typography,
     Spinner,
+    AlertDialog,
+    useOverlayState,
 } from "@heroui/react";
-import { useState, type Dispatch, type SetStateAction } from "react";
+import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
 import { useAuth } from "~/hooks/auth";
 import { useNotification } from "~/hooks/notification";
 
@@ -21,9 +23,19 @@ export function Settings({
     show: boolean;
     setShow: Dispatch<SetStateAction<boolean>>;
 }) {
-    const { user, update } = useAuth();
+    const { user, update, logout } = useAuth();
     const { notify } = useNotification();
     const [loading, setLoading] = useState(false);
+    const [canClose, setCanClose] = useState(true);
+    const deleteState = useOverlayState();
+
+    useEffect(() => {
+        if (!deleteState.isOpen) {
+            setTimeout(() => {
+                setCanClose(true);
+            }, 100);
+        }
+    }, [deleteState]);
 
     const notifySucess = () => {
         notify(
@@ -109,12 +121,40 @@ export function Settings({
         setLoading(false);
     };
 
+    const deleteAccount = async () => {
+        setLoading(true);
+        let ok = await fetch(`${import.meta.env.VITE_BASE_API_URL}/delete`, {
+            credentials: "include",
+        })
+            .then((r) => r.ok)
+            .catch((e) => {
+                notify(
+                    {
+                        type: "danger",
+                        loading: false,
+                        title: "An error occured.",
+                        message: `An error occured: ${e}`,
+                    },
+                    10000,
+                );
+            });
+
+        if (ok) {
+            await logout();
+            notifySucess();
+        }
+
+        setLoading(false);
+        deleteState.close();
+    };
+
     return (
         <div>
             <Modal isOpen={show}>
                 <Modal.Backdrop
                     variant="blur"
                     shouldCloseOnInteractOutside={(_element) => {
+                        if (!canClose) return false;
                         setShow(false);
                         return true;
                     }}
@@ -158,10 +198,8 @@ export function Settings({
                                                     image url.
                                                 </Description>
                                             </TextField>
-                                        </Fieldset.Group>
-                                        <Fieldset.Actions className="flex justify-end">
-                                            <div className="flex-1">
                                             <Button
+                                                className="w-full"
                                                 variant="tertiary"
                                                 isPending={loading}
                                                 onPress={() => {
@@ -177,7 +215,28 @@ export function Settings({
                                                     "Load from Steam"
                                                 )}
                                             </Button>
+                                        </Fieldset.Group>
+                                        <Fieldset.Actions className="flex justify-end">
+                                            <div className="flex-1">
+                                                <Button
+                                                    variant="danger"
+                                                    isPending={loading}
+                                                    onPress={() => {
+                                                        deleteState.open();
+                                                        setCanClose(false);
+                                                    }}
+                                                >
+                                                    {loading ? (
+                                                        <Spinner
+                                                            color="current"
+                                                            size="md"
+                                                        />
+                                                    ) : (
+                                                        "Delete account"
+                                                    )}
+                                                </Button>
                                             </div>
+
                                             <Button
                                                 variant="secondary"
                                                 onPress={() => {
@@ -208,6 +267,50 @@ export function Settings({
                     </Modal.Container>
                 </Modal.Backdrop>
             </Modal>
+            <AlertDialog>
+                <AlertDialog.Backdrop
+                    isOpen={deleteState.isOpen}
+                    onOpenChange={deleteState.setOpen}
+                >
+                    <AlertDialog.Container>
+                        <AlertDialog.Dialog>
+                            <AlertDialog.CloseTrigger />
+                            <AlertDialog.Header>
+                                <AlertDialog.Icon status="danger" />
+                                <AlertDialog.Heading>
+                                    Delete account permanently?
+                                </AlertDialog.Heading>
+                            </AlertDialog.Header>
+                            <AlertDialog.Body>
+                                <p>
+                                    This will permanently delete your account
+                                    and all of its data. This action cannot be
+                                    undone.
+                                </p>
+                            </AlertDialog.Body>
+                            <AlertDialog.Footer>
+                                <Button slot="close" variant="tertiary">
+                                    {loading ? (
+                                        <Spinner color="current" size="md" />
+                                    ) : (
+                                        "Cancel"
+                                    )}
+                                </Button>
+                                <Button
+                                    onClick={deleteAccount}
+                                    variant="danger"
+                                >
+                                    {loading ? (
+                                        <Spinner color="current" size="md" />
+                                    ) : (
+                                        "Delete account"
+                                    )}
+                                </Button>
+                            </AlertDialog.Footer>
+                        </AlertDialog.Dialog>
+                    </AlertDialog.Container>
+                </AlertDialog.Backdrop>
+            </AlertDialog>
         </div>
     );
 }