"use client"; import { AlertTriangle, Loader2, Trash2 } from "lucide-react"; import { useCallback, useState } from "react"; import { cn } from "@/lib/utils"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/registry/new-york/ui/alert-dialog"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Checkbox } from "@/registry/new-york/ui/checkbox"; import { Field, FieldContent, FieldError, FieldLabel, } from "@/registry/new-york/ui/field"; import { InputGroup, InputGroupInput, } from "@/registry/new-york/ui/input-group"; import { Label } from "../../ui/label"; export interface AuthAccountDeleteProps { onDelete?: (data: { confirmText: string }) => void; className?: string; isLoading?: boolean; errors?: { confirmText?: string; general?: string; }; confirmText?: string; dataSummary?: { projects?: number; files?: number; storage?: string; }; } interface WarningBannerProps { className?: string; } function WarningBanner({ className }: WarningBannerProps) { return (

); } interface DataSummaryProps { dataSummary: { projects?: number; files?: number; storage?: string; }; } function DataSummary({ dataSummary }: DataSummaryProps) { return (

Data that will be deleted:

•{" "} {dataSummary.projects} project {dataSummary.projects !== 1 ? "s" : ""}
•{" "} {dataSummary.files} file{dataSummary.files !== 1 ? "s" : ""}
• {dataSummary.storage} of storage
• All account settings and preferences
• All personal information

); } interface ConfirmTextFieldProps { id: string; value: string; error?: string; confirmText: string; onChange: (value: string) => void; } function ConfirmTextField({ id, value, error, confirmText, onChange, }: ConfirmTextFieldProps) { return ( Type {confirmText} to confirm {" "} * onChange(e.target.value)} placeholder={`${confirmText}…`} required style={{ fontSize: "16px" }} type="text" value={value} /> {error && ( {error} )} ); } interface AcknowledgmentCheckboxProps { id: string; checked: boolean; label: string; onCheckedChange: (checked: boolean) => void; } function AcknowledgmentCheckbox({ id, checked, label, onCheckedChange, }: AcknowledgmentCheckboxProps) { return (

onCheckedChange(checked === true)} /> {label}

); } interface DeleteConfirmationDialogProps { onOpenChange: (open: boolean) => void; typedConfirm: string; acknowledgeDataLoss: boolean; acknowledgeIrreversible: boolean; confirmText: string; isLoading: boolean; isFormValid: boolean; confirmTextError?: string; onTypedConfirmChange: (value: string) => void; onAcknowledgeDataLossChange: (checked: boolean) => void; onAcknowledgeIrreversibleChange: (checked: boolean) => void; onDelete: () => void; onReset: () => void; } function DeleteConfirmationDialog({ onOpenChange, typedConfirm, acknowledgeDataLoss, acknowledgeIrreversible, confirmText, isLoading, isFormValid, confirmTextError, onTypedConfirmChange, onAcknowledgeDataLossChange, onAcknowledgeIrreversibleChange, onDelete, onReset, }: DeleteConfirmationDialogProps) { const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { if (e.key === "Enter" && isFormValid && !isLoading) { e.preventDefault(); onDelete(); } if (e.key === "Escape" && !isLoading) { onOpenChange(false); onReset(); } }, [isFormValid, isLoading, onDelete, onOpenChange, onReset] ); const completedSteps = [ typedConfirm === confirmText, acknowledgeDataLoss, acknowledgeIrreversible, ].filter(Boolean).length; return ( This action is permanent and cannot be undone. Please confirm by typing {confirmText}{" "} below.

Cancel {isLoading ? ( <> ); } export default function AuthAccountDelete({ onDelete, className, isLoading = false, errors, confirmText = "DELETE", dataSummary, }: AuthAccountDeleteProps) { const [typedConfirm, setTypedConfirm] = useState(""); const [acknowledgeDataLoss, setAcknowledgeDataLoss] = useState(false); const [acknowledgeIrreversible, setAcknowledgeIrreversible] = useState(false); const [isDialogOpen, setIsDialogOpen] = useState(false); const isFormValid = typedConfirm === confirmText && acknowledgeDataLoss && acknowledgeIrreversible; const handleDelete = useCallback(() => { if (!isFormValid) { return; } onDelete?.({ confirmText: typedConfirm, }); }, [isFormValid, typedConfirm, onDelete]); const handleReset = useCallback(() => { setTypedConfirm(""); setAcknowledgeDataLoss(false); setAcknowledgeIrreversible(false); }, []); const handleDialogOpenChange = useCallback( (open: boolean) => { setIsDialogOpen(open); if (!open) { handleReset(); } }, [handleReset] ); const confirmTextError = errors?.confirmText; const generalError = errors?.general; return ( Delete account Permanently delete your account and all associated data

{generalError && (

{generalError}

)} {dataSummary && }

); }

Example Usage