From 37707c422aa838723999263b0d8572c08b05eff8 Mon Sep 17 00:00:00 2001
From: Afrie Irham <afrieirham.work@gmail.com>
Date: Wed, 5 Jul 2023 18:40:48 +0800
Subject: [PATCH] fix: allow user to press Enter in login page

---
 frontend/src/components/login/InitialLoginStep.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/login/InitialLoginStep.tsx b/frontend/src/components/login/InitialLoginStep.tsx
index bcce19d1c..72e375482 100644
--- a/frontend/src/components/login/InitialLoginStep.tsx
+++ b/frontend/src/components/login/InitialLoginStep.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { FormEvent, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -31,7 +31,8 @@ export default function InitialLoginStep({
     const [isLoading, setIsLoading] = useState(false);
     const [loginError, setLoginError] = useState(false);
 
-    const handleLogin = async () => {
+    const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
         try {
             if (!email || !password) {
                 return;
@@ -98,7 +99,7 @@ export default function InitialLoginStep({
         setIsLoading(false);
     }
     
-    return <div className='flex flex-col mx-auto w-full justify-center items-center'>
+    return <form onSubmit={handleLogin} className='flex flex-col mx-auto w-full justify-center items-center'>
         <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >Login to Infisical</h1>
         {/* <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
             <Button
@@ -143,7 +144,7 @@ export default function InitialLoginStep({
         {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
         <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
             <Button
-                onClick={async () => handleLogin()}
+                type="submit"
                 size="sm"
                 isFullWidth
                 className='h-12'
@@ -180,5 +181,5 @@ export default function InitialLoginStep({
                 <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>Recover your account</span>
             </Link>
         </div>
-    </div>
+    </form>
 }