lucent-laravel/front/js/svelte/account/Login.svelte

<script>
    import { getContext } from "svelte";
    import { apiPost } from "../../helpers";

    const channel = getContext("channel");
    let email = "";
    let submitted = false;

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

        apiPost(channel.lucentUrl + "/login", { email: email })
            .then(() => {
                submitted = true;
            })
            .catch(() => {});
    }
</script>

<div class="scope-login">
    <div class="bg-image"></div>
    <div class="login-form">
        {#if submitted}
            <div class="alert alert-info" role="alert">
                <p>
                    You will receive an email with a login link at <b>{email}</b
                    >.
                </p>
                <p>Check your spam folder</p>
            </div>
        {:else}
            <div class="form">
                <h2 class="mb-5">Enter Lucent</h2>

                <form on:submit={login}>
                    <p>
                        Submit your email address and you will receive a <b
                            >login link</b
                        > to your email
                    </p>
                    <p>Don't forget to check your spam folder</p>
                    <div class="mt-5 mb-3">
                        <label for="emailaddress" class="form-label"
                            >Email address</label
                        >
                        <input
                            type="email"
                            bind:value={email}
                            class="form-control"
                            id="emailaddress"
                            required
                        />
                    </div>

                    <button class="bt bt-primary">
                        Send email
                        <img
                            alt="indicator"
                            id="indicator"
                            class="htmx-indicator"
                            src="/img/spinner.svg"
                        />
                    </button>
                </form>
            </div>
        {/if}
    </div>
</div>