feat: add key down listener to login/sign up on enter key

CS3219-AY2425S1 · Nov 9, 2024 · f09194d · f09194d
1 parent 335efca
commit f09194d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/frontend/components/auth/Login.tsx b/frontend/components/auth/Login.tsx
@@ -65,6 +65,12 @@ export default function Login() {
         }
     }
 
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>): void => {
+        if (e.key === 'Enter') {
+            onLogin()
+        }
+    }
+
     return (
         <>
             <InputField
@@ -87,14 +93,20 @@ export default function Login() {
                 error={formErrors.loginPassword}
                 className="w-full py-3 px-3 border bg-[#EFEFEF] rounded-[5px]"
                 page="auth"
+                handleKeyDown={handleKeyDown}
             />
 
             {isLoading ? (
                 <Button disabled variant="primary" className="w-full text-md mt-5 h-[42px]">
                     <Loader2 className="mr-2 h-6 w-6 animate-spin" />
                 </Button>
             ) : (
-                <Button onClick={onLogin} variant="primary" className="w-full text-md mt-5 h-[42px]">
+                <Button
+                    onClick={onLogin}
+                    variant="primary"
+                    className="w-full text-md mt-5 h-[42px]"
+                    onKeyDown={handleKeyDown}
+                >
                     Login
                 </Button>
             )}

diff --git a/frontend/components/auth/Signup.tsx b/frontend/components/auth/Signup.tsx
@@ -58,6 +58,12 @@ export default function Signup({ handleSignUpSuccessful }: { handleSignUpSuccess
         }
     }
 
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>): void => {
+        if (e.key === 'Enter') {
+            onSignup()
+        }
+    }
+
     return (
         <>
             <InputField
@@ -102,14 +108,20 @@ export default function Signup({ handleSignUpSuccessful }: { handleSignUpSuccess
                 error={formErrors.confirmPassword}
                 className="w-full py-3 px-3 border bg-[#EFEFEF] rounded-[5px]"
                 page="auth"
+                handleKeyDown={handleKeyDown}
             />
 
             {isLoading ? (
                 <Button disabled variant="primary" className="w-full text-md mt-5 h-[42px]">
                     <Loader2 className="mr-2 h-6 w-6 animate-spin" />
                 </Button>
             ) : (
-                <Button onClick={onSignup} variant="primary" className="w-full text-md mt-5 h-[42px]">
+                <Button
+                    onClick={onSignup}
+                    variant="primary"
+                    className="w-full text-md mt-5 h-[42px]"
+                    onKeyDown={handleKeyDown}
+                >
                     Sign Up
                 </Button>
             )}

diff --git a/frontend/components/customs/custom-input.tsx b/frontend/components/customs/custom-input.tsx
@@ -13,6 +13,7 @@ interface InputFieldProps {
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
     className?: string
     page?: string
+    handleKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
 }
 
 interface OptionsFieldProps {
@@ -43,6 +44,7 @@ export const InputField = (props: InputFieldProps): JSX.Element => {
                             ? props.className
                             : 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 sm:text-sm'
                     }
+                    onKeyDown={props.handleKeyDown}
                 />
                 {props.icon && (
                     <span