<script lang="ts">
  import { Auth } from 'aws-amplify';
  import { goto } from '$app/navigation';
  import Modal from '$lib/components/common/Modal.svelte';
  import ModalBody from '$lib/components/common/ModalBody.svelte';

  let username = '';
  let password = '';
  let error: string;
  let loading = false;

  async function handleSignIn() {
    error = void(0);
    loading = true;

    try {
      const res = await Auth.signIn(username, password);

      goto('/', {replaceState: true});
    } catch (err) {
      error = err?.toString() || err;
    }

    loading = false;
  }
</script>

<form on:submit|preventDefault={handleSignIn}>
  <Modal disabled={loading} show verb="Login" noun="" error={error}>
    <ModalBody>
      <label for="name">Username</label>
      <input type="text" bind:value={username} />
      <label for="name">Password</label>
      <input type="password" bind:value={password} />
    </ModalBody>
  </Modal>
</form>