noctbot/web/src/routes/login/discord_auth.svelte

<script lang="typescript">
	import Icon from "svelte-awesome/components/Icon.svelte";
	import { faSpinner } from "@fortawesome/free-solid-svg-icons";
    import { onMount, tick } from "svelte";
    import { Option } from "@shared/common/async_utils";
    import { goto } from "@sapper/app";

    const spinner = faSpinner as unknown as undefined;
    let error = "";
    let ok = true;
    

    onMount(
        async () => {
            const res = await fetch("/login/discord", {
                method: "post"
            });
            const result = await res.json() as Option<unknown, {error: string}>;
            if (!result.ok) {
                ok = result.ok;
                error = result.error;
            } else {
                await goto("/");
            }
        }
    );
</script>

<div class="flex items-center justify-center bg-gray-900 h-screen w-screen">
	<div class="bg-gray-800 rounded-sm text-center px-20 py-5 shadow-lg">
        <h1 class="text-white text-4xl font-light">Logging in</h1>
        {#if ok}
            <div class="text-white"><Icon data={spinner} spin scale={1.5} /></div>
        {:else}
            <div class="text-red-600 max-w-md py-4">{error}</div>
            <a class="text-sm bg-blue-700 hover:bg-blue-800 p-2 text-white hover:text-gray-100 rounded-sm" href="/">Back to login</a>
        {/if}
	</div>
</div>