[FEATURE] 🗺️ ⚙️ Settings Pages > Password Settings > implement a password visibility toggle

[crystal4000]

figma link - https://www.figma.com/design/VEItfX6St5NSAqqNHImcxD/HNG-Boilerplate-Designs?node-id=10-17260&t=ybfmYNMB6xh8HxXT-1

Description

Develop a Password Visibility Toggle component for the Settings Pages > Password Settings section. This component will allow users to toggle the visibility of their password input. The component should be user-friendly and easy to integrate into existing forms. It should include the following features:

Acceptance Criteria

The Password Visibility Toggle component is implemented according to the design. The component should allow users to toggle the password input type between "password" and "text". Ensure the component is fully responsive and works well across different screen sizes. Ensure accessibility standards are met, including appropriate ARIA roles and labels. Requirements The component should receive the following props:

password: The user-entered password.

onPasswordChange: A callback function that is triggered when the password changes. value.

### Tasks

• [ ] Develop the Password Visibility Toggle component based on the provided requirements.
• [ ] Implement handling for toggling the password input type.
• [ ] Ensure proper keyboard navigation and ARIA roles for accessibility.
• [ ] Test the component for responsiveness and compatibility across different devices.

[jerahmeel200]

can you please assign this issue to me