<script>
  let { legend = 'sign in', logIn = async (username, password) => {} } = $props();

  let username = $state('');
  let password = $state('');
  let disabled = $state(false);

  async function onsubmit(event) {
    event.preventDefault();
    disabled = true;
    try {
      await logIn(username, password);
      event.target.reset();
    } finally {
      disabled = false;
    }
  }
</script>

<div>
  <form class="form" {onsubmit}>
    <label>
      username
      <input name="username" type="text" placeholder="username" bind:value={username} {disabled} />
    </label>
    <label>
      password
      <input
        name="password"
        type="password"
        placeholder="password"
        bind:value={password}
        {disabled}
      />
    </label>
    <button type="submit">
      {legend}
    </button>
  </form>
</div>
