Update strengthify to 0.5.1

This commit is contained in:
Morris Jobke 2016-06-15 15:20:21 +02:00
parent 1604066184
commit a1b1d6ac7d
No known key found for this signature in database
GPG Key ID: 9CE5ED29E7FCD38A
3 changed files with 193 additions and 104 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "strengthify", "name": "strengthify",
"version": "0.4.2", "version": "0.5.1",
"homepage": "https://github.com/MorrisJobke/strengthify", "homepage": "https://github.com/MorrisJobke/strengthify",
"authors": [ "authors": [
"Morris Jobke <hey@morrisjobke.de>" "Morris Jobke <hey@morrisjobke.de>"
@ -8,13 +8,13 @@
"description": "Combine jQuery and zxcvbn to create a password strength meter.", "description": "Combine jQuery and zxcvbn to create a password strength meter.",
"main": "jquery.strengthify.js", "main": "jquery.strengthify.js",
"license": "MIT", "license": "MIT",
"_release": "0.4.2", "_release": "0.5.1",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v0.4.2", "tag": "0.5.1",
"commit": "b3df9344d829063564cdced3c6328b001bc4bad1" "commit": "fd8bc41992bb37e16495a8e4c266951b93f8467d"
}, },
"_source": "git://github.com/MorrisJobke/strengthify.git", "_source": "git://github.com/MorrisJobke/strengthify.git",
"_target": "0.4.2", "_target": "0.5.1",
"_originalSource": "strengthify" "_originalSource": "strengthify"
} }

View File

