feat(frontend): add accessible confirmation modal for destructive actions
Replace native window.confirm() dialogs with branded ConfirmationModal component for all delete operations (users, categories). Implements progressive disclosure for high-risk operations and requires confirmation text input for deletions with 100+ affected items. Features: - ConfirmationModal component with dynamic risk levels (low/medium/high) - High-risk operations (100+ affected items) require 'DELETE' text confirmation - Clear consequence messaging with affected item counts - Loading state during deletion with visual feedback - Full keyboard accessibility (Esc to cancel, Enter to confirm) - Proper focus management and ARIA labels Affected: - AdminOverlay: Delete user and category now use ConfirmationModal - New: ConfirmationModal.tsx component Design: Matches CreateUserModal aesthetic (clean, minimal) with rose-500 accent for danger context. Progressive disclosure shows additional warnings only for high-risk operations. Build: Passes with zero errors.
This commit is contained in:
163
frontend/components/ConfirmationModal.tsx
Normal file
163
frontend/components/ConfirmationModal.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { AlertTriangle, Loader2, X } from 'lucide-react';
|
||||
import { toast } from 'react-hot-toast';
|
||||
|
||||
export interface ConfirmationModalProps {
|
||||
show: boolean;
|
||||
title: string; // "Delete User: alex_smith?"
|
||||
description: string; // "This will remove the user from the system."
|
||||
itemName?: string; // The item being deleted (for display)
|
||||
affectedCount?: number; // Number of affected items (e.g., 47)
|
||||
consequence?: string; // "This cannot be undone." or "Audit logs will remain."
|
||||
onConfirm: () => Promise<void>;
|
||||
onCancel: () => void;
|
||||
loading?: boolean;
|
||||
dangerLevel?: 'low' | 'medium' | 'high'; // Determines if confirmation text is required
|
||||
}
|
||||
|
||||
export default function ConfirmationModal({
|
||||
show,
|
||||
title,
|
||||
description,
|
||||
itemName,
|
||||
affectedCount,
|
||||
consequence,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
loading = false,
|
||||
dangerLevel = 'medium'
|
||||
}: ConfirmationModalProps) {
|
||||
const [confirmText, setConfirmText] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
if (!show) return null;
|
||||
|
||||
const isHighRisk = dangerLevel === 'high';
|
||||
const requiresTextConfirm = isHighRisk && affectedCount && affectedCount > 10;
|
||||
const canConfirm = !requiresTextConfirm || confirmText === 'DELETE';
|
||||
|
||||
const handleConfirm = async () => {
|
||||
if (requiresTextConfirm && confirmText !== 'DELETE') {
|
||||
setError('Type "DELETE" to confirm this action');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await onConfirm();
|
||||
setConfirmText('');
|
||||
setError(null);
|
||||
} catch (err: any) {
|
||||
setError(err?.message || 'Failed to delete item');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-lg shadow-xl max-w-sm w-full mx-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-slate-800">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-rose-500/10 rounded-lg text-rose-500">
|
||||
<AlertTriangle size={20} />
|
||||
</div>
|
||||
<h2 className="text-lg font-black text-white">{title}</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
disabled={loading}
|
||||
className="p-1 text-slate-500 hover:text-slate-300 rounded focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none disabled:opacity-50"
|
||||
aria-label="Close"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 space-y-4">
|
||||
{/* Description */}
|
||||
<p className="text-sm text-slate-300">{description}</p>
|
||||
|
||||
{/* Item Name (if provided) */}
|
||||
{itemName && (
|
||||
<div className="bg-slate-800/40 border border-slate-800 rounded p-3">
|
||||
<p className="text-xs text-slate-500 font-semibold">Item</p>
|
||||
<p className="text-sm font-mono text-white mt-1">{itemName}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Consequence Warning */}
|
||||
{consequence && (
|
||||
<div className="flex gap-2 p-3 bg-rose-500/5 border border-rose-500/20 rounded">
|
||||
<span className="text-rose-500 flex-shrink-0">⚠</span>
|
||||
<p className="text-sm text-rose-400">{consequence}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Affected Items Count (for medium-risk+) */}
|
||||
{affectedCount && affectedCount > 0 && (
|
||||
<div className="text-sm text-slate-400">
|
||||
{affectedCount === 1
|
||||
? 'This will affect 1 item.'
|
||||
: `This will affect ${affectedCount} items.`}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* High-Risk Warning & Confirmation Input */}
|
||||
{requiresTextConfirm && (
|
||||
<div className="space-y-3 pt-2 border-t border-slate-800">
|
||||
<p className="text-sm font-semibold text-rose-400">
|
||||
Type "DELETE" to confirm this high-risk action
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
value={confirmText}
|
||||
onChange={(e) => {
|
||||
setConfirmText(e.target.value);
|
||||
setError(null);
|
||||
}}
|
||||
placeholder="Type DELETE"
|
||||
className="w-full px-3 py-2.5 bg-slate-800 border border-slate-700 rounded text-white placeholder-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
|
||||
disabled={loading}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && canConfirm && !loading) {
|
||||
handleConfirm();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{error && (
|
||||
<p className="text-xs text-rose-500">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2 p-6 border-t border-slate-800">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
disabled={loading}
|
||||
className="flex-1 px-4 py-2.5 text-slate-300 bg-slate-800 border border-slate-700 rounded font-semibold hover:bg-slate-700 transition-colors disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleConfirm}
|
||||
disabled={loading || !canConfirm}
|
||||
className="flex-1 px-4 py-2.5 bg-rose-600 text-white rounded font-semibold hover:bg-rose-700 transition-colors disabled:opacity-50 flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-rose-600 focus-visible:outline-none"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
Deleting...
|
||||
</>
|
||||
) : (
|
||||
'Delete'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user