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

Created by Kris Janssen 17 Jan 2018, 21:39:51 Updated by Kris Janssen 02 Jul 2018, 17:59:35

Tags: Up For Grabs PR

Safari on macOS allows users to retrieve site passwords from their keychains.

For the purpose, Safari shows a 'key' indicator at the right hand side of the password field.

On the logon screen for the Umbraco BackOffice, the Safari 'key' icon is hidden beneath the 'eye' indicator that allows the filled in password to be made visible.

9 Attachments


Bjarne Fyrstenborg 05 Feb 2018, 16:09:49

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

Anders Brohus 25 May 2018, 18:27:30

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;

Sebastiaan Janssen 04 Jun 2018, 06:22:41

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.

Søren Kottal 04 Jun 2018, 06:32:46

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.

Søren Kottal 04 Jun 2018, 08:53:16

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

Bjarne Fyrstenborg 06 Jun 2018, 19:45:07

@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.

Sebastiaan Janssen 07 Jun 2018, 05:42:02

@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.

Sebastiaan Janssen 07 Jun 2018, 05:42:35

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

Sebastiaan Janssen 07 Jun 2018, 05:56:17

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.

Matt Darby 12 Jun 2018, 15:25:57

@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?

Sebastiaan Janssen 22 Jun 2018, 08:36:12

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!

Ed Parry 22 Jun 2018, 09:36:47

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

Niels Hartvig 22 Jun 2018, 10:10:17

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

Bjarne Fyrstenborg 22 Jun 2018, 11:08:16

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.

Ed Parry 22 Jun 2018, 11:26:51

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

Kris Janssen 25 Jun 2018, 17:11:25

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

Kris Janssen 02 Jul 2018, 17:59:35

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

Priority: Normal

Type: Bug

State: Fixed


Difficulty: Normal


Backwards Compatible: True

Fix Submitted: Pull request

Affected versions:

Due in version: 7.12.0


Story Points: