We have moved to GitHub Issues
You are viewing the read-only archive of Umbraco's issue tracker. To create new issues, please head over to GitHub Issues.
Make sure to read the blog posts announcing the move for more information.
Created by Kris Janssen 17 Jan 2018, 21:39:51 Updated by Kris Janssen 02 Jul 2018, 17:59:35
Tags: Up For Grabs PRSafari 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
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...'
Priority: Normal
Type: Bug
State: Fixed
Assignee:
Difficulty: Normal
Category:
Backwards Compatible: True
Fix Submitted: Pull request
Affected versions:
Due in version: 7.12.0
Sprint:
Story Points:
Cycle: