Changeset 60988

Timestamp:

10/20/2025 07:47:31 PM (8 weeks ago)

Author:

joedolson

Message:

Login and Registration: Add Caps Lock notice to password input.

Add a notification when typing passwords on the user registration, user login, and user profile screens that notifies the user if they are typing with caps lock enabled.

This can help reduce user friction when logging in, prevent user error when creating passwords, and reduce the need for a user to use the show password button.

Props dartiss, swissspidy, johnbillion, nikunj8866, pmbaldha, mosescursor, sirlouen, westonruter, praful2111, devsabbirahmed, kawsar007, najmulsaju, yashyadav247, sajjad67, joedolson.
Fixes #48345.

Location:

trunk/src

Files:

• js/_enqueues/admin/user-profile.js (modified) (4 diffs)
• wp-admin/css/forms.css (modified) (2 diffs)

trunk/src/js/_enqueues/admin/user-profile.js

@@ -21 +21 @@
         originalFormContent,
         $passwordWrapper,
-        successTimeout;
+        successTimeout,
+        isMac = window.navigator.platform ? window.navigator.platform.indexOf( 'Mac' ) !== -1 : false, 
+        ua = navigator.userAgent.toLowerCase(),
+        isSafari = window.safari !== 'undefined' && typeof window.safari === 'object',
+        isFirefox = ua.indexOf( 'firefox' ) !== -1;
 
     function generatePassword() {
@@ -81 +85 @@
             showOrHideWeakPasswordCheckbox();
         } );
+
+        bindCapsLockWarning( $pass1 );
     }
 
@@ -214 +220 @@
             // Password field for the login form.
             $pass1 = $( '#user_pass' );
+
+            bindCapsLockWarning( $pass1 );
         }
 
@@ -333 +341 @@
     }
 
+    /**
+     * Bind Caps Lock detection to a password input field.
+     *
+     * @param {jQuery} $input The password input field.
+     */
+    function bindCapsLockWarning( $input ) {
+        var $capsWarning,
+            $capsIcon,
+            $capsText,
+            capsLockOn = false;
+
+        // Skip warning on macOS Safari + Firefox (they show native indicators).
+        if ( isMac && ( isSafari || isFirefox ) ) {
+            return;
+        }
+
+        $capsWarning = $( '<div id="caps-warning" class="caps-warning"></div>' );
+        $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>' );
+        $capsText    = $( '<span>', { 'class': 'caps-warning-text', text: __( 'Caps lock is on.' ) } );
+        $capsWarning.append( $capsIcon, $capsText );
+
+        $input.parent( 'div' ).append( $capsWarning );
+
+        $input.on( 'keydown', function( jqEvent ) {
+            var event = jqEvent.originalEvent;
+
+            // Skip if key is not a printable character.
+            // Key length > 1 usually means non-printable (e.g., "Enter", "Tab").
+            if ( event.ctrlKey || event.metaKey || event.altKey || ! event.key || event.key.length !== 1 ) {
+                return;
+            }
+
+            var state = isCapsLockOn( event );
+
+            // React when the state changes or if caps lock is on when the user starts typing.
+            if ( state !== capsLockOn ) {
+                capsLockOn = state;
+
+                if ( capsLockOn ) {
+                    $capsWarning.show();
+                    // Don't duplicate existing screen reader Caps lock notifications.
+                    if ( event.key !== 'CapsLock' ) {
+                        wp.a11y.speak( __( 'Caps lock is on.' ), 'assertive' );
+                    }
+                } else {
+                    $capsWarning.hide();
+                }
+            }
+        } );
+
+        $input.on( 'blur', function() {
+            if ( ! document.hasFocus() ) {
+                return;
+            }
+            capsLockOn = false;
+            $capsWarning.hide();
+        } );
+    }
+
+    /**
+     * Determines if Caps Lock is currently enabled.
+     *
+     * On macOS Safari and Firefox, the native warning is preferred,
+     * so this function returns false to suppress custom warnings.
+     *
+     * @param {KeyboardEvent} e The keydown event object.
+     *
+     * @return {boolean} True if Caps Lock is on, false otherwise. 
+     */
+    function isCapsLockOn( event ) {
+        return event.getModifierState( 'CapsLock' );
+    }
+
     function showOrHideWeakPasswordCheckbox() {
         var passStrengthResult = $('#pass-strength-result');

trunk/src/wp-admin/css/forms.css

@@ -714 +714 @@
 }
 
+/* Caps lock warning */
+.wp-pwd .caps-warning {
+    display: none;
+    position: relative;
+    background: #fcf9e8;
+    border: 1px solid #f0c33c;
+    color: #1d2327;
+    padding: 6px 10px;
+    top: -8px;
+}
+
+.profile-php .wp-pwd .caps-warning {
+    padding: 3px 5px;
+    top: -4px;
+    border-radius: 4px;
+}
+
+.wp-pwd .caps-icon {
+    display: inline-flex;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+    vertical-align: middle;
+}
+
+.wp-pwd .caps-warning-text {
+    vertical-align: middle;
+}
+/* Caps lock warning */
+
 p.search-box {
     display: flex;
@@ -1641 +1672 @@
     }
 
+    .profile-php .wp-pwd .caps-warning {
+        padding: 8px;
+    }
+
     .password-input-wrapper {
         display: block;