Поле с паролем PasswordInput
ReactОднострочное поле для ввода пароля, в котором символы заменяются на точки.
Когда использовать
Такое поле используют для ввода пароля:
- в форме входа в сервис,
- в форме установки или смены пароля.
Не используйте такое поле для ввода одноразовых кодов из смс. У них короткий срок действия и используются они только один раз.
Виды полей
Вход
Поле для формы входа в сервис. Скрывает символы пароля и позволяет быстро показать их, чтобы проверить введенный пароль. |
Установка пароля
Поле для формы смены и установки пароля. Дополнительно показывает достаточно ли сложный пароль. |
Описание работы
Скрытие пароля
Пароль становится видимым по клику на иконке 
. Иконка меняется На 
.
Повторный клик возвращает поле в исходное состояние — пароль заменяется на точки, возвращается прежняя иконка.
Установка или изменение пароля
Самый простой способ увеличить надежность пароля — добавить символов. Индикатор в виде цветной полоски побуждает пользователя придумывать длинные пароли.
Алгоритм определяет, насколько сложно взломать пароль. Сначала он проверяет, есть ли пароль в списке популярных паролей. Затем он вычисляет, сколько времени потребуется, чтобы подобрать пароль прямым перебором. Как только это значение превышает 100 лет, мы считаем пароль надежным.
Минимальное условие для надежного пароля — 6 символов.
Длина индикатора плавно увеличивается при вводе пароля. Как только пользователь перестал вводить символы, с задержкой в полсекунды появляется подсказка.
Если введенный пароль входит в список популярных паролей, сообщаем об этом пользователю. Индикатор меняет цвет на красный. У подсказки появляется тултип, в котором даны рекомендации по созданию пароля. Тултип всплывает справа от иконки.
Отличия в браузерах
В некоторых браузерах могут появляться дополнительные иконки. Например, в Safari появляется иконка подстановки пароля. Следите, чтобы иконки не накладывались друг на друга в таких случаях.
В Internet Explorer заменяйте стандартную иконку с глазиком на нашу, чтобы она одинаково отображалась во всех браузерах.
Размер и расположение
Поле ввода с паролем, как и обычное поле, может быть трех размеров. Подробнее смотри в гайде поля ввода.
Рекомендуемая ширина поля с паролем — 280-340 px.
Ширина индикатора сложности под полем всегда должна совпадать с шириной поля.
Фокус и работа с клавиатурой
При клике по полю и при переходе табом поле выглядит одинаково: появляется чёрная рамка, которая сохраняется до потери фокуса.
Валидация
Валидация срабатывает после отправки формы, если пользователь ввел неправильный пароль.
Поле с ошибкой подсвечивается красной рамкой.
О поведении полей ввода с ошибками читайте в гайде по валидации.
Дизайн
Внешне выглядит как поле ввода, с небольшими отличиями:
- Все символы в поле заменены точками: • ;
- Справа в поле стоит иконка из набора интерфейсных иконок. Она выполняет действие «показать пароль». Цвет иконки: #757575;
- В формах установки или смены пароля под полем есть индикатор сложности пароля. Он плавно растет и изменяет свой цвет в зависимости от сложности пароля.
