Веб-Острова Анатолия Куликова

Надежность пароля в картинках

Надежность пароля в картинках

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

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

Password Strength Visualization

Вот как это выглядит

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

В ходе обсуждения данной статьи у меня родилась следующая идея — сделать визуализацию пароля и более простой в техническом исполнении, и более очевидной с точки зрения пользователя. Концепция примерно похожая — в зависимости от длины пароля мы с помощью картинки будем рассказывать пользователю, достаточно ли пароль надёжен, или ему нужно больше символов.

Но вот рассказывать мы будем не так, как в примере выше — с пользователем мы будем общаться с помощью персонажа. Так сказать, сделаем для нашего скрипта «олицетворение», ибо так во все века общаться людям с неведомым было зело проще. На ум сразу пришли два персонажа:

  • «Типичный хакер» — собственно персонаж, который может твой пароль шатать. И высказать своё веское мнение о пароле.
  • Маскот сайта — вариант более беспроигрышный, чем первый. Занимается тем же самым, только выглядит это, на мой взгляд, куда более интересно.

Поскольку рисовать своего собственного маскота мне было лень и долго, а найти подходящего для моей идеи хакера было тоже лень как-то тяжеловато, я порыскал в интернете и нашёл подходящие стикеры (ссылки сможете отыскать в примере).

Разметка и всякие красивости

Этап первый — это собственно разметка сайта. Здесь совсем просто, не заморачиваясь с её архитектурой — блок регистрации с заголовком, разделённый надвое, в левой части мы помещаем саму форму, а в правой будет наша картинка.

И добавляем стили по вкусу, чтобы это всё вглядело красиво.

Здесь я хочу сделать небольшое отступление от темы статьи и поговорить про то, как можно реализовать подсветку надписей над input’ами, когда они находатся в фокусе (проще говоря — когда в них набирается текст). Этот фокус мы провернём с помощью использования соседних селекторов и flexbox.

Каждый блок для ввода информации у нас состоит из label, который содержит в себе input и span:

Как видите, span находится следом за input’ом, поскольку только в таком случае мы сможем с помощью CSS при получении фокуса в текстовое поле воздействовать на соседа:

Но поскольку span у нас отвечает за подпись текстового поля и должен находится сверху, мы для родительского label указываем такие параметры:

Сила flexbox дарует нам возможность не только регулировать переносы дочерних блоков, но и сделать их обратный перенос (как в нашем случае).

Конечно, это не единственный вариант реализации таковой подсветки и нетерпеливый читатель может возразить мне — зачем я над этим вообще заморачивался, ведь это просто пример идеи, наработки? Пусть это пример, но и он должен выглядеть неплохо.

Создаём взаимодействие

Теперь займемся картинкой и подключим к работе над этим javascript. Вот тут меня настиг истинный ступор и если бы не мой друг, пришедший на выручку, я бы долго думал, как это всё реализовать.

А что-же было нужно сделать? Нужно следить за полем, предназначенным для ввода пароля, и в зависимости от количества символов выводить нужную нам картинку. Если б это был php, то проблем вообще никаких, но вот с js, скажу честно, я пока не подружился. Посему ещё раз спасибо за квалифицированную помощь.

Мы не стали заморачиваться с ванильным JS и позвали на помощь jQuery. В итоге получилась вот такая простая реализация:

Обратите внимание на сам скрипт — он очень лёгок и понятен для использования, потребует минимального уровня понимания кода. И кроме того, изменить картинки, добавить большее их количество очень просто.

Конечно, сюда ещё можно (и даже, наверное, нужно) прикрутить проверку на то, какие именно символы были введены, поставить ограничения и так далее, и тому подобное. Но весь этот функционал — уже по вкусу.

Пользуйтесь на здоровье.

Анатолий Куликов

Анатолий Куликов

Автор блога, дизайнер, веб-разработчик

Новые статьи

Разбираемся с Яндекс.Коннектом

Разбираемся с Яндекс.Коннектом

Разбираемся с новым сервисом от Яндекса
Делаем паттерн из иконок

Делаем паттерн из иконок

Ещё один простой, но полезный онлайн-генератор
Следим за клавиатурой с помощью JS

Следим за клавиатурой с помощью JS

Отслеживаем нажатие клавиш на клавиатуре и совершаем действия
Скроллинг по странице

Скроллинг по странице

Делаем плавный скроллинг по странице с помощью JQuery и HTML5
AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет
Качаем шрифты с Google Fonts

Качаем шрифты с Google Fonts

Скачать шрифты Google Fonts бесплатно, без смс, для своего сайта

Статьи по теме

AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет
Безопасен ли ваш аккаунт?

Безопасен ли ваш аккаунт?

Как проверить на безопасность свои аккаунты и что делать?
Качаем шрифты с Google Fonts

Качаем шрифты с Google Fonts

Скачать шрифты Google Fonts бесплатно, без смс, для своего сайта
Красивый адрес для YouTube-канала

Красивый адрес для YouTube-канала

Создаём красивый адрес для канала и разбираемся, если ничего не получается
Модальное окно на чистом CSS

Модальное окно на чистом CSS

Создаем модальное окно на чистом CSS без использования javascript
О важности паролей (история из жизни)

О важности паролей (история из жизни)

Поучительный рассказ о важности паролей или Сказ о том, как важно предохраняться в интернете