WordPress.org
Get WordPress

Make WordPress Core

Changeset 33450


Ignore:
Timestamp:
07/27/2015 09:24:36 PM (11 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.