INJIWEB-1683, Count down timer showing the remaining time for the temporary lock to be completed should be displayed.

[sanehema9]

Description

This PR resolves the issue where the countdown message displayed during a temporary wallet lock.

Changes made

Passcodepage.tsx , PasscodepageStyles.tsx ,and language files

Issue ticket number and Link

INJIWEB-1683(https://mosip.atlassian.net/browse/INJIWEB-1683)

Video

INJIWEB-1683.mp4

Summary by CodeRabbit

• New Features
  • Wallet lock timeout messaging now appears when temporarily locked, with a visible countdown showing remaining lockout time.
  • Multilingual support added for the lock timeout message across Arabic, English, French, Hindi, Kannada, Portuguese, and Tamil; message styling improved for clear, prominent display.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Adds a localized "Locked. Try again in" message in seven locales and implements a 1-hour temporary lockout countdown in the PasscodePage UI with state, timer, and display styling.

Changes

Cohort / File(s)	Summary
Localization Messages inji-web/src/locales/ar.json, inji-web/src/locales/en.json, inji-web/src/locales/fr.json, inji-web/src/locales/hi.json, inji-web/src/locales/kn.json, inji-web/src/locales/pt.json, inji-web/src/locales/ta.json	Added PasscodePage.error.lockedTryAgainIn translations across locales (new message prefix for lockout retry timing).
Passcode Component Logic inji-web/src/pages/User/Passcode/PasscodePage.tsx	Added remainingTime state, logic to set 3600s on temporary lock, a useEffect countdown that decrements per second and re-enables unlocking at zero, formatTime() helper, and conditional UI to display remaining lockout time.
Passcode Styling inji-web/src/pages/User/Passcode/PasscodePageStyles.ts	Added lockedMessage style (centered, red, bold) for displaying the lockout countdown message.

Sequence Diagram(s)

(omitted)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• jackjain

Poem

🐰 I hopped in code and found a clock,
Sixty minutes on the ticking dock.
Seven tongues now softly chime,
"Locked—return after a little time." ⏱️

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main change: implementing a countdown timer display for temporary wallet lock duration, which aligns with all file modifications shown in the changeset.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@inji-web/src/locales/hi.json`:
- Line 103: The value for the "lockedTryAgainIn" key in the Hindi locale is
currently French; update the string for the "lockedTryAgainIn" entry in hi.json
to a natural Hindi phrase placed before the appended time value (for example:
"लॉक किया गया। कृपया {time} बाद पुनः प्रयास करें" — validate/adjust with your
localization team), ensuring you only change the value for the
"lockedTryAgainIn" key and keep the placeholder/format used for the time intact.

In `@inji-web/src/pages/User/Passcode/PasscodePage.tsx`:
- Around line 71-77: The countdown effect currently recreates the interval on
every remainingTime change and never re-enables canUnlockWallet when the timer
reaches 0; update the useEffect (the effect that declares timer: NodeJS.Timeout
and calls setRemainingTime) so the interval is created once (use [] or
appropriate refs) and inside the interval callback use the functional updater
for setRemainingTime to compute next = prev>0?prev-1:0 and when next === 0 call
setCanUnlockWallet(true) and clearInterval(timer); ensure the effect cleanup
still clears the timer to avoid leaks.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud