feat: require typed confirmation for bulk document delete (#128)

Bulk delete of PENDING/DRAFT envelopes is a hard, unrecoverable delete.
Require an Amazon-style typed confirmation ("Delete N documents") before
the destructive button enables, so a mis-click on the bulk toolbar can no
longer wipe documents. Confirmation phrase is localized via Lingui and
pluralized for the selection count and envelope type.

Closes #127

Co-authored-by: Reese Herber <herberr@ctxw1k73vf.peninsula.wednet.edu>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: 3 people

apps/remix/app/components/dialogs/envelopes-bulk-delete-dialog.tsx

@@ -1,8 +1,13 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
 import { plural } from '@lingui/core/macro';
 import { Plural, useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
@@ -15,6 +20,15 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type EnvelopesBulkDeleteDialogProps = {
@@ -40,6 +54,31 @@ export const EnvelopesBulkDeleteDialog = ({
 
   const isDocument = envelopeType === EnvelopeType.DOCUMENT;
 
+  const confirmationMessage = isDocument
+    ? plural(envelopeIds.length, {
+        one: 'Delete # document',
+        other: 'Delete # documents',
+      })
+    : plural(envelopeIds.length, {
+        one: 'Delete # template',
+        other: 'Delete # templates',
+      });
+
+  const ZBulkDeleteFormSchema = z.object({
+    confirmation: z.literal(confirmationMessage, {
+      errorMap: () => ({ message: t`You must type "${confirmationMessage}" to confirm` }),
+    }),
+  });
+
+  const form = useForm<z.infer<typeof ZBulkDeleteFormSchema>>({
+    resolver: zodResolver(ZBulkDeleteFormSchema),
+    defaultValues: {
+      confirmation: '',
+    },
+  });
+
+  const isConfirmed = form.watch('confirmation') === confirmationMessage;
+
   const { mutateAsync: bulkDeleteEnvelopes, isPending } = trpc.envelope.bulk.delete.useMutation({
     onSuccess: async (result) => {
       // Invalidate the appropriate query based on envelope type.
@@ -84,6 +123,16 @@ export const EnvelopesBulkDeleteDialog = ({
     },
   });
 
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  const onFormSubmit = async () => {
+    await bulkDeleteEnvelopes({ envelopeIds });
+  };
+
   return (
     <Dialog {...props} open={open} onOpenChange={onOpenChange}>
       <DialogContent>
@@ -148,27 +197,50 @@ export const EnvelopesBulkDeleteDialog = ({
           </AlertDescription>
         </Alert>
 
-        <DialogFooter>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => onOpenChange(false)}
-            disabled={isPending}
-          >
-            <Trans>Cancel</Trans>
-          </Button>
-
-          <Button
-            onClick={(e) => {
-              e.preventDefault();
-              void bulkDeleteEnvelopes({ envelopeIds });
-            }}
-            loading={isPending}
-            variant="destructive"
-          >
-            <Trans>Delete</Trans>
-          </Button>
-        </DialogFooter>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset className="flex h-full flex-col space-y-4" disabled={isPending}>
+              <FormField
+                control={form.control}
+                name="confirmation"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>
+                        Confirm by typing{' '}
+                        <span className="text-destructive font-semibold">{confirmationMessage}</span>
+                      </Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" autoComplete="off" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  onClick={() => onOpenChange(false)}
+                  disabled={isPending}
+                >
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button
+                  type="submit"
+                  loading={isPending}
+                  disabled={!isConfirmed}
+                  variant="destructive"
+                >
+                  <Trans>Delete</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );

packages/app-tests/e2e/documents/bulk-document-actions.spec.ts

@@ -130,7 +130,15 @@ test('[BULK_ACTIONS]: can delete multiple draft documents', async ({ page }) =>
   await expect(page.getByText('You are about to delete 2 documents')).toBeVisible();
   await expect(page.getByText('irreversible')).toBeVisible();
 
-  await page.getByRole('dialog').getByRole('button', { name: 'Delete' }).click();
+  const deleteButton = page.getByRole('dialog').getByRole('button', { name: 'Delete' });
+
+  // The destructive button stays disabled until the exact confirmation phrase is typed.
+  await expect(deleteButton).toBeDisabled();
+
+  await page.getByRole('dialog').getByRole('textbox').fill('Delete 2 documents');
+  await expect(deleteButton).toBeEnabled();
+
+  await deleteButton.click();
 
   await expectToastTextToBeVisible(page, 'Documents deleted');
 
@@ -173,6 +181,7 @@ test('[BULK_ACTIONS]: selection clears after successful delete', async ({ page }
   await expect(page.getByText('1 selected')).toBeVisible();
 
   await page.getByRole('button', { name: 'Delete' }).click();
+  await page.getByRole('dialog').getByRole('textbox').fill('Delete 1 document');
   await page.getByRole('dialog').getByRole('button', { name: 'Delete' }).click();
 
   await expectToastTextToBeVisible(page, 'Documents deleted');

packages/app-tests/e2e/templates/bulk-template-actions.spec.ts

@@ -132,7 +132,15 @@ test('[BULK_ACTIONS]: can delete multiple templates', async ({ page }) => {
   await expect(page.getByText('You are about to delete 2 templates')).toBeVisible();
   await expect(page.getByText('irreversible')).toBeVisible();
 
-  await page.getByRole('dialog').getByRole('button', { name: 'Delete' }).click();
+  const deleteButton = page.getByRole('dialog').getByRole('button', { name: 'Delete' });
+
+  // The destructive button stays disabled until the exact confirmation phrase is typed.
+  await expect(deleteButton).toBeDisabled();
+
+  await page.getByRole('dialog').getByRole('textbox').fill('Delete 2 templates');
+  await expect(deleteButton).toBeEnabled();
+
+  await deleteButton.click();
 
   await expectToastTextToBeVisible(page, 'Templates deleted');
 
@@ -175,6 +183,7 @@ test('[BULK_ACTIONS]: selection clears after successful delete', async ({ page }
   await expect(page.getByText('1 selected')).toBeVisible();
 
   await page.getByRole('button', { name: 'Delete' }).click();
+  await page.getByRole('dialog').getByRole('textbox').fill('Delete 1 template');
   await page.getByRole('dialog').getByRole('button', { name: 'Delete' }).click();
 
   await expectToastTextToBeVisible(page, 'Templates deleted');