first commit
This commit is contained in:
126
frontend/app/auth/verify-email/page.tsx
Normal file
126
frontend/app/auth/verify-email/page.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
"use client"
|
||||
|
||||
import React, { useEffect, useState, Suspense } from 'react'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Loader2, CheckCircle2, XCircle, AlertCircle } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
|
||||
const VerifyEmailContent = () => {
|
||||
const searchParams = useSearchParams()
|
||||
const token = searchParams.get('token')
|
||||
const [status, setStatus] = useState<'loading' | 'success' | 'error' | 'invalid'>(token ? 'loading' : 'invalid')
|
||||
const [message, setMessage] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
if (!token) {
|
||||
return
|
||||
}
|
||||
|
||||
const verifyEmail = async () => {
|
||||
try {
|
||||
const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080'
|
||||
const response = await fetch(`${apiUrl}/api/v1/auth/verify-email?token=${token}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
// Backend responses might modify status
|
||||
const data = await response.json().catch(() => ({}))
|
||||
|
||||
if (response.ok) {
|
||||
setStatus('success')
|
||||
setMessage(data.message || 'E-posta adresiniz başarıyla doğrulandı.')
|
||||
} else {
|
||||
setStatus('error')
|
||||
setMessage(data.error || data.message || 'Doğrulama işlemi başarısız oldu. Link süresi dolmuş veya geçersiz olabilir.')
|
||||
}
|
||||
} catch {
|
||||
setStatus('error')
|
||||
setMessage('Sunucu ile iletişim kurulurken bir hata oluştu.')
|
||||
}
|
||||
}
|
||||
|
||||
verifyEmail()
|
||||
}, [token])
|
||||
|
||||
return (
|
||||
<Card className="w-full max-w-md shadow-xl">
|
||||
<CardHeader className="space-y-1">
|
||||
<CardTitle className="text-2xl font-bold text-center">E-posta Doğrulama</CardTitle>
|
||||
<CardDescription className="text-center">
|
||||
Hesap aktivasyon durumu
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col items-center justify-center py-6 space-y-4">
|
||||
{status === 'loading' && (
|
||||
<>
|
||||
<Loader2 className="h-16 w-16 animate-spin text-blue-500" />
|
||||
<p className="text-gray-500">Doğrulanıyor, lütfen bekleyin...</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
{status === 'success' && (
|
||||
<>
|
||||
<CheckCircle2 className="h-16 w-16 text-green-500" />
|
||||
<div className="text-center space-y-2">
|
||||
<h3 className="text-xl font-semibold text-green-600">Başarılı!</h3>
|
||||
<p className="text-gray-600">{message}</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{status === 'error' && (
|
||||
<>
|
||||
<XCircle className="h-16 w-16 text-red-500" />
|
||||
<div className="text-center space-y-2">
|
||||
<h3 className="text-xl font-semibold text-red-600">Hata!</h3>
|
||||
<p className="text-gray-600">{message}</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{status === 'invalid' && (
|
||||
<>
|
||||
<AlertCircle className="h-16 w-16 text-amber-500" />
|
||||
<div className="text-center space-y-2">
|
||||
<h3 className="text-xl font-semibold text-amber-600">Geçersiz Bağlantı</h3>
|
||||
<p className="text-gray-600">Doğrulama bağlantısı geçersiz veya eksik.</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
<CardFooter className="justify-center">
|
||||
{status === 'loading' ? (
|
||||
<Button disabled variant="outline" className="w-full">İşlem Sürüyor</Button>
|
||||
) : (
|
||||
<Link href="/auth/login" className="w-full">
|
||||
<Button className="w-full">
|
||||
{status === 'success' ? 'Giriş Yap' : 'Giriş Sayfasına Dön'}
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</CardFooter>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
const VerifyEmailPage = () => {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-gray-100 p-4 dark:bg-gray-900">
|
||||
<Suspense fallback={
|
||||
<div className="flex items-center space-x-2">
|
||||
<Loader2 className="h-6 w-6 animate-spin" />
|
||||
<span>Yükleniyor...</span>
|
||||
</div>
|
||||
}>
|
||||
<VerifyEmailContent />
|
||||
</Suspense>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default VerifyEmailPage
|
||||
Reference in New Issue
Block a user