[ADE-63] - Add password recovery features

- Implemented ForgotPassword and ResetPassword pages with corresponding forms.
- Added forgotPassword and confirmResetPassword functions in useAuthOperations.
- Updated AuthContext and AuthProvider to include new password recovery methods.
- Enhanced routing in AppRouter to support new password recovery routes.
- Added tests for forgotPassword and confirmResetPassword functionalities.
- Updated translations and styles for password recovery UI components.

Author: jkestering-modus

frontend/src/common/components/Router/AppRouter.tsx

@@ -9,6 +9,8 @@ import SignUpPage from 'pages/Auth/SignUp/SignUpPage';
 import SignOutPage from 'pages/Auth/SignOut/SignOutPage';
 import VerificationPage from 'pages/Auth/Verify/VerificationPage';
 import OAuthRedirectHandler from 'pages/Auth/OAuth/OAuthRedirectHandler';
+import ForgotPasswordPage from 'pages/Auth/ForgotPassword/ForgotPasswordPage';
+import ResetPasswordPage from 'pages/Auth/ResetPassword/ResetPasswordPage';
 
 /**
  * The application router.  This is the main router for the Ionic React
@@ -36,6 +38,8 @@ const AppRouter = (): JSX.Element => {
         <Route exact path="/auth/verify" render={() => <VerificationPage />} />
         <Route exact path="/auth/oauth" render={() => <OAuthRedirectHandler />} />
         <Route exact path="/auth/signout" render={() => <SignOutPage />} />
+        <Route exact path="/auth/forgot-password" render={() => <ForgotPasswordPage />} />
+        <Route exact path="/auth/reset-password" render={() => <ResetPasswordPage />} />
         <Route exact path="/">
           <Redirect to="/tabs" />
         </Route>

frontend/src/common/components/Router/__tests__/PrivateOutlet.test.tsx

@@ -23,6 +23,8 @@ describe('PrivateOutlet', () => {
       signOut: vi.fn(),
       signInWithGoogle: vi.fn(),
       signInWithApple: vi.fn(),
+      forgotPassword: vi.fn(),
+      confirmResetPassword: vi.fn(),
       clearError: vi.fn()
     });
   });
@@ -53,6 +55,8 @@ describe('PrivateOutlet', () => {
       signOut: vi.fn(),
       signInWithGoogle: vi.fn(),
       signInWithApple: vi.fn(),
+      forgotPassword: vi.fn(),
+      confirmResetPassword: vi.fn(),
       clearError: vi.fn()
     });
 

frontend/src/common/hooks/__tests__/useAuthOperations.test.ts

@@ -17,6 +17,8 @@ vi.mock('common/services/auth/cognito-auth-service', () => ({
     resendConfirmationCode: vi.fn(),
     signOut: vi.fn(),
     getCurrentUser: vi.fn(),
+    forgotPassword: vi.fn(),
+    confirmResetPassword: vi.fn(),
   }
 }));
 
@@ -263,4 +265,78 @@ describe('useAuthOperations', () => {
       expect(result.current.error).toBeUndefined();
     });
   });
+
+  describe('forgotPassword', () => {
+    it('should call CognitoAuthService.forgotPassword with correct parameters', async () => {
+      const { result } = renderHook(() => useAuthOperations());
+      
+      await act(async () => {
+        await result.current.forgotPassword('[email protected]');
+      });
+      
+      expect(CognitoAuthService.forgotPassword).toHaveBeenCalledWith('[email protected]');
+      expect(result.current.isLoading).toBe(false);
+    });
+    
+    it('should handle forgotPassword errors', async () => {
+      const error = new Error('Invalid email');
+      vi.mocked(CognitoAuthService.forgotPassword).mockRejectedValueOnce(error);
+      
+      const mockError = { code: 'MockError', message: 'Invalid email', name: 'MockError' };
+      vi.mocked(AuthErrorUtils.formatAuthError).mockReturnValueOnce(mockError as AuthError);
+      
+      const { result } = renderHook(() => useAuthOperations());
+      
+      await act(async () => {
+        try {
+          await result.current.forgotPassword('[email protected]');
+        } catch {
+          // Error is handled in the hook
+        }
+      });
+      
+      expect(CognitoAuthService.forgotPassword).toHaveBeenCalledWith('[email protected]');
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.error).toBeDefined();
+      expect(result.current.error).toEqual(mockError);
+      expect(AuthErrorUtils.formatAuthError).toHaveBeenCalledWith(error);
+    });
+  });
+  
+  describe('confirmResetPassword', () => {
+    it('should call CognitoAuthService.confirmResetPassword with correct parameters', async () => {
+      const { result } = renderHook(() => useAuthOperations());
+      
+      await act(async () => {
+        await result.current.confirmResetPassword('[email protected]', '123456', 'newPassword123');
+      });
+      
+      expect(CognitoAuthService.confirmResetPassword).toHaveBeenCalledWith('[email protected]', '123456', 'newPassword123');
+      expect(result.current.isLoading).toBe(false);
+    });
+    
+    it('should handle confirmResetPassword errors', async () => {
+      const error = new Error('Invalid verification code');
+      vi.mocked(CognitoAuthService.confirmResetPassword).mockRejectedValueOnce(error);
+      
+      const mockError = { code: 'MockError', message: 'Invalid verification code', name: 'MockError' };
+      vi.mocked(AuthErrorUtils.formatAuthError).mockReturnValueOnce(mockError as AuthError);
+      
+      const { result } = renderHook(() => useAuthOperations());
+      
+      await act(async () => {
+        try {
+          await result.current.confirmResetPassword('[email protected]', '123456', 'newPassword123');
+        } catch {
+          // Error is handled in the hook
+        }
+      });
+      
+      expect(CognitoAuthService.confirmResetPassword).toHaveBeenCalledWith('[email protected]', '123456', 'newPassword123');
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.error).toBeDefined();
+      expect(result.current.error).toEqual(mockError);
+      expect(AuthErrorUtils.formatAuthError).toHaveBeenCalledWith(error);
+    });
+  });
 }); 

frontend/src/common/hooks/useAuthOperations.ts

@@ -202,6 +202,50 @@ export const useAuthOperations = () => {
     }
   };
 
+  /**
+   * Initiate password reset flow
+   * @param email User's email
+   */
+  const forgotPassword = async (email: string): Promise<void> => {
+    setIsLoading(true);
+    clearError();
+    
+    try {
+      await CognitoAuthService.forgotPassword(email);
+      // Success - code sent to user's email
+    } catch (err) {
+      setError(formatAuthError(err));
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * Confirm password reset with code and set new password
+   * @param email User's email
+   * @param code Verification code
+   * @param newPassword New password
+   */
+  const confirmResetPassword = async (
+    email: string, 
+    code: string, 
+    newPassword: string
+  ): Promise<void> => {
+    setIsLoading(true);
+    clearError();
+    
+    try {
+      await CognitoAuthService.confirmResetPassword(email, code, newPassword);
+      // Success - password reset complete
+    } catch (err) {
+      setError(formatAuthError(err));
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return {
     isLoading,
     error,
@@ -215,5 +259,7 @@ export const useAuthOperations = () => {
     signOut,
     signInWithGoogle,
     signInWithApple,
+    forgotPassword,
+    confirmResetPassword,
   };
 }; 

frontend/src/common/providers/AuthContext.ts

@@ -28,6 +28,10 @@ export interface AuthContextValue {
   resendConfirmationCode: (email: string) => Promise<void>;
   signOut: () => Promise<void>;
 
+  // Password recovery
+  forgotPassword: (email: string) => Promise<void>;
+  confirmResetPassword: (email: string, code: string, newPassword: string) => Promise<void>;
+  
   // Social authentication
   signInWithGoogle: () => Promise<void>;
   signInWithApple: () => Promise<void>;
@@ -51,6 +55,8 @@ const DEFAULT_CONTEXT_VALUE: AuthContextValue = {
   confirmSignUp: async () => { throw new Error('AuthContext not initialized'); },
   resendConfirmationCode: async () => { throw new Error('AuthContext not initialized'); },
   signOut: async () => { throw new Error('AuthContext not initialized'); },
+  forgotPassword: async () => { throw new Error('AuthContext not initialized'); },
+  confirmResetPassword: async () => { throw new Error('AuthContext not initialized'); },
   signInWithGoogle: async () => { throw new Error('AuthContext not initialized'); },
   signInWithApple: async () => { throw new Error('AuthContext not initialized'); },
   clearError: () => { /* empty implementation */ },

frontend/src/common/providers/AuthProvider.tsx

@@ -59,6 +59,8 @@ const AuthProvider = ({ children }: PropsWithChildren): JSX.Element => {
     signOut,
     signInWithGoogle,
     signInWithApple,
+    forgotPassword,
+    confirmResetPassword,
   } = useAuthOperations();
 
   // Extract user info from tokens when they change
@@ -167,6 +169,8 @@ const AuthProvider = ({ children }: PropsWithChildren): JSX.Element => {
     signOut,
     signInWithGoogle,
     signInWithApple,
+    forgotPassword,
+    confirmResetPassword,
   };
 
   // Only render children when not initializing

frontend/src/common/services/auth/cognito-auth-service.ts

@@ -1,5 +1,6 @@
 import { signIn, signUp, confirmSignUp, signOut, 
   fetchAuthSession, getCurrentUser, resendSignUpCode, signInWithRedirect,
+  resetPassword, confirmResetPassword,
   type AuthUser } from '@aws-amplify/auth';
 import { Amplify } from 'aws-amplify';
 import { amplifyConfig } from '../../config/aws-config';
@@ -209,6 +210,40 @@ export class CognitoAuthService {
     }
   }
 
+  /**
+   * Initiate password reset flow by sending a code to the user's email
+   * @param username Email address
+   * @returns Promise resolving when the code is sent
+   */
+  static async forgotPassword(username: string) {
+    try {
+      return await resetPassword({ username });
+    } catch (error) {
+      this.handleAuthError(error);
+      throw error;
+    }
+  }
+
+  /**
+   * Confirm password reset with verification code and new password
+   * @param username Email address
+   * @param code Verification code
+   * @param newPassword New password
+   * @returns Promise resolving when the password is reset
+   */
+  static async confirmResetPassword(username: string, code: string, newPassword: string) {
+    try {
+      return await confirmResetPassword({ 
+        username, 
+        confirmationCode: code,
+        newPassword 
+      });
+    } catch (error) {
+      this.handleAuthError(error);
+      throw error;
+    }
+  }
+
   /**
    * Handle common authentication errors
    * @param error The error from Cognito

frontend/src/common/utils/i18n/resources/en/auth.json

@@ -39,6 +39,19 @@
   "submit": "Submit",
   "confirm": "Confirm",
   "resend-code": "Resend Code",
+  "forgot-password": "Forgot Password?",
+  "password-recovery": {
+    "title": "Password Recovery",
+    "message": "Enter your email address and we'll send you instructions to reset your password.",
+    "success": "Password reset instructions sent to your email.",
+    "email-sent": "We've sent a verification code to your email.",
+    "enter-code": "Enter the verification code and your new password below."
+  },
+  "password-reset": {
+    "title": "Reset Password",
+    "success": "Password reset successful!",
+    "button": "Reset Password"
+  },
   "password-requirements": "Password Requirements:",
   "email-verification": {
     "title": "Email Verification",

frontend/src/pages/Auth/ForgotPassword/ForgotPasswordPage.scss

@@ -0,0 +1,14 @@
+.ls-forgot-password-page {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+  }
+
+  &__form {
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+  }
+} 

frontend/src/pages/Auth/ForgotPassword/ForgotPasswordPage.tsx

@@ -0,0 +1,39 @@
+import { IonContent, IonPage } from '@ionic/react';
+import { useTranslation } from 'react-i18next';
+
+import './ForgotPasswordPage.scss';
+import { PropsWithTestId } from 'common/components/types';
+import ProgressProvider from 'common/providers/ProgressProvider';
+import Header from 'common/components/Header/Header';
+import ForgotPasswordForm from './components/ForgotPasswordForm';
+import Container from 'common/components/Content/Container';
+
+/**
+ * Properties for the `ForgotPasswordPage` component.
+ */
+interface ForgotPasswordPageProps extends PropsWithTestId {}
+
+/**
+ * The `ForgotPasswordPage` renders the layout for password recovery.
+ * @param {ForgotPasswordPageProps} props - Component properties.
+ * @returns {JSX.Element} JSX
+ */
+const ForgotPasswordPage = ({ testid = 'page-forgot-password' }: ForgotPasswordPageProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <IonPage className="ls-forgot-password-page" data-testid={testid}>
+      <ProgressProvider>
+        <Header title={t('password-recovery.title', { ns: 'auth' })} />
+
+        <IonContent fullscreen className="ion-padding">
+          <Container className="ls-forgot-password-page__container" fixed>
+            <ForgotPasswordForm className="ls-forgot-password-page__form" />
+          </Container>
+        </IonContent>
+      </ProgressProvider>
+    </IonPage>
+  );
+};
+
+export default ForgotPasswordPage;