Add Caps lock message to login screen

[dartiss]

Users are often experiencing issues logging in which is a result of them having CAPS LOCK on, without them realising. Many wireless keyboards too don't have a light on them, which makes noticing this even trickier.

There are a number of plugins available that will flag to the user when the CAPS LOCK is on (a message rather than a warning as it may be intentional!) but it would make sense for this to be added into core (possibly alongside other request improvements, such as the ability to display the typed password).

Apologies if this is already a ticket - I did look but my search-fu on Trac isn't great.

[swissspidy]

Here's how the password field on the macOS login screen warns about caps lock

[desrosj]

Thanks for this one, @dartiss! IF this gets implemented, it should probably be added to the user edit screen as well.

I'm going to move this to future release as I think this would be a good enhancement. It would be great to get some design guidance here.

[devsabbirahmed]

To enhance readability and improve user interaction, we can implement a caps lock alert by displaying a clear HTML message when the caps lock key is activated. Here's a revised version:

<div id="caps-lock-alert">
  Caps Lock is currently on.
</div>

So we can add a function that directly imports JavaScript code to the login page and loads it there.

<?php
function add_custom_login_script() {
    wp_enqueue_script('custom-login-script', get_stylesheet_directory_uri() . '/js/custom-login-script.js', array('jquery'), '1.0', true);
}
add_action('login_enqueue_scripts', 'add_custom_login_script');

Then we can add jQuery/JS code

jQuery(document).ready(function($) {
    var passwordField = $('#user_pass');
    var capsLockAlert = $('<div id="caps-lock-alert">Caps Lock is currently on.</div>').hide();
    
    passwordField.after(capsLockAlert);
    
    passwordField.on('keyup', function(event) {
        var capsLockStatus = event.getModifierState && event.getModifierState('CapsLock');
        
        if (capsLockStatus) {
            capsLockAlert.show();
        } else {
            capsLockAlert.hide();
        }
    });
});

That will be more readable because an icon sometime not be that much eye interactive.

[kawsar007]

I agree with @swissspidy and I attached 3 design style.
​https://ibb.co/hWB6MNh
​https://ibb.co/Xbh90yd
​https://ibb.co/RvzbWPg

[dartiss]

Replying to kawsar007:

I agree with @swissspidy and I attached 3 design style.
​https://ibb.co/hWB6MNh
​https://ibb.co/Xbh90yd
​https://ibb.co/RvzbWPg

That last one is certainly the cleanest and most discrete but I'd worry that users wouldn't understand what it meant. The others, whilst being a bit "in your face" certainly don't leave you confused!

[kawsar007]

Can we make it minimal design for this and like my 3rd attached file.

[najmulsaju]

I think using this design with a CAPS LOCK icon and text will be easy for users to understand.
Here is the design ​https://ibb.co/5nv6GqH

[dartiss]

Replying to najmulsaju:

I think using this design with a CAPS LOCK icon and text will be easy for users to understand.
Here is the design ​https://ibb.co/5nv6GqH

Love this design!