OnePieceDle/src/routes/(game)/login/+page.svelte

<script lang="ts">
	import { enhance } from '$app/forms';
	import type { ActionData } from './$types';

	export let form: ActionData;

	let isSignUp = false;
	let name = '';
	let email = '';
	let password = '';
	let confirmPassword = '';
	let isLoading = false;

	const handleToggle = () => {
		isSignUp = !isSignUp;
		name = '';
		email = '';
		password = '';
		confirmPassword = '';
		form = null;
	};
</script>

<svelte:head>
	<title>OnePieceDle - {isSignUp ? 'Inscription' : 'Connexion'}</title>
</svelte:head>

<main class="relative min-h-[calc(100vh-5rem)] bg-slate-950 text-slate-100">
	<div class="absolute inset-0 bg-gradient-to-br from-slate-950/85 via-slate-900/60 to-slate-950/80"></div>
	<div
		class="absolute inset-0 mix-blend-screen opacity-20 bg-[radial-gradient(circle_at_top,rgba(255,215,84,0.35),transparent_55%)]"
	></div>

	<div class="relative mx-auto flex w-full max-w-2xl flex-col items-center justify-center px-6 py-10">
		<div class="w-full space-y-8">
			<!-- Header -->
			<div class="text-center">
				<h1 class="text-4xl font-black uppercase tracking-[0.3em] text-amber-50 sm:text-5xl">
					OnePieceDle
				</h1>
				<p class="mt-4 text-slate-300">
					{isSignUp ? 'Créer votre compte' : 'Bienvenue, pirate'}
				</p>
			</div>

			<!-- Form Card -->
			<div class="rounded-3xl border border-white/10 bg-white/5 p-8 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur">
				<form
					method="POST"
					action={isSignUp ? '?/signUpEmail' : '?/signInEmail'}
					use:enhance={() => {
						isLoading = true;
						return async ({ update }) => {
							isLoading = false;
							await update();
						};
					}}
					class="space-y-6"
				>
					<!-- Name Field (Sign Up Only) -->
					{#if isSignUp}
						<div>
							<label for="name" class="block text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">
								Nom
							</label>
							<input
								id="name"
								type="text"
								name="name"
								bind:value={name}
								required
								placeholder="Votre nom"
								class="mt-3 w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-slate-500 transition focus:border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-300/30"
							/>
						</div>
					{/if}

					<!-- Email Field -->
					<div>
						<label for="email" class="block text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">
							E-mail
						</label>
						<input
							id="email"
							type="email"
							name="email"
							bind:value={email}
							required
							placeholder="votremail@email.com"
							class="mt-3 w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-slate-500 transition focus:border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-300/30"
						/>
					</div>

					<!-- Password Field -->
					<div>
						<label for="password" class="block text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">
						Mot de passe
						</label>
						<input
							id="password"
							type="password"
							name="password"
							bind:value={password}
							required
							placeholder="••••••••"
							class="mt-3 w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-slate-500 transition focus:border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-300/30"
						/>
					</div>

					<!-- Confirm Password Field (Sign Up Only) -->
					{#if isSignUp}
						<div>
							<label
								for="confirmPassword"
								class="block text-sm font-semibold uppercase tracking-[0.2em] text-amber-100"
							>
								Confirmer le mot de passe
							</label>
							<input
								id="confirmPassword"
								type="password"
								name="confirmPassword"
								bind:value={confirmPassword}
								required
								placeholder="••••••••"
								class="mt-3 w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-slate-500 transition focus:border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-300/30"
							/>
						</div>
					{/if}

					<!-- Error Message -->
					{#if form?.message}
						<div class="rounded-lg border border-red-500/30 bg-red-900/20 px-4 py-3 text-sm text-red-200">
							{form.message}
						</div>
					{/if}

					<!-- Submit Button -->
					<button
						type="submit"
						disabled={isLoading}
						class="w-full rounded-full bg-amber-300 px-6 py-3 text-sm font-semibold text-slate-900 transition disabled:opacity-50 hover:bg-amber-200"
					>
						{isLoading ? 'Chargement...' : isSignUp ? 'Créer un compte' : 'Se connecter'}
					</button>
				</form>

				<!-- Toggle Sign Up / Login -->
				<div class="mt-6 border-t border-white/10 pt-6">
					<p class="text-center text-sm text-slate-400">
						{isSignUp ? 'Vous avez déjà un compte ?' : "Vous n'avez pas de compte ?"}
						<button
							type="button"
							on:click={handleToggle}
							class="text-amber-300 transition hover:text-amber-200"
						>
							{isSignUp ? 'Se connecter' : "S'inscrire"}
						</button>
					</p>
				</div>
			</div>

			<!-- Back to Home -->
			<div class="text-center">
				<a href="/" class="text-sm text-slate-400 transition hover:text-slate-300">
					← Retour à l'accueil
				</a>
			</div>
		</div>
	</div>
</main>