src/components/Auth.js - master - Pitonx/MyFinance

src/components/Auth.js
78 строк3 KB
Сергей
v5.0.9 - 9.0.0. Вошедшие изменения см. в CHANGELOG.md
06 май 2026, 12:00
06 май 2026, 12:0058f1ca9
import React, { useState } from 'react';
import { ICONS } from '../config/entities';
import { api } from '../services/api';

export default function Auth({ onLogin, initialError }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(initialError || '');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      const result = await api.auth.login(username.trim(), password);
      console.log('[Auth] login result:', result);
      if (result.success && result.token) {
        // Удаляем только старый невалидный токен, не трогаем остальное
        const oldToken = localStorage.getItem('auth_token');
        if (oldToken && oldToken.startsWith('jwt-')) {
          localStorage.removeItem('auth_token');
        }
        localStorage.setItem('auth_token', result.token);
        console.log('[Auth] token saved:', result.token);
        onLogin(result.user);
      } else if (result.success && !result.token) {
        setError('Сервер не вернул токен. Проверьте миграции: python manage.py migrate authtoken');
      } else {
        setError(result.error || 'Ошибка авторизации');
      }
    } catch (err) {
      console.error('[Auth] login error:', err);
      if (err.message?.includes('401') || err.message?.includes('Сессия истекла')) {
        setError('Неверные учетные данные или сессия истекла. Пожалуйста, авторизуйтесь заново.');
      } else {
        setError('Ошибка соединения с сервером');
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="auth-overlay">
      <div className="auth-window">
        <div className="auth-title-bar">
          <span style={{ fontSize: 14 }}>{ICONS.auth}</span>
          <h1 style={{ fontSize: 13, fontWeight: 600, marginLeft: 8 }}>Авторизация</h1>
        </div>
        <div className="auth-body">
          <div style={{ textAlign: 'center', marginBottom: 20 }}>
            <div style={{ fontSize: 48, marginBottom: 8 }}>{ICONS.app}</div>
            <div style={{ fontSize: 16, fontWeight: 600 }}>Учет финансов</div>
          </div>
          {error && (
            <div style={{ color: '#d32f2f', marginBottom: 12, textAlign: 'center', fontSize: 12, padding: 8, background: '#ffcdd2', borderRadius: 2, border: '1px solid #ef9a9a' }}>
              {error}
            </div>
          )}
          <form onSubmit={handleSubmit}>
            <div className="form-group">
              <label>Пользователь</label>
              <input type="text" value={username} onChange={e => setUsername(e.target.value)} required autoFocus />
            </div>
            <div className="form-group">
              <label>Пароль</label>
              <input type="password" value={password} onChange={e => setPassword(e.target.value)} required />
            </div>
            <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: 8, height: 32 }} disabled={loading}>
              {loading ? 'Вход...' : 'Войти'}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}