Add "Show password" button/icon to login page

Sparkey · October 27, 2021, 4:56pm

This seems like a good place to ask, I hope.

I have noticed on many login boxes lately “reveal icon eyes”, I have decided that I really like them!

I noticed above that google and .gov both have “show password” check boxes, so I reckon it is secure enough.

I see some little icon on your mock-ups viktor, but I don’t know what they are, and they are on both username and password, so I guess they are something else?

So, do I need to start a petition for this? I searched the petition forum page with “login” and didn’t see anything.

viktor · October 27, 2021, 5:25pm

That’s a good question. In my screenshots, those are inserted by my password manager LastPass. I thought about including it, because it is good for the users. ClassicPress does have it in certain places, like resetting the password:

I’ll see if this is something I can add now. If not, I’ll work on it after the initial design is released.

UPDATE:

I did a little research. Show password is recommended by Google’s web.dev.

It’s also an accessibility feature, helping certain users:

Some folks have memory issues and need to be able to see what they typed.

Other folks have essential tremors. They are likely to make mistakes. Not seeing what was typed makes it impossible to verify and fix.

Just about anyone who likes to double check what they typed in.

joyously · October 27, 2021, 5:47pm

Viktor, that would be a separate PR. The eye icon on the login page is in WP, so you can backport that change if you want.

viktor · October 27, 2021, 5:50pm

Thanks for reminding me. I remember now there’s also a ticket in Trac about the eye icon conflicting with the password manager icon.

james · October 28, 2021, 12:42am

I’ve moved the posts about adding the “Show password” button/icon to a new petition.

This seems at first glance like it would be a minor change (i.e. not needing a petition to implement), but we already tried to backport WP’s changes here and it ended up being pretty difficult, because they also did a reworking of a lot of the admin styles including the login page and those changes are tied up together with the “Show password” button. Therefore it will be helpful to have people vote on this along with other petitions, so that we can decide how much time to spend on it.

Note that WP are also investigating reworking this to not interfere with the LastPass button, as Viktor mentioned.

Links for reference: https://github.com/ClassicPress/ClassicPress/pull/525 | #42888 (Add a "Show" button next to password fields on mobile) – WordPress Trac | #48222 ("Show password" button overlaps with the LastPass icon) – WordPress Trac

viktor · October 28, 2021, 6:20am

Thanks. Should we wait on WordPress to figure this out? Show/hide password is a simple implementation. I can easily add our own version, so we don’t rely on WordPress for everything.

There are several options:

Google uses a checkbox with a show password label below the password field.
Login.gov uses checkbox above the password field.
WordPress uses an icon inside the input field, which conflicts with password managers. In the mockup, I placed it above the password field.
Another implementation is to add a simple button to the right of the password input. Same eye icon, just next to the input instead of being inside it.

#3 is an interesting choice. It could also be show/hide instead of the icon.

Overall, if the changes are non-breaking I think we should be able to do our own implementation if backporting is too complex.

I’m curious which option do you like @Sparkey? What feels right?

azurecurve · October 28, 2021, 7:49am

If it is doable, I see no reason why we should be waiting on WordPress to work it out.

Option 4 is the most common implementation I’ve seen.

james · October 28, 2021, 12:52pm

I like this approach from the latest WP ticket:

Backporting is generally better when feasible/possible, but [in cases like this where a backport is especially hard] it is up to whoever is doing the implementation. If that’s you, I would just suggest not spreading yourself too thin with too many changes at once.

viktor · October 28, 2021, 2:24pm

I actually tried that version last night and didn’t really like it, so I didn’t include it. Here’s a rough mockup of what that might look like - including a slightly different version (this one might have problems in different languages though).

My main problem with it is the right alignment. Google uses a similar approach but the left it on the left side, so it’s a bit more natural:

Twitter also does something similar, aligned to the left:

Facebook fix?

I was looking for more examples from various large websites, and I stumbled upon Facebook’s login. They actually figured out a way to make it work with the password manager.

They styled <div> around the input and a link as an input using the border. It’s basically #4 mockup but the border is now around both the input and the button.

Any thoughts on this?

Sparkey · October 28, 2021, 3:03pm

I am getting used to looking around for the button on different logins.

Number 4 matches the “Reset Password” in your Oct 17th post, it looks fine.

But if you like Google’s aligned left, it’s fine, I use it all the time, I had no idea I was using an accessibility feature!, I know my memory is getting really bad!

I think I may not be very picky.

And like James said, don’t spread yourself too thin.

james · October 28, 2021, 5:09pm

I like this one too.

The existing WP design is also pretty good, I guess it would just need to have the markup changed to use a container element that has the border, and have the input element only use part of that container’s width, with no border itself.

system · April 21, 2022, 7:04pm

Sparkey · July 25, 2022, 12:29am

FYI - I just had to create a new password.
CP 1.4.1 emailed me a password reset link and the log-in screen for that process had the “reveal icon eye” and it was defaulting to show me the password I was creating.