<script>
    import favicon from "$lib/assets/favicon.png";
    import {toast} from "$lib/toast.svelte.js";
    import {PUBLIC_API_URL} from "$env/static/public";
    import {goto} from "$app/navigation";

    let email = $state("");
    let password = $state("");

    const submit = async ()=>{
        const body = {
            email: email,
            password: password
        };

        const response = await fetch(`${PUBLIC_API_URL}/user/login`, {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            credentials: "include",
            body: JSON.stringify(body)
        });

        const responseBody = await response.json();
        if(!response.ok){
            toast(responseBody.error.message, "error");
        }else{
            goto("/dashboard");
        }
    }
</script>

<main>
    <a href="/" class="logo">
        <span class="logo-icon">
            <img src={favicon} alt="ChatRPG logo" width="35" height="35" />
        </span>
        <span class="logo-text">ChatRPG</span>
    </a>

    <div class="form-glow">
        <form class="standardForm" onsubmit={submit}>
            <h2>Welcome Back</h2>

            <label>Email
                <!-- svelte-ignore a11y_autofocus -->
                <input bind:value={email} type="email" required autofocus>
            </label>

            <label>Password
                <input bind:value={password} type="password" required>
            </label>

            <button type="submit">Log In</button>

            <p>Don't have an account? <a href="/register">Sign up</a></p>
        </form>
    </div>
</main>

<style>
    main {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.75rem;
        padding: 2rem 1rem;
    }

    a.logo {
        display: flex;
        align-items: center;
        gap: 14px;
        text-decoration: none;
        color: #e5e5ea;
        font-weight: 700;
        font-size: 32px;
        letter-spacing: -0.5px;
    }

    a.logo img {
        width: 48px;
        height: 48px;
    }

    a.logo .logo-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    h2 {
        text-align: center;
    }

</style>
