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

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

    const channel = getContext("channel");
    let name = "";
    export let email = "";
    let errorMessage = "";

    function register(e) {
        e.preventDefault();
        errorMessage = "";

        apiPost(channel.lucentUrl + "/register", {
            name: name,
            email: email,
        })
            .then(() => {
                window.location = channel.lucentUrl + "/login";
            })
            .catch((error) => {
                errorMessage = error.response?.data.error;
                console.log({ errorMessage });
            });
    }
</script>

<div class="wrapper-tiny">
    <ErrorAlert message={errorMessage} />

    <form on:submit={register}>
        <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input
                type="text"
                bind:value={name}
                class="form-control"
                id="name"
            />
        </div>
        <div class="mb-3">
            <label for="email" class="form-label">Email address</label>
            <input
                type="email"
                bind:value={email}
                class="form-control"
                id="email"
            />
        </div>

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