Update strengthify to 0.5.1
This commit is contained in:
parent
1604066184
commit
a1b1d6ac7d
|
@ -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"
|
||||||
}
|
}
|
|
@ -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));
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue