wp-admin/js/user-profile.js

   1 /* global ajaxurl, pwsL10n, userProfileL10n */
   2 (function($) {
   3         var updateLock = false,
   4
   5                 $pass1Row,
   6                 $pass1Wrap,
   7                 $pass1,
   8                 $pass1Text,
   9                 $pass1Label,
  10                 $pass2,
  11                 $weakRow,
  12                 $weakCheckbox,
  13                 $toggleButton,
  14                 $submitButtons,
  15                 $submitButton,
  16                 currentPass,
  17                 inputEvent;
  18
  19         /*
  20          * Use feature detection to determine whether password inputs should use
  21          * the `keyup` or `input` event. Input is preferred but lacks support
  22          * in legacy browsers.
  23          */
  24         if ( 'oninput' in document.createElement( 'input' ) ) {
  25                 inputEvent = 'input';
  26         } else {
  27                 inputEvent = 'keyup';
  28         }
  29
  30         function generatePassword() {
  31                 if ( typeof zxcvbn !== 'function' ) {
  32                         setTimeout( generatePassword, 50 );
  33                         return;
  34                 } else if ( ! $pass1.val() ) {
  35                         // zxcvbn loaded before user entered password.
  36                         $pass1.val( $pass1.data( 'pw' ) );
  37                         $pass1.trigger( 'pwupdate' );
  38                         showOrHideWeakPasswordCheckbox();
  39                 }
  40                 else {
  41                         // zxcvbn loaded after the user entered password, check strength.
  42                         check_pass_strength();
  43                         showOrHideWeakPasswordCheckbox();
  44                 }
  45
  46                 if ( 1 !== parseInt( $toggleButton.data( 'start-masked' ), 10 ) ) {
  47                         $pass1Wrap.addClass( 'show-password' );
  48                 } else {
  49                         $toggleButton.trigger( 'click' );
  50                 }
  51
  52                 // Once zxcvbn loads, passwords strength is known.
  53                 $( '#pw-weak-text-label' ).html( userProfileL10n.warnWeak );
  54         }
  55
  56         function bindPass1() {
  57                 currentPass = $pass1.val();
  58
  59                 $pass1Wrap = $pass1.parent();
  60
  61                 $pass1Text = $( '<input type="text"/>' )
  62                         .attr( {
  63                                 'id':           'pass1-text',
  64                                 'name':         'pass1-text',
  65                                 'autocomplete': 'off'
  66                         } )
  67                         .addClass( $pass1[0].className )
  68                         .data( 'pw', $pass1.data( 'pw' ) )
  69                         .val( $pass1.val() )
  70                         .on( inputEvent, function () {
  71                                 if ( $pass1Text.val() === currentPass ) {
  72                                         return;
  73                                 }
  74                                 $pass2.val( $pass1Text.val() );
  75                                 $pass1.val( $pass1Text.val() ).trigger( 'pwupdate' );
  76                                 currentPass = $pass1Text.val();
  77                         } );
  78
  79                 $pass1.after( $pass1Text );
  80
  81                 if ( 1 === parseInt( $pass1.data( 'reveal' ), 10 ) ) {
  82                         generatePassword();
  83                 }
  84
  85                 $pass1.on( inputEvent + ' pwupdate', function () {
  86                         if ( $pass1.val() === currentPass ) {
  87                                 return;
  88                         }
  89
  90                         currentPass = $pass1.val();
  91                         if ( $pass1Text.val() !== currentPass ) {
  92                                 $pass1Text.val( currentPass );
  93                         }
  94                         $pass1.add( $pass1Text ).removeClass( 'short bad good strong' );
  95                         showOrHideWeakPasswordCheckbox();
  96                 } );
  97         }
  98
  99         function resetToggle() {
 100                 $toggleButton
 101                         .data( 'toggle', 0 )
 102                         .attr({
 103                                 'aria-label': userProfileL10n.ariaHide
 104                         })
 105                         .find( '.text' )
 106                                 .text( userProfileL10n.hide )
 107                         .end()
 108                         .find( '.dashicons' )
 109                                 .removeClass( 'dashicons-visibility' )
 110                                 .addClass( 'dashicons-hidden' );
 111
 112                 $pass1Text.focus();
 113
 114                 $pass1Label.attr( 'for', 'pass1-text' );
 115         }
 116
 117         function bindToggleButton() {
 118                 $toggleButton = $pass1Row.find('.wp-hide-pw');
 119                 $toggleButton.show().on( 'click', function () {
 120                         if ( 1 === parseInt( $toggleButton.data( 'toggle' ), 10 ) ) {
 121                                 $pass1Wrap.addClass( 'show-password' );
 122
 123                                 resetToggle();
 124
 125                                 if ( ! _.isUndefined( $pass1Text[0].setSelectionRange ) ) {
 126                                         $pass1Text[0].setSelectionRange( 0, 100 );
 127                                 }
 128                         } else {
 129                                 $pass1Wrap.removeClass( 'show-password' );
 130                                 $toggleButton
 131                                         .data( 'toggle', 1 )
 132                                         .attr({
 133                                                 'aria-label': userProfileL10n.ariaShow
 134                                         })
 135                                         .find( '.text' )
 136                                                 .text( userProfileL10n.show )
 137                                         .end()
 138                                         .find( '.dashicons' )
 139                                                 .removeClass('dashicons-hidden')
 140                                                 .addClass('dashicons-visibility');
 141
 142                                 $pass1.focus();
 143
 144                                 $pass1Label.attr( 'for', 'pass1' );
 145
 146                                 if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) {
 147                                         $pass1[0].setSelectionRange( 0, 100 );
 148                                 }
 149                         }
 150                 });
 151         }
 152
 153         function bindPasswordForm() {
 154                 var $passwordWrapper,
 155                         $generateButton,
 156                         $cancelButton;
 157
 158                 $pass1Row = $('.user-pass1-wrap');
 159                 $pass1Label = $pass1Row.find('th label').attr( 'for', 'pass1-text' );
 160
 161                 // hide this
 162                 $('.user-pass2-wrap').hide();
 163
 164                 $submitButton = $( '#submit' ).on( 'click', function () {
 165                         updateLock = false;
 166                 });
 167
 168                 $submitButtons = $submitButton.add( ' #createusersub' );
 169
 170                 $weakRow = $( '.pw-weak' );
 171                 $weakCheckbox = $weakRow.find( '.pw-checkbox' );
 172                 $weakCheckbox.change( function() {
 173                         $submitButtons.prop( 'disabled', ! $weakCheckbox.prop( 'checked' ) );
 174                 } );
 175
 176                 $pass1 = $('#pass1');
 177                 if ( $pass1.length ) {
 178                         bindPass1();
 179                 }
 180
 181                 /**
 182                  * Fix a LastPass mismatch issue, LastPass only changes pass2.
 183                  *
 184                  * This fixes the issue by copying any changes from the hidden
 185                  * pass2 field to the pass1 field, then running check_pass_strength.
 186                  */
 187                 $pass2 = $('#pass2').on( inputEvent, function () {
 188                         if ( $pass2.val().length > 0 ) {
 189                                 $pass1.val( $pass2.val() );
 190                                 $pass2.val('');
 191                                 currentPass = '';
 192                                 $pass1.trigger( 'pwupdate' );
 193                         }
 194                 } );
 195
 196                 // Disable hidden inputs to prevent autofill and submission.
 197                 if ( $pass1.is( ':hidden' ) ) {
 198                         $pass1.prop( 'disabled', true );
 199                         $pass2.prop( 'disabled', true );
 200                         $pass1Text.prop( 'disabled', true );
 201                 }
 202
 203                 $passwordWrapper = $pass1Row.find( '.wp-pwd' );
 204                 $generateButton  = $pass1Row.find( 'button.wp-generate-pw' );
 205
 206                 bindToggleButton();
 207
 208                 if ( $generateButton.length ) {
 209                         $passwordWrapper.hide();
 210                 }
 211
 212                 $generateButton.show();
 213                 $generateButton.on( 'click', function () {
 214                         updateLock = true;
 215
 216                         $generateButton.hide();
 217                         $passwordWrapper.show();
 218
 219                         // Enable the inputs when showing.
 220                         $pass1.attr( 'disabled', false );
 221                         $pass2.attr( 'disabled', false );
 222                         $pass1Text.attr( 'disabled', false );
 223
 224                         if ( $pass1Text.val().length === 0 ) {
 225                                 generatePassword();
 226                         }
 227
 228                         _.defer( function() {
 229                                 $pass1Text.focus();
 230                                 if ( ! _.isUndefined( $pass1Text[0].setSelectionRange ) ) {
 231                                         $pass1Text[0].setSelectionRange( 0, 100 );
 232                                 }
 233                         }, 0 );
 234                 } );
 235
 236                 $cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
 237                 $cancelButton.on( 'click', function () {
 238                         updateLock = false;
 239
 240                         // Clear any entered password.
 241                         $pass1Text.val( '' );
 242
 243                         // Generate a new password.
 244                         wp.ajax.post( 'generate-password' )
 245                                 .done( function( data ) {
 246                                         $pass1.data( 'pw', data );
 247                                 } );
 248
 249                         $generateButton.show();
 250                         $passwordWrapper.hide();
 251
 252                         $weakRow.hide( 0, function () {
 253                                 $weakCheckbox.removeProp( 'checked' );
 254                         } );
 255
 256                         // Disable the inputs when hiding to prevent autofill and submission.
 257                         $pass1.prop( 'disabled', true );
 258                         $pass2.prop( 'disabled', true );
 259                         $pass1Text.prop( 'disabled', true );
 260
 261                         resetToggle();
 262
 263                         // Clear password field to prevent update
 264                         $pass1.val( '' ).trigger( 'pwupdate' );
 265                         $submitButtons.prop( 'disabled', false );
 266                 } );
 267
 268                 $pass1Row.closest('form').on( 'submit', function () {
 269                         updateLock = false;
 270
 271                         $pass1.prop( 'disabled', false );
 272                         $pass2.prop( 'disabled', false );
 273                         $pass2.val( $pass1.val() );
 274                         $pass1Wrap.removeClass( 'show-password' );
 275                 });
 276         }
 277
 278         function check_pass_strength() {
 279                 var pass1 = $('#pass1').val(), strength;
 280
 281                 $('#pass-strength-result').removeClass('short bad good strong');
 282                 if ( ! pass1 ) {
 283                         $('#pass-strength-result').html( '&nbsp;' );
 284                         return;
 285                 }
 286
 287                 strength = wp.passwordStrength.meter( pass1, wp.passwordStrength.userInputBlacklist(), pass1 );
 288
 289                 switch ( strength ) {
 290                         case -1:
 291                                 $( '#pass-strength-result' ).addClass( 'bad' ).html( pwsL10n.unknown );
 292                                 break;
 293                         case 2:
 294                                 $('#pass-strength-result').addClass('bad').html( pwsL10n.bad );
 295                                 break;
 296                         case 3:
 297                                 $('#pass-strength-result').addClass('good').html( pwsL10n.good );
 298                                 break;
 299                         case 4:
 300                                 $('#pass-strength-result').addClass('strong').html( pwsL10n.strong );
 301                                 break;
 302                         case 5:
 303                                 $('#pass-strength-result').addClass('short').html( pwsL10n.mismatch );
 304                                 break;
 305                         default:
 306                                 $('#pass-strength-result').addClass('short').html( pwsL10n['short'] );
 307                 }
 308         }
 309
 310         function showOrHideWeakPasswordCheckbox() {
 311                 var passStrength = $('#pass-strength-result')[0];
 312
 313                 if ( passStrength.className ) {
 314                         $pass1.add( $pass1Text ).addClass( passStrength.className );
 315                         if ( 'short' === passStrength.className || 'bad' === passStrength.className ) {
 316                                 if ( ! $weakCheckbox.prop( 'checked' ) ) {
 317                                         $submitButtons.prop( 'disabled', true );
 318                                 }
 319                                 $weakRow.show();
 320                         } else {
 321                                 $submitButtons.prop( 'disabled', false );
 322                                 $weakRow.hide();
 323                         }
 324                 }
 325         }
 326
 327         $(document).ready( function() {
 328                 var $colorpicker, $stylesheet, user_id, current_user_id,
 329                         select = $( '#display_name' );
 330
 331                 $('#pass1').val('').on( inputEvent + ' pwupdate', check_pass_strength );
 332                 $('#pass-strength-result').show();
 333                 $('.color-palette').click( function() {
 334                         $(this).siblings('input[name="admin_color"]').prop('checked', true);
 335                 });
 336
 337                 if ( select.length ) {
 338                         $('#first_name, #last_name, #nickname').bind( 'blur.user_profile', function() {
 339                                 var dub = [],
 340                                         inputs = {
 341                                                 display_nickname  : $('#nickname').val() || '',
 342                                                 display_username  : $('#user_login').val() || '',
 343                                                 display_firstname : $('#first_name').val() || '',
 344                                                 display_lastname  : $('#last_name').val() || ''
 345                                         };
 346
 347                                 if ( inputs.display_firstname && inputs.display_lastname ) {
 348                                         inputs.display_firstlast = inputs.display_firstname + ' ' + inputs.display_lastname;
 349                                         inputs.display_lastfirst = inputs.display_lastname + ' ' + inputs.display_firstname;
 350                                 }
 351
 352                                 $.each( $('option', select), function( i, el ){
 353                                         dub.push( el.value );
 354                                 });
 355
 356                                 $.each(inputs, function( id, value ) {
 357                                         if ( ! value ) {
 358                                                 return;
 359                                         }
 360
 361                                         var val = value.replace(/<\/?[a-z][^>]*>/gi, '');
 362
 363                                         if ( inputs[id].length && $.inArray( val, dub ) === -1 ) {
 364                                                 dub.push(val);
 365                                                 $('<option />', {
 366                                                         'text': val
 367                                                 }).appendTo( select );
 368                                         }
 369                                 });
 370                         });
 371                 }
 372
 373                 $colorpicker = $( '#color-picker' );
 374                 $stylesheet = $( '#colors-css' );
 375                 user_id = $( 'input#user_id' ).val();
 376                 current_user_id = $( 'input[name="checkuser_id"]' ).val();
 377
 378                 $colorpicker.on( 'click.colorpicker', '.color-option', function() {
 379                         var colors,
 380                                 $this = $(this);
 381
 382                         if ( $this.hasClass( 'selected' ) ) {
 383                                 return;
 384                         }
 385
 386                         $this.siblings( '.selected' ).removeClass( 'selected' );
 387                         $this.addClass( 'selected' ).find( 'input[type="radio"]' ).prop( 'checked', true );
 388
 389                         // Set color scheme
 390                         if ( user_id === current_user_id ) {
 391                                 // Load the colors stylesheet.
 392                                 // The default color scheme won't have one, so we'll need to create an element.
 393                                 if ( 0 === $stylesheet.length ) {
 394                                         $stylesheet = $( '<link rel="stylesheet" />' ).appendTo( 'head' );
 395                                 }
 396                                 $stylesheet.attr( 'href', $this.children( '.css_url' ).val() );
 397
 398                                 // repaint icons
 399                                 if ( typeof wp !== 'undefined' && wp.svgPainter ) {
 400                                         try {
 401                                                 colors = $.parseJSON( $this.children( '.icon_colors' ).val() );
 402                                         } catch ( error ) {}
 403
 404                                         if ( colors ) {
 405                                                 wp.svgPainter.setColors( colors );
 406                                                 wp.svgPainter.paint();
 407                                         }
 408                                 }
 409
 410                                 // update user option
 411                                 $.post( ajaxurl, {
 412                                         action:       'save-user-color-scheme',
 413                                         color_scheme: $this.children( 'input[name="admin_color"]' ).val(),
 414                                         nonce:        $('#color-nonce').val()
 415                                 }).done( function( response ) {
 416                                         if ( response.success ) {
 417                                                 $( 'body' ).removeClass( response.data.previousScheme ).addClass( response.data.currentScheme );
 418                                         }
 419                                 });
 420                         }
 421                 });
 422
 423                 bindPasswordForm();
 424         });
 425
 426         $( '#destroy-sessions' ).on( 'click', function( e ) {
 427                 var $this = $(this);
 428
 429                 wp.ajax.post( 'destroy-sessions', {
 430                         nonce: $( '#_wpnonce' ).val(),
 431                         user_id: $( '#user_id' ).val()
 432                 }).done( function( response ) {
 433                         $this.prop( 'disabled', true );
 434                         $this.siblings( '.notice' ).remove();
 435                         $this.before( '<div class="notice notice-success inline"><p>' + response.message + '</p></div>' );
 436                 }).fail( function( response ) {
 437                         $this.siblings( '.notice' ).remove();
 438                         $this.before( '<div class="notice notice-error inline"><p>' + response.message + '</p></div>' );
 439                 });
 440
 441                 e.preventDefault();
 442         });
 443
 444         window.generatePassword = generatePassword;
 445
 446         /* Warn the user if password was generated but not saved */
 447         $( window ).on( 'beforeunload', function () {
 448                 if ( true === updateLock ) {
 449                         return userProfileL10n.warn;
 450                 }
 451         } );
 452
 453 })(jQuery);