mirror of
https://github.com/CachetHQ/Cachet.git
synced 2025-02-24 03:34:12 +01:00
81 lines
2.9 KiB
JavaScript
81 lines
2.9 KiB
JavaScript
/**
|
|
* Combine jQuery and zxcvbn to create a password strength meter.
|
|
* Based on : strengthify https://github.com/kabum/strengthify
|
|
*/
|
|
(function($) {
|
|
$.fn.strengthify = function(paramOptions) {
|
|
var me = this,
|
|
defaults = {
|
|
zxcvbn: 'https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/2.0.2/zxcvbn.min.js'
|
|
},
|
|
options = $.extend(defaults, paramOptions);
|
|
|
|
// Add elements to the DOM
|
|
$('.strengthify-wrapper')
|
|
.append('<div class="strengthify-bg" />')
|
|
.append('<div class="strengthify-container" />')
|
|
.append('<div class="strengthify-separator" style="left: 25%" />')
|
|
.append('<div class="strengthify-separator" style="left: 50%" />')
|
|
.append('<div class="strengthify-separator" style="left: 75%" />');
|
|
|
|
$.ajax({
|
|
cache: true,
|
|
dataType: 'script',
|
|
url: options.zxcvbn
|
|
}).done(function() {
|
|
me.bind('keyup input', function() {
|
|
var password = $(this).val(),
|
|
// Hide strengthigy if no input is provided
|
|
opacity = (password === '') ? 0 : 1,
|
|
// Calculate result
|
|
result = zxcvbn(password),
|
|
css = '',
|
|
// cache jQuery selections
|
|
$container = $('.strengthify-container'),
|
|
$wrapper = $('.strengthify-wrapper');
|
|
|
|
$wrapper.children().css(
|
|
'opacity',
|
|
opacity
|
|
).css(
|
|
'-ms-filter',
|
|
'"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity * 100 + ')"'
|
|
);
|
|
|
|
// Style strengthify bar
|
|
// possible scores: 0, 1, 2, 3, 4
|
|
switch (result.score) {
|
|
case 0:
|
|
case 1:
|
|
css = 'password-bad';
|
|
break;
|
|
case 2:
|
|
css = 'password-medium';
|
|
break;
|
|
case 3:
|
|
case 4:
|
|
css = 'password-good';
|
|
break;
|
|
}
|
|
|
|
$container
|
|
.attr('class', css + ' strengthify-container')
|
|
// possible scores: 0, 1, 2, 3, 4
|
|
.css(
|
|
'width',
|
|
// if score is '0' it will be changed to '1' to
|
|
// not hide strengthify if the password is extremely weak
|
|
((result.score === 0 ? 1 : result.score) * 25) + '%'
|
|
);
|
|
|
|
// Reset state for empty string password
|
|
if (password === '') {
|
|
$container.css('width', 0);
|
|
}
|
|
});
|
|
});
|
|
|
|
return me;
|
|
};
|
|
}(jQuery));
|