EventSnap/frontend/src/routes/join/+page.svelte

<script lang="ts">
	import { goto } from '$app/navigation';
	import { api, ApiError } from '$lib/api';
	import { setAuth } from '$lib/auth';

	let displayName = $state('');
	let error = $state('');
	let loading = $state(false);
	let showPinModal = $state(false);
	let pin = $state('');
	let copied = $state(false);

	async function handleJoin() {
		if (!displayName.trim()) return;
		loading = true;
		error = '';
		try {
			const res = await api.post<{
				jwt: string;
				pin: string;
				user_id: string;
				is_new: boolean;
			}>('/join', { display_name: displayName.trim() });

			setAuth(res.jwt, res.pin, res.user_id);
			pin = res.pin;
			showPinModal = true;
		} catch (e) {
			if (e instanceof ApiError) {
				error = e.message;
			} else {
				error = 'Ein Fehler ist aufgetreten.';
			}
		} finally {
			loading = false;
		}
	}

	function copyPin() {
		navigator.clipboard.writeText(pin);
		copied = true;
		setTimeout(() => (copied = false), 2000);
	}

	function goToFeed() {
		goto('/feed');
	}
</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">Willkommen!</h1>
		<p class="mb-6 text-center text-gray-600">Gib deinen Namen ein, um dem Event beizutreten.</p>

		<form onsubmit={(e) => { e.preventDefault(); handleJoin(); }}>
			<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"
			/>

			{#if error}
				<p class="mb-3 text-sm text-red-600">{error}</p>
			{/if}

			<button
				type="submit"
				disabled={loading || !displayName.trim()}
				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...' : 'Beitreten'}
			</button>
		</form>

		<p class="mt-4 text-center text-sm text-gray-500">
			Schon dabei?
			<a href="/recover" class="text-blue-600 hover:underline">Mit PIN wiederherstellen</a>
		</p>
	</div>
</div>

{#if showPinModal}
	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
		<div class="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg">
			<h2 class="mb-2 text-xl font-bold text-gray-900">Dein Wiederherstellungs-PIN</h2>
			<p class="mb-4 text-sm text-gray-600">
				Merke dir diesen PIN! Du brauchst ihn, um dein Konto auf einem anderen Gerät wiederherzustellen.
			</p>

			<div class="mb-4 flex items-center justify-center gap-3 rounded-lg bg-gray-100 p-4">
				<span class="text-4xl font-mono font-bold tracking-widest text-gray-900">{pin}</span>
				<button
					onclick={copyPin}
					class="rounded-md bg-gray-200 px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-300"
				>
					{copied ? 'Kopiert!' : 'Kopieren'}
				</button>
			</div>

			<button
				onclick={goToFeed}
				class="w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700"
			>
				Weiter zur Galerie
			</button>
		</div>
	</div>
{/if}