[FEAT] - SETTINGS PAGE -> Implement the Password Settings Page

[luqmonac56]

Description:

Implement a password settings page for users to update their password. The page should include fields for the current password, new password, and confirm new password. The new password field should have a password strength indicator. The page should be user-friendly, responsive, and visually consistent with the rest of the application.

Acceptance Criteria:

1. The page should be responsive across all devices (mobile, tablet, desktop).
2. Form validation should be implemented for all input fields.
3. Users should receive confirmation messages for successful password updates.
4. Error messages should be displayed for invalid inputs.
5. The new password field should include a password strength indicator.
6. Unit tests should cover all key functionalities.
7. Integration tests should ensure the page interacts correctly with the backend.

Expected Outcome:

A fully functional password settings page that allows users to change their password. The page should include a password strength indicator for the new password field and meet all acceptance criteria.

Purpose:

The password settings page will enhance user security by allowing users to update their password, ensuring that the application maintains strong security practices.

Requirement:

1. Design implementation as per the provided Figma designs.
2. Integration with the backend API for updating user passwords.
3. Form validation for all input fields (current password, new password, confirm new password).
4. Implementation of a password strength indicator for the new password field.
5. Responsiveness across different screen sizes.
6. Error handling and display of appropriate messages.

Testing:

1. Unit tests for form validation and API integration.
2. Integration tests to ensure the password settings page works seamlessly with the backend.
3. Manual testing across different devices to ensure responsiveness.

Task:

• Set up the password settings page component.
• Implement the form with fields for current password, new password, and confirm new password.
• Integrate with the backend API for password update.
• Add form validation for all input fields.
• Implement password strength indicator for the new password field.
• Implement error handling and display of error messages.
• Ensure the page is responsive across all devices.
• Write unit tests for form validation and API integration.
• Conduct integration tests with the backend.
• Perform manual testing for responsiveness and accessibility.

Picture of the corresponding component/page of the ticket from the Figma:

Figma Link:

• Figma