Redesign password strength indicator so it's less fragile

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

Ah, this looks really good Lewis. Nice work!

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

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

So let's do this here no?

btw huge +1 to this - nice work :)

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:

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?

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

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.

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

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

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):

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

@dcrocks: No problem!

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?

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

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

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:

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.

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

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

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.

Seven was the only theme with that issue. fixed.

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

(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.)

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

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

tag