Ревью: валидация формы
Вопрос
Перед тобой код на ревью. Скажи вслух, что здесь не так - по убыванию важности.
Читай вслух, как на ревью: сначала что делает код, потом что сломано.
function LoginForm() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const submit = () => {
if (email.indexOf('@') === -1) return alert('Неверная почта');
fetch('/api/login', {
method: 'POST',
body: JSON.stringify({ email, password }),
}).then(() => (location.href = '/dashboard'));
};
return (
<div>
<input value={email} onChange={(e) => setEmail(e.target.value)} />
<input value={password} onChange={(e) => setPassword(e.target.value)} />
<div onClick={submit}>Войти</div>
</div>
);
}
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
div вместо form и button - нет отправки по Enter, нет клавиатуры, нет доступности
у полей нет label, type, name и autocomplete; пароль виден
нет Content-Type: application/json - сервер не разберёт тело
нет проверки ответа: редирект произойдёт и при неверном пароле
нет обработки ошибки сети и блокировки кнопки на время запроса
alert вместо сообщения рядом с полем
Что могут спросить следом
- Как правильно показать ошибку сервера пользователю?
- Что нужно, чтобы менеджер паролей подхватил форму?
Разбор
Семантика. div с onClick вместо form и button: не работает Enter в поле,
не работает клавиатура, скринридер не понимает, что это кнопка. Форма даёт отправку
по Enter бесплатно - нужен <form onSubmit> и <button type="submit">.
Поля. Нет type="email" и type="password" - пароль отображается открытым. Нет label,
name и autocomplete - менеджеры паролей и автозаполнение не работают.
Запрос. Нет заголовка Content-Type: application/json - многие серверы просто
не разберут тело. Нет credentials, если авторизация на куках.
Самое опасное - нет проверки результата: .then() срабатывает и при 401, и при 500,
пользователь с неверным паролем уезжает на дашборд и получает пустой экран. Нужны
res.ok, показ ошибки и блокировка кнопки на время запроса, иначе двойная отправка.
alert блокирует страницу; сообщение должно быть рядом с полем и объявляться
через aria-live.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.