fix: 🐛 Press enter to login or signup

Nerimity · Feb 4, 2023 · 5623928 · 5623928
1 parent 6469a24
commit 5623928
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
@@ -25,7 +25,7 @@ const Content = styled(FlexColumn)`
   overflow: auto;
 `;
 
-const Container = styled("div")`
+const Container = styled(FlexColumn)`
   width: 300px;
   margin: auto;
   padding: 10px;
@@ -59,7 +59,8 @@ export default function LoginPage() {
     }
   })
 
-  const loginClicked = async () => {
+  const loginClicked = async (event?: SubmitEvent) => {
+    event?.preventDefault();
     const redirectTo = location.query.redirect || "/app"
     if (requestSent()) return;
     setRequestSent(true);
@@ -78,10 +79,12 @@ export default function LoginPage() {
       <PageHeader />
       <Content>
         <Container class='container'>
-          <Title>{t('loginPage.title')}</Title>
-          <Input label={t('loginPage.email')} type='email' error={error()} onText={setEmail} />
-          <Input label={t('loginPage.password')} type='password' error={error()} onText={setPassword} />
-          <Button iconName='login' label={requestSent() ? t('loginPage.loggingIn') : t('loginPage.loginButton')} onClick={loginClicked} />
+          <form action='#' onsubmit={loginClicked}>
+            <Title>{t('loginPage.title')}</Title>
+            <Input label={t('loginPage.email')} type='email' error={error()} onText={setEmail} />
+            <Input label={t('loginPage.password')} type='password' error={error()} onText={setPassword} />
+            <Button iconName='login' label={requestSent() ? t('loginPage.loggingIn') : t('loginPage.loginButton')} onClick={loginClicked} />
+          </form>
           <Link class={linkStyle} href="/register">{t('loginPage.createAccountInstead')}</Link>
         </Container>
       </Content>

diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx
@@ -28,7 +28,7 @@ const Content = styled(FlexColumn)`
   overflow: auto;
 `;
 
-const Container = styled("div")`
+const Container = styled(FlexColumn)`
   width: 300px;
   margin: auto;
   padding: 10px;
@@ -66,7 +66,8 @@ export default function RegisterPage() {
     }
   })
 
-  const registerClicked = async () => {
+  const registerClicked = async (event?: SubmitEvent) => {
+    event?.preventDefault();
     const redirectTo = location.query.redirect || "/app"
     if (requestSent()) return;
     setRequestSent(true);
@@ -93,6 +94,7 @@ export default function RegisterPage() {
       <PageHeader />
       <Content>
         <Container>
+        <form action='#' onsubmit={registerClicked}>
           <Title>{t('registerPage.title', {appName: env.APP_NAME})}</Title>
           <Input label={t('registerPage.email')} type='email' error={error()} onText={setEmail} />
           <Input label={t('registerPage.username')} error={error()} onText={setUsername} />
@@ -108,6 +110,7 @@ export default function RegisterPage() {
             <Text size={16}  color='var(--alert-color)'>{error().message}</Text>
           </Show>
           <Button iconName='login' label={requestSent() ? t('registerPage.registering') : t('registerPage.registerButton')} onClick={registerClicked} />
+          </form>
           <Link class={linkStyle} href="/login">{t('registerPage.loginInstead')}</Link>
         </Container>
       </Content>