<script>
  import { onMount } from 'svelte/internal';
  import { t } from '../../services/utils';
  import Bttn from '../1-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();

    return () => {};
  });
</script>

<style></style>

<div class="nhentai-login">
  {#if $loggedIn}
  <div>{ t('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}">{ t('submit') }</Bttn>
  </form>
  {/if}
</div>
