dorfteich/apps/web/src/pages/auth/VerifyEmailPage.tsx

import { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Link, useSearchParams } from 'react-router-dom';

import { apiPost } from '../../lib/api';

import { useDocumentTitle } from '../../lib/use-document-title';
type VerifyState = 'pending' | 'success' | 'error';

export function VerifyEmailPage(): React.JSX.Element {
  const { t } = useTranslation();
  useDocumentTitle(t('auth:verify.title'));
  const [params] = useSearchParams();
  const [state, setState] = useState<VerifyState>('pending');
  const [email, setEmail] = useState('');
  const [resent, setResent] = useState(false);

  const token = params.get('token');
  // Tokens are single-use: the effect must fire exactly once per token,
  // also under React StrictMode's double-invocation in development.
  const firedFor = useRef<string | null>(null);

  useEffect(() => {
    if (!token) {
      setState('error');
      return;
    }
    if (firedFor.current === token) return;
    firedFor.current = token;
    apiPost('/auth/verify-email', { token })
      .then(() => setState('success'))
      .catch(() => setState('error'));
  }, [token]);

  if (state === 'pending') {
    return (
      <div className="auth-card">
        <h1>{t('auth:verify.title')}</h1>
      </div>
    );
  }

  if (state === 'success') {
    return (
      <div className="auth-card">
        <h1>{t('auth:verify.success.title')}</h1>
        <p>{t('auth:verify.success.body')}</p>
        <Link className="button" to="/login">
          {t('auth:verify.success.login')}
        </Link>
      </div>
    );
  }

  return (
    <div className="auth-card">
      <h1>{t('auth:verify.error.title')}</h1>
      <p>{t('errors:token_invalid')}</p>
      {resent ? (
        <p className="form-banner form-banner--ok">{t('auth:verify.resent')}</p>
      ) : (
        <form
          onSubmit={(event) => {
            event.preventDefault();
            void apiPost('/auth/resend-verification', { email }).then(() => setResent(true));
          }}
        >
          <p>{t('auth:verify.error.resendPrompt')}</p>
          <label className="field">
            <span className="field__label">{t('auth:forgot.email')}</span>
            <input
              type="email"
              value={email}
              onChange={(event) => setEmail(event.target.value)}
              required
            />
          </label>
          <button type="submit" className="button">
            {t('auth:verify.error.resend')}
          </button>
        </form>
      )}
    </div>
  );
}