WordPress.org
Get WordPress

Make WordPress Core

Ticket #42852: 42852.2.diff

File 42852.2.diff, 13.2 KB (added by pento, 7 years ago)

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

    diff --git a/src/js/_enqueues/admin/user-profile.js b/src/js/_enqueues/admin/user-profile.js
index ec76df9c7f..862f6e123f 100644
    a b  
    55/* global ajaxurl, pwsL10n, userProfileL10n */
    66(function($) {
    77        var updateLock = false,
    8 
    98                $pass1Row,
    109                $pass1Wrap,
    1110                $pass1,
    … …  
    1716                $toggleButton,
    1817                $submitButtons,
    1918                $submitButton,
    20                 currentPass;
     19                currentPass,
     20                $passwordWrapper;
    2121
    2222        function generatePassword() {
    2323                if ( typeof zxcvbn !== 'function' ) {
    2424                        setTimeout( generatePassword, 50 );
    2525                        return;
    26                 } else if ( ! $pass1.val() ) {
     26                } else if ( ! $pass1.val() || $passwordWrapper.hasClass( 'is-open' ) ) {
    2727                        // zxcvbn loaded before user entered password.
    2828                        $pass1.val( $pass1.data( 'pw' ) );
    2929                        $pass1.trigger( 'pwupdate' );
    3030                        showOrHideWeakPasswordCheckbox();
    31                 }
    32                 else {
     31                } else {
    3332                        // zxcvbn loaded after the user entered password, check strength.
    3433                        check_pass_strength();
    3534                        showOrHideWeakPasswordCheckbox();
    3635                }
    3736
     37                // Install screen.
    3838                if ( 1 !== parseInt( $toggleButton.data( 'start-masked' ), 10 ) ) {
     39                        // Show the password not masked if admin_password hasn't been posted yet.
    3940                        $pass1Wrap.addClass( 'show-password' );
    4041                } else {
     42                        // Otherwise, mask the password.
    4143                        $toggleButton.trigger( 'click' );
    4244                }
    4345
    … …  
    101103                                .removeClass( 'dashicons-visibility' )
    102104                                .addClass( 'dashicons-hidden' );
    103105
    104                 $pass1Text.focus();
    105 
    106106                $pass1Label.attr( 'for', 'pass1-text' );
    107107        }
    108108
    … …  
    113113                                $pass1Wrap.addClass( 'show-password' );
    114114
    115115                                resetToggle();
    116 
    117                                 if ( ! _.isUndefined( $pass1Text[0].setSelectionRange ) ) {
    118                                         $pass1Text[0].setSelectionRange( 0, 100 );
    119                                 }
    120116                        } else {
    121117                                $pass1Wrap.removeClass( 'show-password' );
    122118                                $toggleButton
    … …  
    131127                                                .removeClass('dashicons-hidden')
    132128                                                .addClass('dashicons-visibility');
    133129
    134                                 $pass1.focus();
    135 
    136130                                $pass1Label.attr( 'for', 'pass1' );
    137 
    138                                 if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) {
    139                                         $pass1[0].setSelectionRange( 0, 100 );
    140                                 }
    141131                        }
    142132                });
    143133        }
    144134
    145135        function bindPasswordForm() {
    146                 var $passwordWrapper,
    147                         $generateButton,
     136                var $generateButton,
    148137                        $cancelButton;
    149138
    150139                $pass1Row = $('.user-pass1-wrap');
    151                 $pass1Label = $pass1Row.find('th label').attr( 'for', 'pass1-text' );
     140                $pass1Label = $pass1Row.find( '.user-pass1-label' ).attr( 'for', 'pass1-text' );
    152141
    153                 // hide this
     142                // Hide the Repeat Password field.
    154143                $('.user-pass2-wrap').hide();
    155144
    156145                $submitButton = $( '#submit, #wp-submit' ).on( 'click', function () {
    … …  
    170159                        bindPass1();
    171160                }
    172161
    173                 /**
     162                /*
    174163                 * Fix a LastPass mismatch issue, LastPass only changes pass2.
    175164                 *
    176165                 * This fixes the issue by copying any changes from the hidden
    … …  
    197186
    198187                bindToggleButton();
    199188
    200                 if ( $generateButton.length ) {
    201                         $passwordWrapper.hide();
    202                 }
    203 
    204                 $generateButton.show();
    205189                $generateButton.on( 'click', function () {
    206190                        updateLock = true;
    207191
    208                         $generateButton.hide();
    209                         $passwordWrapper.show();
     192                        $generateButton.attr( 'aria-expanded', 'true' );
     193
     194                        $passwordWrapper
     195                                .show()
     196                                .addClass( 'is-open' );
    210197
    211198                        // Enable the inputs when showing.
    212199                        $pass1.attr( 'disabled', false );
    213200                        $pass2.attr( 'disabled', false );
    214201                        $pass1Text.attr( 'disabled', false );
    215202
    216                         if ( $pass1Text.val().length === 0 ) {
    217                                 generatePassword();
    218                         }
    219 
    220                         _.defer( function() {
    221                                 $pass1Text.focus();
    222                                 if ( ! _.isUndefined( $pass1Text[0].setSelectionRange ) ) {
    223                                         $pass1Text[0].setSelectionRange( 0, 100 );
    224                                 }
    225                         }, 0 );
    226                 } );
    227 
    228                 $cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
    229                 $cancelButton.on( 'click', function () {
    230                         updateLock = false;
    231 
    232                         // Clear any entered password.
    233                         $pass1Text.val( '' );
    234 
     203                        // Always generate a password when clicking the button.
    235204                        // Generate a new password.
    236205                        wp.ajax.post( 'generate-password' )
    237206                                .done( function( data ) {
    238207                                        $pass1.data( 'pw', data );
     208                                        generatePassword();
     209                                        resetToggle();
    239210                                } );
     211                } );
    240212
    241                         $generateButton.show();
    242                         $passwordWrapper.hide();
    243 
    244                         $weakRow.hide( 0, function () {
    245                                 $weakCheckbox.removeProp( 'checked' );
    246                         } );
    247 
    248                         // Disable the inputs when hiding to prevent autofill and submission.
    249                         $pass1.prop( 'disabled', true );
    250                         $pass2.prop( 'disabled', true );
    251                         $pass1Text.prop( 'disabled', true );
    252 
    253                         resetToggle();
     213                $cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
     214                $cancelButton.on( 'click', function () {
     215                        updateLock = false;
    254216
    255                         if ( $pass1Row.closest( 'form' ).is( '#your-profile' ) ) {
    256                                 // Clear password field to prevent update
    257                                 $pass1.val( '' ).trigger( 'pwupdate' );
    258                                 $submitButtons.prop( 'disabled', false );
    259                         }
     217                        // Clear password field to prevent update.
     218                        $pass1Text.val( '' );
     219                        $pass1.val( '' ).trigger( 'pwupdate' );
    260220                } );
    261221
    262222                $pass1Row.closest( 'form' ).on( 'submit', function () {
    … …  
    365325                                });
    366326                        });
    367327
    368                         /**
    369                          * Replaces "Howdy, *" in the admin toolbar whenever the display name dropdown is updated for one's own profile.
     328                        /*
     329                         * Replaces "Howdy, *" in the admin toolbar whenever the display name
     330                         * dropdown is updated for one's own profile.
    370331                         */
    371332                        select.on( 'change', function() {
    372333                                if ( user_id !== current_user_id ) {
    … …  
    452413
    453414        window.generatePassword = generatePassword;
    454415
    455         /* Warn the user if password was generated but not saved */
     416        // Warn the user if password was generated but not saved.
    456417        $( window ).on( 'beforeunload', function () {
    457418                if ( true === updateLock ) {
    458419                        return userProfileL10n.warn;

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

    diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 3013434604..74fdd57c89 100644
    a b fieldset label, 
    455455        vertical-align: baseline;
    456456}
    457457
     458.wp-generate-pw + .wp-pwd {
     459        margin-top: 1em;
     460}
     461
    458462#pass-strength-result {
    459463        background-color: #eee;
    460464        border: 1px solid #ddd;

  • src/wp-admin/css/login.css 

    diff --git a/src/wp-admin/css/login.css b/src/wp-admin/css/login.css
index 686be7dde9..ff6f47cf07 100644
    a b p { 
    7979}
    8080
    8181.login .password-input-wrapper {
    82     display: table;
     82        display: table;
    8383}
    8484
    8585.login .input.password-input {
    86     display: table-cell;
    87     margin: 0;
     86        display: table-cell;
     87        margin: 0;
    8888}
    8989
    9090.login .pw-weak {
    91     margin-bottom: 15px;
     91        margin-bottom: 15px;
     92}
     93
     94.login .wp-hide-pw-wrapper {
     95        display: table-cell;
     96        vertical-align: top;
    9297}
    9398
    9499.login .button.button-secondary {
    95     display: table-cell;
    96     border-radius: 0;
    97     vertical-align: middle;
     100        height: 36px;
     101        margin: 0;
     102        border-radius: 0;
     103        line-height: normal;
     104}
     105
     106.login .wp-hide-pw .dashicons {
     107        position: static;
    98108}
    99109
    100110.login form {

  • src/wp-admin/install.php 

    diff --git a/src/wp-admin/install.php b/src/wp-admin/install.php
index 4ee27d6100..42c4d9e6d0 100644
    a b function display_setup_form( $error = null ) { 
    137137                <?php if ( ! $user_table ) : ?>
    138138                <tr class="form-field form-required user-pass1-wrap">
    139139                        <th scope="row">
    140                                 <label for="pass1">
     140                                <label for="pass1" class="user-pass1-label">
    141141                                        <?php _e( 'Password' ); ?>
    142142                                </label>
    143143                        </th>

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

    diff --git a/src/wp-admin/user-edit.php b/src/wp-admin/user-edit.php
index 521a8e290d..ba58f52d46 100644
    a b endif; //!IS_PROFILE_PAGE 
    610610        <h2><?php _e( 'Account Management' ); ?></h2>
    611611<table class="form-table">
    612612<tr id="password" class="user-pass1-wrap">
    613         <th><label for="pass1"><?php _e( 'New Password' ); ?></label></th>
     613        <th><label for="pass1" class="user-pass1-label"><?php _e( 'New Password' ); ?></label></th>
    614614        <td>
    615615                <input class="hidden" value=" " /><!-- #24364 workaround -->
    616                 <button type="button" class="button wp-generate-pw hide-if-no-js"><?php _e( 'Generate Password' ); ?></button>
     616                <button type="button" class="button wp-generate-pw hide-if-no-js" aria-expanded="false"><?php _e( 'Set New Password' ); ?></button>
    617617                <div class="wp-pwd hide-if-js">
    618618                        <span class="password-input-wrapper">
    619619                                <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" />
    … … endif; //!IS_PROFILE_PAGE 
    622622                                <span class="dashicons dashicons-hidden"></span>
    623623                                <span class="text"><?php _e( 'Hide' ); ?></span>
    624624                        </button>
    625                         <button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel password change' ); ?>">
     625                        <button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel' ); ?>">
    626626                                <span class="text"><?php _e( 'Cancel' ); ?></span>
    627627                        </button>
    628628                        <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
    … … endif; //!IS_PROFILE_PAGE 
    632632<tr class="user-pass2-wrap hide-if-js">
    633633        <th scope="row"><label for="pass2"><?php _e( 'Repeat New Password' ); ?></label></th>
    634634        <td>
    635         <input name="pass2" type="password" id="pass2" class="regular-text" value="" autocomplete="off" />
    636         <p class="description"><?php _e( 'Type your new password again.' ); ?></p>
     635        <input name="pass2" type="password" id="pass2" class="regular-text" value="" autocomplete="off" aria-describedby="pass2-desc" />
     636        <?php if ( IS_PROFILE_PAGE ) : ?>
     637                <p class="description" id="pass2-desc"><?php _e( 'Type your new password again.' ); ?></p>
     638        <?php else : ?>
     639                <p class="description" id="pass2-desc"><?php _e( 'Type the new password again.' ); ?></p>
     640        <?php endif; ?>
    637641        </td>
    638642</tr>
    639643<tr class="pw-weak">
    … … endif; //!IS_PROFILE_PAGE 
    641645        <td>
    642646                <label>
    643647                        <input type="checkbox" name="pw_weak" class="pw-checkbox" />
    644                         <span id="pw-weak-text-label"><?php _e( 'Confirm use of potentially weak password' ); ?></span>
     648                        <span id="pw-weak-text-label"><?php _e( 'Confirm use of weak password' ); ?></span>
    645649                </label>
    646650        </td>
    647651</tr>

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

    diff --git a/src/wp-admin/user-new.php b/src/wp-admin/user-new.php
index 48387b0373..3be147c0e5 100644
    a b if ( current_user_can( 'create_users' ) ) { 
    490490        </tr>
    491491        <tr class="form-field form-required user-pass1-wrap">
    492492                <th scope="row">
    493                         <label for="pass1">
     493                        <label for="pass1" class="user-pass1-label">
    494494                                <?php _e( 'Password' ); ?>
    495495                                <span class="description hide-if-js"><?php _e( '(required)' ); ?></span>
    496496                        </label>
    497497                </th>
    498498                <td>
    499499                        <input class="hidden" value=" " /><!-- #24364 workaround -->
    500                         <button type="button" class="button wp-generate-pw hide-if-no-js"><?php _e( 'Show password' ); ?></button>
     500                        <button type="button" class="button wp-generate-pw hide-if-no-js" aria-expanded="false"><?php _e( 'Set New Password' ); ?></button>
    501501                        <div class="wp-pwd hide-if-js">
    502502                                <?php $initial_password = wp_generate_password( 24 ); ?>
    503503                                <span class="password-input-wrapper">
    … … if ( current_user_can( 'create_users' ) ) { 
    507507                                        <span class="dashicons dashicons-hidden"></span>
    508508                                        <span class="text"><?php _e( 'Hide' ); ?></span>
    509509                                </button>
    510                                 <button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel password change' ); ?>">
     510                                <button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel' ); ?>">
    511511                                        <span class="text"><?php _e( 'Cancel' ); ?></span>
    512512                                </button>
    513513                                <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
    … … if ( current_user_can( 'create_users' ) ) { 
    517517        <tr class="form-field form-required user-pass2-wrap hide-if-js">
    518518                <th scope="row"><label for="pass2"><?php _e( 'Repeat Password' ); ?> <span class="description"><?php _e( '(required)' ); ?></span></label></th>
    519519                <td>
    520                 <input name="pass2" type="password" id="pass2" autocomplete="off" />
     520                <input name="pass2" type="password" id="pass2" autocomplete="off" aria-describedby="pass2-desc" />
     521                <p class="description" id="pass2-desc"><?php _e( 'Type the password again.' ); ?></p>
    521522                </td>
    522523        </tr>
    523524        <tr class="pw-weak">

  • src/wp-login.php 

    diff --git a/src/wp-login.php b/src/wp-login.php
index 1a302a35f1..06876d788d 100644
    a b switch ( $action ) { 
    706706
    707707        <div class="user-pass1-wrap">
    708708                <p>
    709                         <label for="pass1"><?php _e( 'New password' ); ?></label>
     709                        <label for="pass1" class="user-pass1-label"><?php _e( 'New password' ); ?></label>
    710710                </p>
    711711
    712                 <div class="wp-pwd">
     712                <div class="login-wp-pwd">
    713713                        <div class="password-input-wrapper">
    714714                                <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" />
    715                                 <span class="button button-secondary wp-hide-pw hide-if-no-js">
    716                                         <span class="dashicons dashicons-hidden"></span>
    717                                 </span>
     715                                <span class="wp-hide-pw-wrapper">
     716                                        <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js">
     717                                                <span class="dashicons dashicons-hidden"></span>
     718                                        </button>
     719                        </span>
    718720                        </div>
    719721                        <div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
    720722                </div>