Reset password screen lacks the Hide button and Confirm use of weak password checkbox

[johnbillion]

When resetting my password, the "Hide" button isn't available, and the "Confirm use of weak password" checkbox isn't shown if I enter a weak password.

[markjaquith]

Gonna say this isn't a blocker. Can revisit in 4.4, unless a heroic patcher wants to emerge really soon.

[obenland]

Replying to markjaquith:

Can revisit in 4.4, unless a heroic patcher wants to emerge really soon.

Yes, let's do that.

[johnbillion]

#33870 was marked as a duplicate.

[manolis09]

I've made some changes in CSS, JS and wp-login.php to make it work, however I didn't have time to work on the UI/UX part.

[manolis09]

Patch

[manolis09]

Screenshot

[umesh.nevase]

Added patch with UI Fix

[umesh.nevase]

refreshed patch with 'hide/show' toggle button stylling

[umesh.nevase]

Patch with responsive styling

[umesh.nevase]

Patch with responsive styling

[DrewAPicture]

@umesh.nevase: Can you please refresh the patch from the WordPress root, that is to say, from within /trunk?

@adamsilverstein: Any chance you could review the approach here? Obviously in lieu of an applyable patch, that might be slow going, but worth a shot :-)

[adamsilverstein]

Sure, I will take a look.

Replying to DrewAPicture:

@adamsilverstein: Any chance you could review the approach here? Obviously in lieu of an applyable patch, that might be slow going, but worth a shot :-)

[adamsilverstein]

@johnbillion what device are you seeing this on? When I test at small screen size the show/hide feature moves inside the field. I also still see the confirm weak password field.

[Nikschavan]

Refresh of 33167.5.diff

[Nikschavan]

Screenshot from 33167.6.diff - https://core.trac.wordpress.org/attachment/ticket/33167/331767.6.diff

[Nikschavan]

In 33167.7.diff I am skipping the text 'show' from Show password button and aligning it inside input field.

Screenshots -

[adamsilverstein]

@Nikschavan:

Thanks for the patches!

This is looking really good, tested down to IE8.

I still see a few issues:

• For the user edit screen, we settled on a password length of 24, I think we should use the same length here. Make the interface a bit more responsive or adjust CSS to allow for a longer string.
• We should adjust CSS so users with JavaScript disabled don't get the unusable UI elements (screenshot with JS disabled - ​http://cl.ly/image/2v2s2e1m1J3J
• I like the creative use of $(passStrength).is, however we generally try to avoid touching code outside the scope of the ticket and this seems unrelated.

[Nikschavan]

Thank you for the suggestions @adamsilverstein, I will update the patch soon.

I do have some questions, though -

For the user edit screen, we settled on a password length of 24, I think we should use the same length here. Make the interface a bit more responsive or adjust CSS to allow for a longer string.

I quite did not get this part, I think for this to make it that will require increasing the width of the input field and overall width of the login form?

I like the creative use of $(passStrength).is, however, we generally try to avoid touching code outside the scope of the ticket and this seems unrelated.

This was added because on the login screen the #pass-strength-result has extra class .hide-if-no-js than on the user edit screen, because of this if ( 'short' === passStrength.className || 'bad' === passStrength.className ) condition is failing, so the new addition there.

On the UI part, How about adding the border from the input field around the input field and also the button?

This will complicate stuff a bit though as same JS and CSS is reused for user edit page, I can still work on the patch.

Let me know your thoughts.

[adamsilverstein]

Replying to Nikschavan:

Let me know your thoughts.

I now wonder why this screen is so narrow? if we had a more responsive design here we could use the same layout and buttons as we do on other password reset screens.

[ocean90]

#34989 was marked as a duplicate.

[ocean90]

#38569 was marked as a duplicate.

[adamsilverstein]

33167.6.diff​ refreshed and updated patch; increased field size so longer password visible, reduced margin to give a little more room.

looks like this:

[Nikschavan]

Tested the patch and works perfectly.

Just one thing - The show/hide password is not in the center aligned for the desktop view -

Attaching a patch which center aligns the show/hide icon.

[Nikschavan]

vertically centeresthe show/hide dashicons

[johnbillion]

Replying to adamsilverstein:

reduced margin to give a little more room.

This has had the side effect of making the regular login form look less aesthetically pleasing. See screenshots above.

[adamsilverstein]

This has had the side effect of making the regular login form look less aesthetically pleasing. See screenshots above.

@johnbillion thanks for catching that, I removed that change in 33167.8.diff​ . can you please give this one more review pass and let me know what you think? Thanks.

[Nikschavan]

The patch still applies cleanly against the trunk, Can this be targeted for 4.9?

[adamsilverstein]

The patch still applies cleanly against the trunk, Can this be targeted for 4.9?

Yes, lets get this in!

[adamsilverstein]

Fixed in [41556].

Login: Password reset - add hide icon & confirm weak password checkbox.

Extends the password features added in 4.3 to the password reset flow.

Props johnbillion, manolis09, umesh.nevase, Nikschavan.