login with enter

src/Components/Auth/LoginPage.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import ErrorText from '../Typography/ErrorText'
 import { TextInput } from '../Input/TextInput'
@@ -17,6 +17,8 @@ export function LoginPage() {
     const navigate = useNavigate();
 
     const onLogin = async () => {
+        console.log(email);
+        console.log(password);
         await toast.promise(
             login({ email: email, password: password }),
             {
@@ -37,6 +39,22 @@ export function LoginPage() {
             });
     }
 
+
+    
+
+    useEffect(() => {
+        const keyDownHandler = event => {   
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            onLogin();
+          }
+        };
+        document.addEventListener('keydown', keyDownHandler);
+        return () => {
+          document.removeEventListener('keydown', keyDownHandler);
+        };
+      }, [onLogin]);
+
     return (
         <MapOverlayPage backdrop className='tw-max-w-xs tw-h-fit'>
             <h2 className='tw-text-2xl tw-font-semibold tw-mb-2 tw-text-center'>Login</h2>

src/Components/Auth/SignupPage.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import ErrorText from '../Typography/ErrorText'
 import { TextInput } from '../Input/TextInput'
@@ -39,6 +39,19 @@ export function SignupPage() {
             });
     }
 
+    useEffect(() => {
+        const keyDownHandler = event => {   
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            onRegister();
+          }
+        };
+        document.addEventListener('keydown', keyDownHandler);
+        return () => {
+          document.removeEventListener('keydown', keyDownHandler);
+        };
+      }, [onRegister]);
+
 
     return (
         <MapOverlayPage backdrop className='tw-max-w-xs  tw-h-fit'>