"Show password" button overlaps with the LastPass icon

[SergeyBiryukov]

The new "Show password" button added to login screen in [46256] overlaps with the LastPass extension icon. Tested with Google Chrome 77 on Windows 10.

This only happens on Log In and Reset Password screens. The Edit User screen is OK, as the button there is separate from the input.

[sabernhardt]

moves button from the (right) edge when input has background-image in style

[sabernhardt]

login form after patch

[sabernhardt]

The patch checks for a background image in the password input's style attribute. If it finds one, the show password button moves over by 40 pixels.

[johnbillion]

How do services that use the "show" button such as Facebook, Google, and WordPress.com handle this?

[adamsilverstein]

google sign in

[adamsilverstein]

Attaching some screenshots of the Google account login screen.

Here, the show password icon looks like it is in the right hand edge of the input - in fact, its outside the input entirely and uses a merged borderless edge to make it appear as part of the field.

[adamsilverstein]

One other potential option would be to disable the lastpass icon for the password field by adding data-lpignore="true". I verified this works and that I can still fill in both fields using the icon visible in the user_name field.

[adamsilverstein]

login with data-lpignore="true" in password field

[adamsilverstein]

data-lpignore="true" approach

[sabernhardt]

I tested the second patch in Edge, IE11, Opera 63, Firefox 69 and Chrome 77 on Windows 10. I had no trouble populating the two fields with LastPass when clicking the icon inside the Username/Email input or when using the show/hide button. It looks cleaner than my option, and I'm not sure having a clickable LastPass icon in the Password field is necessary after the previous field.

[Clorith]

LastPass being just one of many password managers, I would be more inclined to take the route of the other big players out there; a "fake" part of the input with no left border as noted in comment:4 would be more forward-compatible as well with whatever new services may pop up.

[garrett-eclipse]

I would also agree with the fake portion of the input. OR moving the icon up beside the 'Password' label so it's not directly in the input itself.

[davidbaumwald]

I agree with the "faking" of an extended input as well, instead of chasing an unknown number of vendor-specific workarounds.

[sabernhardt]

simplest option: only adding min-width to password input

[sabernhardt]

simplest option in Firefox (min-width)

[sabernhardt]

"fake input" option with border on container and larger input areas for login

[sabernhardt]

"fake input" option in Edge, with LastPass icons

[sabernhardt]

I included a simpler option of only the min-width because that should not require much testing.

For the "fake input" option, I tested in various PC browsers as well as at different zoom levels and with a larger text size. That still leaves plenty of other testing (including High Contrast Mode).

[afercia]

For the records, this was noted also on the Show Password ticket. See:
https://core.trac.wordpress.org/ticket/42888#comment:24
https://core.trac.wordpress.org/ticket/42888#comment:45

That said, I'm not sure WordPress should necessarily remediate to poor implementations by external software. It appears to me Lastpass should make a better job and take padding into consideration. I'd lean towards reporting upstream.

[davidbaumwald]

With 5.3 RC1 releasing today, this is being moved to Future Release. If any committer feels this can be worked in quickly for 5.3 or can assume ownership in 5.4, feel free to move it back up.

[afercia]

@johnbillion what are your thoughts on reporting upstream to LastPass? Seems to me LastPass should do a better job and its icon placement seems arguable. It also conflicts with native browsers UI. See for example Safari in th screenshot below. I think this also applies to Edge.

[afercia]

See the Safari "key" icon on the username field.

[johnbillion]

Observation: google.com and facebook.com both place the view button outside of the input (with a fake focus border). wordpress.com uses the padding method that core is using.

[SergeyBiryukov]

Related: #48392

[audrasjb]

Hi,

48222.4.diff is a nice workaround, but I'm wondering about implementing a fake input since focus outline looks very strange to me… and this will be the rendering for all users, even those who don't use LastPass or so.

Adding needs-design/needs-design-feedback workflow keyword and moving it to 5.4 as it doesn't sounds realistic for 5.3.1 which is planned this week.

[sabernhardt]

Yes, the fake input option could be better, so I agree to reconsider this for a later version. And it looks stranger in High Contrast Mode. Wrapping the username input with a similar container div might be a good start to improving it, though I'm not sure how yet.

Another consideration: the icon for Norton's Password Manager also overlaps.

[valentinbora]

Test of the login form with patch 48222.4.diff on Chrome/LastPass