Allow enter keypress to submit login form

This commit is contained in:
Andrew Kingston 2021-05-21 13:27:27 +01:00
parent 4deedfc27c
commit 7ed13d2b4c
3 changed files with 10 additions and 1 deletions

View File

@ -82,6 +82,7 @@
on:blur on:blur
on:focus on:focus
on:input on:input
on:keyup
on:blur={onBlur} on:blur={onBlur}
on:focus={onFocus} on:focus={onFocus}
on:input={onInput} on:input={onInput}

View File

@ -34,5 +34,6 @@
on:input on:input
on:blur on:blur
on:focus on:focus
on:keyup
/> />
</Field> </Field>

View File

@ -33,6 +33,12 @@
notifications.error("Invalid credentials") notifications.error("Invalid credentials")
} }
} }
const submitOnEnter = e => {
if (e.key === "Enter") {
login()
}
}
</script> </script>
<div class="login"> <div class="login">
@ -46,12 +52,13 @@
<Divider noGrid /> <Divider noGrid />
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<Body size="S" textAlign="center">Sign in with email</Body> <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 <Input
label="Password" label="Password"
type="password" type="password"
on:change on:change
bind:value={password} bind:value={password}
on:keyup={submitOnEnter}
/> />
</Layout> </Layout>
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>