Hum Rahi

Story: As a Locked-out Citizen, I want to see a clear explanation and a real-time countdown of my lockout status, so that I know exactly when I can safely attempt to log in again.

• In-Scope:
  • Responsive "Account Temporarily Locked" screen as per the provided HTML.
  • Real-time countdown timer (Minutes:Seconds).
  • "Back to Login" navigation logic (disabled or hidden until the timer reaches zero).
  • "Contact Support" trigger.
  • Dark mode support (as defined in the Tailwind config).
• Out-of-Scope: Actual backend lockout logic (covered in US-001); Multi-language translations (unless globally required).

Acceptance Criteria (AC):¶

1. Trigger: The page must be rendered when the API returns a 429 (Too Many Requests) error with a retry_afterpayload.
2. Visuals: Must include the pulse-animating lock icon and the "Ham Rahi Security" branding footer.
3. The Timer: The countdown must update every 1 second and reflect the remaining time from the server-side lockout period.
4. Persistence: If the user refreshes the page, the countdown should resume from the current remaining time (fetched from the server/session).
5. Completion State: Once the timer hits 00:00, the "Back to Login" button should become active or automatically redirect the user to the mobile number input screen.

Validation Rules:¶

• Timer Format: Must always be MM:SS (e.g., 14:59).
• Time Source: The initial lockout duration (e.g., 900 seconds) must be fetched from the backend to prevent users from bypassing the lock by manually changing their system clock.

Error Messages:¶

• Sync Error: "Unable to sync countdown. Refreshing status..." (if the frontend loses sync with the server lockout timestamp).

Definition of Done (DoD):¶

• UI matches the provided HTML/Tailwind wireframe exactly.
• Verified countdown accuracy against a stopwatch.
• Cross-browser testing (Chrome, Safari, Firefox) for CSS animation performance.
• Dark/Light mode toggle verified.