1cdab21514
- account/+page.svelte: remove `aria-hidden="true"` from the leave-confirm and data-mode-warning bottom-sheet backdrops. The attribute cascaded into the dialog children, making the inner Abmelden/Aktivieren/Abbrechen buttons unreachable in the accessibility tree (and to Playwright's `getByRole`). Discovered while writing the E2E suite; the visual layout is unchanged. - join/+page.svelte: bump the PIN-copy button from `py-1` (28px tall) to `min-h-11 min-w-11 py-2` so it clears the ≥44px touch-target floor on mobile. Touch-target audit revealed the gap. - data-testid attributes on stable interactive elements (join name input, join submit, PIN modal + copy + continue, recovery PIN + submit + try- different-name, admin login password + submit + error, recover name + PIN + submit + error, upload header submit + sticky submit + caption textarea). Targeted at ~20 spots where semantic locators were ambiguous (e.g. two "Hochladen" buttons on /upload, German strings that may iterate). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
87 lines
2.9 KiB
Svelte
87 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
import { api, ApiError } from '$lib/api';
|
|
import { setAuth, getPin } from '$lib/auth';
|
|
import { browser } from '$app/environment';
|
|
|
|
let displayName = $state('');
|
|
let pin = $state('');
|
|
let error = $state('');
|
|
let loading = $state(false);
|
|
|
|
// Pre-fill PIN from localStorage if available
|
|
if (browser) {
|
|
const savedPin = getPin();
|
|
if (savedPin) pin = savedPin;
|
|
}
|
|
|
|
async function handleRecover() {
|
|
if (!displayName.trim() || !pin.trim()) return;
|
|
loading = true;
|
|
error = '';
|
|
try {
|
|
const res = await api.post<{
|
|
jwt: string;
|
|
user_id: string;
|
|
}>('/recover', { display_name: displayName.trim(), pin: pin.trim() });
|
|
|
|
setAuth(res.jwt, pin.trim(), res.user_id, displayName.trim());
|
|
goto('/feed');
|
|
} catch (e) {
|
|
if (e instanceof ApiError) {
|
|
error = e.message;
|
|
} else {
|
|
error = 'Ein Fehler ist aufgetreten.';
|
|
}
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
|
|
<div class="w-full max-w-sm">
|
|
<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Konto wiederherstellen</h1>
|
|
<p class="mb-6 text-center text-gray-600 dark:text-gray-400">Gib deinen Namen und deinen PIN ein.</p>
|
|
|
|
<form onsubmit={(e) => { e.preventDefault(); handleRecover(); }}>
|
|
<input
|
|
type="text"
|
|
bind:value={displayName}
|
|
placeholder="Dein Name"
|
|
maxlength={50}
|
|
data-testid="recover-name-input"
|
|
class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-lg text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
|
|
/>
|
|
<input
|
|
type="text"
|
|
bind:value={pin}
|
|
placeholder="4-stelliger PIN"
|
|
maxlength={4}
|
|
inputmode="numeric"
|
|
pattern="[0-9]*"
|
|
data-testid="recover-pin-input"
|
|
class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-center text-2xl font-mono tracking-widest text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
|
|
/>
|
|
|
|
{#if error}
|
|
<p class="mb-3 text-sm text-red-600 dark:text-red-400" data-testid="recover-error">{error}</p>
|
|
{/if}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading || !displayName.trim() || pin.length < 4}
|
|
data-testid="recover-submit"
|
|
class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
|
|
>
|
|
{loading ? 'Wird geladen...' : 'Wiederherstellen'}
|
|
</button>
|
|
</form>
|
|
|
|
<p class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
|
|
Noch kein Konto?
|
|
<a href="/join" class="text-blue-600 hover:underline dark:text-blue-400">Neu beitreten</a>
|
|
</p>
|
|
</div>
|
|
</div>
|