WEB-fix-login-capslock: Add Caps Lock warning to login password field

src/app/login/login-form/login-form.component.html

@@ -38,8 +38,18 @@
           formControlName="password"
           [placeholder]="'labels.placeholders.Enter your password' | translate"
           (keyup.enter)="onEnter($event)"
+          (keydown)="checkCapsLock($event)"
+          (keyup)="checkCapsLock($event)"
         />
         <mifosx-m3-icon matIconPrefix name="lock"></mifosx-m3-icon>
+        @if (isCapsLockOn) {
+          <mifosx-m3-icon
+            matSuffix
+            name="keyboard_capslock"
+            [matTooltip]="'labels.commons.Caps Lock is on' | translate"
+            class="caps-lock-warning"
+          ></mifosx-m3-icon>
+        }
         @if (loginForm.controls.password.value && !loading) {
           <button
             type="button"

src/app/login/login-form/login-form.component.scss

@@ -1,4 +1,4 @@
-/**
+/**
  * Copyright since 2025 Mifos Initiative
  *
  * This Source Code Form is subject to the terms of the Mozilla Public
@@ -184,6 +184,12 @@
   }
 }
 
+.caps-lock-warning {
+  color: var(--md-sys-color-error, #ba1a1a);
+  margin-right: 8px;
+  cursor: help;
+}
+
 // ===== Loading Progress =====
 .login-progress {
   height: 3px;

src/app/login/login-form/login-form.component.ts

@@ -57,6 +57,8 @@ export class LoginFormComponent implements OnInit {
   oauthEnabled = environment.OIDC.oidcServerEnabled || environment.oauth.enabled;
   /** Whether remember me functionality is enabled */
   enableRememberMe = environment.enableRememberMe === true;
+  /** True if Caps Lock is on. */
+  isCapsLockOn = false;
 
   /**
    * Creates login form.
@@ -159,4 +161,12 @@ export class LoginFormComponent implements OnInit {
   onEnter(event: any): void {
     this.login();
   }
+
+  /**
+   * Checks the state of the Caps Lock key.
+   * @param {KeyboardEvent} event - Keyboard event.
+   */
+  checkCapsLock(event: KeyboardEvent) {
+    this.isCapsLockOn = event.getModifierState('CapsLock');
+  }
 }

src/assets/translations/en-US.json

@@ -1068,6 +1068,7 @@
       "Is": "is",
       "is required": "is required",
       "pass is required": "is required (min length {{min}})",
+      "Caps Lock is on": "Caps Lock is on",
       "least one uppercase": "least one uppercase",
       "lowercase and special character": "lowercase and special character",
       "must be": "must be",