front/src/components/VerifyEmail.jsx - main - TimurIsm/OpenEyes

front/src/components/VerifyEmail.jsx
118 строк4 KB
TimurIsm
first_commit
16 май 2026, 15:34
16 май 2026, 15:344d3f198
import React, { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { verifyEmail } from '../http/userAPI';
import { PATHS } from '../route/RoutesConsts';

const VerifyEmail = () => {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  
  const [status, setStatus] = useState('loading');
  const [message, setMessage] = useState('');

  useEffect(() => {
    const token = searchParams.get('token');
    const userId = searchParams.get('userId');

    if (!token || !userId) {
      setStatus('error');
      setMessage('Неверная ссылка подтверждения!');
      return;
    }

    const verify = async () => {
      try {
        const response = await verifyEmail(token, userId);
        
        if (response.success) {
          setStatus('success');
          setMessage('Email успешно подтвержден! Вы будете перенаправлены на страницу авторизации.');
          if (response.token) {
            localStorage.setItem('token', response.token);
          }
          
          setTimeout(() => {
            navigate(PATHS.HOME);
          }, 5000);
        } else {
          setStatus('error');
          setMessage(response.message || 'Ошибка подтверждения!');
        }
      } catch (error) {
        setStatus('error');
        setMessage(error.message || 'Ошибка подтверждения email!');
      }
    };

    verify();
  }, [searchParams, navigate]);

  if (status === 'loading') {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-4 text-gray-600">Подтверждение email...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8">        
        <div className="bg-white py-8 px-4 shadow-lg sm:rounded-lg sm:px-10">
          <div className="text-center">
            {status === 'success' ? (
              <div className="text-green-600 mb-4">
                <svg className="h-16 w-16 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <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>
            ) : (
              <div className="text-red-600 mb-4">
                <svg className="h-16 w-16 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
            )}
            
            <p className={`text-lg mb-6 ${status === 'success' ? 'text-green-700' : 'text-red-700'}`}>
              {message}
            </p>
            
            {status === 'success' && (
              <p className="text-gray-600 text-sm">
                Автоматическое перенаправление через 5 секунд...
              </p>
            )}
            
            <div className="mt-6">
              <button
                onClick={() => navigate(PATHS.LOGIN)}
                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium 
                text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
              >
                Перейти к входу
              </button>
            </div>
            
            {status === 'error' && (
              <div className="mt-4">
                <button
                  onClick={() => navigate(PATHS.REGISTRATION)}
                  className="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium 
                  text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                >
                  Зарегистрироваться снова
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default VerifyEmail;