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

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

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

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

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

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

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

  • Авторизация:

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

  • Переход к регистрации:

    • При клике на ссылку "Нет аккаунта? Зарегистрируйтесь!" отображается компонент Signup.

  • UI:

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

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

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

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

  • Запрос отправляется на http://localhost:3031/api/auth/login.
  • Ожидается ответ с полем token в случае успеха.
  • Токен сохраняется в localStorage для последующего использования.

Внешний вид

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

Зависимости

  • React (useState)
  • Компонент Signup для регистрации

Безопасность

  • Пароль не хранится в явном виде, только в состоянии компонента.
  • Токен сохраняется в localStorage.