recipes-leemorgan-dev/src/routes/register/+page.svelte

<script>
    import {enhance} from "$app/forms";
    import {untrack} from "svelte";
    import {notify} from "$lib/notifier.svelte.js";

    let {form} = $props();
    let nameInput;

    $effect(()=>{
        nameInput?.focus();
    });

    $effect(()=>{
        if(form) untrack(()=>{notify("error", form)});
    });
</script>

<div class="container">
    <form class="standardForm" method="POST" use:enhance>
        <h1>Sign Up</h1>

        <label>Name
            <input name="name" type="text" bind:this={nameInput} required>
        </label>

        <label>Email
            <input name="email" type="email" required>
        </label>

        <label>Password
            <input name="password" type="password" required>
        </label>

        <label>Confirm Password
            <input name="confirmPassword" type="password" required>
        </label>

        <button class="button">Submit</button>
    </form>
</div>

<style>
    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: calc(100% - 75px);
    }
</style>