FRONTEND UI: Design a Responsive Forgot Password Page

[yusuftomilola]

We need contributors to build a responsive, reusable, and modern Forgot Password Page that closely matches the provided design reference (90%+ accuracy required). This page should handle both the initial form state and the success confirmation state while maintaining the project’s design and UX consistency.

The implementation should use React Hook Form with Zod validation and follow best practices in TypeScript typing, reusability, and design fidelity.

🎯 Requirements

• Use React Hook Form for form handling.

• Use Zod for validation.

• Reuse the existing Email input and Button components from the components folder.

• Create any additional inputs as reusable components with validation.

• Two-State UI:

  • Initial State → Email input form for password reset.
  • Success State → Confirmation message with entered email and a resend option.

• Add a footer with links (Privacy, Terms, Support).

• Follow the design reference for layout, typography, and colors.

---

✨ Smart Features

• Email validation with real-time feedback and clear error messages.
• Loading state: Animated spinner while submitting.
• Resend cooldown: 60-second timer to prevent spam, with countdown display.
• Back to Login: Link/button for quick navigation back to sign-in page.

---

🧑‍💻 User Experience Guidelines

• Clean and focused layout with minimal distractions.

• Large and clear CTAs.

• Success state includes:

  • Green checkmark icon (Lucide React).
  • Informative confirmation message.

• Supportive UX elements:

  • Info box about checking the spam folder.
  • Support email contact for additional help.

• Visual feedback for all states: loading, success, and error.

• Resend button should be disabled during cooldown.

---

🎨 Visual Consistency

• Primary Blue (#2563EB) → For CTAs and branding.
• Gray variations → For text hierarchy.
• Card-style design with shadows + rounded corners.
• Lucide React for all icons.
• Matching input styling, typography, and spacing across auth pages.

---

🔹 Professional Touches

• Smooth transitions between form states.
• Proper error handling and validation.
• Accessible form labels and focus states.
• Fully responsive design across devices.
• Clear visual hierarchy for headings, labels, and instructions.

---

✅ Acceptance Criteria

• Forgot Password Page implemented with two functional UI states.
• Email input form with validation and feedback.
• Success confirmation with resend option + cooldown.
• Footer with Privacy, Terms, and Support links.
• Responsiveness validated across breakpoints.
• Proper hover, focus, and disabled states applied.
• No extra dependencies unless absolutely necessary.

---

🎥 Contributor Deliverables

• Submit a short video demo (screen recording, Loom, etc.) in your PR showcasing:

  • Responsiveness
  • State transitions (Initial → Success)
  • Loading, error, and success feedback
  • Resend cooldown behavior

---

Kindly Join the telegram group below if you haven't to ensure effective communication.

Telegram Group: https://t.me/managehubOD

[Rasheedatj]

I am already a contributor to this project, so it will be easy for me to scale up this new component. I have experience working with zod library for validation and react-hook-form for form management. Kindly assign this issue to me and I will get it done ASAP

[yusuftomilola]

@Rasheedatj Though right now the endpoint has not yet been created so you doing the design and what is in the issue description.

Kindly ensure you follow the instructions, the design is as it is in the image and implement requirements otherwise your pr will be closed and you will unassigned.

Is that okay by you?

[Rasheedatj]

Got it!

That's okay by me.

[Rasheedatj]

Hey @yusuftomilola kindly check out my PR here #288
Pls let me know if you have any feedback. Thanks!