fix: verify page prerendering issue

This commit is contained in:
Waleed Latif
2025-02-16 16:25:59 -08:00
parent 472ea89282
commit 715c69d744

View File

@@ -1,12 +1,12 @@
'use client'
import { useEffect, useState } from 'react'
import { Suspense, useEffect, useState } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { client } from '@/lib/auth-client'
export default function VerifyPage() {
function VerifyContent() {
const router = useRouter()
const searchParams = useSearchParams()
const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading')
@@ -28,31 +28,48 @@ export default function VerifyPage() {
.catch(() => setStatus('error'))
}, [searchParams, router])
return (
<Card className="w-full">
<CardHeader>
<CardTitle>
{status === 'loading' && 'Verifying your email...'}
{status === 'success' && 'Email verified!'}
{status === 'error' && 'Verification failed'}
</CardTitle>
<CardDescription>
{status === 'loading' && 'Please wait while we verify your email address.'}
{status === 'success' && 'You will be redirected to the dashboard shortly.'}
{status === 'error' && 'The verification link is invalid or has expired.'}
</CardDescription>
</CardHeader>
<CardContent>
{status === 'error' && (
<Button onClick={() => router.push('/login')} className="w-full">
Back to login
</Button>
)}
</CardContent>
</Card>
)
}
export default function VerifyPage() {
return (
<main className="flex min-h-screen flex-col items-center justify-center bg-gray-50">
<div className="sm:mx-auto sm:w-full sm:max-w-md">
<h1 className="text-2xl font-bold text-center mb-8">Sim Studio</h1>
<Card className="w-full">
<CardHeader>
<CardTitle>
{status === 'loading' && 'Verifying your email...'}
{status === 'success' && 'Email verified!'}
{status === 'error' && 'Verification failed'}
</CardTitle>
<CardDescription>
{status === 'loading' && 'Please wait while we verify your email address.'}
{status === 'success' && 'You will be redirected to the dashboard shortly.'}
{status === 'error' && 'The verification link is invalid or has expired.'}
</CardDescription>
</CardHeader>
<CardContent>
{status === 'error' && (
<Button onClick={() => router.push('/login')} className="w-full">
Back to login
</Button>
)}
</CardContent>
</Card>
<Suspense
fallback={
<Card className="w-full">
<CardHeader>
<CardTitle>Loading...</CardTitle>
<CardDescription>Please wait while we load the verification page.</CardDescription>
</CardHeader>
</Card>
}
>
<VerifyContent />
</Suspense>
</div>
</main>
)