feat(settings): let users delete their account

README.md

@@ -54,6 +54,8 @@ To Be Played is split into three repositories:
   to Core once per page load (`POST /api/library/broken-images`, only with a session). Core repairs it at night;
   a repaired cover comes back as `imageUrl`.
 - German and English, dark mode, mobile layout, session-expired message instead of a silent logout.
+- **Delete my account** in the settings: a dialog asks for the own email and the password. Auth blocks the
+  account at once and removes it after 30 days; the page ends the session and goes to the landing page.
 - **Build version** in the settings: commit and build time of Frontend, Auth and Core, each hash links to its
   commit. CI passes them as Docker build args; a local build shows `dev`.
 - **Installable** as an app on phone and desktop (web app manifest, no service worker, so no offline mode).

public/i18n/de.json

@@ -106,7 +106,21 @@
       "UNLINKED": "Steam-Verknüpfung gelöst."
     },
     "VERSION": "Version",
-    "VERSION_UNKNOWN": "unbekannt"
+    "VERSION_UNKNOWN": "unbekannt",
+    "DELETE_ACCOUNT": {
+      "TITLE": "Konto löschen",
+      "EXPLAIN": "Dein Konto wird sofort gesperrt: kein Login, kein öffentliches Profil. Nach 30 Tagen wird es endgültig entfernt, mit Bibliothek, Backlog und Statistiken.",
+      "BUTTON": "Mein Konto löschen",
+      "DIALOG_TITLE": "Konto wirklich löschen?",
+      "TYPE_EMAIL": "Gib zur Bestätigung deine E-Mail ein",
+      "PASSWORD": "Passwort",
+      "CONFIRM": "Endgültig löschen",
+      "CANCEL": "Abbrechen",
+      "DONE": "Dein Konto ist gelöscht.",
+      "WRONG_PASSWORD": "Das Passwort ist falsch.",
+      "TOO_MANY": "Zu viele falsche Passwörter. Bitte in {{minutes}} Minuten erneut versuchen.",
+      "ERROR": "Das Konto konnte nicht gelöscht werden. Bitte später erneut versuchen."
+    }
   },
   "VALIDATION": {
     "EMAIL_REQUIRED": "Email ist erforderlich.",

public/i18n/en.json

@@ -106,7 +106,21 @@
       "UNLINKED": "Steam account unlinked."
     },
     "VERSION": "Version",
-    "VERSION_UNKNOWN": "unknown"
+    "VERSION_UNKNOWN": "unknown",
+    "DELETE_ACCOUNT": {
+      "TITLE": "Delete account",
+      "EXPLAIN": "Your account is blocked at once: no login, no public profile. After 30 days it is removed for good, with your library, backlog and stats.",
+      "BUTTON": "Delete my account",
+      "DIALOG_TITLE": "Delete your account?",
+      "TYPE_EMAIL": "Type your email to confirm",
+      "PASSWORD": "Password",
+      "CONFIRM": "Delete for good",
+      "CANCEL": "Cancel",
+      "DONE": "Your account is deleted.",
+      "WRONG_PASSWORD": "The password is wrong.",
+      "TOO_MANY": "Too many wrong passwords. Please try again in {{minutes}} minutes.",
+      "ERROR": "The account could not be deleted. Please try again later."
+    }
   },
   "VALIDATION": {
     "EMAIL_REQUIRED": "Email is required.",

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>
+    );
+}

src/components/DeleteAccountCard.test.jsx

