feat: settings page exercises the password-change endpoint

The 0.10.0 backend endpoint had no UI caller — the audit flagged it
as either-ship-a-form-or-remove-the-endpoint dead code. Shipping the
form, plus the bearer-token-keeps-working regression test the audit
asked for to pin the docstring contract.

Backend:
- New test change_password_via_bearer_leaves_bearer_working asserts
  that PATCH /me/password called with Authorization: Bearer wipes
  cookie sessions but leaves the bearer (api_token) intact and usable
  — matches the docstring claim that bot tokens are opt-in to revoke.

Frontend:
- lib/api/auth.ts: new changePassword(input) wrapping PATCH
  /v1/auth/me/password. Vitest covers happy 204, 401 unauthenticated
  (wrong current), 400 invalid_input (weak new) — same envelope
  parsing shape used elsewhere.
- routes/settings/+page.svelte: minimal form with current /
  new / confirm fields, derived passwordsMatch + canSubmit guards
  (submit stays disabled until current is filled, new is ≥8 chars,
  new == confirm). Shows the API's message inline on failure.
  Documents the "other devices signed out, bot tokens stay" UX in a
  short hint.
- routes/+layout.svelte: new "Settings" link in the session-aware
  nav (between username and Logout) for authed users only.
- e2e/settings.spec.ts (5 cases): nav link reaches the form,
  successful change shows confirmation + clears the form, 401
  surfaces inline, password mismatch keeps submit disabled, anonymous
  user gets a sign-in prompt instead of the form.

Lockstep version bump to 0.11.0.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

backend/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "mangalord"
-version = "0.10.2"
+version = "0.11.0"
 edition = "2021"
 
 [lib]

backend/tests/api_auth.rs

@@ -319,6 +319,69 @@ async fn change_password_rotates_sessions_and_swaps_credentials(pool: PgPool) {
     assert_eq!(resp.status(), StatusCode::OK);
 }
 
