WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#33406 closed defect (bug) (fixed)

Creating a new user without a password causes error message issues

Reported by: morganestes Owned by: chriscct7
Milestone: 4.3.1 Priority: normal
Severity: normal Version: 4.3
Component: Users Keywords: has-patch needs-testing needs-screenshots
Focuses: ui, administration Cc:
PR Number:

Description

  1. Visit http://local.wordpress.dev/wp-admin/user-new.php and enter the username and email.
  2. Clear the generated password and click the "Add New User" button.
  3. Error message appears and input focuses with red outline, but icon appears below the rest of the inputs instead of next to the problematic one.

Trying to fix the error message:

  1. Click "Cancel" button next to password input.
  2. Observe new password is generated with "Strong" level.
  3. Visual error indicators (red outline & icon) don't go away until after saving.

Related: #32589

Attachments (5)

screencapture-at-tue-aug-18-13-57-46-cdt-2015.png (59.3 KB) - added by morganestes 4 years ago.
Error icon below input
screencapture-at-tue-aug-18-14-17-24-cdt-2015.png (44.3 KB) - added by morganestes 4 years ago.
Error indicators after new password generated
33406.patch (597 bytes) - added by liljimmi 4 years ago.
Fixes error icon on password field
33406.2.patch (1.5 KB) - added by adamsilverstein 4 years ago.
33406.3.patch (1.3 KB) - added by ocean90 4 years ago.

Download all attachments as: .zip

Change History (24)

@morganestes
4 years ago

Error indicators after new password generated

#1 follow-up: @chriscct7
4 years ago

  • Keywords needs-patch added

This should be tagged as version of 4.3 as soon as Obenland finishes with the release process, since it just went out the door.

#2 in reply to: ↑ 1 @morganestes
4 years ago

Replying to chriscct7:

This should be tagged as version of 4.3 as soon as Obenland finishes with the release process, since it just went out the door.

Yep. I hit submit a couple of minutes too soon.

#3 @chriscct7
4 years ago

  • Milestone changed from Awaiting Review to 4.3.1

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


4 years ago

@liljimmi
4 years ago

Fixes error icon on password field

#5 follow-up: @liljimmi
4 years ago

I removed the error icon from the td for

.user-pass1-wrap

and added it to

.password-input-wrapper

https://cldup.com/fqhpmQSvop.png

#6 in reply to: ↑ 5 @chriscct7
4 years ago

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

Replying to liljimmi:

I removed the error icon from the td for

.user-pass1-wrap

and added it to

.password-input-wrapper

https://cldup.com/fqhpmQSvop.png

While I agree at first glance that appears to be a nice enhancement, does it solve the problem the ticket is about? Will test it later tonight. If not, that's fine we can split it off and get it into a release just the same

#7 follow-up: @adamsilverstein
4 years ago

I tested 33406.patch and while this does move the error icon to the correct location, I agree with @chriscct7 it does completely resolve the ticket - it does not fix the other issue: the error icon doesn't go away once you enter a password like it does with the username and email fields. Also, testing with show/hide on/off gave me different results.

What's happening is the validation JavaScript is hooked to the original password field, while what you are editing is the text version of field - a copy we maintain to achieve Internet Explorer 8 compatibility (IE 8 considers the type property read only, so the field can't be changed from password to text). You can see this by switching to the password view and trying your test again... screencast.

To fix: Maybe we can add a validation failure class to the wrapper, then use css to apply the styling to the currently visible field? Also: the callbacks that clear the error status when you enter a password need to be tied to both fields or trigger on the pw-changed event.

@liljimmi - would you like to try working on a revamped patch?

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


4 years ago

#9 in reply to: ↑ 7 @liljimmi
4 years ago

@liljimmi - would you like to try working on a revamped patch?

Unfortunately I am not a JavaScript expert so I have to pass. :-)

#10 @adamsilverstein
4 years ago

  • Keywords has-patch dev-feedback needs-testing added; needs-patch removed

33406.2.patch:

  • Fixes placement of the error icon with css from @liljimmi
  • Adjust JavaScript callback so field gets callback, blurring non empty field now clears the error icon, so if you clear the password, try to create a user, get an error, then add a password, the error icon goes away.
  • Currently clicking cancel and show password fills in the old password and no change is triggered - leaving the error icon visible, that may need fixing or may be fixed when #33450 lands. easy fix, clicking cancel should clear the error class.
  • Needs testing on mobile to validate css changes

Screencast of the patched new user flow (ignore the LastPass icons visible in the fields please)
http://cl.ly/image/3O2y1U3K1f1c/Screen%20Recording%202015-09-09%20at%2011.59%20PM.gif

Last edited 4 years ago by adamsilverstein (previous) (diff)

#11 @azaozz
4 years ago

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

In 34068:

Settings, password field: fix placement of the error icon and removal of the error class.

Props liljimmi, adamsilverstein.
Fixes #33406 for trunk.

#12 @azaozz
4 years ago

  • Keywords fixed-major added; dev-feedback removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopen for 4.3.

#13 follow-up: @ocean90
4 years ago

  1. Click "Cancel" button next to password input.
  2. Observe new password is generated with "Strong" level.
  3. Visual error indicators (red outline & icon) don't go away until after saving.

Point 3 is still valid after [34068].

@ocean90
4 years ago

#14 in reply to: ↑ 13 @ocean90
4 years ago

  • Keywords fixed-major removed

The issue is that generatePassword() doesn't trigger a change event, only pwupdate. Triggering the change event seems to work, at least in Chrome. But maybe we should use a custom event, see 33406.3.patch.

Last edited 4 years ago by ocean90 (previous) (diff)

#15 @azaozz
4 years ago

33406.3.patch looks good, agree it's better to have a custom event to check fields validity.

#16 @ocean90
4 years ago

In 34114:

Passwords: Trigger a wp-check-valid-field event when the password field is filled with a password by generatePassword().

Updates event handler in wpAjax.invalidateForm() to support wp-check-valid-field.

See #33406.

#17 @ocean90
4 years ago

In 34119:

Settings, password field: Fix placement of the error icon and removal of the error class.

Merge of [34068] to the 4.3 branch.

Props liljimmi, adamsilverstein.
See #33406.

#18 @ocean90
4 years ago

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

In 34120:

Passwords: Trigger a wp-check-valid-field event when the password field is filled with a password by generatePassword().

Updates event handler in wpAjax.invalidateForm() to support wp-check-valid-field.

Merge of [34114] to the 4.3 branch.

Fixes #33406.

#19 @ryan
4 years ago

  • Keywords needs-screenshots added

Needs testing on mobile to validate css changes

I'll provide mobile screenshots on my next screenshot run.

Note: See TracTickets for help on using tickets.