Задание: реализовать форму логина на React. Требования: - два поля: email + password - controlled inputs - сабмит формы с preventDefault - базовая валидация (поле не пустое) - по отправке выполнить async запрос (можно имитировать через setTimeout) - показать состояние loading (кнопка disabled) - показать ошибку при неуспешном логине Дополнительно (необязательно): - валидация email

jsx import React, { useState } from 'react';

function LoginForm() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState('');

const validateEmail = (email) => { // Простая проверка формата email return /^[^\s@]+@[^\s@]+.[^\s@]+$/.test(email); };

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

if (!email || !password) {
  setError('Пожалуйста, заполните все поля');
  return;
}

if (!validateEmail(email)) {
  setError('Введите корректный email');
  return;
}

setLoading(true);

// Имитируем async запрос
setTimeout(() => {
  setLoading(false);
  // Пример проверки логина
  if (email === 'user@example.com' && password === 'password123') {
    alert('Успешный вход');
  } else {
    setError('Неверный email или пароль');
  }
}, 1500);

};

return ( <form onSubmit={handleSubmit}> <div> <label> Email: <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} disabled={loading} /> </label> </div> <div> <label> Пароль: <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} disabled={loading} /> </label> </div> {error && <div style={{ color: 'red' }}>{error}</div>} <button type="submit" disabled={loading}> {loading ? 'Вход...' : 'Войти'} </button> </form> ); }

export default LoginForm;