"use client"; import { AlertTriangle, Eye, EyeOff, Loader2, Shield, Trash2, } from "lucide-react"; import { useCallback, useState } from "react"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; import { Field, FieldContent, FieldError, FieldLabel, } from "@/components/ui/field"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@/components/ui/input-group"; import { cn } from "@/lib/utils"; export interface AuthAccountDeleteProps { onDelete?: (data: { password: string; confirmText: string }) => void; className?: string; isLoading?: boolean; errors?: { password?: string; confirmText?: string; general?: string; }; confirmText?: string; // Text user must type to confirm (e.g., "DELETE") dataSummary?: { projects?: number; files?: number; storage?: string; }; } export default function AuthAccountDelete({ onDelete, className, isLoading = false, errors, confirmText = "DELETE", dataSummary, }: AuthAccountDeleteProps) { const [password, setPassword] = useState(""); const [typedConfirm, setTypedConfirm] = useState(""); const [acknowledgeDataLoss, setAcknowledgeDataLoss] = useState(false); const [acknowledgeIrreversible, setAcknowledgeIrreversible] = useState(false); const [showPassword, setShowPassword] = useState(false); const [isDialogOpen, setIsDialogOpen] = useState(false); const handleDelete = useCallback(() => { if ( !password.trim() || typedConfirm !== confirmText || !acknowledgeDataLoss || !acknowledgeIrreversible ) { return; } onDelete?.({ password, confirmText: typedConfirm, }); }, [ password, typedConfirm, confirmText, acknowledgeDataLoss, acknowledgeIrreversible, onDelete, ]); const isFormValid = password.trim() && typedConfirm === confirmText && acknowledgeDataLoss && acknowledgeIrreversible; const passwordError = errors?.password; const confirmTextError = errors?.confirmText; const generalError = errors?.general; return ( Delete account Permanently delete your account and all associated data

{generalError && (

{generalError}

)}

This action cannot be undone

This will permanently delete your account and remove all of your data from our servers. This action is irreversible.

{dataSummary && (

Data that will be deleted:

• {dataSummary.projects} project(s)
• {dataSummary.files} file(s)
• {dataSummary.storage} of storage
• All account settings and preferences
• All personal information

)} Confirm account deletion This action is permanent and cannot be undone. Please confirm by entering your password and typing{" "} {confirmText}{" "} below.

Password * setPassword(e.target.value)} placeholder="Enter your password" required type={showPassword ? "text" : "password"} value={password} /> { e.preventDefault(); setShowPassword((prev) => !prev); }} type="button" > {showPassword ? ( ) : ( )} {passwordError && ( {passwordError} )} Type {confirmText} to confirm * setTypedConfirm(e.target.value)} placeholder={confirmText} required type="text" value={typedConfirm} /> {confirmTextError && ( {confirmTextError} )}

setAcknowledgeDataLoss(checked === true) } /> I understand that all my data will be permanently deleted and cannot be recovered

setAcknowledgeIrreversible(checked === true) } /> I understand this action is irreversible

{ setPassword(""); setTypedConfirm(""); setAcknowledgeDataLoss(false); setAcknowledgeIrreversible(false); }} > Cancel {isLoading ? ( <> Deleting… ) : ( <> Delete account permanently )}

); }

Example Usage