WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 19 months ago

#32589 closed task (blessed) (fixed)

New Password Change UI

Reported by: markjaquith Owned by: markjaquith
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.3
Component: Administration Keywords: has-patch ux-feedback
Focuses: Cc:

Description

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.

Attachments (28)

32589.diff (6.8 KB) - added by markjaquith 2 years ago.
32589.2.diff (7.7 KB) - added by MikeHansenMe 2 years ago.
additional focus and confirmation of weak password
32589.3.diff (7.8 KB) - added by MikeHansenMe 2 years ago.
moves cursor to the end
32589.4.diff (11.6 KB) - added by MikeHansenMe 2 years ago.
Add UI to add new user
regeneratepw.patch (4.3 KB) - added by tje3d 2 years ago.
Regenerate password without refresh
add-missing-period.diff (626 bytes) - added by akibjorklund 2 years ago.
Add missing period to the description text introduced in 33023.
32589-install.php (5.0 KB) - added by MikeHansenMe 2 years ago.
Add the password UI to install page
install-1.png (28.7 KB) - added by MikeHansenMe 2 years ago.
install-2.png (33.1 KB) - added by MikeHansenMe 2 years ago.
install-3.png (33.6 KB) - added by MikeHansenMe 2 years ago.
profile-1.png (31.1 KB) - added by MikeHansenMe 2 years ago.
profile-2.png (36.2 KB) - added by MikeHansenMe 2 years ago.
profile-3.png (39.4 KB) - added by MikeHansenMe 2 years ago.
mobile-1.png (13.8 KB) - added by MikeHansenMe 2 years ago.
mobile-2.png (12.2 KB) - added by MikeHansenMe 2 years ago.
mobile-3.png (11.2 KB) - added by MikeHansenMe 2 years ago.
32589-mobile-margin.diff (317 bytes) - added by MikeHansenMe 2 years ago.
small-screen-after.png (39.0 KB) - added by obenland 2 years ago.
32589.5.diff (5.7 KB) - added by adamsilverstein 2 years ago.
32589.6.diff (6.2 KB) - added by MikeHansenMe 2 years ago.
fixes php error and no-js
32589.7.diff (411 bytes) - added by adamsilverstein 2 years ago.
missing dashicon fix
32589.8.patch (6.5 KB) - added by johnjamesjacoby 2 years ago.
UX improvements and bug fixes
32589.9.patch (6.6 KB) - added by johnjamesjacoby 2 years ago.
Same as 32589.8.patch but prevents beforeunload alert when clicking #submit
32589.10.patch (6.8 KB) - added by johnjamesjacoby 2 years ago.
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
32589.10.1.png (78.4 KB) - added by johnjamesjacoby 2 years ago.
32589.10.2.png (84.4 KB) - added by johnjamesjacoby 2 years ago.
32589.10.3.png (116.6 KB) - added by johnjamesjacoby 2 years ago.
Screen Shot 2015-07-16 at 3.00.10 PM.png (79.1 KB) - added by johnjamesjacoby 2 years ago.

Download all attachments as: .zip

Change History (97)

@markjaquith
2 years ago

#1 @markjaquith
2 years ago

Converted to a patch.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 years ago

#3 @obenland
2 years ago

  • Owner set to markjaquith
  • Status changed from new to assigned

@MikeHansenMe
2 years ago

additional focus and confirmation of weak password

#4 @MikeHansenMe
2 years ago

  • Keywords has-patch added

#5 @MikeHansenMe
2 years ago

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

Last edited 2 years ago by MikeHansenMe (previous) (diff)

@MikeHansenMe
2 years ago

moves cursor to the end

#6 @MikeHansenMe
2 years ago

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

#7 @MikeHansenMe
2 years ago

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.

This ticket was mentioned in Slack in #core-passwords by mikehansenme. View the logs.


2 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 years ago

@MikeHansenMe
2 years ago

Add UI to add new user

#10 @MikeHansenMe
2 years ago

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

#11 @markjaquith
2 years ago

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

This ticket was mentioned in Slack in #core by swissspidy. View the logs.


2 years ago

#13 @markjaquith
2 years ago

In 33031:

Add a missing "var". see #32589

#14 @markjaquith
2 years ago

In 33033:

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

see #32589

#15 @pro99
2 years ago

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?

#16 @tywayne
2 years ago

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

#17 @MikeHansenMe
2 years ago

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

#18 @obenland
2 years ago

