mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 08:11:13 -05:00
feat: Implement mandatory AAL2 for superuser actions
This commit is contained in:
gpt-engineer-app[bot]
368
src/components/admin/AdminUserDeletionDialog.tsx
Normal file
368
src/components/admin/AdminUserDeletionDialog.tsx
Normal file
@@ -0,0 +1,368 @@
|
||||
import { useState } from 'react';
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { AlertTriangle, Trash2, Shield, CheckCircle2 } from 'lucide-react';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { MFAChallenge } from '@/components/auth/MFAChallenge';
|
||||
import { toast } from '@/hooks/use-toast';
|
||||
import type { UserRole } from '@/hooks/useUserRole';
|
||||
|
||||
interface AdminUserDeletionDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
targetUser: {
|
||||
userId: string;
|
||||
username: string;
|
||||
email: string;
|
||||
displayName?: string;
|
||||
roles: UserRole[];
|
||||
};
|
||||
onDeletionComplete: () => void;
|
||||
}
|
||||
|
||||
type DeletionStep = 'warning' | 'aal2_verification' | 'final_confirm' | 'deleting' | 'complete';
|
||||
|
||||
export function AdminUserDeletionDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
targetUser,
|
||||
onDeletionComplete
|
||||
}: AdminUserDeletionDialogProps) {
|
||||
const { session } = useAuth();
|
||||
const [step, setStep] = useState<DeletionStep>('warning');
|
||||
const [confirmationText, setConfirmationText] = useState('');
|
||||
const [acknowledged, setAcknowledged] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [factorId, setFactorId] = useState<string | null>(null);
|
||||
|
||||
// Reset state when dialog opens/closes
|
||||
const handleOpenChange = (isOpen: boolean) => {
|
||||
if (!isOpen) {
|
||||
setStep('warning');
|
||||
setConfirmationText('');
|
||||
setAcknowledged(false);
|
||||
setError(null);
|
||||
setFactorId(null);
|
||||
}
|
||||
onOpenChange(isOpen);
|
||||
};
|
||||
|
||||
// Step 1: Show warning and proceed
|
||||
const handleContinueFromWarning = async () => {
|
||||
setError(null);
|
||||
|
||||
// Check if user needs AAL2 verification
|
||||
const { data: factorsData } = await supabase.auth.mfa.listFactors();
|
||||
const hasMFAEnrolled = factorsData?.totp?.some(f => f.status === 'verified') || false;
|
||||
|
||||
if (hasMFAEnrolled) {
|
||||
// Check current AAL from JWT
|
||||
if (session) {
|
||||
const jwt = session.access_token;
|
||||
const payload = JSON.parse(atob(jwt.split('.')[1]));
|
||||
const currentAal = payload.aal || 'aal1';
|
||||
|
||||
if (currentAal !== 'aal2') {
|
||||
// Need to verify MFA
|
||||
const verifiedFactor = factorsData?.totp?.find(f => f.status === 'verified');
|
||||
if (verifiedFactor) {
|
||||
setFactorId(verifiedFactor.id);
|
||||
setStep('aal2_verification');
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If no MFA or already at AAL2, go directly to final confirmation
|
||||
setStep('final_confirm');
|
||||
};
|
||||
|
||||
// Step 2: Handle successful AAL2 verification
|
||||
const handleAAL2Success = () => {
|
||||
setStep('final_confirm');
|
||||
};
|
||||
|
||||
// Step 3: Perform deletion
|
||||
const handleDelete = async () => {
|
||||
setError(null);
|
||||
setStep('deleting');
|
||||
|
||||
try {
|
||||
const { data, error: functionError } = await supabase.functions.invoke('admin-delete-user', {
|
||||
body: { targetUserId: targetUser.userId }
|
||||
});
|
||||
|
||||
if (functionError) {
|
||||
throw functionError;
|
||||
}
|
||||
|
||||
if (!data.success) {
|
||||
if (data.errorCode === 'aal2_required') {
|
||||
// Session degraded during deletion, restart AAL2 flow
|
||||
setError('Your session requires re-verification. Please verify again.');
|
||||
const { data: factorsData } = await supabase.auth.mfa.listFactors();
|
||||
const verifiedFactor = factorsData?.totp?.find(f => f.status === 'verified');
|
||||
if (verifiedFactor) {
|
||||
setFactorId(verifiedFactor.id);
|
||||
setStep('aal2_verification');
|
||||
} else {
|
||||
setStep('warning');
|
||||
}
|
||||
return;
|
||||
}
|
||||
throw new Error(data.error || 'Failed to delete user');
|
||||
}
|
||||
|
||||
// Success
|
||||
setStep('complete');
|
||||
|
||||
setTimeout(() => {
|
||||
toast({
|
||||
title: 'User Deleted',
|
||||
description: `${targetUser.username} has been permanently deleted.`,
|
||||
});
|
||||
onDeletionComplete();
|
||||
handleOpenChange(false);
|
||||
}, 2000);
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error deleting user:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to delete user');
|
||||
setStep('final_confirm');
|
||||
}
|
||||
};
|
||||
|
||||
const isDeleteEnabled = confirmationText === 'DELETE' && acknowledged;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogContent
|
||||
className="sm:max-w-lg"
|
||||
onInteractOutside={(e) => step === 'deleting' && e.preventDefault()}
|
||||
>
|
||||
{/* Step 1: Warning */}
|
||||
{step === 'warning' && (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<div className="flex items-center gap-2 justify-center mb-2">
|
||||
<AlertTriangle className="h-6 w-6 text-destructive" />
|
||||
<DialogTitle className="text-destructive">Delete User Account</DialogTitle>
|
||||
</div>
|
||||
<DialogDescription className="text-center">
|
||||
You are about to permanently delete this user's account
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* User details */}
|
||||
<div className="p-4 border rounded-lg bg-muted/50">
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<span className="text-sm font-medium">Username:</span>
|
||||
<span className="ml-2 text-sm">{targetUser.username}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium">Email:</span>
|
||||
<span className="ml-2 text-sm">{targetUser.email}</span>
|
||||
</div>
|
||||
{targetUser.displayName && (
|
||||
<div>
|
||||
<span className="text-sm font-medium">Display Name:</span>
|
||||
<span className="ml-2 text-sm">{targetUser.displayName}</span>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<span className="text-sm font-medium">Roles:</span>
|
||||
<span className="ml-2 text-sm">{targetUser.roles.join(', ') || 'None'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Critical warning */}
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription className="font-semibold">
|
||||
This action is IMMEDIATE and PERMANENT. It cannot be undone.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
{/* What will be deleted */}
|
||||
<div>
|
||||
<h4 className="font-semibold text-sm mb-2 text-destructive">Will be deleted:</h4>
|
||||
<ul className="text-sm space-y-1 list-disc list-inside text-muted-foreground">
|
||||
<li>User profile and personal information</li>
|
||||
<li>All reviews and ratings</li>
|
||||
<li>Account preferences and settings</li>
|
||||
<li>Authentication credentials</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* What will be preserved */}
|
||||
<div>
|
||||
<h4 className="font-semibold text-sm mb-2">Will be preserved (as anonymous):</h4>
|
||||
<ul className="text-sm space-y-1 list-disc list-inside text-muted-foreground">
|
||||
<li>Content submissions (parks, rides, etc.)</li>
|
||||
<li>Uploaded photos</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 justify-end pt-2">
|
||||
<Button variant="outline" onClick={() => handleOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleContinueFromWarning}>
|
||||
Continue
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Step 2: AAL2 Verification */}
|
||||
{step === 'aal2_verification' && factorId && (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<div className="flex items-center gap-2 justify-center mb-2">
|
||||
<Shield className="h-6 w-6 text-primary" />
|
||||
<DialogTitle>MFA Verification Required</DialogTitle>
|
||||
</div>
|
||||
<DialogDescription className="text-center">
|
||||
This is a critical action that requires additional verification
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<MFAChallenge
|
||||
factorId={factorId}
|
||||
onSuccess={handleAAL2Success}
|
||||
onCancel={() => {
|
||||
setStep('warning');
|
||||
setError(null);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Step 3: Final Confirmation */}
|
||||
{step === 'final_confirm' && (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<div className="flex items-center gap-2 justify-center mb-2">
|
||||
<Trash2 className="h-6 w-6 text-destructive" />
|
||||
<DialogTitle className="text-destructive">Final Confirmation</DialogTitle>
|
||||
</div>
|
||||
<DialogDescription className="text-center">
|
||||
Type DELETE to confirm permanent deletion
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
<div className="font-semibold mb-1">Last chance to cancel!</div>
|
||||
<div className="text-sm">
|
||||
Deleting {targetUser.username} will immediately and permanently remove their account.
|
||||
</div>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">
|
||||
Type <span className="font-mono font-bold text-destructive">DELETE</span> to confirm:
|
||||
</label>
|
||||
<Input
|
||||
value={confirmationText}
|
||||
onChange={(e) => setConfirmationText(e.target.value)}
|
||||
placeholder="Type DELETE"
|
||||
className="font-mono"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-2">
|
||||
<Checkbox
|
||||
id="acknowledge"
|
||||
checked={acknowledged}
|
||||
onCheckedChange={(checked) => setAcknowledged(checked as boolean)}
|
||||
/>
|
||||
<label
|
||||
htmlFor="acknowledge"
|
||||
className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
I understand this action cannot be undone and will permanently delete this user's account
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 justify-end pt-2">
|
||||
<Button variant="outline" onClick={() => handleOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDelete}
|
||||
disabled={!isDeleteEnabled}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Delete User Permanently
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Step 4: Deleting */}
|
||||
{step === 'deleting' && (
|
||||
<div className="py-8 text-center space-y-4">
|
||||
<div className="flex justify-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-1">Deleting User...</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
This may take a moment. Please do not close this dialog.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 5: Complete */}
|
||||
{step === 'complete' && (
|
||||
<div className="py-8 text-center space-y-4">
|
||||
<div className="flex justify-center">
|
||||
<CheckCircle2 className="h-12 w-12 text-green-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-1">User Deleted Successfully</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{targetUser.username} has been permanently removed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user