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

<script context="module">
  export async function preload(page, session) {
    const { host, path, params, query } = page;
    const { user } = session;
    if (user) return this.redirect(300, "dashboard");
    if (query.error) return { errors: query.error.split(",") };
  }
</script>

<script>
  const errorTexts = {
    invalid_user: "The username is invalid!"
  };

  export let errors;
</script>

<style lang="css">
  .login-box {
    @apply .flex .flex-col .w-screen .h-screen .justify-center .items-center;
  }

  .box-item {
    @apply .w-1/4 .p-2 .rounded;
  }

  .login-button-list {
    @apply .flex .justify-center .m-2;
  }

  .discord-button {
    @apply .p-2 .bg-indigo-700 .rounded-sm;

    &:hover {
      @apply .bg-indigo-600;
    }
  }
</style>

<svelte:head>
  <title>Login</title>
</svelte:head>

<div class="login-box">
  {#if errors}
    {#each errors as errorId}
      <div class="bg-red-800 box-item mb-2">{errorTexts[errorId]}</div>
    {/each}
  {/if}
  <div class="bg-gray-dark box-item shadow-big text-center">
    <h1 class="text-4xl">NoctBot Login</h1>
    <div class="login-button-list">
      <a class="discord-button" href="/login/discord/do">
        <span class="icon">
          <i class="fab fa-discord" />
        </span>
        <span>Login with Discord</span>
      </a>
    </div>
  </div>
</div>