feat: require confirmation for user account deletion (#1009)

### This PR adds the necessary user friction in the Delete Dialog,
ensuring that users are intentionally deleting their accounts.

- User must disable 2FA to delete the account.


![2fa](https://github.com/documenso/documenso/assets/85569489/634fd9dd-2aea-4dd8-a231-ade82b71fc7d)

- Explicit user confirmation


![!2FA](https://github.com/documenso/documenso/assets/85569489/11a074b6-7ec7-4568-ba1a-ee884766047b)


fixes #998

apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { useState } from 'react';
+
 import { signOut } from 'next-auth/react';
 
 import type { User } from '@documenso/prisma/client';
@@ -16,6 +18,8 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DeleteAccountDialogProps = {
@@ -28,6 +32,8 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
 
   const hasTwoFactorAuthentication = user.twoFactorEnabled;
 
+  const [enteredEmail, setEnteredEmail] = useState<string>('');
+
   const { mutateAsync: deleteAccount, isLoading: isDeletingAccount } =
     trpc.profile.deleteAccount.useMutation();
 
@@ -76,10 +82,11 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
         </div>
 
         <div className="flex-shrink-0">
-          <Dialog>
+          <Dialog onOpenChange={() => setEnteredEmail('')}>
             <DialogTrigger asChild>
               <Button variant="destructive">Delete Account</Button>
             </DialogTrigger>
+
             <DialogContent>
               <DialogHeader className="space-y-4">
                 <DialogTitle>Delete Account</DialogTitle>
@@ -105,12 +112,29 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
                 </DialogDescription>
               </DialogHeader>
 
+              {!hasTwoFactorAuthentication && (
+                <div className="mt-4">
+                  <Label>
+                    Please type{' '}
+                    <span className="text-muted-foreground font-semibold">{user.email}</span> to
+                    confirm.
+                  </Label>
+
+                  <Input
+                    type="text"
+                    className="mt-2"
+                    aria-label="Confirm Email"
+                    value={enteredEmail}
+                    onChange={(e) => setEnteredEmail(e.target.value)}
+                  />
+                </div>
+              )}
               <DialogFooter>
                 <Button
                   onClick={onDeleteAccount}
                   loading={isDeletingAccount}
                   variant="destructive"
-                  disabled={hasTwoFactorAuthentication}
+                  disabled={hasTwoFactorAuthentication || enteredEmail !== user.email}
                 >
                   {isDeletingAccount ? 'Deleting account...' : 'Confirm Deletion'}
                 </Button>

packages/app-tests/e2e/test-delete-user.spec.ts

@@ -16,6 +16,8 @@ test('delete user', async ({ page }) => {
   });
 
   await page.getByRole('button', { name: 'Delete Account' }).click();
+  await page.getByLabel('Confirm Email').fill(user.email);
+  await expect(page.getByRole('button', { name: 'Confirm Deletion' })).not.toBeDisabled();
   await page.getByRole('button', { name: 'Confirm Deletion' }).click();
 
   await page.waitForURL(`${WEBAPP_BASE_URL}/signin`);