New Password Change UI

[markjaquith]

​https://make.wordpress.org/core/2015/05/11/the-plan-for-passwords/

This is a tracking ticket for the new password changing UI, which I'm converting from a plugin into a patch.

[markjaquith]

Converted to a patch.

[MikeHansenMe]

additional focus and confirmation of weak password

[MikeHansenMe]

Do we want to add this to the add new user page as well? Maybe we should just generate a pw and send them a link to set their own password. Another option is that if the password is set via the new UI we could still email that to them(although I do not want to send them a plain text password).

[MikeHansenMe]

moves cursor to the end

[MikeHansenMe]

32589.3.diff​ moves the focus to the end of the input. It also adds focus when the show/hide button is clicked.

[MikeHansenMe]

32589.4.diff​ adds the password UI to user-new.php. It also removes send password by email checkbox. I needed to edit the js a bit to make it work on both pages.

[MikeHansenMe]

Add UI to add new user

[MikeHansenMe]

Updated to keep the email password checkbox and update wording for reset link.

[markjaquith]

In 33023:

New password change/set UI.

• Generate the password for the user
• More tightly integrate password strength meter
• Warn on weak passwords

see #32589

props MikeHansenMe, adamsilverstein, binarykitten

[markjaquith]

In 33031:

Add a missing "var". see #32589

[markjaquith]

In 33033:

Slow down on calling zxcvbn if it isn't loaded.

see #32589

[pro99]

Thumbs up for better security. Any plan for making two-factor auth with Google Authenticator a checkbox to activate, and build the function into WordPress Core?

[tywayne]

Has there been discussion on what to do with initial user password creation on install.php?
Seeing some weirdness there, assuming from some of these changes.

gif of issue: ​https://cloudup.com/ivtVbcTH_-E

[MikeHansenMe]

@tywayne thanks for the report. We should put the new UI on the install I think.

[obenland]

In 33050:

Add missing prefixed attributes, introduced in [33023].

See ##32589.

[obenland]

We should probably deprecate wp_get_password_hint() if we don't want to keep it around.

[Ipstenu]

Forums comment - ​https://wordpress.org/support/topic/password-generator-only-on-load?replies=1&view=all

tl;dr - If you delete the password, there's no way to generate a new one.

1. Go to your profile page.
2. Click 'Generate new password'
3. Delete the value.

Ooops. :D

[tje3d]

Regenerate password without refresh

[akibjorklund]

Add missing period to the description text introduced in 33023.

[afercia]

Please consider back compatibility with Internet Explorer 8, see #32886.

[MikeHansenMe]

Add the password UI to install page

[danielpataki]

I was wondering if it would make sense to shorten the generated password a bit. Thinking of the psychology of the matter, if a user sees something like this: 0pN#i%dhaDcD0HIn3KiCgE$W I think s/he is much more probable to think "that's way too much", delete it, and enter a weak one.

Perhaps if the generated password was something like this: 0pN#i%de it would be less intimidating. This is still measured to be a strong password, perhaps this would increase the adoption rate of random passwords?

[MikeHansenMe]

Maybe we should just put a filter for the length so it can be changed.

[danielpataki]

Replying to MikeHansenMe:

Maybe we should just put a filter for the length so it can be changed.

I don't think this would solve the issue since it would only make default passwords shorter if a plugin hooks into it, kind of defeating the purpose - although regardless - a filter may be useful.

I don't see how anyone not using a password manager would go with 0pN#i%dhaDcD0HIn3KiCgE$W, but KiCgE$W may be short enough to work.

[MikeHansenMe]

When suggesting a filter I was not saying we could not change the default to also be shorter. Just that if we make it shorter some people will want longer. One thing to consider also is that this shows on three screens at the moment but one is the install screen, which no plugins will be active. Uploading screenshots now.

[danielpataki]

Replying to MikeHansenMe:

When suggesting a filter I was not saying we could not change the default to also be shorter. Just that if we make it shorter some people will want longer. One thing to consider also is that this shows on three screens at the moment but one is the install screen, which no plugins will be active. Uploading screenshots now.

Ah, fair enough, my mind must have been somewhere else :) Thank you :)

[MikeHansenMe]

on mobile-2 and mobile-3 you can see the input and meter go off the page. I am going to get a patch worked up to fix that but is should be an easy fix.

[ryan]

There are a few more screenshots on this post: ​https://make.wordpress.org/core/2015/07/08/today-in-the-nightly-customize-in-the-toolbar-passwords-ui-list-tables-on-phones-dashicons/

