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

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

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

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

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

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

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

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

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

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

<div class="Modal">
    <h1>Registration Form</h1>
    <div class="Half">
        <form>
            <label for="login">
                <input type="text" id="login" name="login">
                <span>Login</span>
            </label>
            <hr>
            <label for="email">
                <input type="email" id="email" name="email">
                <span>E-mail</span>
            </label>
            <hr>
            <label for="password">
                <input type="password" id="password" name="password">
                <span>Set you Password</span>
            </label>
            <input type="reset" value="Sign Up">
        </form>
    </div>
    <div class="Half">
        <img id="sticker" src="img/image_0.png" alt="Password strength">
    </div>
</div>

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

* {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}

body {
    display: flex;
    width: 100%;
    height: 100vh;
    align-content: center;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}

.Modal {
    display: flex;
    flex-wrap: wrap;
    width: 680px;
    justify-content: space-between;
    margin: auto;
    padding: 20px;
    border-radius: 4px;
    box-shadow: #cecece 0px 0px 6px 0px;
}

h1 {
    display: block;
    width: 100%;
    margin: 0px 0px 10px;
    text-align: center;
}

.Half {
    display: block;
    width: 50%;
    padding: 5px;
}

label {
    display: flex;
    flex-wrap: wrap-reverse;
    width: 100%;
    margin-bottom: 7px;
    font-size: 18px;
    font-weight: bold;
}
label > span {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    transition: all ease-in-out 0.2s;
}

hr {
    display: block;
    width: 100%;
    height: 2px;
    border: none;
    outline: none;
}

input {
    display: block;
    width: 100%;
    padding: 6px;
    border: #cecece solid 1px;
    font-size: 16px;
}

input:focus + span {
    color: #2196F3;
}

input[type=reset] {
    display: block;
    width: 100%;
    margin-top: 24px;
    padding: 6px;
    border: #2196F3 solid 1px;
    font-size: 16px;
    color: #FFFFFF;
    background: #2196F3;
    transition: all ease-in-out 0.2s;
}
input[type=reset]:hover {
    background: #1565C0;
}
input[type=reset]:active {
    background: #283593;
}

img {
    display: block;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    max-height: 245px;
}

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

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

<label for="password">
    <input type="password" id="password" name="password">
    <span>Set you Password</span>
</label>

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

input:focus + span {
    color: #2196F3;
}

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

display: flex;
flex-wrap: wrap-reverse;

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

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

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

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

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

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

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

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

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