|
20 | 20 | $form, |
21 | 21 | originalFormContent, |
22 | 22 | $passwordWrapper, |
23 | | - successTimeout; |
| 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; |
24 | 28 |
|
25 | 29 | function generatePassword() { |
26 | 30 | if ( typeof zxcvbn !== 'function' ) { |
|
80 | 84 | $pass1.removeClass( 'short bad good strong' ); |
81 | 85 | showOrHideWeakPasswordCheckbox(); |
82 | 86 | } ); |
| 87 | + |
| 88 | + bindCapsLockWarning( $pass1 ); |
83 | 89 | } |
84 | 90 |
|
85 | 91 | function resetToggle( show ) { |
|
213 | 219 | } else { |
214 | 220 | // Password field for the login form. |
215 | 221 | $pass1 = $( '#user_pass' ); |
| 222 | + |
| 223 | + bindCapsLockWarning( $pass1 ); |
216 | 224 | } |
217 | 225 |
|
218 | 226 | /* |
|
332 | 340 | } |
333 | 341 | } |
334 | 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 | + |
335 | 416 | function showOrHideWeakPasswordCheckbox() { |
336 | 417 | var passStrengthResult = $('#pass-strength-result'); |
337 | 418 |
|
|
0 commit comments