75d186fad3
Add /account route showing display name (from localStorage), role badge, session expiry decoded from JWT, and recovery PIN display with copy button. Join and recover flows now persist display_name to localStorage via setAuth(). Feed header logout button replaced with person-icon link to /account; logout is available from the account page. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
84 lines
2.4 KiB
Svelte
84 lines
2.4 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">
|
|
<div class="w-full max-w-sm">
|
|
<h1 class="mb-2 text-center text-2xl font-bold text-gray-900">Konto wiederherstellen</h1>
|
|
<p class="mb-6 text-center text-gray-600">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}
|
|
class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-lg focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
|
|
/>
|
|
<input
|
|
type="text"
|
|
bind:value={pin}
|
|
placeholder="4-stelliger PIN"
|
|
maxlength={4}
|
|
inputmode="numeric"
|
|
pattern="[0-9]*"
|
|
class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-center text-2xl font-mono tracking-widest focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
|
|
/>
|
|
|
|
{#if error}
|
|
<p class="mb-3 text-sm text-red-600">{error}</p>
|
|
{/if}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading || !displayName.trim() || pin.length < 4}
|
|
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"
|
|
>
|
|
{loading ? 'Wird geladen...' : 'Wiederherstellen'}
|
|
</button>
|
|
</form>
|
|
|
|
<p class="mt-4 text-center text-sm text-gray-500">
|
|
Noch kein Konto?
|
|
<a href="/join" class="text-blue-600 hover:underline">Neu beitreten</a>
|
|
</p>
|
|
</div>
|
|
</div>
|