Форма авторизации:

• Поле для ввода адреса электронной почты. E-mail - (до 60 знаков, латиница, допустимые символы -, _, @ и .)
  1. Плейсхолдер: Введите e-mail
  2. Подсказка под полем: E-mail может содержать только латинские буквы, цифры, символы и должен быть не более 60 знаков.
• Поле для ввода пароля. Пароль - обязательное поле (минимум 6, максимум 20 символов только латиница, символы и цифры от 0-9)

Плейсхолдер: Введите пароль

Подсказка под полем: Пароль может содержать только латинские буквы, цифры, символы и должен быть не менее 6 и не более 20 знаков.

1. Символы - (!, ., @, ;, :, &, *, ?, /, ”, -, +, ,)
2. При попытке вставить элемент не из списка - не вставляем
3. При попытке вставить текст, который содержит недопустимые символы - вставляем только те символы, которые допустимо использовать

• Кнопка "Войти" для отправки данных.

При клике:

• удаляем пробелы в начале и в конце адреса электронной почты.
• проверяем соответствие введенного адреса формату электронной почты.

Валидация данных:

• Проверка наличия введенного адреса электронной почты и пароля.
• Проверка формата адреса электронной почты.
• Проверка длины и допустимых символов пароля (минимальная и максимальная длина, использование только латинских букв, цифр и определенных символов).

Уведомления об ошибках:

• Отображение сообщений об ошибках в случае некорректно заполненных полей или нарушения требований для адреса электронной почты или пароля. Если введен некорректный логин или пароль, выводим сообщение "Неверный логин или пароль".
• Подсветка некорректно заполненных полей для быстрой идентификации ошибок. Проверяем, что поле электронной почты не пустое. Если пустое, выводим сообщение "Введите электронную почту".
• Проверяем, что поле пароля не пустое. Если пустое, выводим сообщение "Введите пароль".
• Проверяем, что введенный пароль соответствует требованиям. Если пароль не подходит, подсвечиваем красным подсказку “Пароль может содержать только латинские буквы, цифры, символы и должен быть не менее 6 и не более 20 знаков”
• Проверяем, что введенный email соответствует требованиям. Если email не подходит, подсвечиваем красным подсказку ”E-mail может содержать только латинские буквы, цифры, символы и должен быть не более 60 знаков”
• Предоставляем возможность просмотра введенного пароля с помощью иконки в виде глаза, расположенной справа в поле пароля. Иконка появляется только в случае, если в поле введены какие-либо символы.

Запоминание данных:

• Возможность выбора опции "Запомнить меня" для удобства автоматического заполнения полей при следующей авторизации.
• Хранение данных в cookie или локальном хранилище браузера.

Восстановление пароля:

• Возможность нажатия на ссылку "Забыли пароль?" для перехода на страницу восстановления пароля. При клике на кнопку открывается окно для восстановления пароля, в котором есть только поле E-mail и кнопку “Восстановить”

  1. E-mail - обязательное поле (до 60 знаков, латиница, валидируется наличие -, _, @ и .)
     • Плейсхолдер: Введите e-mail
     • Подсказка под полем: E-mail может содержать только латинские буквы, цифры, символы и должен быть не более 60 знаков.

• Отправка электронной почты с инструкциями для восстановления пароля. Текст письма:

  "Уважаемый пользователь, мы получили запрос на восстановление пароля для вашего аккаунта. Если вы не делали этого запроса, просто проигнорируйте это письмо. Для сброса пароля, пожалуйста, перейдите по следующей ссылке:

  [Ссылка на восстановление пароля]

  Ссылка будет действительна в течение следующих 24 часов. Если вы не успеете воспользоваться ею в этот период, вам придется снова запросить восстановление пароля.

  С уважением, команда поддержки"

  При переходе открывается окно восстановления пароля

  1. Новый пароль - обязательное поле (минимум 6, максимум 20 символов, только латиница и цифры от 0-9)
     • Плейсхолдер: Введите новый пароль
     • Подсказка под полем: Пароль может содержать только латинские буквы, цифры, символы и должен быть не менее 6 и не более 20 знаков.
       • Допустимые символы - (!, ., @, ;, :, &, *, ?, /, ”, -, +, ,)
       • При попытке вставить элемент не из списка - не вставляем
       • При попытке вставить текст, который содержит недопустимые символы - вставляем только те символы, которые допустимо использовать
  2. Подтвердить новый пароль - обязательное поле
     • Плейсхолдер: Подтвердите новый пароль
     • Подсказка под полем: Повторите введенный выше пароль.
  3. Кнопка "Сохранить новый пароль"
     • При клике:
       • Проверяем, что поля "Новый пароль" и "Подтвердить новый пароль" совпадают.
       • Если пароли не совпадают, выводим сообщение "Пароли не совпадают".
       • Если все проверки пройдены успешно, пароль пользователя обновляется.
  4. После успешного сохранения пароля открывается экран авторизации, после чего юзер может войти в свой ЛК по новому паролю

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

• Хранение пароля в зашифрованном виде в базе данных.
• Использование защищенного протокола (например, HTTPS) для передачи данных авторизации.