<script>
    import AccountLayout from "../../layouts/AccountLayout.svelte";
    import { post } from "../../modules/remote";
    let { channel, data } = $props();
    let isLoading = $state(false);
    function login(e) {
        e.preventDefault();
        isLoading = true;
        post(
            channel.lucentUrl + "/verify",
            {
                email: data.email,
                token: data.token,
            },
            (data, err) => {
                window.location = channel.lucentUrl;
            },
        );
    }
</script>

<AccountLayout {body} {channel}></AccountLayout>
{#snippet body()}
    <div class="wrapper-tiny">
        <form onsubmit={login}>
            <div class="mb-3 text-center">
                <h3>Login as {data.email}</h3>
            </div>

            <div class="text-center mt-5 d-block">
                <button aria-busy={isLoading}>Enter</button>
            </div>
        </form>
    </div>
{/snippet}
