web-app-launcher/src/routes/login/+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);

	const showLocalForm = $derived(data.authMode === 'local' || data.authMode === 'both');
	const showOAuthButton = $derived(data.authMode === 'oauth' || data.authMode === 'both');
</script>

<svelte:head>
	<title>{$t('auth.login_submit')} — {$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-[1.6rem] border border-border bg-card/90 p-8 shadow-[var(--shadow-lift)] backdrop-blur-sm">
		<div class="mb-8 text-center">
			<div class="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-2xl text-primary-foreground shadow-[var(--shadow-soft)]" style="background: linear-gradient(135deg, var(--room-peach), var(--room-terra));">
				<svg
					class="h-7 w-7"
					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"
				>
					<rect x="3" y="3" width="7" height="7" />
					<rect x="14" y="3" width="7" height="7" />
					<rect x="14" y="14" width="7" height="7" />
					<rect x="3" y="14" width="7" height="7" />
				</svg>
			</div>
			<h1 class="text-2xl font-bold text-card-foreground">{$t('auth.login_title')}</h1>
			<p class="mt-1 text-sm text-muted-foreground">{$t('auth.login_subtitle')}</p>
		</div>

		{#if showOAuthButton}
			<a
				href="/auth/oauth/authorize"
				class="flex w-full items-center justify-center gap-2 rounded-xl border border-border bg-background px-4 py-2.5 text-sm font-semibold text-foreground transition-colors hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30"
			>
				<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
					<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
					<polyline points="10 17 15 12 10 7" />
					<line x1="15" y1="12" x2="3" y2="12" />
				</svg>
				{$t('auth.oauth_signin')}
			</a>
		{/if}

		{#if showOAuthButton && showLocalForm}
			<div class="relative my-4">
				<div class="absolute inset-0 flex items-center">
					<div class="w-full border-t border-border"></div>
				</div>
				<div class="relative flex justify-center text-xs uppercase">
					<span class="bg-card px-2 text-muted-foreground">{$t('auth.or')}</span>
				</div>
			</div>
		{/if}

		{#if showLocalForm}
			<form method="POST" use:enhance class="space-y-4">
				<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-xl 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-visible:ring-2 focus-visible:ring-primary/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="current-password"
						bind:value={$form.password}
						class="w-full rounded-xl 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-visible:ring-2 focus-visible:ring-primary/30"
						placeholder={$t('auth.password_placeholder')}
					/>
					{#if $errors.password}
						<p class="mt-1 text-sm text-destructive">{$errors.password[0]}</p>
					{/if}
				</div>

				<div class="flex items-center justify-between gap-4">
					<label class="flex items-center gap-2 text-sm text-muted-foreground">
						<input
							type="checkbox"
							name="rememberMe"
							bind:checked={$form.rememberMe}
							class="h-4 w-4 rounded border-input text-primary focus-visible:ring-2 focus-visible:ring-primary/30"
						/>
						<span>{$t('auth.remember_me')}</span>
					</label>
					<a href="/forgot-password" class="text-xs text-primary hover:underline">
						{$t('auth.forgot_password')}
					</a>
				</div>

				<button
					type="submit"
					disabled={$submitting}
					class="w-full rounded-xl bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground shadow-[var(--shadow-soft)] transition-all hover:-translate-y-0.5 hover:bg-primary/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 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.login_submitting')}
						</span>
					{:else}
						{$t('auth.login_submit')}
					{/if}
				</button>
			</form>
		{/if}

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