stepan10andreev / ruix-registration_form

Форма регистрации пользователей с отправкой данных

Описание

Форма состоит из 3 полей ввода: name, email, password и 1 чекбокса ('Remember Me')

Реализована валидация полей ввода по следующим параметрам:

1. все поля обязательны для заполнения
2. корректный формат ввода Email
3. валидация пароля: не менее 6 символов, хотя бы 1 спецсимвол (!@#$%^&*), хотя бы 1 цифру, и хотя бы 1 букву в верхнем и нижнем регистре

При некорректных данных по нажатию на кнопку Register под полями ввода появляются соотвествующие сообщения ошибок. Далее ошибки исчезают при введение пользователем символов в поле ввода и если поле ввода стало корреткным.

При успешной отправки появляется модальное окно с сообщением Данные успешно отправлены. Выход из модального окна по клику вне его. При возникновении ошибки при отправке данных появляется текст ошибки под кнопкой Register

Установка

Установка зависимостей

Для установки зависимостей, выполните команду:

$ npm i

Запуск Development сервера

Чтобы запустить сервер для разработки, выполните команду:

npm run dev

Запуск сервера с фейковым REST API

В корневом репозитории есть папка Fake API_json-server, содержащая фейковый REST API - созданный с помощью json-server. Для запуска необходимо перейти в данную папку и выполните команду:

json-server --watch db.json

Сервер для разработки (в корневом репозитории - команда npm run dev) запуститься по адресу http://localhost:3000.

Сервер с фейковым REST API запуститься по адресу http://localhost:5000.

Технологии

• Next.js
• React
• TypeScript
• Sass
• axios
• react-hook-form