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