Caps Lock Warning

Overview

Password inputs hide the user’s input for security reasons. If the user enters a password while Caps Lock is on, this will uppercase their password input without them knowing, resulting in an incorrect password entry, which might result in an account lockout.

To avoid that scenario, use the caps lock warning component to warn the user that Caps Lock is on whenever you prompt them to enter hidden data, such as a password.

Development

Web component development

Component reference

rui-caps-lock-warning

Implementation

Begin by importing the rui-notifications module into your application.

/ import into app.module
import '@jkhy/responsive-ui-wc/components/rui-notifications/rui-notifications-imports';

Add a rui-caps-lock-warning component in an appropriate location in any view that prompts for a password. It displays an inline error notification whenever the user types while Caps Lock is on. Otherwise it is hidden.

<rui-caps-lock-warning></rui-caps-lock-warning>

Angular wrapper development

Wrapper reference

jha-caps-lock-warning

Implementation

Begin by importing the rui-notifications module into your application.

// import into app.module
import { JhaNotificationsModule } from '@jkhy/responsive-ui-angular/jha-notifications';

@NgModule({
    imports: [
        ...
        JhaNotificationsModule,
        ...
    ]
})

export class AppModule(){}

Add a jha-caps-lock-warning component in an appropriate location in any view that prompts for a password. It displays an inline error notification whenever the user types while Caps Lock is on. Otherwise it is hidden.

<jha-caps-lock-warning></jha-caps-lock-warning>

Design

To display a caps lock warning in your design docs:

• Add an inline notification to your design.
• Set the notification’s type to “Error”.
• Change the notification text to “Caps lock is on”.