Problem/Motivation

We've commonly had problems with the placement of the password strength indicator, especially on narrower screen sizes. See: #1887558: Password Strength indicator overlaps with input field in Narrow screens #2100509: Password strength indicator for site maintenance account is aligned incorrectly on the installation screen #1882474: Password strength indicator display broken in install process #2041793: install-page.html.twig markup and CSS

Proposed resolution

Redesign!

Remaining tasks

  1. Test design in Stark and Bartik
  2. Remove any redundant CSS related to the password indicator.

User interface changes

The password strength indicator

API changes

None

CommentFileSizeAuthor
#32 2247049-password-indicator-32.patch5.69 KBherom
#32 interdiff-2247049-27-32.txt408 bytesherom
#32 seven-password-strength-width-mobile.png7.19 KBherom
#29 2014-07-27-qep4x.png21.7 KBcorbacho
#27 2247049-password-indicator-27.patch5.47 KBherom
#27 interdiff-2247049-19-27.txt853 bytesherom
#27 stark-password-strength-rtl.png17.14 KBherom
#27 bartik-password-strength-rtl-after.png16.73 KBherom
#27 bartik-password-strength-rtl-before.png16.99 KBherom
#27 seven-password-strength-rtl-after.png22.66 KBherom
#27 seven-password-strength-rtl-before.png21.22 KBherom
#26 bartik_rtl.png10.97 KBalexpott
#25 Screenshot 2014-07-19 08.51.50.jpg101.96 KBLewisNyman
#23 show-password.png19.17 KBsqndr
#20 Screen Shot 2014-07-01 at 14.06.23.jpg20.91 KBLewisNyman
#19 bartik-after.png16.14 KBsqndr
#19 bartik-before.png14.33 KBsqndr
#19 Seven-after.png16.98 KBsqndr
#19 interdiff-15-19.txt1.37 KBsqndr
#19 2247049-password-indicator-19.patch4.82 KBsqndr
#15 interdiff-11-15.txt323 bytessqndr
#13 interdiff-5-11.txt345 bytessqndr
#11 2247049-password-indicator-11.patch3.8 KBsqndr
#11 2247049-password-indicator-11.patch3.8 KBsqndr
#11 pass-no-focus-after.png12.22 KBsqndr
#11 pass-has-focus-after.png14.28 KBsqndr
#11 pass-no-focus-before.png13.24 KBsqndr
#11 pass-has-focus-before.png14.08 KBsqndr
#6 password-not-filled-safe.png10.27 KBsqndr
#5 Screen Shot 2014-06-27 at 11.58.39.jpg35.97 KBLewisNyman
#5 2247049-password-indicator-5.patch3.78 KBLewisNyman
#3 meter_screenshot.png4.89 KBLewisNyman
#3 Screen Shot 2014-06-27 at 08.36.10.jpg26.9 KBLewisNyman
#3 Screen Shot 2014-06-27 at 08.33.58.jpg31.14 KBLewisNyman
#3 Screen Shot 2014-06-27 at 08.31.43.jpg25.82 KBLewisNyman
#2 hackpad.com_4dSSBUhCYjj_p.95648_1403688322296_password.gif91.44 KBLewisNyman
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Bojhan’s picture

Issue tags: +frontend
LewisNyman’s picture

Here's a good example of what I'm thinking, a password indicator that is flush with the input above it, no extra horizontal space required, so this won't keep breaking all the time.

a password indicator that sits below the password input

LewisNyman’s picture

Here's a design from dropbox:

Here's an old design from dropbox:

Here's another from strength.js

Twitter also uses an indicator embedded in the input

I noted that all these designs do not use colour as the only indicator, so they are fully accessible.

Bojhan’s picture

Inline validation like the last would be great, but is setting the wrong expectations. I really like the first idea.

LewisNyman’s picture

Status: Active » Needs review
Issue tags: +CSS
Related issues: +#1986418: Update textfield & textarea style
FileSize
3.78 KB
35.97 KB

I was tempted to play around with this, here's a patch. Note how much CSS I deleted to achieve this design :) There is probably a lot more to remove and simplify from Seven and Bartik.

As you can see from the screenshot, we're going to have to see how this work against the new focus styling in #1986418: Update textfield & textarea style

sqndr’s picture

FileSize
10.27 KB

Ah, this looks really good Lewis. Nice work!

sqndr’s picture

Status: Needs review » Reviewed & tested by the community

Forgot to mark it as RTBC, woops (http://cl.ly/image/1K3o231X1W32)!

alexpott’s picture

Status: Reviewed & tested by the community » Needs work

There is probably a lot more to remove and simplify from Seven and Bartik.

So let's do this here no?

alexpott’s picture

btw huge +1 to this - nice work :)

LewisNyman’s picture

Issue summary: View changes
sqndr’s picture

While I was looking at the patch again, I found that 0.3em is really small. Especially when the element is focused. This is also due to #1986418. Maybe we could increase the size a little bit? Don't wanna start bikeshedding here.

Here's before and after, with and without focus:
Before:

  • before
  • before

After:

  • after
  • after

Adding a patch and an interdiff with patch 5. As you can see, I just changed the 0.3em to a higher value (0.5em) to make sure the element is visible when the text area has focus. I think it looks slightly better when it's bigger. Any ideas?

