frontend/src/components/AuthModal.jsx - master - BlackEr/proect

frontend/src/components/AuthModal.jsx
141 строка4 KB
blynkerq
first_commit
18 дек 2025, 20:31
18 дек 2025, 20:317c36f43
import React, { useState } from 'react';

export default function AuthModal({ mode, onClose, onSuccess }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');

    const url = mode === 'register'
      ? 'http://localhost:3000/api/register'
      : 'http://localhost:3000/api/login';

    const body = mode === 'register'
      ? { name, email, password }
      : { email, password };

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

      const data = await response.json();

      if (data.success) {
        onSuccess(data.data);
      } else {
        setError(data.error || 'Ошибка авторизации');
      }
    } catch (err) {
      setError('Не удалось подключиться к серверу');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          <h2>{mode === 'register' ? 'Регистрация' : 'Вход'}</h2>
          <button className="close-btn" onClick={onClose}>&times;</button>
        </div>

        <form onSubmit={handleSubmit}>
          {mode === 'register' && (
            <div style={{ marginBottom: '1rem' }}>
              <input
                type="text"
                placeholder="Имя"
                value={name}
                onChange={e => setName(e.target.value)}
                required
                style={{ width: '100%', padding: '0.5rem', marginBottom: '0.5rem' }}
              />
            </div>
          )}
          <div style={{ marginBottom: '1rem' }}>
            <input
              type="email"
              placeholder="Email"
              value={email}
              onChange={e => setEmail(e.target.value)}
              required
              style={{ width: '100%', padding: '0.5rem', marginBottom: '0.5rem' }}
            />
          </div>
          <div style={{ marginBottom: '1rem' }}>
            <input
              type="password"
              placeholder="Пароль"
              value={password}
              onChange={e => setPassword(e.target.value)}
              required
              style={{ width: '100%', padding: '0.5rem', marginBottom: '0.5rem' }}
            />
          </div>
          {error && <p style={{ color: 'red', marginBottom: '1rem' }}>{error}</p>}
          <button
            type="submit"
            disabled={loading}
            style={{
              width: '100%',
              padding: '0.6rem',
              backgroundColor: '#1e3a5f',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            {loading ? 'Загрузка...' : mode === 'register' ? 'Зарегистрироваться' : 'Войти'}
          </button>
        </form>

        <div style={{ marginTop: '1rem', textAlign: 'center' }}>
          {mode === 'login' ? (
            <p>
              Нет аккаунта?{' '}
              <button
                type="button"
                onClick={() => {
                  setName('');
                  setEmail('');
                  setPassword('');
                  setError('');
                }}
                style={{ color: '#ff6b35', background: 'none', border: 'none', cursor: 'pointer' }}
              >
                Зарегистрируйтесь
              </button>
            </p>
          ) : (
            <p>
              Уже есть аккаунт?{' '}
              <button
                type="button"
                onClick={() => {
                  setName('');
                  setEmail('');
                  setPassword('');
                  setError('');
                }}
                style={{ color: '#ff6b35', background: 'none', border: 'none', cursor: 'pointer' }}
              >
                Войдите
              </button>
            </p>
          )}
        </div>
      </div>
    </div>
  );
}