+#[sqlx::test(migrations = "./migrations")]
+async fn change_password_via_bearer_leaves_bearer_working(pool: PgPool) {
+    // Bot scripts that call PATCH /me/password using Authorization:
+    // Bearer must keep their bearer working — change_password only
+    // wipes session rows, not api_tokens. Pin this behaviour so a
+    // future refactor that wipes everything would fail noisily.
+    let h = common::harness(pool);
+    let (_, cookie) = common::register_user(&h.app).await;
+
+    let resp = h
+        .app
+        .clone()
+        .oneshot(common::post_json_with_cookie(
+            "/api/v1/auth/tokens",
+            json!({ "name": "ci-bot" }),
+            &cookie,
+        ))
+        .await
+        .unwrap();
+    let bearer = common::body_json(resp).await["bearer"]
+        .as_str()
+        .unwrap()
+        .to_string();
+
+    // Use the bearer to change the password.
+    let resp = h
+        .app
+        .clone()
+        .oneshot({
+            let body = json!({
+                "current_password": "hunter2hunter2",
+                "new_password": "freshpassfreshpass"
+            });
+            axum::http::Request::builder()
+                .method("PATCH")
+                .uri("/api/v1/auth/me/password")
+                .header(axum::http::header::CONTENT_TYPE, "application/json")
+                .header(axum::http::header::AUTHORIZATION, format!("Bearer {bearer}"))
+                .body(axum::body::Body::from(body.to_string()))
+                .unwrap()
+        })
+        .await
+        .unwrap();
+    assert_eq!(resp.status(), StatusCode::NO_CONTENT);
+
+    // Cookie is dead (all sessions wiped).
+    let resp = h
+        .app
+        .clone()
+        .oneshot(common::get_with_cookie("/api/v1/auth/me", &cookie))
+        .await
+        .unwrap();
+    assert_eq!(resp.status(), StatusCode::UNAUTHORIZED);
+
+    // Bearer still works — that's the documented contract.
+    let resp = h
+        .app
+        .oneshot(common::get_with_bearer("/api/v1/auth/me", &bearer))
+        .await
+        .unwrap();
+    assert_eq!(resp.status(), StatusCode::OK);
+}
+
 #[sqlx::test(migrations = "./migrations")]
 async fn change_password_rejects_wrong_current_with_401(pool: PgPool) {
     let h = common::harness(pool);

frontend/e2e/settings.spec.ts

@@ -0,0 +1,109 @@
+import { test, expect, type Page } from '@playwright/test';
+
+const userFixture = {
+    id: 'u1',
+    username: 'alice',
+    created_at: '2026-01-01T00:00:00Z'
+};
+
+async function stubAuthenticated(page: Page) {
+    await page.route('**/api/v1/auth/me', (route) =>
+        route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ user: userFixture })
+        })
+    );
+}
+
+test('settings link shows for authed users and reaches the password form', async ({ page }) => {
+    await stubAuthenticated(page);
+    await page.route('**/api/v1/mangas?*', (route) =>
+        route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ items: [], page: { limit: 50, offset: 0, total: 0 } })
+        })
+    );
+
+    await page.goto('/');
+    await expect(page.getByTestId('nav-settings')).toBeVisible();
+    await page.getByTestId('nav-settings').click();
+    await expect(page).toHaveURL(/\/settings$/);
+    await expect(page.getByTestId('password-form')).toBeVisible();
+});
+
+test('changing password shows success and clears the form', async ({ page }) => {
+    await stubAuthenticated(page);
+    let patchCalls = 0;
+    let patchBody: unknown = null;
+    await page.route('**/api/v1/auth/me/password', async (route) => {
+        patchCalls += 1;
+        patchBody = JSON.parse(route.request().postData() ?? '{}');
+        await route.fulfill({ status: 204 });
+    });
+
+    await page.goto('/settings');
+    await page.getByTestId('current-password').fill('hunter2hunter2');
+    await page.getByTestId('new-password').fill('freshpassfreshpass');
+    await page.getByTestId('confirm-password').fill('freshpassfreshpass');
+    await page.getByTestId('password-submit').click();
+
+    await expect(page.getByTestId('password-success')).toContainText('Password updated');
+    expect(patchCalls).toBe(1);
+    expect(patchBody).toEqual({
+        current_password: 'hunter2hunter2',
+        new_password: 'freshpassfreshpass'
+    });
+    // Form should clear after success.
+    await expect(page.getByTestId('current-password')).toHaveValue('');
+});
+
+test('wrong current password surfaces the 401 envelope inline', async ({ page }) => {
+    await stubAuthenticated(page);
+    await page.route('**/api/v1/auth/me/password', (route) =>
+        route.fulfill({
+            status: 401,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                error: { code: 'unauthenticated', message: 'unauthenticated' }
+            })
+        })
+    );
+
+    await page.goto('/settings');
+    await page.getByTestId('current-password').fill('definitelyNotIt');
+    await page.getByTestId('new-password').fill('freshpassfreshpass');
+    await page.getByTestId('confirm-password').fill('freshpassfreshpass');
+    await page.getByTestId('password-submit').click();
+
+    await expect(page.getByTestId('password-error')).toBeVisible();
+});
+
+test('mismatched new + confirm disables the submit button', async ({ page }) => {
+    await stubAuthenticated(page);
+
+    await page.goto('/settings');
+    await page.getByTestId('current-password').fill('hunter2hunter2');
+    await page.getByTestId('new-password').fill('freshpassfreshpass');
+    await page.getByTestId('confirm-password').fill('different');
+
+    await expect(page.getByTestId('mismatch')).toBeVisible();
+    await expect(page.getByTestId('password-submit')).toBeDisabled();
+});
+
+test('anonymous user sees a sign-in prompt on /settings', async ({ page }) => {
+    await page.route('**/api/v1/auth/me', (route) =>
+        route.fulfill({
+            status: 401,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                error: { code: 'unauthenticated', message: 'unauthenticated' }
+            })
+        })
+    );
+
+    await page.goto('/settings');
+    await expect(page.getByTestId('settings-signin')).toBeVisible();
+    await expect(page.getByTestId('password-form')).toHaveCount(0);
+});

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mangalord-frontend",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "private": true,
   "type": "module",
   "scripts": {

frontend/src/lib/api/auth.test.ts

@@ -12,6 +12,7 @@ import {
     login,
     logout,
     me,
+    changePassword,
     createToken,
     deleteToken
 } from './auth';
@@ -110,6 +111,38 @@ describe('auth api client', () => {
         await expect(me()).rejects.toMatchObject({ status: 500 });
     });
 
+    it('changePassword PATCHes /v1/auth/me/password and handles 204', async () => {
+        fetchSpy.mockResolvedValueOnce(noContent());
+        await expect(
+            changePassword({
+                current_password: 'hunter2hunter2',
+                new_password: 'freshpassfreshpass'
+            })
+        ).resolves.toBeUndefined();
+        const url = fetchSpy.mock.calls[0][0] as string;
+        expect(url).toMatch(/\/v1\/auth\/me\/password$/);
+        const init = fetchSpy.mock.calls[0][1] as RequestInit;
+        expect(init.method).toBe('PATCH');
+        expect(JSON.parse(init.body as string)).toEqual({
+            current_password: 'hunter2hunter2',
+            new_password: 'freshpassfreshpass'
+        });
+    });
+
+    it('changePassword surfaces 401 (wrong current) via ApiError', async () => {
+        fetchSpy.mockResolvedValueOnce(envelope(401, 'unauthenticated', 'unauthenticated'));
+        await expect(
+            changePassword({ current_password: 'wrong', new_password: 'freshpassfreshpass' })
+        ).rejects.toMatchObject({ status: 401, code: 'unauthenticated' });
+    });
+
+    it('changePassword surfaces 400 (weak new) via ApiError', async () => {
+        fetchSpy.mockResolvedValueOnce(envelope(400, 'invalid_input', 'password must be at least 8 characters'));
+        await expect(
+            changePassword({ current_password: 'hunter2hunter2', new_password: 'short' })
+        ).rejects.toMatchObject({ status: 400, code: 'invalid_input' });
+    });
+
     it('createToken POSTs to /v1/auth/tokens and returns CreatedToken with bearer', async () => {
         fetchSpy.mockResolvedValueOnce(
             ok(

frontend/src/lib/api/auth.ts

@@ -35,6 +35,28 @@ export async function logout(): Promise<void> {
     await request<void>('/v1/auth/logout', { method: 'POST' });
 }
 
+export type ChangePassword = {
+    current_password: string;
+    new_password: string;
+};
+
+/**
+ * Rotates the password. Backend signs out every other session for this
+ * user and mints a fresh cookie for the caller (returned as Set-Cookie,
+ * applied automatically by the browser). Bot tokens are left alone.
+ *
+ * Throws ApiError with `status=401, code='unauthenticated'` for wrong
+ * `current_password`; `status=400, code='invalid_input'` for a weak new
+ * password.
+ */
+export async function changePassword(input: ChangePassword): Promise<void> {
+    await request<void>('/v1/auth/me/password', {
+        method: 'PATCH',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(input)
+    });
+}
+
 /**
  * Returns the current user, or `null` if no valid session.
  * Re-throws any non-401 error.

frontend/src/routes/+layout.svelte

@@ -34,6 +34,7 @@
             <span data-testid="session-loading" aria-busy="true">…</span>
         {:else if session.user}
             <span data-testid="session-user">{session.user.username}</span>
+            <a href="/settings" data-testid="nav-settings">Settings</a>
             <button type="button" onclick={handleLogout} disabled={loggingOut}>
                 {loggingOut ? 'Logging out…' : 'Logout'}
             </button>

frontend/src/routes/settings/+page.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { changePassword } from '$lib/api/auth';
+    import { ApiError } from '$lib/api/client';
+    import { session } from '$lib/session.svelte';
+
+    let currentPassword = $state('');
+    let newPassword = $state('');
+    let confirmPassword = $state('');
+    let submitting = $state(false);
+    let success = $state<string | null>(null);
+    let error: string | null = $state(null);
+
+    const passwordsMatch = $derived(
+        newPassword.length > 0 && newPassword === confirmPassword
+    );
+    const canSubmit = $derived(
+        Boolean(session.user) &&
+            currentPassword.length > 0 &&
+            newPassword.length >= 8 &&
+            passwordsMatch &&
+            !submitting
+    );
+
+    async function submit(e: SubmitEvent) {
+        e.preventDefault();
+        if (!canSubmit) return;
+        submitting = true;
+        success = null;
+        error = null;
+        try {
+            await changePassword({
+                current_password: currentPassword,
+                new_password: newPassword
+            });
+            success = 'Password updated. Other devices have been signed out.';
+            currentPassword = '';
+            newPassword = '';
+            confirmPassword = '';
+        } catch (e) {
+            if (e instanceof ApiError && e.status === 401 && !session.user) {
+                // The CurrentUser extractor rejected us — session must
+                // have been wiped externally. Bounce to login.
+                await goto('/login');
+                return;
+            }
+            error = e instanceof Error ? e.message : String(e);
+        } finally {
+            submitting = false;
+        }
+    }
+</script>
+
+<svelte:head>
+    <title>Settings — Mangalord</title>
+</svelte:head>
+
+<h1>Settings</h1>
+
+{#if !session.loaded}
+    <p data-testid="settings-loading">Loading…</p>
+{:else if !session.user}
+    <p data-testid="settings-signin">
+        <a href="/login">Sign in</a> to change your password.
+    </p>
+{:else}
+    <section class="card">
+        <h2>Change password</h2>
+        <p class="hint">
+            Changing your password signs out every other device using this account.
+            Bot API tokens keep working — revoke them individually from the bot-token
+            list if you want to invalidate them too.
+        </p>
+        <form onsubmit={submit} action="javascript:void(0)" data-testid="password-form">
+            <label>
+                Current password
+                <input
+                    type="password"
+                    bind:value={currentPassword}
+                    autocomplete="current-password"
+                    required
+                    data-testid="current-password"
+                />
+            </label>
+            <label>
+                New password
+                <input
+                    type="password"
+                    bind:value={newPassword}
+                    autocomplete="new-password"
+                    minlength="8"
+                    required
+                    data-testid="new-password"
+                />
+            </label>
+            <label>
+                Confirm new password
+                <input
+                    type="password"
+                    bind:value={confirmPassword}
+                    autocomplete="new-password"
+                    minlength="8"
+                    required
+                    data-testid="confirm-password"
+                />
+                {#if confirmPassword.length > 0 && !passwordsMatch}
+                    <span class="field-error" role="alert" data-testid="mismatch">
+                        Passwords don't match.
+                    </span>
+                {/if}
+            </label>
+            <button
+                type="submit"
+                disabled={!canSubmit}
+                data-testid="password-submit"
+            >
+                {submitting ? 'Updating…' : 'Update password'}
+            </button>
+            {#if success}
+                <p class="success" data-testid="password-success">{success}</p>
+            {/if}
+            {#if error}
+                <p role="alert" class="form-error" data-testid="password-error">{error}</p>
+            {/if}
+        </form>
+    </section>
+{/if}
+
+<style>
+    .card {
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        padding: 1rem;
+        max-width: 32rem;
+    }
+    .hint {
+        color: #555;
+        font-size: 0.95rem;
+    }
+    form {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+    label {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+    .field-error {
+        color: #b00020;
+        font-size: 0.9rem;
+    }
+    .form-error {
+        color: #b00020;
+    }
+    .success {
+        color: #0a7d2c;
+    }
+</style>