1/**
2 * @output wp-admin/js/user-profile.js
3 */
4
5/* global ajaxurl, pwsL10n, userProfileL10n, ClipboardJS */
6(function($) {
7 var updateLock = false,
8 isSubmitting = false,
9 __ = wp.i18n.__,
10 clipboard = new ClipboardJS( '.application-password-display .copy-button' ),
11 $pass1Row,
12 $pass1,
13 $pass2,
14 $weakRow,
15 $weakCheckbox,
16 $toggleButton,
17 $submitButtons,
18 $submitButton,
19 currentPass,
20 $form,
21 originalFormContent,
22 $passwordWrapper,
23 successTimeout,
24 isMac = window.navigator.platform ? window.navigator.platform.indexOf( 'Mac' ) !== -1 : false,
25 ua = navigator.userAgent.toLowerCase(),
26 isSafari = window.safari !== 'undefined' && typeof window.safari === 'object',
27 isFirefox = ua.indexOf( 'firefox' ) !== -1;
28
29 function generatePassword() {
30 if ( typeof zxcvbn !== 'function' ) {
31 setTimeout( generatePassword, 50 );
32 return;
33 } else if ( ! $pass1.val() || $passwordWrapper.hasClass( 'is-open' ) ) {
34 // zxcvbn loaded before user entered password, or generating new password.
35 $pass1.val( $pass1.data( 'pw' ) );
36 $pass1.trigger( 'pwupdate' );
37 showOrHideWeakPasswordCheckbox();
38 } else {
39 // zxcvbn loaded after the user entered password, check strength.
40 check_pass_strength();
41 showOrHideWeakPasswordCheckbox();
42 }
43
44 /*
45 * This works around a race condition when zxcvbn loads quickly and
46 * causes `generatePassword()` to run prior to the toggle button being
47 * bound.
48 */
49 bindToggleButton();
50
51 // Install screen.
52 if ( 1 !== parseInt( $toggleButton.data( 'start-masked' ), 10 ) ) {
53 // Show the password not masked if admin_password hasn't been posted yet.
54 $pass1.attr( 'type', 'text' );
55 } else {
56 // Otherwise, mask the password.
57 $toggleButton.trigger( 'click' );
58 }
59
60 // Once zxcvbn loads, passwords strength is known.
61 $( '#pw-weak-text-label' ).text( __( 'Confirm use of weak password' ) );
62
63 // Focus the password field if not the install screen.
64 if ( 'mailserver_pass' !== $pass1.prop('id' ) && ! $('#weblog_title').length ) {
65 $( $pass1 ).trigger( 'focus' );
66 }
67 }
68
69 function bindPass1() {
70 currentPass = $pass1.val();
71
72 if ( 1 === parseInt( $pass1.data( 'reveal' ), 10 ) ) {
73 generatePassword();
74 }
75
76 $pass1.on( 'input' + ' pwupdate', function () {
77 if ( $pass1.val() === currentPass ) {
78 return;
79 }
80
81 currentPass = $pass1.val();
82
83 // Refresh password strength area.
84 $pass1.removeClass( 'short bad good strong' );
85 showOrHideWeakPasswordCheckbox();
86 } );
87
88 bindCapsLockWarning( $pass1 );
89 }
90
91 function resetToggle( show ) {
92 $toggleButton
93 .attr({
94 'aria-label': show ? __( 'Show password' ) : __( 'Hide password' )
95 })
96 .find( '.text' )
97 .text( show ? __( 'Show' ) : __( 'Hide' ) )
98 .end()
99 .find( '.dashicons' )
100 .removeClass( show ? 'dashicons-hidden' : 'dashicons-visibility' )
101 .addClass( show ? 'dashicons-visibility' : 'dashicons-hidden' );
102 }
103
104 function bindToggleButton() {
105 if ( !! $toggleButton ) {
106 // Do not rebind.
107 return;
108 }
109 $toggleButton = $pass1Row.find('.wp-hide-pw');
110
111 // Toggle between showing and hiding the password.
112 $toggleButton.show().on( 'click', function () {
113 if ( 'password' === $pass1.attr( 'type' ) ) {
114 $pass1.attr( 'type', 'text' );
115 resetToggle( false );
116 } else {
117 $pass1.attr( 'type', 'password' );
118 resetToggle( true );
119 }
120 });
121
122 // Ensure the password input type is set to password when the form is submitted.
123 $pass1Row.closest( 'form' ).on( 'submit', function() {
124 if ( $pass1.attr( 'type' ) === 'text' ) {
125 $pass1.attr( 'type', 'password' );
126 resetToggle( true );
127 }
128 } );
129 }
130
131 /**
132 * Handle the password reset button. Sets up an ajax callback to trigger sending
133 * a password reset email.
134 */
135 function bindPasswordResetLink() {
136 $( '#generate-reset-link' ).on( 'click', function() {
137 var $this = $(this),
138 data = {
139 'user_id': userProfileL10n.user_id, // The user to send a reset to.
140 'nonce': userProfileL10n.nonce // Nonce to validate the action.
141 };
142
143 // Remove any previous error messages.
144 $this.parent().find( '.notice-error' ).remove();
145
146 // Send the reset request.
147 var resetAction = wp.ajax.post( 'send-password-reset', data );
148
149 // Handle reset success.
150 resetAction.done( function( response ) {
151 addInlineNotice( $this, true, response );
152 } );
153
154 // Handle reset failure.
155 resetAction.fail( function( response ) {
156 addInlineNotice( $this, false, response );
157 } );
158
159 });
160
161 }
162
163 /**
164 * Helper function to insert an inline notice of success or failure.
165 *
166 * @param {jQuery Object} $this The button element: the message will be inserted
167 * above this button
168 * @param {bool} success Whether the message is a success message.
169 * @param {string} message The message to insert.
170 */
171 function addInlineNotice( $this, success, message ) {
172 var resultDiv = $( '<div />', {
173 role: 'alert'
174 } );
175
176 // Set up the notice div.
177 resultDiv.addClass( 'notice inline' );
178
179 // Add a class indicating success or failure.
180 resultDiv.addClass( 'notice-' + ( success ? 'success' : 'error' ) );
181
182 // Add the message, wrapping in a p tag, with a fadein to highlight each message.
183 resultDiv.text( $( $.parseHTML( message ) ).text() ).wrapInner( '<p />');
184
185 // Disable the button when the callback has succeeded.
186 $this.prop( 'disabled', success );
187
188 // Remove any previous notices.
189 $this.siblings( '.notice' ).remove();
190
191 // Insert the notice.
192 $this.before( resultDiv );
193 }
194
195 function bindPasswordForm() {
196 var $generateButton,
197 $cancelButton;
198
199 $pass1Row = $( '.user-pass1-wrap, .user-pass-wrap, .mailserver-pass-wrap, .reset-pass-submit' );
200
201 // Hide the confirm password field when JavaScript support is enabled.
202 $('.user-pass2-wrap').hide();
203
204 $submitButton = $( '#submit, #wp-submit' ).on( 'click', function () {
205 updateLock = false;
206 });
207
208 $submitButtons = $submitButton.add( ' #createusersub' );
209
210 $weakRow = $( '.pw-weak' );
211 $weakCheckbox = $weakRow.find( '.pw-checkbox' );
212 $weakCheckbox.on( 'change', function() {
213 $submitButtons.prop( 'disabled', ! $weakCheckbox.prop( 'checked' ) );
214 } );
215
216 $pass1 = $('#pass1, #mailserver_pass');
217 if ( $pass1.length ) {
218 bindPass1();
219 } else {
220 // Password field for the login form.
221 $pass1 = $( '#user_pass' );
222
223 bindCapsLockWarning( $pass1 );
224 }
225
226 /*
227 * Fix a LastPass mismatch issue, LastPass only changes pass2.
228 *
229 * This fixes the issue by copying any changes from the hidden
230 * pass2 field to the pass1 field, then running check_pass_strength.
231 */
232 $pass2 = $( '#pass2' ).on( 'input', function () {
233 if ( $pass2.val().length > 0 ) {
234 $pass1.val( $pass2.val() );
235 $pass2.val('');
236 currentPass = '';
237 $pass1.trigger( 'pwupdate' );
238 }
239 } );
240
241 // Disable hidden inputs to prevent autofill and submission.
242 if ( $pass1.is( ':hidden' ) ) {
243 $pass1.prop( 'disabled', true );
244 $pass2.prop( 'disabled', true );
245 }
246
247 $passwordWrapper = $pass1Row.find( '.wp-pwd' );
248 $generateButton = $pass1Row.find( 'button.wp-generate-pw' );
249
250 bindToggleButton();
251
252 $generateButton.show();
253 $generateButton.on( 'click', function () {
254 updateLock = true;
255
256 // Make sure the password fields are shown.
257 $generateButton.not( '.skip-aria-expanded' ).attr( 'aria-expanded', 'true' );
258 $passwordWrapper
259 .show()
260 .addClass( 'is-open' );
261
262 // Enable the inputs when showing.
263 $pass1.attr( 'disabled', false );
264 $pass2.attr( 'disabled', false );
265
266 // Set the password to the generated value.
267 generatePassword();
268
269 // Show generated password in plaintext by default.
270 resetToggle ( false );
271
272 // Generate the next password and cache.
273 wp.ajax.post( 'generate-password' )
274 .done( function( data ) {
275 $pass1.data( 'pw', data );
276 } );
277 } );
278
279 $cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
280 $cancelButton.on( 'click', function () {
281 updateLock = false;
282
283 // Disable the inputs when hiding to prevent autofill and submission.
284 $pass1.prop( 'disabled', true );
285 $pass2.prop( 'disabled', true );
286
287 // Clear password field and update the UI.
288 $pass1.val( '' ).trigger( 'pwupdate' );
289 resetToggle( false );
290
291 // Hide password controls.
292 $passwordWrapper
293 .hide()
294 .removeClass( 'is-open' );
295
296 // Stop an empty password from being submitted as a change.
297 $submitButtons.prop( 'disabled', false );
298
299 $generateButton.attr( 'aria-expanded', 'false' );
300 } );
301
302 $pass1Row.closest( 'form' ).on( 'submit', function () {
303 updateLock = false;
304
305 $pass1.prop( 'disabled', false );
306 $pass2.prop( 'disabled', false );
307 $pass2.val( $pass1.val() );
308 });
309 }
310
311 function check_pass_strength() {
312 var pass1 = $('#pass1').val(), strength;
313
314 $('#pass-strength-result').removeClass('short bad good strong empty');
315 if ( ! pass1 || '' === pass1.trim() ) {
316 $( '#pass-strength-result' ).addClass( 'empty' ).html( ' ' );
317 return;
318 }
319
320 strength = wp.passwordStrength.meter( pass1, wp.passwordStrength.userInputDisallowedList(), pass1 );
321
322 switch ( strength ) {
323 case -1:
324 $( '#pass-strength-result' ).addClass( 'bad' ).html( pwsL10n.unknown );
325 break;
326 case 2:
327 $('#pass-strength-result').addClass('bad').html( pwsL10n.bad );
328 break;
329 case 3:
330 $('#pass-strength-result').addClass('good').html( pwsL10n.good );
331 break;
332 case 4:
333 $('#pass-strength-result').addClass('strong').html( pwsL10n.strong );
334 break;
335 case 5:
336 $('#pass-strength-result').addClass('short').html( pwsL10n.mismatch );
337 break;
338 default:
339 $('#pass-strength-result').addClass('short').html( pwsL10n.short );
340 }
341 }
342
343 /**
344 * Bind Caps Lock detection to a password input field.
345 *
346 * @param {jQuery} $input The password input field.
347 */
348 function bindCapsLockWarning( $input ) {
349 var $capsWarning,
350 $capsIcon,
351 $capsText,
352 capsLockOn = false;
353
354 // Skip warning on macOS Safari + Firefox (they show native indicators).
355 if ( isMac && ( isSafari || isFirefox ) ) {
356 return;
357 }
358
359 $capsWarning = $( '<div id="caps-warning" class="caps-warning"></div>' );
360 $capsIcon = $( '<span class="caps-icon" aria-hidden="true"><svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="#3c434a" stroke="#3c434a" stroke-width="0.5"><path d="M12 5L19 15H16V19H8V15H5L12 5Z"/><rect x="8" y="21" width="8" height="1.5" rx="0.75"/></svg></span>' );
361 $capsText = $( '<span>', { 'class': 'caps-warning-text', text: __( 'Caps lock is on.' ) } );
362 $capsWarning.append( $capsIcon, $capsText );
363
364 $input.parent( 'div' ).append( $capsWarning );
365
366 $input.on( 'keydown', function( jqEvent ) {
367 var event = jqEvent.originalEvent;
368
369 // Skip if key is not a printable character.
370 // Key length > 1 usually means non-printable (e.g., "Enter", "Tab").
371 if ( event.ctrlKey || event.metaKey || event.altKey || ! event.key || event.key.length !== 1 ) {
372 return;
373 }
374
375 var state = isCapsLockOn( event );
376
377 // React when the state changes or if caps lock is on when the user starts typing.
378 if ( state !== capsLockOn ) {
379 capsLockOn = state;
380
381 if ( capsLockOn ) {
382 $capsWarning.show();
383 // Don't duplicate existing screen reader Caps lock notifications.
384 if ( event.key !== 'CapsLock' ) {
385 wp.a11y.speak( __( 'Caps lock is on.' ), 'assertive' );
386 }
387 } else {
388 $capsWarning.hide();
389 }
390 }
391 } );
392
393 $input.on( 'blur', function() {
394 if ( ! document.hasFocus() ) {
395 return;
396 }
397 capsLockOn = false;
398 $capsWarning.hide();
399 } );
400 }
401
402 /**
403 * Determines if Caps Lock is currently enabled.
404 *
405 * On macOS Safari and Firefox, the native warning is preferred,
406 * so this function returns false to suppress custom warnings.
407 *
408 * @param {KeyboardEvent} e The keydown event object.
409 *
410 * @return {boolean} True if Caps Lock is on, false otherwise.
411 */
412 function isCapsLockOn( event ) {
413 return event.getModifierState( 'CapsLock' );
414 }
415
416 function showOrHideWeakPasswordCheckbox() {
417 var passStrengthResult = $('#pass-strength-result');
418
419 if ( passStrengthResult.length ) {
420 var passStrength = passStrengthResult[0];
421
422 if ( passStrength.className ) {
423 $pass1.addClass( passStrength.className );
424 if ( $( passStrength ).is( '.short, .bad' ) ) {
425 if ( ! $weakCheckbox.prop( 'checked' ) ) {
426 $submitButtons.prop( 'disabled', true );
427 }
428 $weakRow.show();
429 } else {
430 if ( $( passStrength ).is( '.empty' ) ) {
431 $submitButtons.prop( 'disabled', true );
432 $weakCheckbox.prop( 'checked', false );
433 } else {
434 $submitButtons.prop( 'disabled', false );
435 }
436 $weakRow.hide();
437 }
438 }
439 }
440 }
441
442 // Debug information copy section.
443 clipboard.on( 'success', function( e ) {
444 var triggerElement = $( e.trigger ),
445 successElement = $( '.success', triggerElement.closest( '.application-password-display' ) );
446
447 // Clear the selection and move focus back to the trigger.
448 e.clearSelection();
449
450 // Show success visual feedback.
451 clearTimeout( successTimeout );
452 successElement.removeClass( 'hidden' );
453
454 // Hide success visual feedback after 3 seconds since last success.
455 successTimeout = setTimeout( function() {
456 successElement.addClass( 'hidden' );
457 }, 3000 );
458
459 // Handle success audible feedback.
460 wp.a11y.speak( __( 'Application password has been copied to your clipboard.' ) );
461 } );
462
463 $( function() {
464 var $colorpicker, $stylesheet, user_id, current_user_id,
465 select = $( '#display_name' ),
466 current_name = select.val(),
467 greeting = $( '#wp-admin-bar-my-account' ).find( '.display-name' );
468
469 $( '#pass1' ).val( '' ).on( 'input' + ' pwupdate', check_pass_strength );
470 $('#pass-strength-result').show();
471 $('.color-palette').on( 'click', function() {
472 $(this).siblings('input[name="admin_color"]').prop('checked', true);
473 });
474
475 if ( select.length ) {
476 $('#first_name, #last_name, #nickname').on( 'blur.user_profile', function() {
477 var dub = [],
478 inputs = {
479 display_nickname : $('#nickname').val() || '',
480 display_username : $('#user_login').val() || '',
481 display_firstname : $('#first_name').val() || '',
482 display_lastname : $('#last_name').val() || ''
483 };
484
485 if ( inputs.display_firstname && inputs.display_lastname ) {
486 inputs.display_firstlast = inputs.display_firstname + ' ' + inputs.display_lastname;
487 inputs.display_lastfirst = inputs.display_lastname + ' ' + inputs.display_firstname;
488 }
489
490 $.each( $('option', select), function( i, el ){
491 dub.push( el.value );
492 });
493
494 $.each(inputs, function( id, value ) {
495 if ( ! value ) {
496 return;
497 }
498
499 var val = value.replace(/<\/?[a-z][^>]*>/gi, '');
500
501 if ( inputs[id].length && $.inArray( val, dub ) === -1 ) {
502 dub.push(val);
503 $('<option />', {
504 'text': val
505 }).appendTo( select );
506 }
507 });
508 });
509
510 /**
511 * Replaces "Howdy, *" in the admin toolbar whenever the display name dropdown is updated for one's own profile.
512 */
513 select.on( 'change', function() {
514 if ( user_id !== current_user_id ) {
515 return;
516 }
517
518 var display_name = this.value.trim() || current_name;
519
520 greeting.text( display_name );
521 } );
522 }
523
524 $colorpicker = $( '#color-picker' );
525 $stylesheet = $( '#colors-css' );
526 user_id = $( 'input#user_id' ).val();
527 current_user_id = $( 'input[name="checkuser_id"]' ).val();
528
529 $colorpicker.on( 'click.colorpicker', '.color-option', function() {
530 var colors,
531 $this = $(this);
532
533 if ( $this.hasClass( 'selected' ) ) {
534 return;
535 }
536
537 $this.siblings( '.selected' ).removeClass( 'selected' );
538 $this.addClass( 'selected' ).find( 'input[type="radio"]' ).prop( 'checked', true );
539
540 // Set color scheme.
541 if ( user_id === current_user_id ) {
542 // Load the colors stylesheet.
543 // The default color scheme won't have one, so we'll need to create an element.
544 if ( 0 === $stylesheet.length ) {
545 $stylesheet = $( '<link rel="stylesheet" />' ).appendTo( 'head' );
546 }
547 $stylesheet.attr( 'href', $this.children( '.css_url' ).val() );
548
549 // Repaint icons.
550 if ( typeof wp !== 'undefined' && wp.svgPainter ) {
551 try {
552 colors = JSON.parse( $this.children( '.icon_colors' ).val() );
553 } catch ( error ) {}
554
555 if ( colors ) {
556 wp.svgPainter.setColors( colors );
557 wp.svgPainter.paint();
558 }
559 }
560
561 // Update user option.
562 $.post( ajaxurl, {
563 action: 'save-user-color-scheme',
564 color_scheme: $this.children( 'input[name="admin_color"]' ).val(),
565 nonce: $('#color-nonce').val()
566 }).done( function( response ) {
567 if ( response.success ) {
568 $( 'body' ).removeClass( response.data.previousScheme ).addClass( response.data.currentScheme );
569 }
570 });
571 }
572 });
573
574 bindPasswordForm();
575 bindPasswordResetLink();
576 $submitButtons.on( 'click', function() {
577 isSubmitting = true;
578 });
579
580 $form = $( '#your-profile, #createuser' );
581 originalFormContent = $form.serialize();
582 });
583
584 $( '#destroy-sessions' ).on( 'click', function( e ) {
585 var $this = $(this);
586
587 wp.ajax.post( 'destroy-sessions', {
588 nonce: $( '#_wpnonce' ).val(),
589 user_id: $( '#user_id' ).val()
590 }).done( function( response ) {
591 $this.prop( 'disabled', true );
592 $this.siblings( '.notice' ).remove();
593 $this.before( '<div class="notice notice-success inline" role="alert"><p>' + response.message + '</p></div>' );
594 }).fail( function( response ) {
595 $this.siblings( '.notice' ).remove();
596 $this.before( '<div class="notice notice-error inline" role="alert"><p>' + response.message + '</p></div>' );
597 });
598
599 e.preventDefault();
600 });
601
602 window.generatePassword = generatePassword;
603
604 // Warn the user if password was generated but not saved.
605 $( window ).on( 'beforeunload', function () {
606 if ( true === updateLock ) {
607 return __( 'Your new password has not been saved.' );
608 }
609 if ( originalFormContent !== $form.serialize() && ! isSubmitting ) {
610 return __( 'The changes you made will be lost if you navigate away from this page.' );
611 }
612 });
613
614 /*
615 * We need to generate a password as soon as the Reset Password page is loaded,
616 * to avoid double clicking the button to retrieve the first generated password.
617 * See ticket #39638.
618 */
619 $( function() {
620 if ( $( '.reset-pass-submit' ).length ) {
621 $( '.reset-pass-submit button.wp-generate-pw' ).trigger( 'click' );
622 }
623 });
624
625})(jQuery);
626