diff --git src/js/_enqueues/admin/user-profile.js src/js/_enqueues/admin/user-profile.js
index ff4830242c..117fe5247d 100644
|
|
|
14 | 14 | $toggleButton, |
15 | 15 | $submitButtons, |
16 | 16 | $submitButton, |
17 | | currentPass; |
| 17 | currentPass, |
| 18 | $passwordWrapper; |
18 | 19 | |
19 | 20 | function generatePassword() { |
20 | 21 | if ( typeof zxcvbn !== 'function' ) { |
21 | 22 | setTimeout( generatePassword, 50 ); |
22 | 23 | return; |
23 | | } else if ( ! $pass1.val() ) { |
| 24 | } else if ( ! $pass1.val() || $passwordWrapper.hasClass( 'is-open' ) ) { |
24 | 25 | // zxcvbn loaded before user entered password. |
25 | 26 | $pass1.val( $pass1.data( 'pw' ) ); |
26 | 27 | $pass1.trigger( 'pwupdate' ); |
27 | 28 | showOrHideWeakPasswordCheckbox(); |
28 | | } |
29 | | else { |
| 29 | } else { |
30 | 30 | // zxcvbn loaded after the user entered password, check strength. |
31 | 31 | check_pass_strength(); |
32 | 32 | showOrHideWeakPasswordCheckbox(); |
33 | 33 | } |
34 | 34 | |
| 35 | // Install screen |
35 | 36 | if ( 1 !== parseInt( $toggleButton.data( 'start-masked' ), 10 ) ) { |
| 37 | // Show the password not masked if admin_password hasn't been posted yet. |
36 | 38 | $pass1.attr( 'type', 'text' ); |
37 | 39 | } else { |
| 40 | // Otherwise, mask the password. |
38 | 41 | $toggleButton.trigger( 'click' ); |
39 | 42 | } |
40 | 43 | |
… |
… |
|
75 | 78 | } |
76 | 79 | |
77 | 80 | function bindToggleButton() { |
78 | | $toggleButton = $pass1Row.find('.wp-hide-pw'); |
| 81 | $toggleButton = $pass1Row.find( '.wp-hide-pw' ); |
79 | 82 | $toggleButton.show().on( 'click', function () { |
80 | 83 | if ( 'password' === $pass1.attr( 'type' ) ) { |
81 | 84 | $pass1.attr( 'type', 'text' ); |
… |
… |
|
84 | 87 | $pass1.attr( 'type', 'password' ); |
85 | 88 | resetToggle( true ); |
86 | 89 | } |
87 | | |
88 | | $pass1.focus(); |
89 | | |
90 | | if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) { |
91 | | $pass1[0].setSelectionRange( 0, 100 ); |
92 | | } |
93 | 90 | }); |
94 | 91 | } |
95 | 92 | |
96 | 93 | function bindPasswordForm() { |
97 | | var $passwordWrapper, |
98 | | $generateButton, |
| 94 | var $generateButton, |
99 | 95 | $cancelButton; |
100 | 96 | |
101 | 97 | $pass1Row = $( '.user-pass1-wrap, .user-pass-wrap' ); |
102 | 98 | |
103 | 99 | // Hide the confirm password field when JavaScript support is enabled. |
104 | | $('.user-pass2-wrap').hide(); |
| 100 | $( '.user-pass2-wrap' ).hide(); |
105 | 101 | |
106 | 102 | $submitButton = $( '#submit, #wp-submit' ).on( 'click', function () { |
107 | 103 | updateLock = false; |
… |
… |
|
115 | 111 | $submitButtons.prop( 'disabled', ! $weakCheckbox.prop( 'checked' ) ); |
116 | 112 | } ); |
117 | 113 | |
118 | | $pass1 = $('#pass1'); |
| 114 | $pass1 = $( '#pass1' ); |
119 | 115 | if ( $pass1.length ) { |
120 | 116 | bindPass1(); |
121 | 117 | } else { |
… |
… |
|
123 | 119 | $pass1 = $( '#user_pass' ); |
124 | 120 | } |
125 | 121 | |
126 | | /** |
| 122 | /* |
127 | 123 | * Fix a LastPass mismatch issue, LastPass only changes pass2. |
128 | 124 | * |
129 | 125 | * This fixes the issue by copying any changes from the hidden |
… |
… |
|
149 | 145 | |
150 | 146 | bindToggleButton(); |
151 | 147 | |
152 | | if ( $generateButton.length ) { |
153 | | $passwordWrapper.hide(); |
154 | | } |
155 | | |
156 | | $generateButton.show(); |
157 | 148 | $generateButton.on( 'click', function () { |
158 | 149 | updateLock = true; |
159 | 150 | |
160 | | $generateButton.hide(); |
161 | | $passwordWrapper.show(); |
| 151 | $generateButton.attr( 'aria-expanded', 'true' ); |
| 152 | |
| 153 | $passwordWrapper |
| 154 | .show() |
| 155 | .addClass( 'is-open' ); |
162 | 156 | |
163 | 157 | // Enable the inputs when showing. |
164 | 158 | $pass1.attr( 'disabled', false ); |
165 | 159 | $pass2.attr( 'disabled', false ); |
166 | 160 | |
167 | | if ( $pass1.val().length === 0 ) { |
168 | | generatePassword(); |
169 | | } |
| 161 | // Always generate a password when clicking the button. |
| 162 | wp.ajax.post( 'generate-password' ) |
| 163 | .done( function( data ) { |
| 164 | $pass1.data( 'pw', data ); |
| 165 | generatePassword(); |
| 166 | resetToggle(); |
| 167 | } ); |
170 | 168 | } ); |
171 | 169 | |
172 | 170 | $cancelButton = $pass1Row.find( 'button.wp-cancel-pw' ); |
… |
… |
|
174 | 172 | updateLock = false; |
175 | 173 | |
176 | 174 | // Clear any entered password. |
177 | | $pass1.val( '' ); |
178 | | |
179 | | // Generate a new password. |
180 | | wp.ajax.post( 'generate-password' ) |
181 | | .done( function( data ) { |
182 | | $pass1.data( 'pw', data ); |
183 | | } ); |
184 | | |
185 | | $generateButton.show().focus(); |
186 | | $passwordWrapper.hide(); |
187 | | |
188 | | $weakRow.hide( 0, function () { |
189 | | $weakCheckbox.removeProp( 'checked' ); |
190 | | } ); |
191 | | |
192 | | // Disable the inputs when hiding to prevent autofill and submission. |
193 | | $pass1.prop( 'disabled', true ); |
194 | | $pass2.prop( 'disabled', true ); |
195 | | |
196 | | resetToggle( false ); |
197 | | |
198 | | if ( $pass1Row.closest( 'form' ).is( '#your-profile' ) ) { |
199 | | // Clear password field to prevent update. |
200 | | $pass1.val( '' ).trigger( 'pwupdate' ); |
201 | | $submitButtons.prop( 'disabled', false ); |
202 | | } |
| 175 | $pass1.val( '' ).trigger( 'pwupdate' ); |
203 | 176 | } ); |
204 | 177 | |
205 | 178 | $pass1Row.closest( 'form' ).on( 'submit', function () { |
… |
… |
|
313 | 286 | }); |
314 | 287 | |
315 | 288 | /** |
316 | | * Replaces "Howdy, *" in the admin toolbar whenever the display name dropdown is updated for one's own profile. |
| 289 | * Replaces "Howdy, *" in the admin toolbar whenever the display name |
| 290 | dropdown is updated for one's own profile. |
317 | 291 | */ |
318 | 292 | select.on( 'change', function() { |
319 | 293 | if ( user_id !== current_user_id ) { |
… |
… |
|
399 | 373 | |
400 | 374 | window.generatePassword = generatePassword; |
401 | 375 | |
402 | | /* Warn the user if password was generated but not saved */ |
| 376 | // Warn the user if password was generated but not saved. |
403 | 377 | $( window ).on( 'beforeunload', function () { |
404 | 378 | if ( true === updateLock ) { |
405 | 379 | return userProfileL10n.warn; |
diff --git src/wp-admin/css/forms.css src/wp-admin/css/forms.css
index c364ca403d..6b27c0d4b1 100644
|
|
fieldset label, |
589 | 589 | padding-top: 8px; |
590 | 590 | } |
591 | 591 | |
| 592 | .wp-generate-pw + .wp-pwd { |
| 593 | margin-top: 1em; |
| 594 | } |
| 595 | |
592 | 596 | .wp-pwd [type="text"], |
593 | 597 | .wp-pwd [type="password"] { |
594 | 598 | margin-bottom: 0; |
diff --git src/wp-admin/css/login.css src/wp-admin/css/login.css
index d5c60f117a..77b2828175 100644
|
|
p { |
79 | 79 | margin-bottom: 15px; |
80 | 80 | } |
81 | 81 | |
| 82 | .login .wp-hide-pw-wrapper { |
| 83 | display: table-cell; |
| 84 | vertical-align: top; |
| 85 | } |
| 86 | |
| 87 | .login .button.button-secondary { |
| 88 | height: 36px; |
| 89 | margin: 0; |
| 90 | border-radius: 0; |
| 91 | line-height: normal; |
| 92 | } |
| 93 | |
| 94 | .xxlogin .xxwp-hide-pw .xxdashicons { |
| 95 | position: static; |
| 96 | } |
| 97 | |
82 | 98 | .login .button.wp-hide-pw { |
83 | 99 | background: transparent; |
84 | 100 | border: 1px solid transparent; |
diff --git src/wp-admin/user-edit.php src/wp-admin/user-edit.php
index de5131af24..73efdc0e1e 100644
|
|
endif; |
628 | 628 | <th><label for="pass1"><?php _e( 'New Password' ); ?></label></th> |
629 | 629 | <td> |
630 | 630 | <input class="hidden" value=" " /><!-- #24364 workaround --> |
631 | | <button type="button" class="button wp-generate-pw hide-if-no-js"><?php _e( 'Generate Password' ); ?></button> |
| 631 | <button type="button" class="button wp-generate-pw hide-if-no-js" aria-expanded="false"><?php _e( 'Set New Password' ); ?></button> |
632 | 632 | <div class="wp-pwd hide-if-js"> |
633 | 633 | <span class="password-input-wrapper"> |
634 | 634 | <input type="password" name="pass1" id="pass1" class="regular-text" value="" autocomplete="off" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" aria-describedby="pass-strength-result" /> |
… |
… |
endif; |
637 | 637 | <span class="dashicons dashicons-hidden" aria-hidden="true"></span> |
638 | 638 | <span class="text"><?php _e( 'Hide' ); ?></span> |
639 | 639 | </button> |
640 | | <button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel password change' ); ?>"> |
| 640 | <button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel' ); ?>"> |
641 | 641 | <span class="dashicons dashicons-no" aria-hidden="true"></span> |
642 | 642 | <span class="text"><?php _e( 'Cancel' ); ?></span> |
643 | 643 | </button> |
… |
… |
endif; |
648 | 648 | <tr class="user-pass2-wrap hide-if-js"> |
649 | 649 | <th scope="row"><label for="pass2"><?php _e( 'Repeat New Password' ); ?></label></th> |
650 | 650 | <td> |
651 | | <input name="pass2" type="password" id="pass2" class="regular-text" value="" autocomplete="off" /> |
652 | | <p class="description"><?php _e( 'Type your new password again.' ); ?></p> |
| 651 | <input name="pass2" type="password" id="pass2" class="regular-text" value="" autocomplete="off" aria-describedby="pass2-desc" /> |
| 652 | <?php if ( IS_PROFILE_PAGE ) : ?> |
| 653 | <p class="description"><?php _e( 'Type your new password again.' ); ?></p> |
| 654 | <?php else : ?> |
| 655 | <p class="description"><?php _e( 'Type the new password again.' ); ?></p> |
| 656 | <?php endif; ?> |
653 | 657 | </td> |
654 | 658 | </tr> |
655 | 659 | <tr class="pw-weak"> |
… |
… |
endif; |
657 | 661 | <td> |
658 | 662 | <label> |
659 | 663 | <input type="checkbox" name="pw_weak" class="pw-checkbox" /> |
660 | | <span id="pw-weak-text-label"><?php _e( 'Confirm use of potentially weak password' ); ?></span> |
| 664 | <span id="pw-weak-text-label"><?php _e( 'Confirm use of weak password' ); ?></span> |
661 | 665 | </label> |
662 | 666 | </td> |
663 | 667 | </tr> |
diff --git src/wp-admin/user-new.php src/wp-admin/user-new.php
index dff49fecf0..583324cb4d 100644
|
|
if ( current_user_can( 'create_users' ) ) { |
507 | 507 | </th> |
508 | 508 | <td> |
509 | 509 | <input class="hidden" value=" " /><!-- #24364 workaround --> |
510 | | <button type="button" class="button wp-generate-pw hide-if-no-js"><?php _e( 'Show password' ); ?></button> |
| 510 | <button type="button" class="button wp-generate-pw hide-if-no-js" aria-expanded="false"><?php _e( 'Set New Password' ); ?></button> |
511 | 511 | <div class="wp-pwd hide-if-js"> |
512 | 512 | <?php $initial_password = wp_generate_password( 24 ); ?> |
513 | 513 | <span class="password-input-wrapper"> |
… |
… |
if ( current_user_can( 'create_users' ) ) { |
517 | 517 | <span class="dashicons dashicons-hidden" aria-hidden="true"></span> |
518 | 518 | <span class="text"><?php _e( 'Hide' ); ?></span> |
519 | 519 | </button> |
520 | | <button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel password change' ); ?>"> |
| 520 | <button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel' ); ?>"> |
521 | 521 | <span class="dashicons dashicons-no" aria-hidden="true"></span> |
522 | 522 | <span class="text"><?php _e( 'Cancel' ); ?></span> |
523 | 523 | </button> |
… |
… |
if ( current_user_can( 'create_users' ) ) { |
528 | 528 | <tr class="form-field form-required user-pass2-wrap hide-if-js"> |
529 | 529 | <th scope="row"><label for="pass2"><?php _e( 'Repeat Password' ); ?> <span class="description"><?php _e( '(required)' ); ?></span></label></th> |
530 | 530 | <td> |
531 | | <input name="pass2" type="password" id="pass2" autocomplete="off" /> |
| 531 | <input name="pass2" type="password" id="pass2" autocomplete="off" aria-describedby="pass2-desc" /> |
| 532 | <p class="description" id="pass2-desc"><?php _e( 'Type the password again.' ); ?></p> |
532 | 533 | </td> |
533 | 534 | </tr> |
534 | 535 | <tr class="pw-weak"> |
diff --git src/wp-login.php src/wp-login.php
index 597725e11d..3e50d2d211 100644
|
|
switch ( $action ) { |
970 | 970 | <label for="pass1"><?php _e( 'New password' ); ?></label> |
971 | 971 | </p> |
972 | 972 | |
973 | | <div class="wp-pwd"> |
| 973 | <div class="login-wp-pwd"> |
974 | 974 | <input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 16 ) ); ?>" name="pass1" id="pass1" class="input password-input" size="24" value="" autocomplete="off" aria-describedby="pass-strength-result" /> |
975 | 975 | |
976 | | <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>"> |
977 | | <span class="dashicons dashicons-hidden" aria-hidden="true"></span> |
978 | | </button> |
| 976 | <span class="wp-hide-pw-wrapper"> |
| 977 | <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>"> |
| 978 | <span class="dashicons dashicons-hidden" aria-hidden="true"></span> |
| 979 | </button> |
| 980 | </span> |
979 | 981 | <div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div> |
980 | 982 | </div> |
981 | 983 | <div class="pw-weak"> |