WordPress.org
Get WordPress

Make WordPress Core

Changeset 33450


Ignore:
Timestamp:
07/27/2015 09:24:36 PM (9 years ago)
Author:
wonderboymusic
Message:

Passwords UI: clean up the new JS in wp-admin/js/user-profile.js.

Instead of wrapping #pass1 in a <span> dynamically, add the <span> to the HTML in PHP. It currently has no styling.

Fixes #33145.

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/js/user-profile.js

    r33438 r33450  
    11/* global ajaxurl, pwsL10n, userProfileL10n */
    2 (function($){
    3     $(function(){
    4         var pw_new = $('.user-pass1-wrap'),
    5             pw_line = pw_new.find('.wp-pwd'),
    6             pw_field = $('#pass1'),
    7             pw_field2 = $('#pass2'),
    8             pw_togglebtn = pw_new.find('.wp-hide-pw'),
    9             pw_generatebtn = pw_new.find('button.wp-generate-pw'),
    10             pw_cancelbtn = pw_new.find('button.wp-cancel-pw'),
    11             pw_2 = $('.user-pass2-wrap'),
    12             parentform = pw_new.closest('form'),
    13             pw_strength = $('#pass-strength-result'),
    14             pw_submitbtn_edit = $('#submit'),
    15             pw_submitbtn_new = $( '#createusersub' ),
    16             pw_checkbox = $('.pw-checkbox'),
    17             pw_weak = $('.pw-weak'),
    18             pw_update_lock = false,
    19             // Set up a text version of the password input
    20             newField = document.createElement( 'input');
    21 
    22             newField.type = 'text';
    23 
    24             var pwFieldText = $( newField );
    25 
    26         if ( pw_field.length > 0 ) {
    27             pwFieldText
    28                 .attr( {
    29                     'id':           'pass1-text',
    30                     'name':         'pass1-text',
    31                     'autocomplete': 'off'
    32                 } )
    33                 .addClass( pw_field[0].className )
    34                 .data( 'pw', pw_field.data( 'pw' ) )
    35                 .val( pw_field.val() );
    36 
    37             pw_field
    38                 .wrap( '<span class="password-input-wrapper"></span>' )
    39                 .after( pwFieldText );
    40         }
    41 
    42         var pwWrapper = pw_field.parent();
    43         var generatePassword = window.generatePassword = function() {
    44             if ( typeof zxcvbn !== 'function' ) {
    45                 setTimeout( generatePassword, 50 );
     2(function($) {
     3    var updateLock = false,
     4
     5        $pass1Row,
     6        $pass1Wrap,
     7        $pass1,
     8        $pass1Text,
     9
     10        $pass2,
     11
     12        $weakRow,
     13        $weakCheckbox,
     14
     15        $submitButtons,
     16        $submitButton;
     17
     18    function generatePassword() {
     19        if ( typeof zxcvbn !== 'function' ) {
     20           setTimeout( generatePassword, 50 );
     21        } else {
     22           $pass1.val( $pass1.data( 'pw' ) );
     23           $pass1.trigger( 'propertychange' );
     24           $pass1Wrap.addClass( 'show-password' );
     25        }
     26    }
     27
     28    function bindPass1() {
     29        var passStrength = $('#pass-strength-result')[0];
     30
     31        $pass1Wrap = $pass1.parent();
     32
     33        $pass1Text = $( '<input type="text"/>' )
     34            .attr( {
     35                'id':           'pass1-text',
     36                'name':         'pass1-text',
     37                'autocomplete': 'off'
     38            } )
     39            .addClass( $pass1[0].className )
     40            .data( 'pw', $pass1.data( 'pw' ) )
     41            .val( $pass1.val() )
     42            .on( 'input', function () {
     43                $pass1.val( $pass1Text.val() ).trigger( 'propertychange' );
     44            } );
     45
     46        $pass1.after( $pass1Text );
     47
     48        if ( 1 === parseInt( $pass1.data( 'reveal' ), 10 ) ) {
     49            generatePassword();
     50        }
     51
     52        $pass1.on( 'input propertychange', function () {
     53            setTimeout( function () {
     54                $pass1Text.val( $pass1.val() );
     55                $pass1.add( $pass1Text ).removeClass( 'short bad good strong' );
     56
     57                if ( passStrength.className ) {
     58                    $pass1.add( $pass1Text ).addClass( passStrength.className );
     59                    if ( 'short' === passStrength.className || 'bad' === passStrength.className ) {
     60                        if ( ! $weakCheckbox.prop( 'checked' ) ) {
     61                            $submitButtons.prop( 'disabled', true );
     62                        }
     63                        $weakRow.show();
     64                    } else {
     65                        $submitButtons.prop( 'disabled', false );
     66                        $weakRow.hide();
     67                    }
     68                }
     69            }, 1 );
     70        } );
     71    }
     72
     73    function bindToggleButton() {
     74        var toggleButton = $pass1Row.find('.wp-hide-pw');
     75        toggleButton.show().on( 'click', function () {
     76            if ( 1 === parseInt( toggleButton.data( 'toggle' ), 10 ) ) {
     77                $pass1Wrap.addClass( 'show-password' );
     78                toggleButton
     79                    .data( 'toggle', 0 )
     80                    .attr({
     81                        'aria-label': userProfileL10n.ariaHide
     82                    })
     83                    .find( '.text' )
     84                        .text( userProfileL10n.hide )
     85                    .end()
     86                    .find( '.dashicons' )
     87                        .removeClass('dashicons-visibility')
     88                        .addClass('dashicons-hidden');
     89
     90                $pass1Text.focus();
     91
     92                if ( ! _.isUndefined( $pass1Text[0].setSelectionRange ) ) {
     93                    $pass1Text[0].setSelectionRange( 0, 100 );
     94                }
    4695            } else {
    47                 pw_field.val( pw_field.data( 'pw' ) );
    48                 pw_field.trigger( 'propertychange' );
    49                 pwWrapper.addClass( 'show-password' );
     96                $pass1Wrap.removeClass( 'show-password' );
     97                toggleButton
     98                    .data( 'toggle', 1 )
     99                    .attr({
     100                        'aria-label': userProfileL10n.ariaShow
     101                    })
     102                    .find( '.text' )
     103                        .text( userProfileL10n.show )
     104                    .end()
     105                    .find( '.dashicons' )
     106                        .removeClass('dashicons-hidden')
     107                        .addClass('dashicons-visibility');
     108
     109                $pass1.focus();
     110
     111                if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) {
     112                    $pass1[0].setSelectionRange( 0, 100 );
     113                }
    50114            }
    51         };
    52 
    53         pw_2.hide();
    54         pw_line.hide();
    55         pw_togglebtn.show();
    56         pw_generatebtn.show();
    57         if ( pw_field.data( 'reveal' ) == 1 ) {
    58             generatePassword();
    59         }
    60 
    61         parentform.on('submit', function(){
    62             pw_update_lock = false;
    63             pw_field2.val( pw_field.val() );
    64             pwWrapper.removeClass( 'show-password' );
    65         });
    66 
    67         pwFieldText.on( 'input', function(){
    68             pw_field.val( pwFieldText.val() );
    69             pw_field.trigger( 'propertychange' );
    70         } );
    71 
    72 
    73         pw_field.on('input propertychange', function(){
    74             setTimeout( function(){
    75                 var cssClass = pw_strength.attr('class');
    76                 pwFieldText.val( pw_field.val() );
    77                 pw_field.add(pwFieldText).removeClass( 'short bad good strong' );
    78                 if ( 'undefined' !== typeof cssClass ) {
    79                     pw_field.add(pwFieldText).addClass( cssClass );
    80                     if ( cssClass == 'short' || cssClass == 'bad' ) {
    81                         if ( ! pw_checkbox.attr( 'checked' ) ) {
    82                             pw_submitbtn_new.attr( 'disabled','disabled' );
    83                             pw_submitbtn_edit.attr( 'disabled','disabled' );
    84                         }
    85                         pw_weak.show();
    86                     } else {
    87                         pw_submitbtn_new.removeAttr( 'disabled' );
    88                         pw_submitbtn_edit.removeAttr( 'disabled' );
    89                         pw_weak.hide();
    90                     }
    91                 }
    92             }, 1 );
    93         } );
    94 
    95         pw_checkbox.change( function() {
    96             if ( pw_checkbox.attr( 'checked' ) ) {
    97                 pw_submitbtn_new.removeAttr( 'disabled' );
    98                 pw_submitbtn_edit.removeAttr( 'disabled' );
    99             } else {
    100                 pw_submitbtn_new.attr( 'disabled','disabled' );
    101                 pw_submitbtn_edit.attr( 'disabled','disabled' );
    102             }
    103         } );
     115        });
     116    }
     117
     118    function bindPasswordForm() {
     119        var $passwordWrapper,
     120            $generateButton,
     121            $cancelButton;
     122
     123        $pass1Row = $('.user-pass1-wrap');
     124        // hide this
     125        $('.user-pass2-wrap').hide();
     126
     127        $submitButton = $( '#submit' ).on( 'click', function () {
     128            updateLock = false;
     129        });
     130
     131        $submitButtons = $submitButton.add( ' #createusersub' );
     132
     133        $weakRow = $( '.pw-weak' );
     134        $weakCheckbox = $weakRow.find( '.pw-checkbox' );
     135        $weakCheckbox.change( function() {
     136            $submitButtons.prop( 'disabled', ! $weakCheckbox.prop( 'checked' ) );
     137        } );
     138
     139        $pass1 = $('#pass1');
     140        if ( $pass1.length ) {
     141            bindPass1();
     142        }
    104143
    105144        /**
    … …  
    109148         * pass2 field to the pass1 field.
    110149         */
    111         pw_field2.on( 'input propertychange', function() {
    112             if ( pw_field2.val().length > 0 ) {
    113                 pw_field.val( pw_field2.val() );
    114                 pw_field.trigger( 'propertychange' );
     150        $pass2 = $('#pass2').on( 'input propertychange', function () {
     151            if ( $pass2.val().length > 0 ) {
     152                $pass1.val( $pass2.val() );
     153                $pass1.trigger( 'propertychange' );
    115154            }
    116155        } );
    117156
    118         pw_new.on( 'click', 'button.wp-generate-pw', function(){
    119             pw_update_lock = true;
    120             pw_generatebtn.hide();
    121             pw_line.show();
     157        $passwordWrapper = $pass1Row.find('.wp-pwd').hide();
     158
     159        bindToggleButton();
     160
     161        $generateButton = $pass1Row.find( 'button.wp-generate-pw' ).show();
     162        $generateButton.on( 'click', function () {
     163            updateLock = true;
     164
     165            $generateButton.hide();
     166            $passwordWrapper.show();
     167
    122168            generatePassword();
     169
    123170            _.defer( function() {
    124                 pwFieldText.focus();
    125                 if ( ! _.isUndefined( pwFieldText[0].setSelectionRange ) ) {
    126                     pwFieldText[0].setSelectionRange( 0, 100 );
     171                $pass1Text.focus();
     172                if ( ! _.isUndefined( $pass1Text[0].setSelectionRange ) ) {
     173                    $pass1Text[0].setSelectionRange( 0, 100 );
    127174                }
    128175            }, 0 );
    129         });
    130 
    131         pw_submitbtn_edit.on( 'click', function() {
    132             pw_update_lock = false;
    133         });
    134 
    135         pw_cancelbtn.on( 'click', function() {
    136             pw_update_lock = false;
    137             pw_generatebtn.show();
    138             pw_line.hide();
    139         });
    140 
    141         pw_togglebtn.on( 'click', function() {
    142             var show = pw_togglebtn.attr( 'data-toggle' );
    143             if ( show == 1 ) {
    144                 pwWrapper.addClass( 'show-password' );
    145                 pw_togglebtn.attr({ 'data-toggle': 0, 'aria-label': userProfileL10n.ariaHide })
    146                     .find( '.text' ).text( userProfileL10n.hide );
    147                 pw_togglebtn.find( '.dashicons' ).removeClass('dashicons-visibility').addClass('dashicons-hidden');
    148                 pwFieldText.focus();
    149                 if ( ! _.isUndefined( pwFieldText[0].setSelectionRange ) ) {
    150                     pwFieldText[0].setSelectionRange( 0, 100 );
    151                 }
    152             } else {
    153                 pwWrapper.removeClass( 'show-password' );
    154                 pw_togglebtn.attr({ 'data-toggle': 1, 'aria-label': userProfileL10n.ariaShow })
    155                     .find( '.text' ).text( userProfileL10n.show );
    156                 pw_togglebtn.find( '.dashicons' ).removeClass('dashicons-hidden').addClass('dashicons-visibility');
    157                 pw_field.focus();
    158                 if ( ! _.isUndefined( pw_field[0].setSelectionRange ) ) {
    159                     pw_field[0].setSelectionRange( 0, 100 );
    160                 }
    161             }
    162 
    163         });
    164 
    165         /* Warn the user if password was generated but not saved */
    166         $( window ).on( 'beforeunload', function() {
    167             if ( true === pw_update_lock ) {
    168                 return userProfileL10n.warn;
    169             }
    170         } );
    171     });
     176        } );
     177
     178        $cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
     179        $cancelButton.on( 'click', function () {
     180            updateLock = false;
     181
     182            $generateButton.show();
     183            $passwordWrapper.hide();
     184        } );
     185
     186        $pass1Row.closest('form').on( 'submit', function () {
     187            updateLock = false;
     188
     189            $pass2.val( $pass1.val() );
     190            $pass1Wrap.removeClass( 'show-password' );
     191        });
     192    }
    172193
    173194    function check_pass_strength() {
    … …  
    296317            }
    297318        });
     319
     320        bindPasswordForm();
    298321    });
    299322
    … …  
    316339    });
    317340
     341    window.generatePassword = generatePassword;
     342
     343    /* Warn the user if password was generated but not saved */
     344    $( window ).on( 'beforeunload', function () {
     345        if ( true === updateLock ) {
     346            return userProfileL10n.warn;
     347        }
     348    } );
     349
    318350})(jQuery);

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

    r33438 r33450  
    469469        <button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Generate Password' ); ?></button>
    470470        <div class="wp-pwd hide-if-js">
    471             <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" />
     471            <span class="password-input-wrapper">
     472                <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" />
     473            </span>
    472474            <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
    473475                <span class="dashicons dashicons-hidden"></span>

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

    r33438 r33450  
    403403            <div class="wp-pwd hide-if-js">
    404404                <?php $initial_password = wp_generate_password( 24 ); ?>
    405                 <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" />
     405                <span class="password-input-wrapper">
     406                    <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" />
     407                </span>
    406408                <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
    407409                    <span class="dashicons dashicons-hidden"></span>

  • trunk/src/wp-login.php

    r33353 r33450  
    656656        <label for="pass1"><?php _e('New password') ?></label><br />
    657657        <div class="wp-pwd">
    658             <input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" name="pass1" id="pass1" class="input" size="20" value="" autocomplete="off" aria-describedby="pass-strength-result" />
     658            <span class="password-input-wrapper">
     659                <input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" name="pass1" id="pass1" class="input" size="20" value="" autocomplete="off" aria-describedby="pass-strength-result" />
     660            </span>
    659661            <div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
    660662        </div>
Note: See TracChangeset for help on using the changeset viewer.