Страница регистрации
При нажатии на кнопку «Регистрация» в шапке сайта на главной странице происходит переход на страницу регистрации по маршруту /signup.
image
Страница регистрации пользователя
Перед отправкой формы на фронтенде нужно проверить, что:
все поля обязательные;
поле email соответствует шаблону электронной почты;
поле name содержит только латиницу, кириллицу, пробел или дефис.
Для валидации электронной почты можно использовать сторонние библиотеки. Если одно из полей не заполнено или не прошло валидацию, кнопка «Зарегистрироваться» должна быть неактивна. Неактивная кнопка имеет другой цвет, и по ней невозможно кликнуть.
Валидация должна происходить моментально, то есть при вводе нового символа в поле. Ошибки валидации выводите под полями ввода.
Вы уже реализовывали подобный механизм валидации, но делали это на нативном JS. Теперь вам предстоит самостоятельно написать решение для валидации, но на «Реакте». Для этого можно создать отдельный компонент. Если нужно, посмотрите пример такого компонента и почитайте про хук useCallback.
Когда форма заполнена корректно, кнопка «Зарегистрироваться» становится активной. Клик по ней должен отправлять запрос на роут /signup нашего API. Если в ответе на этот запрос сервер возвращает ошибку, сообщение о ней должно располагаться над кнопкой «Зарегистрироваться».
Если ответ на запрос успешен, пользователь сразу авторизуется и будет перенаправлен на страницу «Фильмы».
image
Страница «Фильмы»
Страница регистрации При нажатии на кнопку «Регистрация» в шапке сайта на главной странице происходит переход на страницу регистрации по маршруту /signup. image Страница регистрации пользователя Перед отправкой формы на фронтенде нужно проверить, что: все поля обязательные; поле email соответствует шаблону электронной почты; поле name содержит только латиницу, кириллицу, пробел или дефис. Для валидации электронной почты можно использовать сторонние библиотеки. Если одно из полей не заполнено или не прошло валидацию, кнопка «Зарегистрироваться» должна быть неактивна. Неактивная кнопка имеет другой цвет, и по ней невозможно кликнуть. Валидация должна происходить моментально, то есть при вводе нового символа в поле. Ошибки валидации выводите под полями ввода. Вы уже реализовывали подобный механизм валидации, но делали это на нативном JS. Теперь вам предстоит самостоятельно написать решение для валидации, но на «Реакте». Для этого можно создать отдельный компонент. Если нужно, посмотрите пример такого компонента и почитайте про хук useCallback. Когда форма заполнена корректно, кнопка «Зарегистрироваться» становится активной. Клик по ней должен отправлять запрос на роут /signup нашего API. Если в ответе на этот запрос сервер возвращает ошибку, сообщение о ней должно располагаться над кнопкой «Зарегистрироваться». Если ответ на запрос успешен, пользователь сразу авторизуется и будет перенаправлен на страницу «Фильмы». image Страница «Фильмы»