feat(settings): let users delete their account

src/components/DeleteAccountCard.jsx

@@ -0,0 +1,112 @@
+import {useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+import {Loader2, Trash2} from 'lucide-react';
+import {toast} from 'sonner';
+
+import {Button} from '@/components/ui/button';
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import {useResetAppearance} from '../context/PreferencesContext.jsx';
+import useSessionExpired from '../hooks/useSessionExpired.js';
+import {deleteAccount} from '../utils/account.js';
+import {clearSession} from '../utils/auth.js';
+
+const sameEmail = (typed, email) => !!email && typed.trim().toLowerCase() === email.toLowerCase();
+
+/**
+ * "Delete my account": Auth blocks the account at once and removes it after 30 days. The user types the own
+ * email against a misclick and the password against a borrowed session.
+ */
+export default function DeleteAccountCard({email}) {
+    const {t} = useTranslation();
+    const navigate = useNavigate();
+    const resetAppearance = useResetAppearance();
+    const expireSession = useSessionExpired();
+    const [typedEmail, setTypedEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [busy, setBusy] = useState(false);
+
+    const confirm = async () => {
+        setBusy(true);
+        try {
+            const response = await deleteAccount(password);
+            if (response.status === 204) {
+                clearSession();
+                resetAppearance();
+                toast.success(t('SETTINGS.DELETE_ACCOUNT.DONE'));
+                navigate('/', {replace: true});
+                return;
+            }
+            if (response.status === 401) {
+                expireSession();
+            } else if (response.status === 403) {
+                toast.error(t('SETTINGS.DELETE_ACCOUNT.WRONG_PASSWORD'));
+            } else if (response.status === 429) {
+                const minutes = Math.ceil(Number(response.headers.get('Retry-After') ?? 900) / 60);
+                toast.error(t('SETTINGS.DELETE_ACCOUNT.TOO_MANY', {minutes}));
+            } else {
+                toast.error(t('SETTINGS.DELETE_ACCOUNT.ERROR'));
+            }
+        } catch (err) {
+            console.error('Delete account error:', err);
+            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
+        }
+        setBusy(false);
+    };
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="flex items-center gap-2"><Trash2 className="size-4 text-destructive"/>{t('SETTINGS.DELETE_ACCOUNT.TITLE')}</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+                <p className="text-sm text-muted-foreground">{t('SETTINGS.DELETE_ACCOUNT.EXPLAIN')}</p>
+                <Dialog onOpenChange={(open) => { if (!open) { setTypedEmail(''); setPassword(''); } }}>
+                    <DialogTrigger asChild>
+                        <Button type="button" variant="outline" className="border-destructive text-destructive">
+                            <Trash2/>{t('SETTINGS.DELETE_ACCOUNT.BUTTON')}
+                        </Button>
+                    </DialogTrigger>
+                    <DialogContent>
+                        <DialogHeader>
+                            <DialogTitle>{t('SETTINGS.DELETE_ACCOUNT.DIALOG_TITLE')}</DialogTitle>
+                            <DialogDescription>{t('SETTINGS.DELETE_ACCOUNT.EXPLAIN')}</DialogDescription>
+                        </DialogHeader>
+                        <div className="space-y-2">
+                            <Label htmlFor="deleteEmail">{t('SETTINGS.DELETE_ACCOUNT.TYPE_EMAIL')}</Label>
+                            <Input id="deleteEmail" type="email" autoComplete="off" value={typedEmail}
+                                   onChange={(event) => setTypedEmail(event.target.value)}/>
+                        </div>
+                        <div className="space-y-2">
+                            <Label htmlFor="deletePassword">{t('SETTINGS.DELETE_ACCOUNT.PASSWORD')}</Label>
+                            <Input id="deletePassword" type="password" autoComplete="current-password" value={password}
+                                   onChange={(event) => setPassword(event.target.value)}/>
+                        </div>
+                        <DialogFooter>
+                            <DialogClose asChild>
+                                <Button type="button" variant="outline">{t('SETTINGS.DELETE_ACCOUNT.CANCEL')}</Button>
+                            </DialogClose>
+                            <Button type="button" variant="destructive" onClick={confirm}
+                                    disabled={busy || !password || !sameEmail(typedEmail, email)}>
+                                {busy ? <Loader2 className="animate-spin"/> : <Trash2/>}
+                                {t('SETTINGS.DELETE_ACCOUNT.CONFIRM')}
+                            </Button>
+                        </DialogFooter>
+                    </DialogContent>
+                </Dialog>
+            </CardContent>
+        </Card>
+    );
+}