Changeset 49248

Timestamp:

10/20/2020 06:24:40 PM (6 years ago)

Author:

adamsilverstein

Message:

Users: improve password generation feature.

On the user edit screen improve handling and clarify language: rename the "Generate Password" and "Show password" buttons to "Set New Password". Clicking it always generates a password. Also: improve inline code comments and descriptions.

Props afercia, bookdude13, michaelarestad, pento.
Fixes #42852.

Location:

trunk/src

Files:

• js/_enqueues/admin/user-profile.js (modified) (11 diffs)
• wp-admin/css/forms.css (modified) (1 diff)
• wp-admin/user-edit.php (modified) (4 diffs)
• wp-admin/user-new.php (modified) (3 diffs)

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

@@ -15 +15 @@
                 $submitButtons,
                 $submitButton,
-                currentPass;
+                currentPass,
+                $passwordWrapper;
 
         function generatePassword() {
@@ -21 +22 @@
                         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();
@@ -33 +33 @@
                 }
 
+                // 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' );
                 }
@@ -57 +60 @@
                         currentPass = $pass1.val();
 
+                        // Refresh password strength area.
                         $pass1.removeClass( 'short bad good strong' );
                         showOrHideWeakPasswordCheckbox();
@@ -85 +89 @@
                                 resetToggle( true );
                         }
-
-                        $pass1.focus();
-
-                        if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) {
-                                $pass1[0].setSelectionRange( 0, 100 );
-                        }
                 });
         }
 
         function bindPasswordForm() {
-                var $passwordWrapper,
-                        $generateButton,
+                var $generateButton,
                         $cancelButton;
 
@@ -124 +121 @@
                 }
 
-                /**
+                /*
                  * Fix a LastPass mismatch issue, LastPass only changes pass2.
                  *
@@ -150 +147 @@
                 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();
@@ -158 +158 @@
                         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.
@@ -165 +168 @@
                         $pass2.attr( 'disabled', false );
 
-                        if ( $pass1.val().length === 0 ) {
-                                generatePassword();
-                        }
-                } );
-
-                $cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
-                $cancelButton.on( 'click', function () {
-                        updateLock = false;
-
-                        // Clear any entered password.
-                        $pass1.val( '' );
-
-                        // Generate a new password.
+                        // Set the password to the generated value.
+                        generatePassword();
+
+                        // Show generated password in plaintext by default.
+                        resetToggle ( false );
+
+                        // Generate the next password and cache.
                         wp.ajax.post( 'generate-password' )
                                 .done( function( data ) {
                                         $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.
@@ -194 +189 @@
                         $pass2.prop( 'disabled', true );
 
+                        // Clear password field and update the UI.
+                        $pass1.val( '' ).trigger( 'pwupdate' );
                         resetToggle( false );
 
-                        if ( $pass1Row.closest( 'form' ).is( '#your-profile' ) ) {
-                                // Clear password field to prevent update.
-                                $pass1.val( '' ).trigger( 'pwupdate' );
-                                $submitButtons.prop( 'disabled', false );
-                        }
+                        // Hide password controls.
+                        $passwordWrapper
+                                .hide()
+                                .removeClass( 'is-open' );
+
+                        // Stop an empty password from being submitted as a change.
+                        $submitButtons.prop( 'disabled', false );
                 } );
 
@@ -400 +399 @@
         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 ) {

trunk/src/wp-admin/css/forms.css

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

trunk/src/wp-admin/user-edit.php

@@ -633 +633 @@
         <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">
@@ -642 +642 @@
                                 <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>
@@ -653 +653 @@
         <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>
@@ -662 +666 @@
                 <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>

trunk/src/wp-admin/user-new.php

@@ -561 +561 @@
                 <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"><?php _e( 'Generate password' ); ?></button>
+                        <div class="wp-pwd">
                                 <?php $initial_password = wp_generate_password( 24 ); ?>
                                 <span class="password-input-wrapper">
@@ -571 +571 @@
                                         <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' ); ?>">
-                                        <span class="dashicons dashicons-no" aria-hidden="true"></span>
-                                        <span class="text"><?php _e( 'Cancel' ); ?></span>
-                                </button>
                                 <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
                         </div>
@@ -582 +578 @@
                 <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>