owlboard-svelte/src/routes/more/reg/+page.svelte

<script lang="ts">
    import Header from "$lib/navigation/header.svelte";
    import Nav from "$lib/navigation/nav.svelte";
    import Loading from "$lib/navigation/loading.svelte";
    import { onMount } from "svelte";
    import { checkAuth } from "$lib/libauth";
    import LogoutButton from "$lib/navigation/LogoutButton.svelte";
    import { getApiUrl } from "$lib/scripts/upstream";
    import toast from "svelte-french-toast";

    const title = "Register";

    let state = "unreg";
    let isLoading = true;
    let inputValue = "";

    function handleInput(event: KeyboardEvent) {
        inputValue = event?.target?.value;
    }

    async function request() {
        isLoading = true;
        const url = `${getApiUrl()}/api/v2/user/request`;
        const request = {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                email: inputValue,
            }),
        };
        const res = await fetch(url, request);
        if (res.status == 400 || res.status == 403) {
            state = "unauth";
        } else if (res.status == 201) {
            state = "sent";
        } else {
            state = "error";
        }
        isLoading = false;
    }

    function send() {
        toast.promise(
            request(),
            {
                loading: "Contacting Server...",
                success: "Request Answered.",
                error: "Unable to contact server."
            }
        )
    }

    onMount(async () => {
        const auth = await checkAuth();
        if (auth.uuidPresent === false) {
            state = "unreg";
        } else if (auth.uuidPresent === true) {
            state = "reg";
        }
        isLoading = false;
    });
</script>

<Header {title} />

<section class="content">
    {#if isLoading}
        <Loading />
    {:else if state == "unreg"}
        <p>To register, you will need to enter a work email address to receive a confirmation email</p>
        <p class="bold">Already have a registration code? <a href="/more/reg/submit">enter it here</a></p>
        <form on:submit={send}>
            <input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput} /><br />
            <label for="checkbox">
                I have read and accept the terms of the <a href="/more/privacy">Privacy Policy</a><br />
                <input id="checkbox" type="checkbox" required />
            </label><br />
            <button type="submit">Submit</button>
        </form>
        <br />
        <p class="bold">What do you get?</p>
        <li>Access to Train details</li>
        <li>Access to PIS Codes</li>
        <li>ECS Movements on departure boards</li>
        <li>Non-Public trains on departure boards</li>
        <li>Hidden platform numbers on departure boards</li>
        <li>See up to the next 40 trains departing a station over the next two hours</li>
    {:else if state == "sent"}
        <p>An email has been sent, enter the code in the email to activate your profile.</p>
        <p class="bold"><a href="/more/reg/submit">Ready to enter your code?</a></p>
        <p>If you use multiple browsers, you will only be logged in using the browser you open the link with.</p>
        <p>You will be able to register again using the same email address</p>
    {:else if state == "unauth"}
        <p>The email address you entered does not belong to an authorised business.</p>
        <p>If you think this is an error, you can get help on <a href="/more/help">the help page</a>.</p>
    {:else if state == "error"}
        <p>There was an error processing your request.</p>
        <p>Check that the email you entered was correct or try again later.</p>
    {:else if state == "reg"}
        <p>
            You are already registered for OwlBoard. If you've recently logged out or updated, you may need to refresh this page to register as old data could still be stored in
            your browser.
        </p>
        <LogoutButton />
    {/if}
</section>
<Nav />

<style>
    .bold {
        font-weight: 800;
    }
    .content {
        margin-top: 30px;
    }
    p {
        margin: 10px;
        margin-left: 20px;
        margin-right: 20px;
    }
    li {
        text-align: center;
        font-size: 14px;
        color: white;
        margin-top: 5px;
        margin-left: 15px;
        margin-right: 15px;
        list-style-type: none;
    }
    input {
        height: 40px;
        width: 80%;
        max-width: 375px;
        font-family: urwgothic, "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
        text-align: center;
        font-size: 20px;
        border-radius: 50px;
        border: none;
        margin-bottom: 20px;
    }
    #checkbox {
        height: 30px;
        width: 30px;
    }
    button {
        border: none;
        background-color: var(--island-bg-color);
        color: var(--main-text-color);
        width: 35%;
        height: 30px;
        border-radius: 50px;
        font-size: 18px;
    }
</style>