FE - Add Show/Hide Password Functionality in Login Form

[sanjaysah101]

Description

Could you implement a show/hide password in the login form to enhance the user experience? The feature should allow users to toggle the visibility of their password input.

Tasks

1. Create a Custom Password Component:

   • Develop a Password component that handles the password input field and includes logic to toggle visibility.
   • The component should accept common input props like name, value, onChange, placeholder, and other relevant attributes.
   • Add a button or icon within the component that toggles between showing and hiding the password.
   • Use state management to track whether the password is visible or hidden.

2. Integrate the Password Component into the Login Form:

   • Replace the password input field in the login form with the newly created Password component.
   • Ensure the component integrates seamlessly with the form's state and validation logic.

Acceptance Criteria

• The login form should include a custom Password component with show/hide functionality.
• Users should be able to toggle password visibility by clicking an icon or button.
• The form should maintain its existing behaviour, including validation and submission.

Additional Context

This feature will improve usability by allowing users to verify their password input if needed, especially on mobile devices where typing errors are more common.

[IngaleChinmay04]

I am not yet familiar with TypeScript and Next.js, but I am eager to take on the challenge of implementing the show/hide password feature. Could you please assign this task to me?

[Badra00]

Hello I created a PR to add this feature.