I'm hoping to vizrec a few password flows on make/flow.

[MikeHansenMe]

I tested regeneratepw.patch​ and could not get it to work on my local copy of trunk. I will dive in some to see if I can locate the problem.

[ocean90]

In 33166:

Password UI: The non-breaking space doesn't need to be translatable. Add some context to password strength strings.

see #32589.

[adamsilverstein]

Related #32949 which will be resolved when this is committed.

[MikeHansenMe]

Generate a new pw now has it's own ticket #32979.

[obenland]

In 33206:

Passwords: Improve display of show/hide toggle for touch and small-screen devices.

See #32589.

[obenland]

In 33208:

Passwords: Add trailing periods in new strings.

Props akibjorklund.
See #32589.

[adamsilverstein]

In 32589.5.diff​:

• Include dashicon css on install page, fixes missing icon issue
• add check for WP_INSTALLING in wp_rand function, preventing some PHP warnings when transients used before db set up
• tested patch, works well in initial testing

[MikeHansenMe]

fixes php error and no-js

[adamsilverstein]

missing dashicon fix

[obenland]

In 33246:

Passwords: New UI for install screen.

Also synchronises the use of pw_weak as an input name and removes trailing
periods from checkbox labels.

Props MikeHansenMe, adamsilverstein, obenland.
See #32589.

[obenland]

In 33249:

Passwords: Make show/hide toggle translatable.

See #32589.

[obenland]

The installation flow with the new Passwords UI needs more work, specifically around not making an admin hit the lost password link right after installation.
Hiding the password behind a button may work when you create a new user, but when you first set up your site that step feels unnecessary and confusing.

[ryan]

​https://make.wordpress.org/flow/2015/07/14/scratch-install-exercising-passwords-ui-macnchrome/

[ryan]

​https://make.wordpress.org/flow/2015/07/14/scratch-install-exercising-passwords-ui-iphone-6/

[ToasterOven]

Hi Team,

I have been waiting a long time for an update on how passwords and registration is handled so thanks for getting to this.

My questions is how will these changes work with sites using themes and "subscriber" type accounts. Will those accounts be sent an activation link to complete the registration process?

Thanks. Hope to get a bit more clarification on the new process.

[afercia]

Small thing: though I don't like excessive capitalization, maybe the button text should be capitalized?

Same for "Show password" and "hide/show" button.

[johnjamesjacoby]

A few thoughts here, with an imminent patch:

• .pw-weak and .pw_weak appear to be used interchangeably on inputs between user-new.php, user-edit.php and install.php
• The "Confirm weak password" labels wrap the checkbox and also include a for attribute. This needs to be one or the other, or else the <label> isn't clickable. I recommend removing the for attribute in this case, since the mark-up is already wrapped, and it's already committed in one place.
• The UX is lacking a "Cancel" button to "Hide" the generated password. What if I generate a password, but want to update my profile but not my password? Should I lose those changes?
• When leaving this page after having generated a password, there is no "Are you sure you want to leave?" style prompt to tell the user: "Hey, you generated a password but you didn't actually save it yet, even though you clicked a fancy button" interaction.
• There is no indication to the user that their password was actually changed, or if there are any repercussions. Did it log me out of my other sessions? Can I reuse my old password again?

[johnjamesjacoby]

UX improvements and bug fixes

[johnjamesjacoby]

32589.8.patch includes the following fixes:

• Finishes pw-weak vs. pw_weak cleanup started in r33246
• Adds a "Cancel" button to the right of the "Hide" button to allow a user to cancel the generated password change
• Introduces a beforeunload warning if the user started changing their password but never saved the page

It also strongly suggests separating out the "New Password" and "Sessions" table rows into a new table with a new heading, and recommends updating a few strings for what I feel is greatly improved clarity of what these functions do.

• Passwords and Sessions do not belong under the "About Yourself" section
• Change "Generate new password" to "Generate Password" -- you can't generate an old password, right?
• Change "Log Out of All Other Sessions" to "Sign-out Everywhere" -- what's a session? How did I get one? Do I need it? Why would I do this?
• Change hokey   label to "Sessions" -- what's a session? See left and below. Settings, fields, & descriptions follow a logical left/right/down flow, where left defines the setting, right is the setting to toggle, and below is any additional description. Let's continue that paradigm in this area also, even though the buttons break it slightly

In my opinion and experience using this new, very awesome and welcome feature, these UX tweaks are absolutely necessary to making this a finished and shippable product. It also begins the long process of creating division between a user's "profile", their "options", & their "account" which I think has always been lacking in this screen.

