<script>
  import { onMount } from 'svelte/internal';
  import { t } from 'services/utils';
  import Bttn from 'atoms/Bttn.svelte';
  import { loggedIn } from 'services/store';

  let form = {
    name: '',
    password: '',
  };

  function handleClick() {
    loggedIn.fetchLogin(form).catch((reason) => {
      console.log(reason);
    });
  }

  onMount(() => {
    loggedIn.fetchIsLoggedIn();
  });
</script>

<style></style>

<div class="nhentai-login">
  {#if $loggedIn}
  <div>logged in!</div>
  {:else}
  <form class="nhentai-login">
    <label>
      <span>{ t('Username/Email') }</span>
      <input bind:value="{form.name}" />
    </label>
    <label>
      <span>{ t('Password') }</span>
      <input bind:value="{form.password}" type="password" />
    </label>
    <Bttn on:click="{handleClick}">submit</Bttn>
  </form>
  {/if}
</div>