sqndr’s picture

sqndr’s picture

FileSize
345 bytes

Ah damn it, forgot to add the interdiff and added the patch twice.

LewisNyman’s picture

Yep, I was about to suggest increasing the height, at least until we have the text fields in.

sqndr’s picture

FileSize
3.8 KB
323 bytes

Another small remark. Passwords match: yes is hidden in the css by default. Then the javascript comes in and checks if it should hide the message or not. If so, it applies the css directly to the element. So, I've added this line again to make sure the field is hidden by default. And once again, a nice little interdiff.

dcrocks’s picture

Why make the font that small? Is there a specific reason?

dcrocks’s picture

Status: Needs work » Needs review

I hope I didn't stomp on your status change.

LewisNyman’s picture

@dcrocks It looks like it's using the standard base font size?

sqndr’s picture

Here's a whole new patch. I've removed all the styles in Bartik for the password indicator. Only had to add a margin to make the indicator stick to the password field. Screenshots added when using Bartik (before/after patch) and Seven (after patch):

LewisNyman’s picture

Here's a screenshot from Stark, looks good enough for me.

dcrocks’s picture

Sorry, I should have read the patch. You were referring to the height of the bar, not the text.

sqndr’s picture

@dcrocks: No problem!

sqndr’s picture

FileSize
19.17 KB

Would it be useful to implement that show password button? I've started with Bartik as admin theme, looked something like the screenshot that's added. Useful, anyone?

LewisNyman’s picture

LewisNyman’s picture

Status: Needs review » Reviewed & tested by the community
FileSize
101.96 KB

Now that #1986418: Update textfield & textarea style is in. I'm actually quite happy with this. The visual indicator is noticeable when you're typing and the text even more noticeable being below the password field. There might be a few design opinions once it's committed but I think we are in a good place to tweak things later one. Much simpler.

alexpott’s picture

Status: Reviewed & tested by the community » Needs work
Issue tags: +Needs screenshots, +RTL
FileSize
10.97 KB


In RTL the colon is on the wrong side initially in Bartik.

Also can we get RTL screenshot for all themes. Thanks!

herom’s picture

I found two issues with RTL styles, one in bartik and one in seven theme. Fixed in the patch.
Added before/after screenshots for the fixes in seven and bartik, and a screenshot for stark theme.

Seven before (#19):

  • float issue with strength suggestions.

Seven after (#27):




Bartik before (#19):

  • extra padding in strength suggestions fieldset




Bartik after (#27):




Stark:

herom’s picture

Also, the colon position mentioned in #26 isn't really an issue. It's just the result of putting English text in RTL direction. As you can see in the screenshots, the position is correct in the translated text flow.

corbacho’s picture

FileSize
21.7 KB

Good work herom. Patch applies, and works as expected, Tested in IE9, IE10. http://monosnap.com/image/YroFpneYVgzS2JKaoRjqVHj2pZzJ8Y

I found that in narrow screens, in the Seven theme, the password field takes the full 100% width, but the strength bar is 40% width.
Is this ok? I suppose the CSS for the progress bar needs to be theme-agnostic, so I think this is good.

Sorry for bike-shedding, but do you think we could update the background color to be lighter (like #DDD), so it increases the color contrast. Currently is a poor 1.2 when "Fair" strength is displayed. It's difficult to see it, specially in Chrome because of the blue-focus border.


PS. That strange icon is Lastpass extension

corbacho’s picture

Status: Needs review » Reviewed & tested by the community

I think these are minor complaints after all. I will mark it RTBC

alexpott’s picture

Status: Reviewed & tested by the community » Needs work

From the issue summary:

We've commonly had problems with the placement of the password strength indicator, especially on narrower screen sizes.

However from #30:

I found that in narrow screens, in the Seven theme, the password field takes the full 100% width, but the strength bar is 40% width.

Let's get this right first time.

herom’s picture

Status: Needs work » Needs review
FileSize
7.19 KB
408 bytes
5.69 KB

Seven was the only theme with that issue. fixed.

corbacho’s picture

Status: Needs review » Reviewed & tested by the community

Thx herom.
issue is fixed. Narrow screen tested in all themes. Thumbs up!

chx’s picture

(by the way did anyone test the pwd strength indicator with password filling extensions like https://chrome.google.com/webstore/detail/supergenpass-for-google-c/bmmm... this? Most indicators break because there are no keypresses. followup obviously but wanted to note.)

corbacho’s picture

@chx we are listening the "input" event, that is triggered by any type of change, typing, copy/paste with mouse, even drag&drop, etc. Also I tested with chrome extension Lastpass generation tool and it works.

I tried that extension that you suggest but that specifically didn't work, until you switch to the next field "confirm password". But anyway, the extension it's used only by 765 people and we can't cover every single possible tool out there.

As you said, we should open follow-ups and not derail the issue. This is only about the placement of the box (CSS)

LewisNyman’s picture

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed 615f564 and pushed to 8.x. Thanks!

  • alexpott committed 615f564 on 8.x
    Issue #2247049 by sqndr, herom, LewisNyman: Redesign password strength...
nod_’s picture

Issue tags: +JavaScript

tag

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.