Adding an eye button

[ayushkamboj18]

Summary of the Changes and the Related Issue:

This pull request implements a feature to toggle the visibility of the password in a signup form. When the user is typing, the password will be displayed, and it will be hidden once the user stops typing unless the eye icon is clicked to show it.

Motivation and Context:

The motivation behind this change is to enhance user experience by allowing users to see their password while typing. This is particularly useful for ensuring that users enter their passwords correctly. The context of this change is a React-based signup form where password visibility can be toggled with an eye icon.

Fixes # (issue) In the current implementation of the signup form, the password input field does not provide an option for users to toggle the visibility of their password. This can lead to user frustration, as they cannot see what they are typing and may accidentally enter incorrect passwords. The objective is to implement a feature that allows users to show and hide their password by clicking an eye icon, which enhances usability and ensures that users can verify their password input easily.

Type of change

Please give a X on it which is applicable

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X] New feature (non-breaking change which adds functionality)
• [ ] Refactor Code
• [ ] A documentation update
• [ ] Others(mentioned in the issue number)

How Has This Been Tested?

Test A

1. Navigate to the signup form.
2. Type in the password field and observe that the password is visible while typing.
3. Click the eye icon to toggle the password visibility on and off.
4. Verify that the password hides when clicking the eye-off icon and shows when clicking the eye icon.

Screenshorts and Vedios:

Screencast from 30-05-24 07:43:28 PM IST.webm

Checklist:

give a X on it which is applicable

• [X] My code follows the style guidelines of this project
• [X] I have performed a self-review of my code
• [X] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [X] My changes generate no new warnings
• [X] I have added tests that prove my fix is effective or that my feature works
• [X] New and existing unit tests pass locally with my changes
• [ ] Any dependent changes have been merged and published in downstream modules

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
pop-shop	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 31, 2024 5:27am

[pooranjoyb]

Hii @ayushkamboj18 Please resolve the conflicts, else everything looks good :)

[ayushkamboj18]

I am a newbie so please guide me to resolve this issue.

[pooranjoyb]

so basically, take a pull to your branch using git pull origin dev

• vs code will ask you to resolve the conflicts using a resolver.
• This will do i guess, ask me if you have any further doubts.

Best case will be clone the repo again and do the changes and create a PR, if you're not confident with resolving conflicts. @ayushkamboj18