Allow enter keypress to submit login form

5 years ago · 5c950291f3
3 changed files with 10 additions and 1 deletions
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@ -82,6 +82,7 @@
    on:blur
    on:focus
    on:input
+    on:keyup
    on:blur={onBlur}
    on:focus={onFocus}
    on:input={onInput}
--- a/packages/bbui/src/Form/Input.svelte
+++ b/packages/bbui/src/Form/Input.svelte
@ -34,5 +34,6 @@
    on:input
    on:blur
    on:focus
+    on:keyup
  />
 </Field>
--- a/packages/builder/src/components/login/LoginForm.svelte
+++ b/packages/builder/src/components/login/LoginForm.svelte
@ -33,6 +33,12 @@
      notifications.error("Invalid credentials")
    }
  }
+
+  const submitOnEnter = e => {
+    if (e.key === "Enter") {
+      login()
+    }
+  }
 </script>

 <div class="login">
@ -46,12 +52,13 @@
      <Divider noGrid />
      <Layout gap="XS" noPadding>
        <Body size="S" textAlign="center">Sign in with email</Body>
-        <Input label="Email" bind:value={username} />
+        <Input label="Email" bind:value={username} on:keyup={submitOnEnter} />
        <Input
          label="Password"
          type="password"
          on:change
          bind:value={password}
+          on:keyup={submitOnEnter}
        />
      </Layout>
      <Layout gap="XS" noPadding>