Create Email Verification Success Page

[yusuftomilola]

Description

Build a success page shown after user clicks email verification link, confirming their email is verified.

Requirements

Page Route: /verify-email?token=<token>

UI States:

Loading State (while verifying):

• Loading spinner
• Message: "Verifying your email..."

Success State:

• Success icon (checkmark in circle)
• Title: "Email Verified!"
• Message: "Your email has been successfully verified"
• User's email address displayed
• "Continue to Dashboard" button (if logged in)
• "Go to Login" button (if not logged in)
• Countdown timer: "Redirecting in 5 seconds..."

Error State:

• Error icon (X in circle)
• Title: "Verification Failed"
• Error message (token expired, invalid, or already used)
• "Resend Verification Email" button
• "Go to Login" link

Already Verified State:

• Info icon
• Title: "Already Verified"
• Message: "This email is already verified"
• "Go to Dashboard" or "Go to Login" button

Token Verification Flow

1. Extract token from URL on page load
2. Call verification API immediately
3. Show loading state during API call
4. Handle response (success/error/already verified)
5. Display appropriate state
6. Auto-redirect after 5 seconds

Technical Specifications

• Use useEffect to trigger verification on mount
• Extract token from URL query params
• Call API: POST /api/v1/auth/verify-email
• Use countdown hook for auto-redirect
• Use Tailwind CSS for styling
• Add success/error animations (optional: framer-motion)
• Handle case when token is missing

Acceptance Criteria

• Auto-verifies on page load
• Loading state shows during verification
• Success state displays after verification
• Error states show appropriate messages
• Resend email button works
• Auto-redirect countdown works
• Manual redirect buttons work
• Page handles missing token gracefully
• Page is responsive on all devices

---

Shared Design Guidelines

Color Scheme:

• Success: Green (#10b981)
• Error: Red (#ef4444)
• Info: Blue (#3b82f6)
• Primary: Emerald (#10b981)

Typography:

• Titles: 2xl font, bold
• Messages: base font, regular
• Links: Primary color with underline on hover

Spacing:

• Center content vertically and horizontally
• Max width: 450px for forms
• Consistent padding: 24px

Animations:

• Fade in on page load
• Button hover effects
• Loading spinner rotation
• Success icon scale animation

Accessibility:

• ARIA labels on all inputs
• Focus states on interactive elements
• Keyboard navigation support
• Screen reader friendly messages

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 150 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[AbdulmujibOladayo]

@AbdulmujibOladayo has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I would love to work on this issue. I can deliver in under 24 hrs.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @AbdulmujibOladayo to this issue.

[AbdulmujibOladayo]

@AbdulmujibOladayo has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I would love to work on this issue. I can deliver in under 24 hrs.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @AbdulmujibOladayo to this issue.

[AbdulmujibOladayo]

@AbdulmujibOladayo has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I would love to work on this issue. I can deliver in under 24 hrs.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @AbdulmujibOladayo to this issue.

[drips-wave]

Congratulations, @AbdulmujibOladayo! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on January 31, 2026.

🧑‍💻 @AbdulmujibOladayo: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are issued when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @AbdulmujibOladayo as part of the Stellar Wave Program's 1st Wave 🥳

😎 @AbdulmujibOladayo: You earned 150 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here.

🧑‍💻 Repo maintainers: How'd the contributor do? If you like, you can reward them with additional points by making a compliment within seven days after the Wave Program's current wave ends.

[drips-wave]

@AbdulmujibOladayo received 3 compliments:

• Fast & Easy: +50 points
• High-Quality Code: +50 points
• Problem Solver: +50 points