<script>
  import Login from '$/client/components/Login.svelte';
  import Layout from '$/client/Layout.svelte';
  import { user } from '$/client/stores.js';
  import { push } from 'svelte-spa-router';
  import { log } from "$/client/logging.js";

  $: if($user.authenticated) {
    log.debug("user is already authenticated");
    push("/");
  }

  const force_home = () => {
    window.location = "/";
  }
</script>

<Layout testid="page-login" centered={ true }>
  {#if $user.new_registration}
    <callout style="width: var(--width-card);">Welcome! Your registration is complete. Log in with your username/password to begin.
    </callout>
  {/if}

    <Login on:authenticated={ () => push('/') }
      on:canceled={ force_home } />
</Layout>
