Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Eye Icon for Revealing and Hiding Passwords #2466

Closed
perminder-17 opened this issue Sep 21, 2023 · 12 comments · Fixed by #2467
Closed

Eye Icon for Revealing and Hiding Passwords #2466

perminder-17 opened this issue Sep 21, 2023 · 12 comments · Fixed by #2467

Comments

@perminder-17
Copy link
Contributor

Increasing Access

The proposed feature entails the addition of a small eye icon next to password input fields within the application's user interface. Users would have the option to click on this icon, toggling between two states:

  1. Password hidden
  2. Password revealed

Feature enhancement details

1.Improved User Experience: This feature would enhance the overall user experience by providing an option to easily view the entered password, reducing frustration associated with mistyped or forgotten passwords during the login or registration process.

2.Enhanced Security: Despite the password being temporarily visible, this feature does not compromise security since it is under the user's control. Passwords would still be securely stored and transmitted as usual.

3.Accessibility: The eye icon would be particularly helpful for users with visual impairments who rely on screen readers. They can easily verify their entered password before submission.
image

@perminder-17
Copy link
Contributor Author

@lindapaiste Can we work on this issue.??

@lindapaiste
Copy link
Collaborator

@lindapaiste Can we work on this issue.??

Sure! FYI based on my quick googling it seems like the way to unobscure the text is by changing the <input> from type="password" to type="text" and back.

@perminder-17
Copy link
Contributor Author

Ok working on it..

@perminder-17 perminder-17 mentioned this issue Sep 21, 2023
4 tasks
@perminder-17
Copy link
Contributor Author

@lindapaiste can u review?

@Ganaik2004
Copy link

@lindapaiste i want to work on these issue . Please assign it to me.

@sudhanshuku01
Copy link

I'm done can I make pull request for this one

@Shashank0229
Copy link

Yes , Thats true , we can have or simply we must have an eye icon for password and I think the better solution I have as I can do this in just a 2-3 lines of code , Assign me

@Shashank0229
Copy link

Shashank0229 commented Oct 2, 2023 via email

@Varun-45
Copy link

Varun-45 commented Oct 3, 2023

@perminder-17 I want to work on this issue can you please assign it to me

@madtitan02
Copy link

is this issue still unresolved?? can i work on it

@lindapaiste
Copy link
Collaborator

lindapaiste commented Oct 24, 2023

Just a note that we need to test this feature in Microsoft Edge and make sure that it works alongside the built-in behavior. We may need to hide the default eye with

::-ms-reveal {
    display: none;
}

It's probably more complicated to hide our eye and use the default one when in Edge.

See: https://learn.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal

@perminder-17
Copy link
Contributor Author

Ok @lindapaiste going to do that asap

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment