<script lang="ts">
    import { loggedIn, login } from "$lib/auth";
    import { deriveKeyVault, encodeKeyVault } from "$lib/crypto";
    import { onMount } from "svelte";

    const onSubmit = async (e: SubmitEvent) => {
        e.preventDefault();
        const formData = new FormData(e.target as any);
        const passkey = formData.get('passkey') as string;
        await login(passkey);
        window.location.href = '/today';
    };

    onMount(() => {
        if (!window) return;

        if (loggedIn()) {
            window.location.href = '/today';
        }
    });
</script>

<div class="h-full grid place-items-center p-6">
    <form method="POST" class="p-6 rounded-3xl bg-white flex flex-col gap-2"
        onsubmit={onSubmit}
    >
        <h1 class="text-2xl font-bold">Login</h1>
        <input type="password" name="passkey" placeholder="Passkey"
            class="px-3 py-1 rounded-3xl outline-none bg-[#00000010]">
        <button type="submit" class="px-3 py-1 rounded-3xl cursor-pointer bg-[#2596be] cusor-pointer text-white">
            Login
        </button>
    </form>
</div>