Make WordPress Core

Changeset 49248


Ignore:
Timestamp:
10/20/2020 06:24:40 PM (15 months 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:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/admin/user-profile.js

    r49118 r49248  
    1515        $submitButtons,
    1616        $submitButton,
    17         currentPass;
     17        currentPass,
     18        $passwordWrapper;
    1819
    1920    function generatePassword() {
     
    2122            setTimeout( generatePassword, 50 );
    2223            return;
    23         } else if ( ! $pass1.val() ) {
    24             // zxcvbn loaded before user entered password.
     24        } else if ( ! $pass1.val() || $passwordWrapper.hasClass( 'is-open' ) ) {
     25            // zxcvbn loaded before user entered password, or generating new password.
    2526            $pass1.val( $pass1.data( 'pw' ) );
    2627            $pass1.trigger( 'pwupdate' );
    2728            showOrHideWeakPasswordCheckbox();
    28         }
    29         else {
     29        } else {
    3030            // zxcvbn loaded after the user entered password, check strength.
    3131            check_pass_strength();
     
    3333        }
    3434
     35        // Install screen.
    3536        if ( 1 !== parseInt( $toggleButton.data( 'start-masked' ), 10 ) ) {
     37            // Show the password not masked if admin_password hasn't been posted yet.
    3638            $pass1.attr( 'type', 'text' );
    3739        } else {
     40            // Otherwise, mask the password.
    3841            $toggleButton.trigger( 'click' );
    3942        }
     
    5760            currentPass = $pass1.val();
    5861
     62            // Refresh password strength area.
    5963            $pass1.removeClass( 'short bad good strong' );
    6064            showOrHideWeakPasswordCheckbox();
     
    8589                resetToggle( true );
    8690            }
    87 
    88             $pass1.focus();
    89 
    90             if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) {
    91                 $pass1[0].setSelectionRange( 0, 100 );
    92             }
    9391        });
    9492    }
    9593
    9694    function bindPasswordForm() {
    97         var $passwordWrapper,
    98             $generateButton,
     95        var $generateButton,
    9996            $cancelButton;
    10097
     
    124121        }
    125122
    126         /**
     123        /*
    127124         * Fix a LastPass mismatch issue, LastPass only changes pass2.
    128125         *
     
    150147        bindToggleButton();
    151148
    152         if ( $generateButton.length ) {
    153             $passwordWrapper.hide();
    154         }
     149        // Generate the first password and cache it, but don't set it yet.
     150        wp.ajax.post( 'generate-password' )
     151            .done( function( data ) {
     152                // Cache password.
     153                $pass1.data( 'pw', data );
     154            } );
    155155
    156156        $generateButton.show();
     
    158158            updateLock = true;
    159159
    160             $generateButton.hide();
    161             $passwordWrapper.show();
     160            // Make sure the password fields are shown.
     161            $generateButton.attr( 'aria-expanded', 'true' );
     162            $passwordWrapper
     163                .show()
     164                .addClass( 'is-open' );
    162165
    163166            // Enable the inputs when showing.
     
    165168            $pass2.attr( 'disabled', false );
    166169
    167             if ( $pass1.val().length === 0 ) {
    168                 generatePassword();
    169             }
    170         } );
    171 
    172         $cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
    173         $cancelButton.on( 'click', function () {
    174             updateLock = false;
    175 
    176             // Clear any entered password.
    177             $pass1.val( '' );
    178 
    179             // Generate a new password.
     170            // Set the password to the generated value.
     171            generatePassword();
     172
     173            // Show generated password in plaintext by default.
     174            resetToggle ( false );
     175
     176            // Generate the next password and cache.
    180177            wp.ajax.post( 'generate-password' )
    181178                .done( function( data ) {
    182179                    $pass1.data( 'pw', data );
    183180                } );
    184 
    185             $generateButton.show().focus();
    186             $passwordWrapper.hide();
    187 
    188             $weakRow.hide( 0, function () {
    189                 $weakCheckbox.removeProp( 'checked' );
    190             } );
     181        } );
     182
     183        $cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
     184        $cancelButton.on( 'click', function () {
     185            updateLock = false;
    191186
    192187            // Disable the inputs when hiding to prevent autofill and submission.
     
    194189            $pass2.prop( 'disabled', true );
    195190
     191            // Clear password field and update the UI.
     192            $pass1.val( '' ).trigger( 'pwupdate' );
    196193            resetToggle( false );
    197194
    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             }
     195            // Hide password controls.
     196            $passwordWrapper
     197                .hide()
     198                .removeClass( 'is-open' );
     199
     200            // Stop an empty password from being submitted as a change.
     201            $submitButtons.prop( 'disabled', false );
    203202        } );
    204203
     
    400399    window.generatePassword = generatePassword;
    401400
    402     /* Warn the user if password was generated but not saved */
     401    // Warn the user if password was generated but not saved.
    403402    $( window ).on( 'beforeunload', function () {
    404403        if ( true === updateLock ) {
  • trunk/src/wp-admin/css/forms.css

    r49109 r49248  
    534534}
    535535
     536.wp-generate-pw {
     537    margin-top: 1em;
     538}
     539
     540.wp-pwd {
     541    margin-top: 1em;
     542}
     543
    536544#misc-publishing-actions label {
    537545    vertical-align: baseline;
  • trunk/src/wp-admin/user-edit.php

    r49109 r49248  
    633633    <td>
    634634        <input class="hidden" value=" " /><!-- #24364 workaround -->
    635         <button type="button" class="button wp-generate-pw hide-if-no-js"><?php _e( 'Generate Password' ); ?></button>
     635        <button type="button" class="button wp-generate-pw hide-if-no-js" aria-expanded="false"><?php _e( 'Set New Password' ); ?></button>
    636636        <div class="wp-pwd hide-if-js">
    637637            <span class="password-input-wrapper">
     
    642642                <span class="text"><?php _e( 'Hide' ); ?></span>
    643643            </button>
    644             <button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel password change' ); ?>">
     644            <button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel' ); ?>">
    645645                <span class="dashicons dashicons-no" aria-hidden="true"></span>
    646646                <span class="text"><?php _e( 'Cancel' ); ?></span>
     
    653653    <th scope="row"><label for="pass2"><?php _e( 'Repeat New Password' ); ?></label></th>
    654654    <td>
    655     <input name="pass2" type="password" id="pass2" class="regular-text" value="" autocomplete="off" />
    656     <p class="description"><?php _e( 'Type your new password again.' ); ?></p>
     655    <input name="pass2" type="password" id="pass2" class="regular-text" value="" autocomplete="off" aria-describedby="pass2-desc" />
     656    <?php if ( IS_PROFILE_PAGE ) : ?>
     657        <p class="description" id="pass2-desc"><?php _e( 'Type your new password again.' ); ?></p>
     658    <?php else : ?>
     659        <p class="description" id="pass2-desc"><?php _e( 'Type the new password again.' ); ?></p>
     660    <?php endif; ?>
    657661    </td>
    658662</tr>
     
    662666        <label>
    663667            <input type="checkbox" name="pw_weak" class="pw-checkbox" />
    664             <span id="pw-weak-text-label"><?php _e( 'Confirm use of potentially weak password' ); ?></span>
     668            <span id="pw-weak-text-label"><?php _e( 'Confirm use of weak password' ); ?></span>
    665669        </label>
    666670    </td>
  • trunk/src/wp-admin/user-new.php

    r49029 r49248  
    561561        <td>
    562562            <input class="hidden" value=" " /><!-- #24364 workaround -->
    563             <button type="button" class="button wp-generate-pw hide-if-no-js"><?php _e( 'Show password' ); ?></button>
    564             <div class="wp-pwd hide-if-js">
     563            <button type="button" class="button wp-generate-pw hide-if-no-js"><?php _e( 'Generate password' ); ?></button>
     564            <div class="wp-pwd">
    565565                <?php $initial_password = wp_generate_password( 24 ); ?>
    566566                <span class="password-input-wrapper">
     
    571571                    <span class="text"><?php _e( 'Hide' ); ?></span>
    572572                </button>
    573                 <button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel password change' ); ?>">
    574                     <span class="dashicons dashicons-no" aria-hidden="true"></span>
    575                     <span class="text"><?php _e( 'Cancel' ); ?></span>
    576                 </button>
    577573                <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
    578574            </div>
     
    582578        <th scope="row"><label for="pass2"><?php _e( 'Repeat Password' ); ?> <span class="description"><?php _e( '(required)' ); ?></span></label></th>
    583579        <td>
    584         <input name="pass2" type="password" id="pass2" autocomplete="off" />
     580        <input name="pass2" type="password" id="pass2" autocomplete="off" aria-describedby="pass2-desc" />
     581        <p class="description" id="pass2-desc"><?php _e( 'Type the password again.' ); ?></p>
    585582        </td>
    586583    </tr>
Note: See TracChangeset for help on using the changeset viewer.