stufflog/svelte-ui/src/modals/LoginModal.svelte

<script>
  import ModalFrame from "../components/ModalFrame";

  import auth from "../stores/auth";
  import modal from "../stores/modal";

  function login(username, password) {
    auth.login(username, password).then(() => {
      modal.close();
    }).catch(err => {
      error = "Incorrect username or password."
    });
  }

  function register(username, password) {
    auth.register(username, password).then(() => {
      modal.close();
    }).catch(err => {
      error = "Incorrect username or password."
    });
  }
  
  let username = "";
  let password = "";
  let error = null;
</script>

<ModalFrame title="Login" error={error}>
  <form on:submit|preventDefault={() => {}}>
    <label>Username</label>
    <input type="text" bind:value={username} />
    <label>Password</label>
    <input type="password" bind:value={password} />

    <hr />

    <button type="submit" on:click={() => login(username, password)}>Login</button>
    <button type="submit" on:click={() => register(username, password)}>Register</button>
  </form>
</ModalFrame>