@ -2,14 +2,16 @@
* Strengthify - show the weakness of a password (uses zxcvbn for this) * Strengthify - show the weakness of a password (uses zxcvbn for this)
* https://github.com/MorrisJobke/strengthify * https://github.com/MorrisJobke/strengthify
* *
* Version: 0.4.2 * Version: 0.5.1
* Author: Morris Jobke (github.com/MorrisJobke) * Author: Morris Jobke (github.com/MorrisJobke) - original
* Eve Ragins @ Eve Corp (github.com/eve-corp)
*
* *
* License: * License:
* *
* The MIT License (MIT) * The MIT License (MIT)
* *
* Copyright (c) 2013-2015 Morris Jobke <morris.jobke@gmail.com> * Copyright (c) 2013-2016 Morris Jobke <morris.jobke@gmail.com>
* *
* Permission is hereby granted, free of charge, to any person obtaining a copy of * Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in * this software and associated documentation files (the "Software"), to deal in
@ -30,108 +32,183 @@
*/ */
/* global jQuery */ /* global jQuery */
(function ($) { (function($) {
$.fn.strengthify = function(paramOptions) { $.fn.strengthify = function(paramOptions) {
var me = this, "use strict";
defaults = {
zxcvbn: 'zxcvbn/zxcvbn.js',
titles: [
'Weakest',
'Weak',
'So-so',
'Good',
'Perfect'
]
},
options = $.extend(defaults, paramOptions),
drawStrengthify = function() {
var password = $(me).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( var defaults = {
'opacity', zxcvbn: 'zxcvbn/zxcvbn.js',
opacity titles: [
).css( 'Weakest',
'-ms-filter', 'Weak',
'"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity * 100 + ')"' 'So-so',
); 'Good',
'Perfect'
],
tilesOptions:{
tooltip: true,
element: false
},
drawTitles: false,
drawMessage: false,
drawBars: true
};
// style strengthify bar return this.each(function() {
// possible scores: 0-4 var options = $.extend(defaults, paramOptions);
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 if (!options.drawTitles
.attr('class', css + ' strengthify-container') && !options.drawMessage
// possible scores: 0-4 && !options.drawBars)
.css( console.warn("expect at least one of 'drawTitles', 'drawMessage', or 'drawBars' to be true");
'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) + '%'
);
// set a title for the wrapper function getWrapperFor(id) {
$wrapper.attr( return $('div[data-strengthifyFor="' + id + '"]');
'title', };
options.titles[result.score]
).tooltip({
placement: 'bottom',
trigger: 'manual',
}).tooltip(
'show'
);
if(opacity === 0) { function drawStrengthify() {
$wrapper.tooltip( var password = $(this).val(),
'hide' elemId = $(this).attr('id'),
); // hide strengthify if no input is provided
} opacity = (password === '') ? 0 : 1,
// calculate result
result = zxcvbn(password),
// setup some vars for later
css = '',
bsLevel = '',
message = '',
// cache jQuery selections
$wrapper = getWrapperFor(elemId),
$container = $wrapper.find('.strengthify-container'),
$message = $wrapper.find('[data-strengthifyMessage]');
// reset state for empty string password
if(password === '') {
$container.css('width', 0);
}
}; $wrapper.children()
.css('opacity', opacity)
.css('-ms-filter',
'"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity * 100 + ')"'
);
// add elements // style strengthify bar
$('.strengthify-wrapper') // possible scores: 0-4
.append('<div class="strengthify-bg" />') switch (result.score) {
.append('<div class="strengthify-container" />') case 0:
.append('<div class="strengthify-separator" style="left: 25%" />') case 1:
.append('<div class="strengthify-separator" style="left: 50%" />') css = 'password-bad';
.append('<div class="strengthify-separator" style="left: 75%" />'); bsLevel = 'danger';
message = result.feedback ? result.feedback.suggestions.join('<br/>') : "";
break;
case 2:
bsLevel = 'warning';
message = result.feedback ? result.feedback.suggestions.join('<br/>') : "";
css = 'password-medium';
break;
case 3:
css = 'password-good';
bsLevel = 'info';
message = "Getting better.";
case 4:
css = 'password-good';
bsLevel = 'success';
message = "Looks good.";
break;
}
me.parents().on('scroll', drawStrengthify); if ($message) {
$message.removeAttr('class');
$message.addClass('bg-' + bsLevel);
$.ajax({ // reset state for empty string password
cache: true, if (password === '') {
dataType: 'script', message = '';
url: options.zxcvbn }
}).done(function() { $message.html(message);
me.bind('keyup input change', drawStrengthify); }
}); if ($container) {
$container
.attr('class', css + ' strengthify-container')
// possible scores: 0-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) + '%'
);
return me; // reset state for empty string password
}; if (password === '') {
$container.css('width', 0);
}
}
}(jQuery)); if (options.drawTitles) {
// set a title for the wrapper
if(options.tilesOptions.tooltip){
$wrapper.attr(
'title',
options.titles[result.score]
).tooltip({
placement: 'bottom',
trigger: 'manual',
}).tooltip(
'fixTitle'
).tooltip(
'show'
);
if (opacity === 0) {
$wrapper.tooltip(
'hide'
);
}
}
if(options.tilesOptions.element){
$wrapper.find(".strengthify-tiles").text(options.titles[result.score]);
}
}
};
function init() {
var $elem = $(this),
elemId = $elem.attr('id');
var drawSelf = drawStrengthify.bind(this);
// add elements
$elem.after('<div class="strengthify-wrapper" data-strengthifyFor="' + $elem.attr('id') + '"></div>');
if (options.drawBars) {
getWrapperFor(elemId)
.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%" />');
}
if (options.drawMessage) {
getWrapperFor(elemId).append('<div data-strengthifyMessage></div>');
}
if (options.drawTitles && options.tilesOptions) {
getWrapperFor(elemId).append('<div class="strengthify-tiles"></div>');
}
$elem.parent().on('scroll', drawSelf);
$.ajax({
cache: true,
dataType: 'script',
url: options.zxcvbn
}).done(function() {
$elem.bind('keyup input change', drawSelf);
});
};
init.call(this);
//return me;
});
};
} (jQuery));

View File

@ -1,11 +1,15 @@
/** /**
* Strengthify - show the weakness of a password (uses zxcvbn for this) * Strengthify - show the weakness of a password (uses zxcvbn for this)
* https://github.com/MorrisJobke/strengthify * https://github.com/MorrisJobke/strengthify
* Version: 0.4.2 * Version: 0.5.1
* License: The MIT License (MIT) * License: The MIT License (MIT)
* Copyright (c) 2013 Morris Jobke <morris.jobke@gmail.com> * Copyright (c) 2013-2016 Morris Jobke <morris.jobke@gmail.com>
*/ */
.strengthify-wrapper {
position: relative;
}
.strengthify-wrapper > * { .strengthify-wrapper > * {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0); filter: alpha(opacity=0);
@ -15,7 +19,7 @@
transition:all .5s ease-in-out; transition:all .5s ease-in-out;
} }
.strengthify-bg, .strengthify-container, .strengthify-wrapper, .strengthify-separator { .strengthify-bg, .strengthify-container, .strengthify-separator {
height: 3px; height: 3px;
} }
@ -46,3 +50,11 @@
.password-good { .password-good {
background-color: #3C3; background-color: #3C3;
} }
div[data-strengthifyMessage] {
padding: 3px 8px;
}
.strengthify-tiles{
float: right;
}