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="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>