Changeset 49248

Timestamp:

10/20/2020 06:24:40 PM (4 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>