Sorry for being so late to this ticket and with this feedback. If there are questions or revisions, please ping here or on Slack, and I'm happy to rush any fixes in to get these into trunk ASAP (if it's not too late in beta already.)

[johnjamesjacoby]

Same as 32589.8.patch but prevents beforeunload alert when clicking #submit

[johnjamesjacoby]

Same as 32589.9.patch but clarifies the description string, and uses "Log-out" vs. "Sign-out" even though I'm bias the other direction

[ryan]

Changes to visuals should be communicated visually with screenshots on this ticket and visual records on make/flow. Changes affecting our most important threshold flows should be accompanied by some visual oxygen.

​https://make.wordpress.org/flow/tag/passwords/

Not everyone is a developer or energetic enough to patch a local dev environment just to get a peek at ui changes. Throw some screenshots on the ticket to accompany patches. Taking screenshots while testing is not too burdensome.

[johnjamesjacoby]

Replying to ryan:

Not everyone is a developer or energetic enough to patch a local dev environment just to get a peek at ui changes. Throw some screenshots on the ticket to accompany patches. Taking screenshots while testing is not too burdensome.

I understand, and appreciate the nudge. I omitted them earlier to avoid inundating everyone's inbox with notifications, and felt my comments were descriptive enough & the code changes small enough to read in trac for anyone that was interested, not to be inconsiderate of anyone's preference for viewing suggestions.

I've now attached 3 screenshots of what the applied patch looks like when applied to trunk:

• 1 highlights string changes & the addition of the "Account Management" heading
• 2 highlights the new "Cancel" button after clicking the "Generate Password" button
• 3 highlights the string used when navigating away from the page after having generated a password without saving the changes

[johnjamesjacoby]

I noticed there's a responsive gap, between 768 and 782 pixels of width, where the "Hide" button (and consequently my new "Cancel" button patched above) end up floating between the input box and the strength indicator. Screenshot imminent.

• Less than 768 and the "Hide" button becomes an eye dashicon in the textbox
• Greater than 782 and the "Hide" button has enough room to fit to the right of the textbox

[obenland]

In 33331:

Passwords: Use small screen styles for all small screens.

H/t johnjamesjacoby.
Introduced in [33206].

See #32589.

[obenland]

@johnjamesjacoby There is a lot going on in your patch. It would probably be best to break out the changes to titles and sessions into new enhancement tickets and focus on the Password things for now.

If you separated out the pw-weak changes too, I could get those in early and leave the introduction of a cancel button for @markjaquith to decide on.

[johnjamesjacoby]

@obenland Will do ASAP. Even though they're enhancements, I think they're necessary for 4.3 which will mean getting them in before string freeze, hence my rushing through to patch them all at once.

[Ipstenu]

From ​the forums

However, in WordPress multisite, when a user signs up via wp-signup.php, then an activation e-mail is sent. After clicking the link in this e-mail, the user receives a second e-mail containing his password in plain text.

Do we have a separate ticket for this, or are we not tackling Multisite yet? I haven't sat and tested it all on Multisite yet, which is my bad too.

[johnjamesjacoby]

Related:

• #33077 - pw_weak
• #33079 - beforeunload alert
• #33080 - "Account Management" heading
• #33082 - Suggested string changes

[mindctrl]

I'm seeing an issue where using weak password is not working. I've created a screencast of this happening.

Basically, during installation supply a username, a weak password, confirm the use of a weak password, and click Install WordPress. When the screen refreshes, it shows a generated password and doesn't use the weak password I provided.

Screencast here: ​http://cl.ly/230g1u2W0R1Q

[chriscct7]

With a hat tip to @mindctrl for noticing this one as well, we should get rid of this notice:
​http://cl.ly/image/1Y3R0W2r2g0B because if you're using an autogenerated password, the link will take you to the password page to generate another random one that could be even harder. I think it should either be removed, or reworded to just say "change it" and drop the "easier to remember" since random is now the default.

[mindctrl]

In addition to the above:

• Go to profile page
• Update password to something weak and confirm use of weak password
• Update profile
• Log out
• Try to log in with new password. Doesn't work.
• The old password still works instead.

[markjaquith]

@mindctrl — there was a bug in the latest beta. fixed here: r33384. Try testing again in trunk.

[markjaquith]

I just tested now, and that bug is definitely no longer present. I'm gonna close this tracking ticket. We should open new tickets with specific issues.

[ramiy]

Related: #36098 (password when browser js is disabled)