Hum Rahi

User Story 8 (FE): Session Expiry Notification Screen¶

Story: As a Returning Citizen with an expired session, I want to be notified why I was logged out, so that I understand it was a security measure and can easily re-authenticate.

• In-Scope:
  • Responsive "Session Expired" landing page as per the provided HTML.
  • Informational card reassuring the user that "safety settings remain saved."
  • "Log In Again" button directing to the Mobile/OTP entry screen.
  • Help link to "Contact Support."
  • Header with "Security" title and back navigation.
• Out-of-Scope: The backend logic that invalidates the token (this is handled in the middleware/BE US-003).

Acceptance Criteria (AC):¶

1. Trigger Logic: This screen must appear automatically if the frontend detects a 401 Unauthorized response where the refresh token has also expired (beyond the 30-day window).
2. Visual Branding: Use the lock_clock Material Symbol with the pulse-glow effect (primary/10 blur) as shown in the wireframe.
3. Data Reassurance: The secondary info card must explicitly mention that "emergency contacts remain securely saved" to reduce user anxiety about data loss.
4. Action Persistence: Clicking "Log In Again" must clear any stale local session data before redirecting to the login flow to ensure a clean start.
5. Navigation: The "Back" arrow in the header should lead back to the public-facing landing page or the login screen.

Validation Rules:¶

• Accessibility: The lock_clock icon must have an aria-hidden="true" or a descriptive label for screen readers.
• Visual Hierarchy: The "Log In Again" button must be the primary call to action (CTA) with the shadow-primary/20 styling.

Error Messages:¶

• Redirection Failure: "Something went wrong. Redirecting you to the home page..." (if the login route is unreachable).

Definition of Done (DoD):¶

• UI implementation matches the HTML wireframe exactly (Tailwind classes, font weights, and spacing).
• Verified that the screen is not bypassable via the "Back" button once the session is officially dead.
• Verified transition performance (active:scale-[0.98]) on the "Log In Again" button.
• Mobile responsiveness checked for various screen heights (min-h-screen).