303a558432
3,200+ hardcoded color values replaced with CSS variable-backed Tailwind classes (bg-card, text-foreground, border-border, etc.). Enables light mode via CSS variable swap. Only syntax highlighting colors and intentional one-offs remain hardcoded (~15 values). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
76 lines
2.8 KiB
TypeScript
76 lines
2.8 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { useSearchParams, Link } from 'react-router-dom'
|
|
import { CheckCircle2, XCircle, Loader2 } from 'lucide-react'
|
|
import { authApi } from '@/api/auth'
|
|
import { PageMeta } from '@/components/common/PageMeta'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export function VerifyEmailPage() {
|
|
const [searchParams] = useSearchParams()
|
|
const token = searchParams.get('token')
|
|
const [status, setStatus] = useState<'loading' | 'success' | 'error'>(token ? 'loading' : 'error')
|
|
const [errorMessage, setErrorMessage] = useState(token ? '' : 'No verification token provided')
|
|
|
|
useEffect(() => {
|
|
if (!token) return
|
|
|
|
authApi.verifyEmail(token)
|
|
.then(() => setStatus('success'))
|
|
.catch((err) => {
|
|
setStatus('error')
|
|
const detail = (err as { response?: { data?: { detail?: string } } }).response?.data?.detail
|
|
setErrorMessage(detail ?? 'Verification failed')
|
|
})
|
|
}, [token])
|
|
|
|
return (
|
|
<>
|
|
<PageMeta title="Verify Email" description="Verify your ResolutionFlow email address" />
|
|
<div className="flex min-h-screen items-center justify-center bg-background p-4">
|
|
<div className="card-flat w-full max-w-md p-8 text-center">
|
|
{status === 'loading' && (
|
|
<>
|
|
<Loader2 className="mx-auto h-12 w-12 animate-spin text-primary" />
|
|
<p className="mt-4 text-foreground">Verifying your email...</p>
|
|
</>
|
|
)}
|
|
{status === 'success' && (
|
|
<>
|
|
<CheckCircle2 className="mx-auto h-12 w-12 text-emerald-400" />
|
|
<h1 className="mt-4 text-xl font-bold font-heading text-foreground">Email Verified</h1>
|
|
<p className="mt-2 text-muted-foreground">Your email has been successfully verified.</p>
|
|
<Link
|
|
to="/"
|
|
className={cn(
|
|
'mt-6 inline-flex items-center rounded-lg bg-primary px-6 py-2 text-sm font-semibold text-white',
|
|
'hover:brightness-110'
|
|
)}
|
|
>
|
|
Go to Dashboard
|
|
</Link>
|
|
</>
|
|
)}
|
|
{status === 'error' && (
|
|
<>
|
|
<XCircle className="mx-auto h-12 w-12 text-rose-500" />
|
|
<h1 className="mt-4 text-xl font-bold font-heading text-foreground">Verification Failed</h1>
|
|
<p className="mt-2 text-muted-foreground">{errorMessage}</p>
|
|
<Link
|
|
to="/"
|
|
className={cn(
|
|
'mt-6 inline-flex items-center rounded-lg bg-input border border-border px-6 py-2 text-sm font-medium text-foreground',
|
|
'hover:border-border-hover'
|
|
)}
|
|
>
|
|
Go to Dashboard
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default VerifyEmailPage
|