Merge branch 'prop/global-state-at-top-level'

1 files changed, 18 insertions, 9 deletions

diff --git a/ui/lib/components/LogIn.svelte b/ui/lib/components/LogIn.svelte
index 5bfdae2..c49ea3b 100644
--- a/ui/lib/components/LogIn.svelte
+++ b/ui/lib/components/LogIn.svelte
@@ -1,20 +1,29 @@
 <script>
-  let {
-    username = $bindable(),
-    password = $bindable(),
-    legend = 'sign in',
-    disabled,
-    onsubmit
-  } = $props();
+  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 for="username">
+    <label>
       username
       <input name="username" type="text" placeholder="username" bind:value={username} {disabled} />
     </label>
-    <label for="password">
+    <label>
       password
       <input
         name="password"