first commit

common/resources/client/auth/ui/account-settings/danger-zone-panel/danger-zone-panel.tsx

@@ -0,0 +1,56 @@
+import {AccountSettingsPanel} from '../account-settings-panel';
+import {Button} from '@common/ui/buttons/button';
+import {DialogTrigger} from '@common/ui/overlays/dialog/dialog-trigger';
+import {ConfirmationDialog} from '@common/ui/overlays/dialog/confirmation-dialog';
+import {useDeleteAccount} from './delete-account';
+import {Trans} from '@common/i18n/trans';
+import {AccountSettingsId} from '@common/auth/ui/account-settings/account-settings-sidenav';
+import React, {useState} from 'react';
+import {usePasswordConfirmedAction} from '@common/auth/ui/confirm-password/use-password-confirmed-action';
+
+export function DangerZonePanel() {
+  const deleteAccount = useDeleteAccount();
+  const {withConfirmedPassword, isLoading: confirmingPassword} =
+    usePasswordConfirmedAction();
+
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+
+  return (
+    <AccountSettingsPanel
+      id={AccountSettingsId.DeleteAccount}
+      title={<Trans message="Danger zone" />}
+    >
+      <DialogTrigger
+        type="modal"
+        isOpen={confirmDialogOpen}
+        onOpenChange={setConfirmDialogOpen}
+        onClose={isConfirmed => {
+          if (isConfirmed) {
+            deleteAccount.mutate();
+          }
+        }}
+      >
+        <ConfirmationDialog
+          isDanger
+          title={<Trans message="Delete account?" />}
+          body={
+            <Trans message="Your account will be deleted immediately and permanently. Once deleted, accounts can not be restored." />
+          }
+          confirm={<Trans message="Delete" />}
+        />
+      </DialogTrigger>
+      <Button
+        variant="flat"
+        color="danger"
+        disabled={confirmingPassword || deleteAccount.isPending}
+        onClick={() => {
+          withConfirmedPassword(() => {
+            setConfirmDialogOpen(true);
+          });
+        }}
+      >
+        <Trans message="Delete account" />
+      </Button>
+    </AccountSettingsPanel>
+  );
+}

common/resources/client/auth/ui/account-settings/danger-zone-panel/delete-account.ts

@@ -0,0 +1,28 @@
+import {useMutation} from '@tanstack/react-query';
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {useLogout} from '@common/auth/requests/logout';
+import {toast} from '@common/ui/toast/toast';
+import {useAuth} from '@common/auth/use-auth';
+import {apiClient} from '@common/http/query-client';
+import {showHttpErrorToast} from '@common/utils/http/show-http-error-toast';
+
+interface Response extends BackendResponse {}
+
+export function useDeleteAccount() {
+  const {user} = useAuth();
+  const logout = useLogout();
+  return useMutation({
+    mutationFn: () => deleteAccount(user!.id),
+    onSuccess: () => {
+      toast('Account deleted');
+      logout.mutate();
+    },
+    onError: err => showHttpErrorToast(err),
+  });
+}
+
+function deleteAccount(userId: number): Promise<Response> {
+  return apiClient
+    .delete(`users/${userId}`, {params: {deleteCurrentUser: true}})
+    .then(r => r.data);
+}