<script>
	import { supabase } from '../../supabaseClient';
	import { goto } from '$app/navigation';

	let email = '';
	let password = '';

	const handleLogin = async () => {
		const { data, error } = await supabase.auth.signInWithPassword({
			email: email,
			password: password
		});

		if (error) {
			alert(error.message);
		} else {
			goto('/members');
		}
	};
</script>

<form
	class="flex flex-col gap-10 justify-center items-center bg-zinc-700 mx-auto max-w-sm p-10 rounded-3xl shadow-2xl variant-glass"
	on:submit|preventDefault={handleLogin}
>
	<h1 class="h2">Kirjaudu</h1>
	<div class="w-full flex flex-col gap-4">
		<label for="username" class="label">Käyttäjätunnus</label>
		<input
			class="input"
			type="text"
			id="username"
			placeholder="Käyttäjätunnus"
			bind:value={email}
		/>
	</div>
	<div class="w-full flex flex-col gap-4">
		<label for="password">Salasana</label>
		<input
			class="input"
			type="password"
			id="password"
			placeholder="Salasana"
			bind:value={password}
		/>
	</div>
	<button on:submit|preventDefault={handleLogin} type="submit" class="btn variant-filled-surface"
		>Kirjaudu</button
	>
</form>
