Поле с паролем Password

Поле с паролем — это однострочное поле для ввода пароля, в котором символы заменяются на точки.

Внешний вид

Внешне выглядит как поле ввода, с небольшими отличиями:

  • Все символы в поле заменены точками из шрифта Kontur Iconic;
  • Справа в поле стоит иконка из шрифта Kontur Iconic. Она означает, что пароль скрыт. При клике на нее пароль становится видимым. Цвет иконки: #000, 40% прозрачности;
  • Под полем есть индикатор сложности пароля. Он плавно растет и изменяет свой цвет в зависимости от сложности пароля.

Описание работы

Алгоритм определяет, насколько сложно взломать пароль. Сначала он проверяет, есть ли пароль в списке популярных паролей. Затем он вычисляет, сколько времени потребуется, чтобы подобрать пароль прямым перебором. Как только это значение превышает 100 лет, мы считаем пароль надежным.

Самый простой способ увеличить надежность пароля — добавить символов. Индикатор в виде цветной полоски побуждает пользователя придумывать длинные пароли.

Минимальное условие для надежного пароля — 6 символов.

Длина индикатора плавно увеличивается при вводе пароля. Как только пользователь перестал вводить символы, с задержкой в полсекунды появляется подсказка.

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

Отличия в браузерах

В некоторых браузерах могут появляться дополнительные иконки. Например, в Safari появляется иконка подстановки пароля. Чтобы иконки не накладывались друг на друга, указывайте увеличенный отступ справа.

В Internet Explorer заменяйте стандартную иконку с глазиком на нашу, чтобы она одинаково отображалась во всех браузерах.

Валидация

Валидация срабатывает при входе в сервис, если пользователь ввел неправильный пароль. Тултип с подсказкой появляется справа от поля.