src/components/Auth.tsx - master - aaronair/Test_task_rt_solution

src/components/Auth.tsx
96 строк4 KB
aaronair
Решение
03 июн 2026, 15:04
03 июн 2026, 15:0472ced40
import React, { useState } from 'react';

interface AuthProps {
  onAuthSuccess: (token: string, role: string) => void;
}

export const Auth: React.FC<AuthProps> = ({ onAuthSuccess }) => {
  const [isLogin, setIsLogin] = useState<boolean>(true);
  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [name, setName] = useState<string>('');
  const [error, setError] = useState<string>('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');

    // Используем относительный URL, как заложено в вашем Dockerfile.prod
   // const baseUrl = import.meta.env.VITE_API_BASE_URL || '/api/v1';
   // const url = isLogin ? `${baseUrl}/auth/login` : `${baseUrl}/auth/register`;
    const url = isLogin ? 'http://localhost:3000/api/v1/auth/login' : 'http://localhost:3000/api/v1/auth/register';
    const body = isLogin ? { email, password } : { email, password, name };

    try {
      const res = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
      });

      const textResponse = await res.text();
      let data: any = {};
      if (textResponse) {
        try {
          data = JSON.parse(textResponse);
        } catch {
          data = { error: textResponse };
        }
      }

      if (!res.ok) {
        throw new Error(data.error || `Ошибка сервера (Статус ${res.status})`);
      }

      if (isLogin) {
       console.log("Данные, пришедшие с бэкенда при входе:", data);
  
       const safeToken = data.token || 'test_token';
       const safeRole = data.role || 'user';
       const safeUserId = data.userId; // Считываем userId из ответа сервера

       if (!safeUserId) {
         console.error("КРИТИЧЕСКАЯ ОШИБКА: Бэкенд не прислал поле userId!");
       }

  // Передаем все три параметра в AppLayout
       onAuthSuccess(safeToken, safeRole, safeUserId || 'fallback-id');
       } else {
        // Успешная регистрация
        alert('Регистрация успешна! Теперь войдите в систему.');
        setIsLogin(true);
      }
    } catch (err: any) {
      setError(err.message || 'Ошибка соединения с сервером');
    }
  };

  return (
    <div className="p-6 bg-white rounded-lg max-w-md mx-auto my-10">
      <h2 className="text-2xl font-bold mb-6 text-center text-slate-800">{isLogin ? 'Вход в систему' : 'Регистрация'}</h2>
      {error && <p className="text-red-500 text-sm mb-4 bg-red-50 p-2 rounded">{error}</p>}
      <form onSubmit={handleSubmit} className="space-y-4">
        {!isLogin && (
          <div>
            <label className="block text-sm font-medium text-slate-700">Имя</label>
            <input type="text" value={name} onChange={e => setName(e.target.value)} className="mt-1 block w-full border border-gray-300 p-2 rounded-md shadow-sm" required />
          </div>
        )}
        <div>
          <label className="block text-sm font-medium text-slate-700">Email адрес</label>
          <input type="email" value={email} onChange={e => setEmail(e.target.value)} className="mt-1 block w-full border border-gray-300 p-2 rounded-md shadow-sm" required />
        </div>
        <div>
          <label className="block text-sm font-medium text-slate-700">Пароль</label>
          <input type="password" value={password} onChange={e => setPassword(e.target.value)} className="mt-1 block w-full border border-gray-300 p-2 rounded-md shadow-sm" required />
        </div>
        <button type="submit" className="w-full bg-indigo-600 text-white p-2 rounded-md font-semibold hover:bg-indigo-500">
          {isLogin ? 'Войти' : 'Зарегистрироваться'}
        </button>
      </form>
      <button onClick={() => setIsLogin(!isLogin)} className="w-full mt-4 text-sm text-indigo-600 hover:underline text-center">
        {isLogin ? 'Еще нет аккаунта? Зарегистрироваться' : 'Уже есть аккаунт? Войти'}
      </button>
    </div>
  );
};