<script>
    import {getContext} from "svelte";
    import SpinnerButton from "../common/SpinnerButton.svelte";
    import axios from "axios";

    const channel = getContext("channel");
    let email = "";
    let message = "";

    function login(e) {
        e.preventDefault();

        axios
            .post(channel.lucentUrl + "/login", {
                email: email,
            })
            .then((response) => {
                message = "You will receive an email with a login link"
            })
            .catch((error) => {
            });
    }

</script>

<div class="wrapper-tiny">
    {#if message}
        <div class="alert alert-info" role="alert">
            {message}
        </div>

    {:else}

        <form on:submit={login}>
            <div class="mb-3">
                <label for="emailaddress" class="form-label">Email address</label>
                <input
                        type="email"
                        bind:value={email}
                        class="form-control"
                        id="emailaddress"
                        required
                />
            </div>


            <div class="text-center mt-5 d-block">
                <SpinnerButton label="Login"/>
            </div>


        </form>
    {/if}
</div>
