mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-25 01:11:13 -05:00
Implement account deletion system
This commit is contained in:
gpt-engineer-app[bot]
282
src/components/settings/AccountDeletionDialog.tsx
Normal file
282
src/components/settings/AccountDeletionDialog.tsx
Normal file
@@ -0,0 +1,282 @@
|
||||
import { useState } from 'react';
|
||||
import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter } from '@/components/ui/alert-dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { Loader2, AlertTriangle, Info } from 'lucide-react';
|
||||
|
||||
interface AccountDeletionDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
userEmail: string;
|
||||
onDeletionRequested: () => void;
|
||||
}
|
||||
|
||||
export function AccountDeletionDialog({ open, onOpenChange, userEmail, onDeletionRequested }: AccountDeletionDialogProps) {
|
||||
const [step, setStep] = useState<'warning' | 'confirm' | 'code'>('warning');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [confirmationCode, setConfirmationCode] = useState('');
|
||||
const [codeReceived, setCodeReceived] = useState(false);
|
||||
const [scheduledDate, setScheduledDate] = useState<string>('');
|
||||
const { toast } = useToast();
|
||||
|
||||
const handleRequestDeletion = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { data, error } = await supabase.functions.invoke('request-account-deletion', {
|
||||
body: {},
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
setScheduledDate(data.scheduled_deletion_at);
|
||||
setStep('code');
|
||||
onDeletionRequested();
|
||||
|
||||
toast({
|
||||
title: 'Deletion Requested',
|
||||
description: 'Check your email for the confirmation code.',
|
||||
});
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: 'Error',
|
||||
description: error.message || 'Failed to request account deletion',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirmDeletion = async () => {
|
||||
if (!confirmationCode || confirmationCode.length !== 6) {
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: 'Invalid Code',
|
||||
description: 'Please enter a 6-digit confirmation code',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const { error } = await supabase.functions.invoke('confirm-account-deletion', {
|
||||
body: { confirmation_code: confirmationCode },
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
toast({
|
||||
title: 'Account Deleted',
|
||||
description: 'Your account has been permanently deleted.',
|
||||
});
|
||||
|
||||
// Sign out and redirect
|
||||
await supabase.auth.signOut();
|
||||
window.location.href = '/';
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: 'Error',
|
||||
description: error.message || 'Failed to confirm deletion',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleResendCode = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { error } = await supabase.functions.invoke('resend-deletion-code', {
|
||||
body: {},
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
toast({
|
||||
title: 'Code Resent',
|
||||
description: 'A new confirmation code has been sent to your email.',
|
||||
});
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: 'Error',
|
||||
description: error.message || 'Failed to resend code',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setStep('warning');
|
||||
setConfirmationCode('');
|
||||
setCodeReceived(false);
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<AlertDialog open={open} onOpenChange={handleClose}>
|
||||
<AlertDialogContent className="max-w-2xl">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="flex items-center gap-2 text-destructive">
|
||||
<AlertTriangle className="w-5 h-5" />
|
||||
Delete Account
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription className="text-left space-y-4">
|
||||
{step === 'warning' && (
|
||||
<>
|
||||
<Alert>
|
||||
<Info className="w-4 h-4" />
|
||||
<AlertDescription>
|
||||
This action will permanently delete your account after a 2-week waiting period. Please read carefully.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="font-semibold text-foreground mb-2">What will be DELETED:</h4>
|
||||
<ul className="space-y-1 text-sm">
|
||||
<li>✗ Your profile information (username, bio, avatar, etc.)</li>
|
||||
<li>✗ Your reviews and ratings</li>
|
||||
<li>✗ Your personal preferences and settings</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold text-foreground mb-2">What will be PRESERVED:</h4>
|
||||
<ul className="space-y-1 text-sm">
|
||||
<li>✓ Your database submissions (park creations, ride additions, edits)</li>
|
||||
<li>✓ Photos you've uploaded (shown as "Submitted by [deleted user]")</li>
|
||||
<li>✓ Edit history and contributions</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
<strong>2-Week Waiting Period:</strong> Your account will be deactivated immediately, but you'll have 14 days to cancel before permanent deletion. You'll receive a confirmation code via email.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 'confirm' && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
Are you absolutely sure? This will deactivate your account immediately and schedule it for permanent deletion in 2 weeks.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{step === 'code' && (
|
||||
<div className="space-y-4">
|
||||
<Alert>
|
||||
<Info className="w-4 h-4" />
|
||||
<AlertDescription>
|
||||
Your account has been deactivated and will be deleted on{' '}
|
||||
<strong>{scheduledDate ? new Date(scheduledDate).toLocaleDateString() : '14 days from now'}</strong>.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<p className="text-sm">
|
||||
A 6-digit confirmation code has been sent to <strong>{userEmail}</strong>.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmationCode">Confirmation Code</Label>
|
||||
<Input
|
||||
id="confirmationCode"
|
||||
type="text"
|
||||
placeholder="000000"
|
||||
maxLength={6}
|
||||
value={confirmationCode}
|
||||
onChange={(e) => setConfirmationCode(e.target.value.replace(/\D/g, ''))}
|
||||
className="text-center text-2xl tracking-widest"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="codeReceived"
|
||||
checked={codeReceived}
|
||||
onCheckedChange={(checked) => setCodeReceived(checked === true)}
|
||||
/>
|
||||
<Label htmlFor="codeReceived" className="text-sm font-normal cursor-pointer">
|
||||
I have received the code in my email
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleResendCode}
|
||||
disabled={loading}
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Resend Code'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Alert>
|
||||
<AlertDescription className="text-xs">
|
||||
Note: You cannot confirm deletion until the 2-week period has passed. You can cancel at any time during this period.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
)}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
{step === 'warning' && (
|
||||
<>
|
||||
<Button variant="outline" onClick={handleClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={() => setStep('confirm')}>
|
||||
Continue
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 'confirm' && (
|
||||
<>
|
||||
<Button variant="outline" onClick={() => setStep('warning')}>
|
||||
Go Back
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleRequestDeletion}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
|
||||
Request Deletion
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 'code' && (
|
||||
<>
|
||||
<Button variant="outline" onClick={handleClose}>
|
||||
Close
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleConfirmDeletion}
|
||||
disabled={loading || !codeReceived || confirmationCode.length !== 6}
|
||||
>
|
||||
{loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
|
||||
Confirm Deletion
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user