U4-10839 - Backoffice password field 'eye' icon overlaps with password manager icons

Maybe one of these css rules will hide the "key" icon in Safari? https://stackoverflow.com/a/46092077

Fixed this, PR is here: https://github.com/umbraco/Umbraco-CMS/pull/2647 :)

Added this to the login style,

input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
}

I have the same problem with Lastpass and I'm sure other password managers have this problem. It actually feels like we should find a better solution for the "show password" eye icon instead.

I wonder if anyone knows a good example of a UI for having both icons available? It would be good if there is no conflict that the "show password" icon appears all the way to the right, but if there is, it moves a little to the left. However that is going to be a nightmare of finding all the possible password manager icons and testing for them.

How about wrapping the password field in a div, and add the password field styling to that in stead. Then have the toggle icon in the div next to the password field? The manager icon will then be placed in side the field, to the left of "our" visibility toggle.

Like this https://codepen.io/skttl/pen/NzxMVV

@nul800sebastiaan regarding Lastpass it isn't just an issue with password input in login screen, but generel input fields. I guess is mainly an issue with password input fields and maybe text inputs when using autofill. E.g. on document types, when I have Lastpass enabled in Chrome, I get an icon on top of the alias.

Maybe if adding padding-right makes a difference in this case, since a very long document type name goes behind the "alias" label/input, but since Lastpass inject a background image on using background-size: 16px 18px; background-position: 98% 50%; it will be placed at right and cover alias unless alias is moved to right from input like @Søren.Kottal suggests.

@Bjarne.Fyrstenborg I don't know why you have this, but my LastPass doesn't do that on the node name field, that's weird.

Ah I see, it's the doctype name hmm..

Right, we can add data-lpignore="true" to those fields. But.. that only works for lastpass, which knows how many other crazy form fill apps are out there. Let's focus on the password field on the login screen first, this one you can kinda still use, the eye icon is completely unusable right now though.

@sebastiaan ''I wonder if anyone knows a good example of a UI for having both icons available?''

I have seen some sites get around this by moving the icon above the input. What do you think?

We've come to the conclusion that we want something like this screenshot, aligned to the right under the password input, a text "show password 👁" (or hide password, when it's showing).

That way, we'll never clash with any password manager.

It makes more sense to have actual text there as well so people don't have to decipher just and icon, plus it's more easily clickable too.

I'll put this in Up for grabs for someone to pick up and run with, hopefully it should be pretty easy to do!

I can take a look at this one this afternoon. Will update later today on progress, hopefully with a PR!

Love the idea of using text instead of icon and love that you're quoting Luke Wroblewski :-D

Just a reference to the article from Luke: https://www.lukew.com/ff/entry.asp?1941 Adobe use the "eye" icon inside the password field https://www.adobe.com/dk/ which is show on focus on the password field and at least 1 character in input (have a look at the "password-revealer off" in the DOM). See the attachments.

Initial PR: https://github.com/umbraco/Umbraco-CMS/pull/2718

Apple itself seems to avoid showing the 'eye' on iCloud.com ...

NordVPN seems to have a working solution... the 'show' or 'eye icon is outside of the box...'