WEB-fix-login-capslock: Add Caps Lock warning to login password field#3553
Open
Abhishekmaurya12367 wants to merge 4 commits intoopenMF:devfrom
Open
WEB-fix-login-capslock: Add Caps Lock warning to login password field#3553Abhishekmaurya12367 wants to merge 4 commits intoopenMF:devfrom
Abhishekmaurya12367 wants to merge 4 commits intoopenMF:devfrom
Conversation
|
Warning Rate limit exceeded
To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (12)
Note
|
| Layer / File(s) | Summary |
|---|---|
Data / State src/app/login/login-form/login-form.component.ts |
Adds isCapsLockOn: boolean field (initialized false). |
Core Logic src/app/login/login-form/login-form.component.ts |
Adds checkCapsLock(event: any) which sets isCapsLockOn using event.getModifierState('CapsLock') for KeyboardEvent/MouseEvent. |
Template Integration src/app/login/login-form/login-form.component.html |
Password <input> now calls checkCapsLock($event) on keydown, keyup, focus, click, resets on blur; conditional warning icon with translated tooltip and accessibility attributes rendered when isCapsLockOn is true. |
Styling src/app/login/login-form/login-form.component.scss |
Adds .caps-lock-warning CSS (neutral text color, margin-right:8px, cursor:help, opacity:0.8); removes leading BOM/hidden char. |
Internationalization src/assets/translations/* |
Adds commons["Caps Lock is on"] to multiple locale files (en-US, cs-CS, de-DE, es-CL, es-MX, fr-FR, it-IT, ko-KO, lt-LT, lv-LV, ne-NE, pt-PT, sw-SW). Several locale files also adjust/move/update View/Edit Loan Originator translations and remove duplicate entries. |
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
- MX-811: Spanish translation #3253 — touches es-MX translation and loan-originator translation entries (overlapping locale file changes).
- WEB-433-fix:the login form icon overlap #2814 — modifies password-field/icon rendering in the same login form template (related UI area).
Suggested reviewers
- alberto-art3ch
- IOhacker
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title accurately and specifically describes the main change: adding a Caps Lock warning to the login password field, which is the core feature implemented across all modified files. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
| Linked Issues check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
| Out of Scope Changes check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing Touches
🧪 Generate unit tests (beta)
- Create PR with unit tests
Tip
💬 Introducing Slack Agent: Turn conversations into code.
Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
- Generate code and open pull requests
- Plan features and break down work
- Investigate incidents and troubleshoot customer tickets together
- Automate recurring tasks and respond to alerts with triggers
- Summarize progress and report instantly
Built for teams:
- Shared memory across your entire org—no repeating context
- Per-thread sandboxes to safely plan and execute work
- Governance built-in—scoped access, auditability, and budget controls
One agent for your entire SDLC. Right inside Slack.
👉 Get your free trial and get 200 agent minutes per Slack user (a $50 value).
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Review rate limit: 0/1 reviews remaining, refill in 35 minutes and 33 seconds.Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/assets/translations/en-US.json (1)
1071-1071: 🏗️ Heavy liftBackfill this new i18n key across supported locale files.
Line 1071 adds the key only in
en-US. If other locale JSON files don’t containlabels.commons.Caps Lock is on, users can see the raw key string in the tooltip instead of localized text.As per coding guidelines: “Run
npm run translations:extractto extract i18n variables whenever new strings are added to code.”🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/assets/translations/en-US.json` at line 1071, The new i18n key labels.commons."Caps Lock is on" was added only to en-US and must be added to all supported locale JSONs: open each locale file (e.g., the other translations JSONs under assets/translations), add the same key path labels.commons."Caps Lock is on" with an appropriate translated value (or a temporary placeholder if unsure), save, then run npm run translations:extract to ensure extraction/consistency across locales and commit the updated locale files; verify the tooltip now uses the localized string instead of the raw key.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/login/login-form/login-form.component.html`:
- Around line 41-52: The Caps Lock warning currently only toggles during key
events via the checkCapsLock($event) handler and is presented as a tooltip on
the suffix icon, which can leave a stale visible state after blur and won’t be
reliably announced to assistive tech; update the component so checkCapsLock also
runs on focus/blur (or create explicit handlers like
onPasswordFocus/onPasswordBlur) to clear or re-evaluate isCapsLockOn, always
render the caps-lock-warning element (do not rely solely on tooltip) and add an
aria-live="polite" text node bound to isCapsLockOn so screen readers get an
immediate announcement when isCapsLockOn changes; ensure the template references
the same isCapsLockOn property and the icon element (the element with class
"caps-lock-warning" and name="keyboard_capslock") for consistency.
---
Nitpick comments:
In `@src/assets/translations/en-US.json`:
- Line 1071: The new i18n key labels.commons."Caps Lock is on" was added only to
en-US and must be added to all supported locale JSONs: open each locale file
(e.g., the other translations JSONs under assets/translations), add the same key
path labels.commons."Caps Lock is on" with an appropriate translated value (or a
temporary placeholder if unsure), save, then run npm run translations:extract to
ensure extraction/consistency across locales and commit the updated locale
files; verify the tooltip now uses the localized string instead of the raw key.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 1c59096e-934e-46d8-bc3c-6bd4f4898cfd
📒 Files selected for processing (4)
src/app/login/login-form/login-form.component.htmlsrc/app/login/login-form/login-form.component.scsssrc/app/login/login-form/login-form.component.tssrc/assets/translations/en-US.json
Abhishekmaurya12367
changed the title
Abhishekmaurya12367
changed the title
Abhishekmaurya12367
changed the title
Author
|
Hi @alberto-art3ch, please review this small UI enhancement. |
IOhacker
requested changes
May 2, 2026
Contributor
IOhacker
left a comment
IOhacker
left a comment
There was a problem hiding this comment.
Missing i18n file translation, what if the password has uppercase?
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/assets/translations/cs-CS.json`:
- Line 1089: Update the Czech translation for the tooltip key "Caps Lock is on"
in the cs-CS.json locale file: replace the English value with the Czech text
(e.g., "Caps Lock je zapnutý" or another approved Czech variant) so the JSON
entry for the "Caps Lock is on" key is fully localized; ensure the JSON remains
valid (keep the same key string and only change the value).
In `@src/assets/translations/de-DE.json`:
- Line 1090: The German translation for the key "Caps Lock is on" is still in
English; update the de-DE.json entry for the string key "Caps Lock is on" to a
proper German localization (e.g., "Feststelltaste ist aktiviert" or
"Feststelltaste ist eingeschaltet") so the de-DE locale is consistent with other
translations.
In `@src/assets/translations/es-MX.json`:
- Around line 1089-1090: Replace the English string value for the "Caps Lock is
on" key in the es-MX translations with a proper Spanish translation; update the
JSON entry for the key "Caps Lock is on" (currently "Caps Lock is on") to a
Spanish phrase such as "Bloqueo de mayúsculas activado" so the Spanish locale
contains no mixed-language UI.
In `@src/assets/translations/fr-FR.json`:
- Around line 1090-1091: Update the French translation for the string key "Caps
Lock is on" in the fr-FR translations bundle: replace the English value with a
proper French message (e.g., "Verr. Maj. activée") so the entry becomes "Caps
Lock is on": "Verr. Maj. activée" ensuring the JSON value remains a quoted
string and valid JSON.
In `@src/assets/translations/lt-LT.json`:
- Line 1087: Replace the English value for the key "Caps Lock is on" in the
lt-LT.json locale entry with the Lithuanian translation; update the value for
the key "Caps Lock is on" to a proper Lithuanian string (e.g., "Caps Lock
įjungtas" or "Caps Lock yra įjungtas"), preserving the JSON quoting/formatting
and escaping rules so the file remains valid JSON.
In `@src/assets/translations/lv-LV.json`:
- Line 1088: The JSON entry with the key "Caps Lock is on" currently has an
English value; update the value to the Latvian translation ("Caps Lock ir
ieslēgts") so the entry reads "Caps Lock is on": "Caps Lock ir ieslēgts" —
locate the entry by the exact key "Caps Lock is on" in the lv-LV locale JSON and
replace the English string with the Latvian one, preserving JSON syntax and
quotes.
In `@src/assets/translations/ne-NE.json`:
- Line 1087: The JSON entry for the key "Caps Lock is on" in the ne-NE
translations bundle currently has an English value; replace that value with the
Nepali translation (for example: "क्याप्स लक सुचारू छ" or your approved Nepali
phrasing) while preserving the existing JSON key and quoting/escaping rules so
the line remains valid JSON for the "Caps Lock is on" property.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 47529ea9-91e4-4136-b7f2-78de84ff1fb6
📒 Files selected for processing (15)
src/app/login/login-form/login-form.component.htmlsrc/app/login/login-form/login-form.component.scsssrc/app/login/login-form/login-form.component.tssrc/assets/translations/cs-CS.jsonsrc/assets/translations/de-DE.jsonsrc/assets/translations/es-CL.jsonsrc/assets/translations/es-MX.jsonsrc/assets/translations/fr-FR.jsonsrc/assets/translations/it-IT.jsonsrc/assets/translations/ko-KO.jsonsrc/assets/translations/lt-LT.jsonsrc/assets/translations/lv-LV.jsonsrc/assets/translations/ne-NE.jsonsrc/assets/translations/pt-PT.jsonsrc/assets/translations/sw-SW.json
✅ Files skipped from review due to trivial changes (5)
- src/assets/translations/sw-SW.json
- src/assets/translations/ko-KO.json
- src/assets/translations/it-IT.json
- src/assets/translations/pt-PT.json
- src/assets/translations/es-CL.json
🚧 Files skipped from review as they are similar to previous changes (2)
- src/app/login/login-form/login-form.component.html
- src/app/login/login-form/login-form.component.scss
Author
|
Hi @IOhacker, |
Contributor
|
Join the Mifos Slack Channel https://app.slack.com/client/T0F5GHE8Y/CJJGJLN10 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR adds a visual warning to the password field when Caps Lock is enabled. This improves user experience by preventing failed login attempts due to case-sensitivity.
Changes
isCapsLockOnstate toLoginFormComponent.checkCapsLockmethod usingKeyboardEvent.getModifierState('CapsLock').login-form.component.htmlto display akeyboard_capslockicon with a tooltip when active.Checklist
ng lintpasses.Summary by CodeRabbit
New Features
Translations