77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useSearchParams, useNavigate } from 'react-router-dom';
|
|
import { Loader2, CheckCircle, XCircle } from 'lucide-react';
|
|
import { api } from '../lib/api';
|
|
|
|
export default function Activate() {
|
|
const [searchParams] = useSearchParams();
|
|
const navigate = useNavigate();
|
|
const token = searchParams.get('token');
|
|
|
|
const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
|
|
const [message, setMessage] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (!token) {
|
|
setStatus('error');
|
|
setMessage('Invalid or missing activation token.');
|
|
return;
|
|
}
|
|
|
|
const activateAccount = async () => {
|
|
try {
|
|
await api.activateUser(token);
|
|
setStatus('success');
|
|
setMessage('Your account has been successfully activated!');
|
|
} catch (error: any) {
|
|
setStatus('error');
|
|
setMessage(error.message || 'Failed to activate account.');
|
|
}
|
|
};
|
|
|
|
activateAccount();
|
|
}, [token]);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-zinc-950 flex flex-col items-center justify-center p-4">
|
|
<div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-8 max-w-md w-full text-center shadow-2xl">
|
|
{status === 'loading' && (
|
|
<div className="flex flex-col items-center">
|
|
<Loader2 className="w-12 h-12 text-primary animate-spin mb-4" />
|
|
<h2 className="text-xl font-bold text-white mb-2">Activating Account...</h2>
|
|
<p className="text-zinc-400">Please wait while we verify your token.</p>
|
|
</div>
|
|
)}
|
|
|
|
{status === 'success' && (
|
|
<div className="flex flex-col items-center">
|
|
<CheckCircle className="w-12 h-12 text-green-500 mb-4" />
|
|
<h2 className="text-xl font-bold text-white mb-2">Success!</h2>
|
|
<p className="text-zinc-400 mb-6">{message}</p>
|
|
<button
|
|
onClick={() => navigate('/')}
|
|
className="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-xl transition-colors"
|
|
>
|
|
Go to Login
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{status === 'error' && (
|
|
<div className="flex flex-col items-center">
|
|
<XCircle className="w-12 h-12 text-red-500 mb-4" />
|
|
<h2 className="text-xl font-bold text-white mb-2">Activation Failed</h2>
|
|
<p className="text-zinc-400 mb-6">{message}</p>
|
|
<button
|
|
onClick={() => navigate('/')}
|
|
className="bg-zinc-800 hover:bg-zinc-700 text-white font-medium py-2 px-6 rounded-xl transition-colors"
|
|
>
|
|
Return Home
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|