@@ -0,0 +1,110 @@
+// @vitest-environment jsdom
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
+import {MemoryRouter, Route, Routes} from 'react-router-dom';
+import {toast} from 'sonner';
+import DeleteAccountCard from './DeleteAccountCard.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
+
+const EMAIL = 'player@example.com';
+
+const answer = (status, headers = {}) => ({ok: status < 300, status, headers: new Headers(headers), json: async () => ({})});
+
+const renderCard = () => render(
+    <MemoryRouter initialEntries={['/settings']}>
+        <Routes>
+            <Route path="/settings" element={<DeleteAccountCard email={EMAIL}/>}/>
+            <Route path="/" element={<p>landing</p>}/>
+            <Route path="/login" element={<p>login</p>}/>
+        </Routes>
+    </MemoryRouter>);
+
+const openAndFill = (email, password) => {
+    fireEvent.click(screen.getByRole('button', {name: 'SETTINGS.DELETE_ACCOUNT.BUTTON'}));
+    fireEvent.change(screen.getByLabelText('SETTINGS.DELETE_ACCOUNT.TYPE_EMAIL'), {target: {value: email}});
+    fireEvent.change(screen.getByLabelText('SETTINGS.DELETE_ACCOUNT.PASSWORD'), {target: {value: password}});
+};
+
+const confirmButton = () => screen.getByRole('button', {name: 'SETTINGS.DELETE_ACCOUNT.CONFIRM'});
+
+describe('DeleteAccountCard', () => {
+    beforeEach(() => {
+        localStorage.setItem('tbp_session', '1');
+        globalThis.fetch = vi.fn(async () => answer(204));
+    });
+
+    afterEach(() => {
+        cleanup();
+        localStorage.clear();
+        vi.clearAllMocks();
+    });
+
+    it('asks for the own email and a password before it deletes', () => {
+        renderCard();
+
+        openAndFill('someone@else.com', 'secret');
+        expect(confirmButton().disabled).toBe(true);
+
+        fireEvent.change(screen.getByLabelText('SETTINGS.DELETE_ACCOUNT.TYPE_EMAIL'), {target: {value: ' Player@Example.com '}});
+        expect(confirmButton().disabled).toBe(false);
+    });
+
+    it('sends the password, ends the session and goes to the landing page', async () => {
+        renderCard();
+        openAndFill(EMAIL, 'secret');
+
+        fireEvent.click(confirmButton());
+
+        expect(await screen.findByText('landing')).toBeTruthy();
+        const [url, init] = fetch.mock.calls[0];
+        expect(url).toMatch(/\/api\/users\/me$/);
+        expect(init.method).toBe('DELETE');
+        expect(JSON.parse(init.body)).toEqual({password: 'secret'});
+        expect(localStorage.getItem('tbp_session')).toBeNull();
+        expect(toast.success).toHaveBeenCalledWith('SETTINGS.DELETE_ACCOUNT.DONE');
+    });
+
+    it('keeps the dialog open on a wrong password', async () => {
+        fetch.mockResolvedValue(answer(403));
+        renderCard();
+        openAndFill(EMAIL, 'wrong');
+
+        fireEvent.click(confirmButton());
+
+        await waitFor(() => expect(toast.error).toHaveBeenCalledWith('SETTINGS.DELETE_ACCOUNT.WRONG_PASSWORD'));
+        expect(confirmButton()).toBeTruthy();
+        expect(localStorage.getItem('tbp_session')).toBe('1');
+    });
+
+    it('shows the lock message after too many wrong passwords', async () => {
+        fetch.mockResolvedValue(answer(429, {'Retry-After': '900'}));
+        renderCard();
+        openAndFill(EMAIL, 'wrong');
+
+        fireEvent.click(confirmButton());
+
+        await waitFor(() => expect(toast.error).toHaveBeenCalledWith('SETTINGS.DELETE_ACCOUNT.TOO_MANY'));
+    });
+
+    it('opens the login page when the session is gone', async () => {
+        fetch.mockResolvedValue(answer(401));
+        renderCard();
+        openAndFill(EMAIL, 'secret');
+
+        fireEvent.click(confirmButton());
+
+        expect(await screen.findByText('login')).toBeTruthy();
+    });
+
+    it('shows the network error when Auth does not answer', async () => {
+        fetch.mockRejectedValue(new TypeError('Failed to fetch'));
+        renderCard();
+        openAndFill(EMAIL, 'secret');
+
+        fireEvent.click(confirmButton());
+
+        await waitFor(() => expect(toast.error).toHaveBeenCalledWith('INFO.ERROR.NETWORK_FAILURE'));
+    });
+});

src/components/ui/dialog.jsx

@@ -0,0 +1,106 @@
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogClose({
+  ...props
+}) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay
+        data-slot="dialog-overlay"
+        className="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg sm:max-w-lg",
+          className
+        )}
+        {...props}>
+        {children}
+        <DialogPrimitive.Close
+          className="absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  )
+}
+
+function DialogHeader({
+  className,
+  ...props
+}) {
+  return <div data-slot="dialog-header" className={cn("flex flex-col gap-2 text-left", className)} {...props} />
+}
+
+function DialogFooter({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props} />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props} />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props} />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+}

src/pages/SettingsPage.jsx

@@ -15,6 +15,7 @@ import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/c
 import {Skeleton} from '@/components/ui/skeleton';
 import {Switch} from '@/components/ui/switch';
 import BuildVersionCard from '../components/BuildVersionCard.jsx';
+import DeleteAccountCard from '../components/DeleteAccountCard.jsx';
 import FormField from '../components/FormField.jsx';
 import SteamAccountCard from '../components/SteamAccountCard.jsx';
 import ProfileStatsSettings from '../components/stats/ProfileStatsSettings.jsx';
@@ -466,6 +467,8 @@ export default function SettingsPage() {
             </Card>
 
             <BuildVersionCard/>
+
+            <DeleteAccountCard email={profile?.email}/>
         </div>
     );
 }

src/utils/account.js

@@ -0,0 +1,11 @@
+import {apiFetch} from './api.js';
+
+/**
+ * DELETE /api/users/me on Auth: 204 (cookies cleared), 403 INVALID_PASSWORD, 429 with Retry-After in seconds.
+ */
+export const deleteAccount = (password) =>
+    apiFetch(`${import.meta.env.VITE_API_URL}/api/users/me`, {
+        method: 'DELETE',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({password}),
+    });