Forgot Password Page Requirements (UI/UX)

[BrayanMQ]

Overview

As part of the authentication flow, users need a way to recover their password if they forget it. This issue covers the design and user interface requirements for the "Forgot Password" page.

Objectives

• Create a user-friendly interface for requesting a password reset link.
• Maintain design consistency with the existing Login and Sign Up pages.
• Provide clear feedback to the user throughout the process.

UI Requirements

1. Page Layout

• URL Path: /auth/forgot-password
• Component: Use the Card component from the UI library (consistent with LoginPage).
• Header:
  • Title: "Forgot Password" or "Reset Password".
  • Description: "Enter your email address and we'll send you a link to reset your password."
• Branding: Include the "Streaky" logo/branding at the top of the card.

2. Form Fields

• Email Input:
  • Label: "Email Address"
  • Placeholder: "you@example.com"
  • Validation: Required, must be a valid email format.
• Submit Button:
  • Label: "Send Reset Link"
  • Loading State: Show a spinner and disable button while processing.

3. Feedback & States

• Success State: After submitting, show a success message (e.g., "Check your email for a reset link"). Option to return to the Login page.
• Error State: Display a clear error message if the email is not found or if there's a network issue.
• Navigation: Provide a "Back to Login" link.

i18n Considerations

• All strings must be extracted to the locales files (English and Spanish as current defaults).
• Keys should follow the auth.forgotPassword.* pattern.

Acceptance Criteria

• The page matches the defined design patterns of the application.
• The form validates the email input correctly.
• Responsive design works across mobile and desktop.
• All text is correctly internationalized.