VerifyEmail.jsx

Go to the documentation of this file.

import { useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import PublicLayout from '../components/Layout/PublicLayout';
import { apiFetch } from '../lib/api';
 
export default function VerifyEmail() {
  const [params] = useSearchParams();
  const token = params.get('token') || '';
  const [status, setStatus] = useState('idle'); // idle | ok | error
  const [message, setMessage] = useState('');
 
  async function handleVerify() {
    setStatus('loading');
    try {
  const res = await apiFetch('/users/verify-email', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ token })
      });
      const data = await res.json().catch(()=>({}));
      if (!res.ok) throw new Error(data.error || 'Verification failed');
      setStatus('ok');
      setMessage('Email verified successfully. You can close this page.');
    } catch (err) {
      setStatus('error');
      setMessage(err.message || 'Failed to verify');
    }
  }
 
  return (
    <PublicLayout>
      <div style={{ maxWidth: 600, margin: '3rem auto', padding: '2rem', background: '#fff', borderRadius: 12, boxShadow: '0 8px 24px rgba(0,0,0,0.08)' }}>
        <h1>Verify Email</h1>
        {status === 'idle' && (
          <div>
            <p>Click the button below to verify your email address.</p>
            <button onClick={handleVerify}>Verify</button>
          </div>
        )}
        {status === 'loading' && <p>Verifying…</p>}
        {status !== 'idle' && <p>{message}</p>}
      </div>
    </PublicLayout>
  );
}