Creating a new user without a password causes error message issues

[morganestes]

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

[morganestes]

Error icon below input

[morganestes]

Error indicators after new password generated

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

[morganestes]

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.

[liljimmi]

Fixes error icon on password field

[liljimmi]

I removed the error icon from the td for

.user-pass1-wrap

and added it to

.password-input-wrapper

[chriscct7]

Replying to liljimmi:

I removed the error icon from the td for

.user-pass1-wrap

and added it to

.password-input-wrapper

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

[adamsilverstein]

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?

[liljimmi]

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

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

[adamsilverstein]

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)

[azaozz]

In 34068:

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

Props liljimmi, adamsilverstein.
Fixes #33406 for trunk.

[azaozz]

Reopen for 4.3.

[ocean90]

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]

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

[azaozz]

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

[ocean90]

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.

[ocean90]

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.

[ocean90]

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.

[ryan]

Needs testing on mobile to validate css changes

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