gamestream-webtransport-proxy/frontend/src/routes/login/+page.svelte

<script lang="ts">
	import { goto } from '$app/navigation';
	import { setToken, isAuthenticated } from '../stores/authStore.svelte';
	import { onMount } from 'svelte';

	let username = $state('');
	let password = $state('');
	let error = $state('');
	let loading = $state(false);

	onMount(() => {
		if (isAuthenticated()) {
			goto('/');
		}
	});

	async function handleLogin(event: Event) {
		event.preventDefault();
		error = '';
		loading = true;

		try {
			const response = await fetch('/api/auth/login', {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({ username, password })
			});

			if (!response.ok) {
				const data = await response.json().catch(() => null);
				error = data?.description || 'Invalid username or password';
				return;
			}

			const data = await response.json();
			setToken(data.token);
			await goto('/');
		} catch (e) {
			error = 'Connection error. Please try again.';
		} finally {
			loading = false;
		}
	}
</script>

<svelte:head>
	<title>Login</title>
</svelte:head>

<div class="login-container">
	<div class="login-box">
		<h1>GameStream</h1>
		<form onsubmit={handleLogin}>
			<div class="field">
				<label for="username">Username</label>
				<input
					id="username"
					type="text"
					bind:value={username}
					autocomplete="username"
					required
					disabled={loading}
				/>
			</div>
			<div class="field">
				<label for="password">Password</label>
				<input
					id="password"
					type="password"
					bind:value={password}
					autocomplete="current-password"
					required
					disabled={loading}
				/>
			</div>
			{#if error}
				<div class="error">{error}</div>
			{/if}
			<button type="submit" disabled={loading}>
				{loading ? 'Signing in...' : 'Sign in'}
			</button>
		</form>
	</div>
</div>

<style>
	.login-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
	}

	.login-box {
		background-color: #1a1a2e;
		border: 1px solid #333;
		border-radius: 12px;
		padding: 2.5rem;
		width: 100%;
		max-width: 380px;
	}

	h1 {
		color: #e0e0e0;
		margin: 0 0 1.5rem 0;
		font-size: 1.5rem;
	}

	.field {
		margin-bottom: 1rem;
	}

	label {
		display: block;
		color: #aaa;
		font-size: 0.85rem;
		margin-bottom: 0.3rem;
	}

	input {
		width: 100%;
		padding: 0.6rem 0.8rem;
		border: 1px solid #444;
		border-radius: 6px;
		background-color: #0f0f23;
		color: #e0e0e0;
		font-size: 1rem;
		box-sizing: border-box;
	}

	input:focus {
		outline: none;
		border-color: #00aaff;
	}

	input:disabled {
		opacity: 0.6;
	}

	.error {
		color: #ff4444;
		font-size: 0.85rem;
		margin-bottom: 1rem;
	}

	button {
		width: 100%;
		padding: 0.7rem;
		border: none;
		border-radius: 6px;
		background-color: #00aaff;
		color: white;
		font-size: 1rem;
		cursor: pointer;
		transition: background-color 0.2s;
	}

	button:hover:not(:disabled) {
		background-color: #0088cc;
	}

	button:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}
</style>