Make WordPress Core

Opened 4 years ago

Last modified 9 months ago

#48345 new feature request

Add Caps lock message to login screen

Reported by: dartiss's profile dartiss Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Login and Registration Keywords: needs-patch needs-design
Focuses: ui, accessibility Cc:

Description

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.

Attachments (1)

macOS Login Field.png (41.6 KB) - added by swissspidy 4 years ago.
Here's how the password field on the macOS login screen warns about caps lock

Download all attachments as: .zip

Change History (11)

@swissspidy
4 years ago

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

#1 @desrosj
4 years ago

  • Component changed from General to Login and Registration
  • Keywords needs-patch needs-design added
  • Milestone changed from Awaiting Review to Future Release

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.

#2 @SergeyBiryukov
4 years ago

  • Focuses ui added

#3 @devsabbirahmed
9 months ago

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.

Last edited 9 months ago by devsabbirahmed (previous) (diff)

#4 follow-up: @kawsar007
9 months ago

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

#5 in reply to: ↑ 4 ; follow-up: @dartiss
9 months ago

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!

This ticket was mentioned in Slack in #design by chaion07. View the logs.


9 months ago

#7 in reply to: ↑ 5 @kawsar007
9 months ago

Can we make it minimal design for this and like my 3rd attached file Replying to 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!

Version 0, edited 9 months ago by kawsar007 (next)

#8 follow-up: @najmulsaju
9 months ago

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

#9 in reply to: ↑ 8 @dartiss
9 months ago

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!

#10 @sabernhardt
9 months ago

  • Focuses accessibility added
Note: See TracTickets for help on using tickets.