—»     —»   Разрабатываем привлекательный измеритель безопасности пароля
  Раздел: Руководства   Нет комментариев  

Разрабатываем привлекательный измеритель безопасности пароля



Сегодня мы с вами займемся разработкой красивого индикатора уровня безопасности вашего пароля. Он поможет определить сложность пароля, а ползунок будет перемещаться соответствующим образом при помощи jQuery-плагина Complexify. Только когда будет введен достаточно сложный пароль, пользователь сможет продолжить процесс регистрации.

Мы также предлагаем вам PSD-файл, с помощью которого вы сможете оформить форму по собственному вкусу.

HTML

Начнем с разработки стандартного HTML-документа, который будет включать в себя форму регистрации. Форма будет служить лишь примером для измерителя сложности пароля, поэтому если вам захочется, чтобы она функционировала, вам придется писать соответствующий код на стороне сервера.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>How to Make a Beautiful Password Strength Indicator</title>

<!-- The stylesheet -->
<link rel="stylesheet" href="assets/css/styles.css" />

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<div id="main">

<h1>Sign up, it's FREE!</h1>

<form class="" method="post" action="">

<div class="row email">
<input type="text" id="email" name="email" placeholder="Email" />
</div>

<div class="row pass">
<input type="password" id="password1" name="password1" placeholder="Password" />
</div>

<div class="row pass">
<input type="password" id="password2" name="password2" placeholder="Password (repeat)" disabled="true" />
</div>

<!-- The rotating arrow -->
<div class="arrowCap"></div>
<div class="arrow"></div>

<p class="meterText">Password Meter</p>

<input type="submit" value="Register" />

</form>
</div>

<!-- javascript includes - jQuery, the complexify plugin and our own script.js -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="assets/js/jquery.complexify.js"></script>
<script src="assets/js/script.js"></script>

</body>
</html>

Мы включаем последнюю версию jQuery, плагин Complexify и файл script.js перед закрывающим тэгом «body» для лучшей производительности.

Разрабатываем привлекательный измеритель безопасности пароля

jQuery

Код jQuery ниже вполне понятен. Мы привязываем несколько событий к элементу формы и валидируем их. Если возникнет ошибка, мы задаем класс error div’у .row, который содержит в себе форму. За счет этого будет отображаться красный крест. Класс success, наоборот, будет отображать зеленую отметку. Когда форма будет подтверждена, нам нужно проверить, все ли поля отмечены как подтвержденные, чтобы пользователь смог продолжить процесс регистрации.

assets/js/script.js

$(function(){

// Form items
var pass1 = $('#password1'),
pass2 = $('#password2'),
email = $('#email'),
form = $('#main form'),
arrow = $('#main .arrow');

// Empty the fields on load
$('#main .row input').val('');

// Handle form submissions
form.on('submit',function(e){

// Is everything entered correctly?
if($('#main .row.success').length == $('#main .row').length){

// Yes!
alert("Thank you for trying out this demo!");
e.preventDefault(); // Remove this to allow actual submission

}
else{

// No. Prevent form submission
e.preventDefault();

}
});

// Validate the email field
email.on('blur',function(){

// Very simple email validation
if (!/^S+@S+.S+$/.test(email.val())){
email.parent().addClass('error').removeClass('success');
}
else{
email.parent().removeClass('error').addClass('success');
}

});

/* The Complexify code will go here */

// Validate the second password field
pass2.on('keydown input',function(){

// Make sure it equals the first
if(pass2.val() == pass1.val()){

pass2.parent()
.removeClass('error')
.addClass('success');
}
else{
pass2.parent()
.removeClass('success')
.addClass('error');
}
});

});

И здесь мы можем перейти к плагину Complexify, который будет валидировать пароль. Плагин принимает две функции обратного вызова с двумя аргументами: процентным значением от 0 до 100 в зависимости от сложности пароля, а также отметкой валидности, которая учитывает минимальную длину пароля, определенную параметром minimumChars.

Изменяя параметр strengthScaleFactor, вы можете позволить пользователям вводить более легкие пароли. Исходное значение 1, что требует смеси символов в разном регистре, цифры и специальные символы, но нам такие условия показались сильно сложными, и поэтому мы снизили планку до 0.7. Вы можете сделать ее еще ниже, если хотите позволить использовать более простые пароли.

pass1.complexify({minimumChars:6, strengthScaleFactor:0.7}, function(valid, complexity){

if(valid){
pass2.removeAttr('disabled');

pass1.parent()
.removeClass('error')
.addClass('success');
}
else{
pass2.attr('disabled','true');

pass1.parent()
.removeClass('success')
.addClass('error');
}

var calculated = (complexity/100)*268 - 134;
var prop = 'rotate('+(calculated)+'deg)';

// Rotate the arrow. Additional rules for different browser engines.
arrow.css({
'-moz-transform':prop,
'-webkit-transform':prop,
'-o-transform':prop,
'-ms-transform':prop,
'transform':prop
});
});

Если было введено валидное значение, мы открываем доступ ко второму полю (по умолчанию оно отключено). Мы также воспользуемся трансформациями CSS3 для того, чтобы вращать стрелочку. Трансформация будет анимирована при помощи параметра transition, который вы можете видеть в разделе CSS. Стрелка сдвигается от -134 до 134 градусов (по умолчанию 0 градусов заставляют стрелку показывать вверх), что позволяет нам избежать нагромождения в коде.

CSS

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

assets/css/styles.css

#main form .arrow{
background: url("../img/arrow.png") no-repeat -10px 0;
height: 120px;
left: 214px;
position: absolute;
top: 392px;
width: 11px;

/* Defining a smooth CSS3 animation for turning the arrow */

-moz-transition:0.3s;
-webkit-transition:0.3s;
-o-transition:0.3s;
-ms-transition:0.3s;
transition:0.3s;

/* Putting the arrow in its initial position */

-moz-transform: rotate(-134deg);
-webkit-transform: rotate(-134deg);
-o-transform: rotate(-134deg);
-ms-transform: rotate(-134deg);
transform: rotate(-134deg);
}

/* The small piece that goes over the arrow */
#main form .arrowCap{
background: url("../img/arrow.png") no-repeat -43px 0;
height: 20px;
left: 208px;
position: absolute;
top: 443px;
width: 20px;
z-index: 10;
}

Остальной код вы можете самостоятельно изучить в assets/css/styles.css. Лучшим методом разобрать, как здесь все утроено, является осмотр действующего в режиме реального времени демо с помощью Firebug или инструментов разработчика от Chrome.

В завершение

Вы можете использовать данный пример для того, чтобы создавать собственные вариации. А процесс оформления облегчается за счет предоставленного PSD-файла.

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 4590   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930