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';
	import { focusTrap } from '$lib/actions/focus-trap';

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

	// Name-taken state — shown instead of the normal form
	let nameTaken = $state(false);
	let takenName = $state('');
	let recoveryPin = $state('');
	let recoveryError = $state('');
	let recoveryLoading = $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, displayName.trim());
			pin = res.pin;
			showPinModal = true;
		} catch (e) {
			if (e instanceof ApiError && e.code === 'conflict') {
				takenName = displayName.trim();
				nameTaken = true;
			} else if (e instanceof ApiError) {
				error = e.message;
			} else {
				error = 'Ein Fehler ist aufgetreten.';
			}
		} finally {
			loading = false;
		}
	}

	async function handleInlineRecover() {
		if (recoveryPin.length < 4) return;
		recoveryLoading = true;
		recoveryError = '';
		try {
			const res = await api.post<{ jwt: string; user_id: string }>(
				'/recover',
				{ display_name: takenName, pin: recoveryPin.trim() }
			);
			setAuth(res.jwt, recoveryPin.trim(), res.user_id, takenName);
			goto('/feed');
		} catch (e) {
			if (e instanceof ApiError) {
				recoveryError = e.message;
			} else {
				recoveryError = 'Ein Fehler ist aufgetreten.';
			}
		} finally {
			recoveryLoading = false;
		}
	}

	function tryDifferentName() {
		nameTaken = false;
		recoveryPin = '';
		recoveryError = '';
		// Keep displayName so the user can edit it slightly
	}

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

	function goToFeed() {
		goto('/feed');
	}

	function closePinModal() {
		// setAuth has already run on join success — the user is authenticated.
		// Closing the PIN reminder while leaving them on /join would render the
		// (already-completed) join form again. Honor the dismissal by routing
		// them where they actually want to be.
		showPinModal = false;
		goto('/feed');
	}

	// Strip non-digits synchronously in the input handler so paste of "1234X"
	// never flashes the longer string. Auto-submits on the 4th digit so the
	// user doesn't have to chase the (now cosmetic) Anmelden button.
	function onRecoveryPinInput(e: Event) {
		const el = e.currentTarget as HTMLInputElement;
		const cleaned = el.value.replace(/\D/g, '').slice(0, 4);
		if (cleaned !== el.value) el.value = cleaned;
		recoveryPin = cleaned;
		if (recoveryPin.length === 4 && !recoveryLoading) {
			handleInlineRecover();
		}
	}
</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">

		{#if nameTaken}
			<!-- Name-taken state: sign in with PIN or choose a different name -->
			<div class="mb-5 rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-800/60 dark:bg-amber-950/30">
				<p class="font-semibold text-amber-900 dark:text-amber-200">„{takenName}" ist bereits vergeben.</p>
				<p class="mt-1 text-sm text-amber-800 dark:text-amber-300/90">
					Wähle einen anderen Namen, z.&nbsp;B. einen Spitznamen oder füge deinen Nachnamen hinzu
					(„{takenName} M." oder „{takenName} aus Berlin").
				</p>
			</div>

			<p class="mb-3 text-sm font-medium text-gray-700 dark:text-gray-300">
				Falls du das bist, melde dich mit deinem PIN an:
			</p>

			<form onsubmit={(e) => { e.preventDefault(); handleInlineRecover(); }}>
				<input
					type="text"
					value={recoveryPin}
					oninput={onRecoveryPinInput}
					placeholder="4-stelliger PIN"
					maxlength={4}
					inputmode="numeric"
					pattern="[0-9]*"
					data-testid="recovery-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 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"
				/>

				{#if recoveryError}
					<p class="mb-3 text-sm text-red-600 dark:text-red-400" data-testid="recovery-error">{recoveryError}</p>
				{/if}

				<button
					type="submit"
					disabled={recoveryLoading || recoveryPin.length < 4}
					data-testid="recovery-submit"
					class="mb-3 w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
				>
					{recoveryLoading ? 'Wird angemeldet...' : 'Anmelden'}
				</button>
			</form>

			<button
				onclick={tryDifferentName}
				data-testid="try-different-name"
				class="w-full rounded-lg border border-gray-300 px-4 py-3 font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
			>
				Anderen Namen wählen
			</button>

		{:else}
			<!-- Normal join form -->
			<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Willkommen!</h1>
			<p class="mb-6 text-center text-gray-600 dark:text-gray-400">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}
					data-testid="join-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"
				/>

				{#if error}
					<p class="mb-3 text-sm text-red-600 dark:text-red-400" data-testid="join-error">{error}</p>
				{/if}

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

			<p class="mt-4 text-center text-sm">
				<a href="/recover" data-testid="link-to-recover" class="text-blue-600 hover:underline dark:text-blue-400">Ich habe bereits einen Account</a>
			</p>
		{/if}

	</div>
</div>

{#if showPinModal}
	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4" data-testid="pin-modal">
		<div
			class="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg dark:bg-gray-900"
			role="dialog"
			aria-modal="true"
			aria-labelledby="pin-modal-title"
			use:focusTrap={{ onclose: closePinModal }}
		>
			<h2 id="pin-modal-title" class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">Dein Wiederherstellungs-PIN</h2>
			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
				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 dark:bg-gray-800">
				<span class="text-4xl font-mono font-bold tracking-widest text-gray-900 dark:text-gray-100" data-testid="pin-display">{pin}</span>
				<button
					onclick={copyPin}
					data-testid="pin-copy"
					class="min-h-11 min-w-11 rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:active:bg-gray-600"
				>
					{copied ? 'Kopiert!' : 'Kopieren'}
				</button>
			</div>

			<button
				onclick={goToFeed}
				data-testid="continue-to-feed"
				class="mb-2 w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400"
			>
				Weiter zur Galerie
			</button>
			<button
				type="button"
				onclick={closePinModal}
				class="w-full rounded-lg py-2 text-sm text-gray-500 hover:text-gray-700 active:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 dark:active:text-gray-200"
			>
				Schließen
			</button>
		</div>
	</div>
{/if}