feat(profile): public profile page and the switch in settings

/u/<name> shows a public profile without login. Settings get the switch and
the link; every settings save now sends the other saved values, and removing
the display name also makes the profile private.

src/pages/SettingsPage.test.jsx

@@ -0,0 +1,76 @@
+// @vitest-environment jsdom
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
+import {MemoryRouter} from 'react-router-dom';
+import SettingsPage from './SettingsPage.jsx';
+import {PreferencesProvider} from '../context/PreferencesContext.jsx';
+
+vi.mock('react-i18next', async () => {
+    const mock = await import('../test/i18n-mock.js');
+    const i18n = {language: 'de', changeLanguage: vi.fn()};
+    return {...mock, useTranslation: () => ({t: mock.useTranslation().t, i18n})};
+});
+vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
+
+const profile = (overrides = {}) => ({
+    id: 1, email: 'a@b.de', role: 'USER', displayName: 'Lobo', steamId: '76561198005679788',
+    settings: {useDarkTheme: true, language: 'de', publicProfile: true}, ...overrides,
+});
+
+const puts = () => fetch.mock.calls.filter(([, init]) => init?.method === 'PUT').map(([, init]) => JSON.parse(init.body));
+
+function renderPage(me) {
+    globalThis.fetch = vi.fn(async (url, init) => (init?.method === 'PUT'
+        ? {ok: true, status: 200, json: async () => ({token: 'token'})}
+        : {ok: true, status: 200, json: async () => me}));
+    render(<MemoryRouter><PreferencesProvider><SettingsPage/></PreferencesProvider></MemoryRouter>);
+}
+
+describe('SettingsPage public profile', () => {
+    beforeEach(() => localStorage.setItem('tbp_jwt', 'token'));
+
+    afterEach(() => {
+        cleanup();
+        localStorage.clear();
+    });
+
+    it('keeps the public profile when another setting is saved', async () => {
+        renderPage(profile());
+
+        fireEvent.click(await screen.findByRole('switch', {name: 'SETTINGS.DARK_THEME'}));
+
+        await waitFor(() => expect(puts()).toHaveLength(1));
+        expect(puts()[0].publicProfile).toBe(true);
+    });
+
+    it('turns the public profile off and shows the link while it is on', async () => {
+        renderPage(profile());
+
+        expect(await screen.findByText(/\/u\/Lobo$/)).toBeTruthy();
+        fireEvent.click(screen.getByRole('switch', {name: 'SETTINGS.PUBLIC_PROFILE'}));
+
+        await waitFor(() => expect(puts()).toHaveLength(1));
+        expect(puts()[0]).toMatchObject({publicProfile: false, displayName: 'Lobo'});
+        await waitFor(() => expect(screen.queryByText(/\/u\/Lobo$/)).toBeNull());
+    });
+
+    it('needs a display name first', async () => {
+        renderPage(profile({displayName: null, settings: {useDarkTheme: true, language: 'de', publicProfile: false}}));
+
+        const toggle = await screen.findByRole('switch', {name: 'SETTINGS.PUBLIC_PROFILE'});
+        expect(toggle.disabled).toBe(true);
+        expect(screen.getByText('SETTINGS.PUBLIC_PROFILE_NEEDS_NAME')).toBeTruthy();
+    });
+
+    it('turns the public profile off when the display name is removed', async () => {
+        renderPage(profile());
+
+        const name = await screen.findByLabelText('SETTINGS.DISPLAY_NAME');
+        fireEvent.change(name, {target: {value: ''}});
+        fireEvent.click(screen.getByRole('button', {name: 'SETTINGS.SAVE_PROFILE'}));
+
+        await waitFor(() => expect(puts()).toHaveLength(1));
+        expect(puts()[0]).toMatchObject({displayName: null, publicProfile: false});
+        await waitFor(() => expect(screen.getByRole('switch', {name: 'SETTINGS.PUBLIC_PROFILE'}).getAttribute('aria-checked')).toBe('false'));
+    });
+});