3. Окно для регистрации пользователя - qwsnxnjene/courier-transport GitHub Wiki

Signup.js — это React-компонент, реализующий форму регистрации пользователя. Он отвечает за ввод данных для регистрации, обработку отправки формы, отображение ошибок и возврат к форме авторизации.

Основные функции компонента

  • Состояния компонента:

    • signupData: объект с полями login, password, confirmPassword для хранения введённых пользователем данных.
    • error: строка для отображения ошибок регистрации.
    • success: булево значение, определяющее успешность регистрации.

  • Обработка ввода:

    • Функция handleInputChange обновляет соответствующее поле в signupData при изменении значения в input.

  • Регистрация:

    • Функция handleSignup отправляет POST-запрос на /api/auth/signup с введёнными данными.
    • В случае успеха отображает сообщение об успешной регистрации и вызывает onSignupSuccess.
    • В случае ошибки отображает сообщение пользователю.

  • Переход к авторизации:

    • При клике на ссылку "Уже есть аккаунт? Войти" возвращает к компоненту Login.

  • UI:

    • Форма с полями для логина, пароля и подтверждения пароля, кнопка отправки, обработка ошибок, кнопка закрытия.

Пример использования

<Signup
  onSignupSuccess={() => { /* действия после успешной регистрации */ }}
  onClose={() => { /* закрытие модального окна */ }}
/>

Взаимодействие с сервером

  • Запрос отправляется на http://localhost:3031/api/auth/signup.
  • Ожидается ответ с подтверждением успешной регистрации.

Внешний вид

  • Используются CSS-классы: profile-overlay, profile-panel, close-profile, signup-form, form-group, signup-button, error-message.
  • Форма реализована как модальное окно.

Зависимости

  • React (useState)
  • Компонент Login для возврата к авторизации