SSF-200 Login Logic Improvements

apps/frontend/src/components/forms/resetPasswordModal.tsx

@@ -25,6 +25,18 @@ const ResetPasswordModal: React.FC = () => {
 
   const navigate = useNavigate();
 
+  const handleSendCodeKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && email) {
+      handleSendCode();
+    }
+  };
+
+  const handleResetPasswordKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && password && confirmPassword) {
+      handleResetPassword();
+    }
+  };
+
   const handleSendCode = async () => {
     try {
       await resetPassword({ username: email });
@@ -136,6 +148,11 @@ const ResetPasswordModal: React.FC = () => {
                 ? (e) => setCode(e.target.value)
                 : (e) => setEmail(e.target.value)
             }
+            onKeyDown={
+              step === 'reset'
+                ? handleSendCodeKeyDown
+                : handleResetPasswordKeyDown
+            }
           />
         </Field.Root>
 
@@ -148,6 +165,7 @@ const ResetPasswordModal: React.FC = () => {
                 placeholder="Enter new password"
                 {...inputStyles}
                 onChange={(e) => setPassword(e.target.value)}
+                onKeyDown={handleResetPasswordKeyDown}
               />
             </Field.Root>
             <Field.Root required>
@@ -157,6 +175,7 @@ const ResetPasswordModal: React.FC = () => {
                 placeholder="Confirm Password"
                 {...inputStyles}
                 onChange={(e) => setConfirmPassword(e.target.value)}
+                onKeyDown={handleResetPasswordKeyDown}
               />
             </Field.Root>
           </VStack>

apps/frontend/src/containers/homepage.tsx

@@ -14,7 +14,7 @@ import {
 import { useAuthenticator } from '@aws-amplify/ui-react';
 
 const Homepage: React.FC = () => {
-  const { user } = useAuthenticator((context) => [context.user]);
+  const { authStatus } = useAuthenticator((context) => [context.authStatus]);
 
   return (
     <Container maxW="container.md" py={5}>
@@ -171,7 +171,7 @@ const Homepage: React.FC = () => {
           </List.Root>
         </Box>
 
-        {!user && (
+        {authStatus !== 'authenticated' && (
           <Box w="full">
             <Heading as="h3" size="md" mb={3} textAlign="center">
               Other Pages

apps/frontend/src/containers/loginPage.tsx

@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { signIn, confirmSignIn, fetchAuthSession } from '@aws-amplify/auth';
+import { useAuthenticator } from '@aws-amplify/ui-react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import {
   Box,
@@ -31,12 +32,35 @@ const LoginPage: React.FC = () => {
   const [showConfirmNewPassword, setShowConfirmNewPassword] = useState(false);
   const [step, setStep] = useState<Step>('login');
   const [alertState, setAlertMessage] = useAlert();
+  const { authStatus } = useAuthenticator((context) => [context.authStatus]);
   const navigate = useNavigate();
   const location = useLocation();
 
   const from = location.state?.from?.pathname || '/';
 
+  useEffect(() => {
+    if (authStatus === 'authenticated') {
+      navigate(from, { replace: true });
+    }
+  }, [authStatus, from, navigate]);
+
+  const handleLoginKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && email && password) {
+      handleLogin();
+    }
+  };
+
+  const handleNewPasswordKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && newPassword && confirmNewPassword) {
+      handleSetNewPassword();
+    }
+  };
+
   const handleLogin = async () => {
+    if (authStatus === 'authenticated') {
+      navigate(from, { replace: true });
+      return;
+    }
     try {
       const result = await signIn({ username: email, password });
       // On temporary password signin, this will trigger the need to create a new password
@@ -48,8 +72,25 @@ const LoginPage: React.FC = () => {
       } else {
         navigate(from, { replace: true });
       }
-    } catch {
-      setAlertMessage('Login failed');
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        if (error.name === 'UserAlreadyAuthenticatedException') {
+          navigate(from, { replace: true });
+          return;
+        }
+        if (
+          error.name === 'NotAuthorizedException' ||
+          error.name === 'UserNotFoundException'
+        ) {
+          setAlertMessage('Incorrect email or password. Please try again.');
+          return;
+        }
+      }
+      setAlertMessage(
+        navigator.onLine
+          ? 'Login failed. The server may be unavailable. Please try again later.'
+          : 'No internet connection. Please check your network and try again.',
+      );
     }
   };
 
@@ -137,6 +178,7 @@ const LoginPage: React.FC = () => {
                   color="neutral.700"
                   _placeholder={{ ...placeholderStyles }}
                   onChange={(e) => setEmail(e.target.value)}
+                  onKeyDown={handleLoginKeyDown}
                 />
               </Field.Root>
 
@@ -152,6 +194,7 @@ const LoginPage: React.FC = () => {
                     color="neutral.700"
                     _placeholder={{ ...placeholderStyles }}
                     onChange={(e) => setPassword(e.target.value)}
+                    onKeyDown={handleLoginKeyDown}
                   />
                   <IconButton
                     variant="outline"
@@ -200,6 +243,7 @@ const LoginPage: React.FC = () => {
                     color="neutral.700"
                     _placeholder={{ ...placeholderStyles }}
                     onChange={(e) => setNewPassword(e.target.value)}
+                    onKeyDown={handleNewPasswordKeyDown}
                   />
                   <IconButton
                     variant="outline"
@@ -228,6 +272,7 @@ const LoginPage: React.FC = () => {
                     color="neutral.700"
                     _placeholder={{ ...placeholderStyles }}
                     onChange={(e) => setConfirmNewPassword(e.target.value)}
+                    onKeyDown={handleNewPasswordKeyDown}
                   />
                   <IconButton
                     variant="outline"

apps/frontend/src/containers/signupPage.tsx

@@ -1,11 +1,23 @@
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { Box, Text, VStack, Button, Link } from '@chakra-ui/react';
 import loginBackground from '../assets/login_background.png';
 import AuthHeader from '@components/AuthHeader';
 import { ROUTES } from '../routes';
+import { useEffect } from 'react';
+import { useAuthenticator } from '@aws-amplify/ui-react';
 
 const SignupPage: React.FC = () => {
   const navigate = useNavigate();
+  const location = useLocation();
+  const { authStatus } = useAuthenticator((context) => [context.authStatus]);
+
+  const from = location.state?.from?.pathname || '/';
+
+  useEffect(() => {
+    if (authStatus === 'authenticated') {
+      navigate(from, { replace: true });
+    }
+  }, [authStatus, from, navigate]);
 
   return (
     <Box minH="100vh" w="full" display="flex" flexDirection="column">