In 33050:

Add missing prefixed attributes, introduced in [33023].

See ##32589.

#19 @obenland
2 years ago

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

#20 @Ipstenu
2 years ago

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 All you can do there is reload the page to get the generate button back.

Last edited 2 years ago by Ipstenu (previous) (diff)

@tje3d
2 years ago

Regenerate password without refresh

@akibjorklund
2 years ago

Add missing period to the description text introduced in 33023.

#21 @afercia
2 years ago

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

@MikeHansenMe
2 years ago

Add the password UI to install page

This ticket was mentioned in Slack in #core-passwords by mikehansenme. View the logs.


2 years ago

#23 @danielpataki
2 years ago

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?

#24 follow-up: @MikeHansenMe
2 years ago

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

#25 @ryan
2 years ago

  • Keywords needs-screenshots added

#26 in reply to: ↑ 24 @danielpataki
2 years ago

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.

#27 follow-up: @MikeHansenMe
2 years ago

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.

#28 in reply to: ↑ 27 @danielpataki
2 years ago

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
2 years ago

@MikeHansenMe
2 years ago

@MikeHansenMe
2 years ago

#29 @MikeHansenMe
2 years ago

  • Keywords needs-screenshots removed

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.

Last edited 2 years ago by MikeHansenMe (previous) (diff)

#30 @ryan
2 years ago

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.

This ticket was mentioned in Slack in #core-passwords by mikehansenme. View the logs.


2 years ago

#32 @MikeHansenMe
2 years ago

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.

#33 @ocean90
2 years ago

In 33166:

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

see #32589.

This ticket was mentioned in Slack in #core-passwords by mikehansenme. View the logs.


2 years ago

#35 @adamsilverstein
2 years ago

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

#36 @MikeHansenMe
2 years ago

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

#37 @obenland
2 years ago

In 33206:

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

See #32589.

#38 @obenland
2 years ago

In 33208:

Passwords: Add trailing periods in new strings.

Props akibjorklund.
See #32589.

#39 @adamsilverstein
2 years ago

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
2 years ago

fixes php error and no-js

This ticket was mentioned in Slack in #core-passwords by mikehansenme. View the logs.


2 years ago

@adamsilverstein
2 years ago

missing dashicon fix

#41 @obenland
2 years ago

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.

#42 @obenland
2 years ago

In 33249:

Passwords: Make show/hide toggle translatable.

See #32589.

#43 @obenland
2 years ago

  • Keywords ux-feedback added

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.

This ticket was mentioned in Slack in #core-flow by boren. View the logs.


2 years ago

This ticket was mentioned in Slack in #core-flow by boren. View the logs.


2 years ago

#48 @ToasterOven
2 years ago

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.

#49 @afercia
2 years ago

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

https://cldup.com/0iiEIyl_KI.png

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

This ticket was mentioned in Slack in #core-passwords by boren. View the logs.


2 years ago

This ticket was mentioned in Slack in #core by obenland. View the logs.


2 years ago

#52 @johnjamesjacoby
2 years ago

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
2 years ago

UX improvements and bug fixes

#53 @johnjamesjacoby
2 years ago

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 &nbsp; 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
2 years ago

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

@johnjamesjacoby
2 years ago

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

#54 @ryan
2 years ago

  • Keywords needs-screenshots added

#55 follow-up: @ryan
2 years ago

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.

#56 in reply to: ↑ 55 @johnjamesjacoby
2 years ago

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

#57 @johnjamesjacoby
2 years ago

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
Last edited 2 years ago by johnjamesjacoby (previous) (diff)

#58 @obenland
2 years ago

In 33331:

Passwords: Use small screen styles for all small screens.

H/t johnjamesjacoby.
Introduced in [33206].

See #32589.

#59 @obenland
2 years ago

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

#60 @johnjamesjacoby
2 years ago

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

#61 @Ipstenu
2 years ago

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.

#62 @johnjamesjacoby
2 years ago

Related:

Last edited 2 years ago by johnjamesjacoby (previous) (diff)

#63 @mindctrl
2 years ago

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

#64 @chriscct7
2 years ago

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.

#65 @mindctrl
2 years ago

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.

#66 @markjaquith
2 years ago

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

#67 @markjaquith
2 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#68 @ryan
2 years ago

  • Keywords needs-screenshots removed

#69 @ramiy
19 months ago

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

Note: See TracTickets for help on using tickets.