Scheduler-Frontend/src/lib/modules/Auth.svelte

<script lang="ts">
	import { goto } from "$app/navigation";
	import { api_host, authToken } from "$lib";
	import type { AuthTokenResponse } from "$lib/dbdata";


    let email: string = "";
    let password: string = "";
    let errorMessage: string = "";

    async function authHandler(endpoint: string) {
        errorMessage = "";

        if (!email || !password) {
            errorMessage = "not all parameters provided"
            return;
        }
        try {
            const response = await fetch(`${api_host}/api/auth/${endpoint}`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    email: email,
                    password: password
                })
            })

            if (response.status === 200) {
                const data: AuthTokenResponse = await response.json();
                localStorage.setItem('token', data.token);
                $authToken = data.token;
                goto("/user/events");
            } else {
                errorMessage = "invalid credentials";
            }
        } catch (error) {
            console.log(error);
        }
    }

    async function register() {
        await authHandler('register');
    }

    async function login() {
        await authHandler('login');
    }

</script>


<article class="large no-padding center center-align middle-align auto-margin">
    <fieldset>
    <div class="padding top-margin">
        <h5>Anmeldung</h5>
        <div class="field border">
            <h4 class="large-text left-align">Email</h4>
            <input id="email" placeholder="Email" bind:value={email} type="email" />
        </div>

        <div class="field suffix border">
            <h4 class="large-text left-align">Password</h4>
            <input id="password" placeholder="Password" bind:value={password} type="password" />
        </div>

        <div class="grid">
            <button on:click={login} class="s6">Anmelden</button>
            <button on:click={register} class="s6 yellow">Registrierung</button>
        </div>
        {#if errorMessage} 
            <h5 class="large-text error-text">{errorMessage}</h5>
        {/if}
    </div>
</fieldset>
</article>