Implementation for Forgot Password Functionality

[niyobern]

Description: Implement the frontend for the "Forgot Password" functionality. This feature includes two main parts:

1. Password reset request form.
2. Reset password page.

Tasks:

• [x] Create PasswordResetRequestForm component.
• [x] Implement form validation for email.
• [x] Handle form submission with Redux.
• [x] Display success and error messages.
• [x] Create ResetPasswordForm component.
• [x] Implement form validation for new password.
• [x] Handle reset password submission with Redux.
• [x] Integrate forms into app routing.
• [x] Style the components according to the Figma design.

Implementation Plan

1. Create a Password Reset Request Form:

• Create a component PasswordResetRequestForm where users can input their email to request a password reset.
• Form should include:
  • Email input field
  • Submit button
• Form validation for email format.

2. Handle Form Submission:

• Use Redux to manage the state for the password reset request.
• Create actions and a reducer for handling the request and response states.

3. Display Success and Error Messages:

• Show a success message if the email is sent successfully.
• Show an error message if there is an issue (e.g., email not found).

4. Create a Reset Password Page:

• Create a component ResetPasswordForm where users can reset their password using a token.
• Page should include:
  • New password input field
  • Confirm new password input field
  • Submit button
• Form validation for password strength and matching confirmation.

5. Handle Reset Password Submission:

• Use Redux to manage the state for the password reset submission.
• Create actions and a reducer for handling the password reset response.

6. Navigation and Routing:

• Integrate the forms into the existing app routing.
• Ensure smooth navigation between the request form and the reset password page.

7. Styling:

• Apply styles to match the Figma design.
• Ensure the forms are responsive and accessible.