web-app-launcher/src/routes/register/+page.svelte

<script lang="ts">
	import { t } from 'svelte-i18n';
	import { superForm } from 'sveltekit-superforms';
	import type { PageData } from './$types.js';
	import AmbientBackground from '$lib/components/background/AmbientBackground.svelte';

	let { data }: { data: PageData } = $props();

	const { form, errors, enhance, submitting } = superForm(data.form);
</script>

<svelte:head>
	<title>{$t('auth.register')} — {$t('app_title')}</title>
</svelte:head>

<AmbientBackground />

<main class="relative z-10 flex min-h-screen items-center justify-center bg-background/80 p-4 text-foreground">
	<div class="w-full max-w-md rounded-xl border border-border bg-card/90 p-8 shadow-xl backdrop-blur-sm">
		<div class="mb-8 text-center">
			<div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
				<svg
					class="h-6 w-6 text-primary"
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					stroke-width="2"
					stroke-linecap="round"
					stroke-linejoin="round"
				>
					<path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4-4v2" />
					<circle cx="9" cy="7" r="4" />
					<line x1="19" y1="8" x2="19" y2="14" />
					<line x1="22" y1="11" x2="16" y2="11" />
				</svg>
			</div>
			<h1 class="text-2xl font-bold text-card-foreground">{$t('auth.register_title')}</h1>
			<p class="mt-1 text-sm text-muted-foreground">{$t('auth.register_subtitle')}</p>
		</div>

		<form method="POST" use:enhance class="space-y-4">
			<div>
				<label for="displayName" class="mb-1 block text-sm font-medium text-card-foreground">
					{$t('auth.display_name')}
				</label>
				<input
					id="displayName"
					name="displayName"
					type="text"
					autocomplete="name"
					bind:value={$form.displayName}
					class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
					placeholder={$t('auth.display_name_placeholder')}
				/>
				{#if $errors.displayName}
					<p class="mt-1 text-sm text-destructive">{$errors.displayName[0]}</p>
				{/if}
			</div>

			<div>
				<label for="email" class="mb-1 block text-sm font-medium text-card-foreground">
					{$t('auth.email')}
				</label>
				<input
					id="email"
					name="email"
					type="email"
					autocomplete="email"
					bind:value={$form.email}
					class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
					placeholder={$t('auth.email_placeholder')}
				/>
				{#if $errors.email}
					<p class="mt-1 text-sm text-destructive">{$errors.email[0]}</p>
				{/if}
			</div>

			<div>
				<label for="password" class="mb-1 block text-sm font-medium text-card-foreground">
					{$t('auth.password')}
				</label>
				<input
					id="password"
					name="password"
					type="password"
					autocomplete="new-password"
					bind:value={$form.password}
					class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
					placeholder={$t('auth.password_placeholder_register')}
				/>
				{#if $errors.password}
					<p class="mt-1 text-sm text-destructive">{$errors.password[0]}</p>
				{/if}
			</div>

			<button
				type="submit"
				disabled={$submitting}
				class="w-full rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
			>
				{#if $submitting}
					<span class="flex items-center justify-center gap-2">
						<span class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"></span>
						{$t('auth.register_submitting')}
					</span>
				{:else}
					{$t('auth.register_submit')}
				{/if}
			</button>
		</form>

		<p class="mt-6 text-center text-sm text-muted-foreground">
			{$t('auth.have_account')}
			<a href="/login" class="font-medium text-primary hover:underline">{$t('auth.sign_in_link')}</a>
		</p>
	</div>
</main>