Ticket #42852: 42852.3.patch

src/js/_enqueues/admin/user-profile.js

@@ -14 +14 @@
                 $toggleButton,
                 $submitButtons,
                 $submitButton,
-                currentPass;
+                currentPass,
+                $passwordWrapper;
 
         function generatePassword() {
                 if ( typeof zxcvbn !== 'function' ) {
                         setTimeout( generatePassword, 50 );
                         return;
-                } else if ( ! $pass1.val() ) {
+                } else if ( ! $pass1.val() || $passwordWrapper.hasClass( 'is-open' ) ) {
                         // zxcvbn loaded before user entered password.
                         $pass1.val( $pass1.data( 'pw' ) );
                         $pass1.trigger( 'pwupdate' );
                         showOrHideWeakPasswordCheckbox();
-                }
-                else {
+                } else {
                         // zxcvbn loaded after the user entered password, check strength.
                         check_pass_strength();
                         showOrHideWeakPasswordCheckbox();
                 }
 
+                // Install screen
                 if ( 1 !== parseInt( $toggleButton.data( 'start-masked' ), 10 ) ) {
+                         // Show the password not masked if admin_password hasn't been posted yet.
                         $pass1.attr( 'type', 'text' );
                 } else {
+                        // Otherwise, mask the password.
                         $toggleButton.trigger( 'click' );
                 }
 
@@ -75 +78 @@
         }
 
         function bindToggleButton() {
-                $toggleButton = $pass1Row.find('.wp-hide-pw');
+                $toggleButton = $pass1Row.find( '.wp-hide-pw' );
                 $toggleButton.show().on( 'click', function () {
                         if ( 'password' === $pass1.attr( 'type' ) ) {
                                 $pass1.attr( 'type', 'text' );
@@ -84 +87 @@
                                 $pass1.attr( 'type', 'password' );
                                 resetToggle( true );
                         }
-
-                        $pass1.focus();
-
-                        if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) {
-                                $pass1[0].setSelectionRange( 0, 100 );
-                        }
                 });
         }
 
         function bindPasswordForm() {
-                var $passwordWrapper,
-                        $generateButton,
+                var $generateButton,
                         $cancelButton;
 
                 $pass1Row = $( '.user-pass1-wrap, .user-pass-wrap' );
 
                 // Hide the confirm password field when JavaScript support is enabled.
-                $('.user-pass2-wrap').hide();
+                $( '.user-pass2-wrap' ).hide();
 
                 $submitButton = $( '#submit, #wp-submit' ).on( 'click', function () {
                         updateLock = false;
@@ -115 +111 @@
                         $submitButtons.prop( 'disabled', ! $weakCheckbox.prop( 'checked' ) );
                 } );
 
-                $pass1 = $('#pass1');
+                $pass1 = $( '#pass1' );
                 if ( $pass1.length ) {
                         bindPass1();
                 } else {
@@ -123 +119 @@
                         $pass1 = $( '#user_pass' );
                 }
 
-                /**
+                /*
                  * Fix a LastPass mismatch issue, LastPass only changes pass2.
                  *
                  * This fixes the issue by copying any changes from the hidden
@@ -149 +145 @@
 
                 bindToggleButton();
 
-                if ( $generateButton.length ) {
-                        $passwordWrapper.hide();
-                }
-
-                $generateButton.show();
                 $generateButton.on( 'click', function () {
                         updateLock = true;
 
-                        $generateButton.hide();
-                        $passwordWrapper.show();
+                        $generateButton.attr( 'aria-expanded', 'true' );
+
+                        $passwordWrapper
+                                .show()
+                                .addClass( 'is-open' );
 
                         // Enable the inputs when showing.
                         $pass1.attr( 'disabled', false );
                         $pass2.attr( 'disabled', false );
 
-                        if ( $pass1.val().length === 0 ) {
-                                generatePassword();
-                        }
+                        // Always generate a password when clicking the button.
+                        wp.ajax.post( 'generate-password' )
+                                .done( function( data ) {
+                                        $pass1.data( 'pw', data );
+                                        generatePassword();
+                                        resetToggle();
+                                } );
                 } );
 
                 $cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
@@ -174 +172 @@
                         updateLock = false;
 
                         // Clear any entered password.
-                        $pass1.val( '' );
-
-                        // Generate a new password.
-                        wp.ajax.post( 'generate-password' )
-                                .done( function( data ) {
-                                        $pass1.data( 'pw', data );
-                                } );
-
-                        $generateButton.show().focus();
-                        $passwordWrapper.hide();
-
-                        $weakRow.hide( 0, function () {
-                                $weakCheckbox.removeProp( 'checked' );
-                        } );
-
-                        // Disable the inputs when hiding to prevent autofill and submission.
-                        $pass1.prop( 'disabled', true );
-                        $pass2.prop( 'disabled', true );
-
-                        resetToggle( false );
-
-                        if ( $pass1Row.closest( 'form' ).is( '#your-profile' ) ) {
-                                // Clear password field to prevent update.
-                                $pass1.val( '' ).trigger( 'pwupdate' );
-                                $submitButtons.prop( 'disabled', false );
-                        }
+                        $pass1.val( '' ).trigger( 'pwupdate' );
                 } );
 
                 $pass1Row.closest( 'form' ).on( 'submit', function () {
@@ -313 +286 @@
                         });
 
                         /**
-                         * Replaces "Howdy, *" in the admin toolbar whenever the display name dropdown is updated for one's own profile.
+                         * Replaces "Howdy, *" in the admin toolbar whenever the display name
+                         dropdown is updated for one's own profile.
                          */
                         select.on( 'change', function() {
                                 if ( user_id !== current_user_id ) {
@@ -399 +373 @@
 
         window.generatePassword = generatePassword;
 
-        /* Warn the user if password was generated but not saved */
+        // Warn the user if password was generated but not saved.
         $( window ).on( 'beforeunload', function () {
                 if ( true === updateLock ) {
                         return userProfileL10n.warn;

src/wp-admin/css/forms.css

@@ -589 +589 @@
         padding-top: 8px;
 }
 
+.wp-generate-pw + .wp-pwd {
+        margin-top: 1em;
+}
+
 .wp-pwd [type="text"],
 .wp-pwd [type="password"] {
         margin-bottom: 0;

src/wp-admin/css/login.css

@@ -79 +79 @@
         margin-bottom: 15px;
 }
 
+.login .wp-hide-pw-wrapper {
+        display: table-cell;
+        vertical-align: top;
+}
+
+.login .button.button-secondary {
+        height: 36px;
+        margin: 0;
+        border-radius: 0;
+        line-height: normal;
+}
+
+.xxlogin .xxwp-hide-pw .xxdashicons {
+        position: static;
+}
+
 .login .button.wp-hide-pw {
         background: transparent;
         border: 1px solid transparent;

src/wp-admin/user-edit.php

@@ -628 +628 @@
         <th><label for="pass1"><?php _e( 'New Password' ); ?></label></th>
         <td>
                 <input class="hidden" value=" " /><!-- #24364 workaround -->
-                <button type="button" class="button wp-generate-pw hide-if-no-js"><?php _e( 'Generate Password' ); ?></button>
+                <button type="button" class="button wp-generate-pw hide-if-no-js" aria-expanded="false"><?php _e( 'Set New Password' ); ?></button>
                 <div class="wp-pwd hide-if-js">
                         <span class="password-input-wrapper">
                                 <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" />
@@ -637 +637 @@
                                 <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
                                 <span class="text"><?php _e( 'Hide' ); ?></span>
                         </button>
-                        <button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel password change' ); ?>">
+                        <button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel' ); ?>">
                                 <span class="dashicons dashicons-no" aria-hidden="true"></span>
                                 <span class="text"><?php _e( 'Cancel' ); ?></span>
                         </button>
@@ -648 +648 @@
 <tr class="user-pass2-wrap hide-if-js">
         <th scope="row"><label for="pass2"><?php _e( 'Repeat New Password' ); ?></label></th>
         <td>
-        <input name="pass2" type="password" id="pass2" class="regular-text" value="" autocomplete="off" />
-        <p class="description"><?php _e( 'Type your new password again.' ); ?></p>
+        <input name="pass2" type="password" id="pass2" class="regular-text" value="" autocomplete="off" aria-describedby="pass2-desc" />
+        <?php if ( IS_PROFILE_PAGE ) : ?>
+                <p class="description"><?php _e( 'Type your new password again.' ); ?></p>
+        <?php else : ?>
+                <p class="description"><?php _e( 'Type the new password again.' ); ?></p>
+        <?php endif; ?>
         </td>
 </tr>
 <tr class="pw-weak">
@@ -657 +661 @@
         <td>
                 <label>
                         <input type="checkbox" name="pw_weak" class="pw-checkbox" />
-                        <span id="pw-weak-text-label"><?php _e( 'Confirm use of potentially weak password' ); ?></span>
+                        <span id="pw-weak-text-label"><?php _e( 'Confirm use of weak password' ); ?></span>
                 </label>
         </td>
 </tr>

src/wp-admin/user-new.php

@@ -507 +507 @@
                 </th>
                 <td>
                         <input class="hidden" value=" " /><!-- #24364 workaround -->
-                        <button type="button" class="button wp-generate-pw hide-if-no-js"><?php _e( 'Show password' ); ?></button>
+                        <button type="button" class="button wp-generate-pw hide-if-no-js" aria-expanded="false"><?php _e( 'Set New Password' ); ?></button>
                         <div class="wp-pwd hide-if-js">
                                 <?php $initial_password = wp_generate_password( 24 ); ?>
                                 <span class="password-input-wrapper">
@@ -517 +517 @@
                                         <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
                                         <span class="text"><?php _e( 'Hide' ); ?></span>
                                 </button>
-                                <button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel password change' ); ?>">
+                                <button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel' ); ?>">
                                         <span class="dashicons dashicons-no" aria-hidden="true"></span>
                                         <span class="text"><?php _e( 'Cancel' ); ?></span>
                                 </button>
@@ -528 +528 @@
         <tr class="form-field form-required user-pass2-wrap hide-if-js">
                 <th scope="row"><label for="pass2"><?php _e( 'Repeat Password' ); ?> <span class="description"><?php _e( '(required)' ); ?></span></label></th>
                 <td>
-                <input name="pass2" type="password" id="pass2" autocomplete="off" />
+                <input name="pass2" type="password" id="pass2" autocomplete="off" aria-describedby="pass2-desc" />
+                <p class="description" id="pass2-desc"><?php _e( 'Type the password again.' ); ?></p>
                 </td>
         </tr>
         <tr class="pw-weak">

src/wp-login.php

@@ -970 +970 @@
                                         <label for="pass1"><?php _e( 'New password' ); ?></label>
                                 </p>
 
-                                <div class="wp-pwd">
+                                <div class="login-wp-pwd">
                                         <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" />
 
-                                        <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' ); ?>">
-                                                <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
-                                        </button>
+                                        <span class="wp-hide-pw-wrapper">
+                                                <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' ); ?>">
+                                                        <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
+                                                </button>
+                                        </span>
                                         <div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
                                 </div>
                                 <div class="pw-weak">