123 lines
4.9 KiB
TypeScript
123 lines
4.9 KiB
TypeScript
'use client';
|
|
|
|
import { Suspense, useEffect, useState } from 'react';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import { authService, AuthService } from '@/services/auth.service';
|
|
|
|
function VerifyEmailContent() {
|
|
const searchParams = useSearchParams();
|
|
const token = searchParams.get('token');
|
|
|
|
const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
|
|
const [message, setMessage] = useState('');
|
|
|
|
useEffect(() => {
|
|
const verifyEmail = async () => {
|
|
if (!token) {
|
|
setStatus('error');
|
|
setMessage('Invalid verification link. No token provided.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await authService.verifyEmail({ token });
|
|
setStatus('success');
|
|
setMessage(response.data?.message || 'Your email has been verified successfully!');
|
|
} catch (error) {
|
|
setStatus('error');
|
|
const errorMsg = AuthService.getErrorMessage(error);
|
|
setMessage(errorMsg || 'Email verification failed. The link may have expired or is invalid.');
|
|
}
|
|
};
|
|
|
|
verifyEmail();
|
|
}, [token]);
|
|
|
|
return (
|
|
<div className="bg-white rounded-[20px] p-8 shadow-sm">
|
|
{status === 'loading' && (
|
|
<div className="text-center">
|
|
<div className="mb-6">
|
|
<svg className="w-16 h-16 mx-auto text-[#5ba4a4] animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-[24px] font-normal text-[#00293d] mb-3">Verifying Your Email</h2>
|
|
<p className="text-sm text-[#00293d]/70">Please wait while we verify your email address...</p>
|
|
</div>
|
|
)}
|
|
|
|
{status === 'success' && (
|
|
<div className="text-center">
|
|
<div className="mb-6">
|
|
<svg className="w-16 h-16 mx-auto text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-[24px] font-normal text-[#00293d] mb-3">Email Verified!</h2>
|
|
<p className="text-sm text-[#00293d]/70 mb-6">{message}</p>
|
|
<Link
|
|
href="/login"
|
|
className="inline-block w-full py-4 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-sm rounded-[20px] transition-colors text-center"
|
|
>
|
|
Continue to Login
|
|
</Link>
|
|
</div>
|
|
)}
|
|
|
|
{status === 'error' && (
|
|
<div className="text-center">
|
|
<div className="mb-6">
|
|
<svg className="w-16 h-16 mx-auto text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-[24px] font-normal text-[#00293d] mb-3">Verification Failed</h2>
|
|
<p className="text-sm text-[#00293d]/70 mb-6">{message}</p>
|
|
<div className="space-y-3">
|
|
<Link
|
|
href="/login"
|
|
className="inline-block w-full py-4 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-sm rounded-[20px] transition-colors text-center"
|
|
>
|
|
Go to Login
|
|
</Link>
|
|
<Link
|
|
href="/signup"
|
|
className="inline-block w-full py-4 bg-[#f0f5fc] hover:bg-[#e0e8f0] text-[#00293d] font-bold text-sm rounded-[20px] transition-colors text-center"
|
|
>
|
|
Sign Up Again
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function LoadingFallback() {
|
|
return (
|
|
<div className="bg-white rounded-[20px] p-8 shadow-sm">
|
|
<div className="text-center">
|
|
<div className="mb-6">
|
|
<svg className="w-16 h-16 mx-auto text-[#5ba4a4] animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-[24px] font-normal text-[#00293d] mb-3">Loading...</h2>
|
|
<p className="text-sm text-[#00293d]/70">Please wait...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function VerifyEmailPage() {
|
|
return (
|
|
<Suspense fallback={<LoadingFallback />}>
|
|
<VerifyEmailContent />
|
|
</Suspense>
|
|
);
|
|
}
|