Ticket #42852: 42852.5.diff

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() ) {
-                        // zxcvbn loaded before user entered password.
+                } else if ( ! $pass1.val() || $passwordWrapper.hasClass( 'is-open' ) ) {
+                        // zxcvbn loaded before user entered password, or generating new 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' );
                 }
 
@@ -56 +59 @@
 
                         currentPass = $pass1.val();
 
+                        // Refresh password strength area
                         $pass1.removeClass( 'short bad good strong' );
                         showOrHideWeakPasswordCheckbox();
                 } );
@@ -84 +88 @@
                                 $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' );
@@ -123 +120 @@
                         $pass1 = $( '#user_pass' );
                 }
 
-                /**
+                /*
                  * Fix a LastPass mismatch issue, LastPass only changes pass2.
                  *
                  * This fixes the issue by copying any changes from the hidden
@@ -149 +146 @@
 
                 bindToggleButton();
 
-                if ( $generateButton.length ) {
-                        $passwordWrapper.hide();
-                }
+                // Generate the first password and cache it, but don't set it yet.
+                wp.ajax.post( 'generate-password' )
+                        .done( function( data ) {
+                                // Cache password
+                                $pass1.data( 'pw', data );
+                        } );
 
                 $generateButton.show();
                 $generateButton.on( 'click', function () {
                         updateLock = true;
 
-                        $generateButton.hide();
-                        $passwordWrapper.show();
+                        // Make sure the password fields are shown.
+                        $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();
-                        }
-                } );
-
-                $cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
-                $cancelButton.on( 'click', function () {
-                        updateLock = false;
+                        // Set the password to the generated value
+                        generatePassword();
 
-                        // Clear any entered password.
-                        $pass1.val( '' );
+                        // Show generated password in plaintext by default
+                        resetToggle ( false );
 
-                        // Generate a new password.
+                        // Generate the next password and cache
                         wp.ajax.post( 'generate-password' )
                                 .done( function( data ) {
+                                        // Cache password in data attribute
                                         $pass1.data( 'pw', data );
                                 } );
+                } );
 
-                        $generateButton.show().focus();
-                        $passwordWrapper.hide();
-
-                        $weakRow.hide( 0, function () {
-                                $weakCheckbox.removeProp( 'checked' );
-                        } );
+                $cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
+                $cancelButton.on( 'click', function () {
+                        updateLock = false;
 
                         // Disable the inputs when hiding to prevent autofill and submission.
                         $pass1.prop( 'disabled', true );
                         $pass2.prop( 'disabled', true );
 
+                        // Clear password field and update the ui
+                        $pass1.val( '' ).trigger( 'pwupdate' );
                         resetToggle( false );
 
+                        // Hide
+                        $passwordWrapper
+                                .hide()
+                                .removeClass( 'is-open' );
+
                         if ( $pass1Row.closest( 'form' ).is( '#your-profile' ) ) {
-                                // Clear password field to prevent update.
-                                $pass1.val( '' ).trigger( 'pwupdate' );
+                                // Stop an empty password from being submitted as a change
                                 $submitButtons.prop( 'disabled', false );
                         }
                 } );
@@ -399 +401 @@
 
         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

@@ -529 +529 @@
         margin: 0 0 1em;
 }
 
+.wp-generate-pw {
+        margin-top: 1em;
+}
+
+.wp-pwd {
+        margin-top: 1em;
+}
+
 #misc-publishing-actions label {
         vertical-align: baseline;
 }

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" id="pass2-desc"><?php _e( 'Type your new password again.' ); ?></p>
+        <?php else : ?>
+                <p class="description" id="pass2-desc"><?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>
-                        <div class="wp-pwd hide-if-js">
+                        <button type="button" class="button wp-generate-pw hide-if-no-js" aria-expanded="true"><?php _e( 'Generate New Password' ); ?></button>
+                        <div class="wp-pwd">
                                 <?php $initial_password = wp_generate_password( 24 ); ?>
                                 <span class="password-input-wrapper">
                                         <input type="password" name="pass1" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
@@ -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">