summaryrefslogtreecommitdiff
path: root/ui/lib/components/LogIn.svelte
blob: b49158332c7030584abc7c239c37c88e40d70377 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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>