Update strengthify to 0.5.1
This commit is contained in:
Morris Jobke
parent
1604066184
commit
a1b1d6ac7d
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "strengthify",
|
||||
"version": "0.4.2",
|
||||
"version": "0.5.1",
|
||||
"homepage": "https://github.com/MorrisJobke/strengthify",
|
||||
"authors": [
|
||||
"Morris Jobke <hey@morrisjobke.de>"
|
||||
|
|
@ -8,13 +8,13 @@
|
|||
"description": "Combine jQuery and zxcvbn to create a password strength meter.",
|
||||
"main": "jquery.strengthify.js",
|
||||
"license": "MIT",
|
||||
"_release": "0.4.2",
|
||||
"_release": "0.5.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v0.4.2",
|
||||
"commit": "b3df9344d829063564cdced3c6328b001bc4bad1"
|
||||
"tag": "0.5.1",
|
||||
"commit": "fd8bc41992bb37e16495a8e4c266951b93f8467d"
|
||||
},
|
||||
"_source": "git://github.com/MorrisJobke/strengthify.git",
|
||||
"_target": "0.4.2",
|
||||
"_target": "0.5.1",
|
||||
"_originalSource": "strengthify"
|
||||
}
|
||||
|
|
@ -2,14 +2,16 @@
|
|||
* Strengthify - show the weakness of a password (uses zxcvbn for this)
|
||||
* https://github.com/MorrisJobke/strengthify
|
||||
*
|
||||
* Version: 0.4.2
|
||||
* Author: Morris Jobke (github.com/MorrisJobke)
|
||||
* Version: 0.5.1
|
||||
* Author: Morris Jobke (github.com/MorrisJobke) - original
|
||||
* Eve Ragins @ Eve Corp (github.com/eve-corp)
|
||||
*
|
||||
*
|
||||
* License:
|
||||
*
|
||||
* 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
|
||||
* this software and associated documentation files (the "Software"), to deal in
|
||||
|
|
@ -30,108 +32,183 @@
|
|||
*/
|
||||
|
||||
/* global jQuery */
|
||||
(function ($) {
|
||||
$.fn.strengthify = function(paramOptions) {
|
||||
var me = this,
|
||||
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');
|
||||
(function($) {
|
||||
$.fn.strengthify = function(paramOptions) {
|
||||
"use strict";
|
||||
|
||||
$wrapper.children().css(
|
||||
'opacity',
|
||||
opacity
|
||||
).css(
|
||||
'-ms-filter',
|
||||
'"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity * 100 + ')"'
|
||||
);
|
||||
var defaults = {
|
||||
zxcvbn: 'zxcvbn/zxcvbn.js',
|
||||
titles: [
|
||||
'Weakest',
|
||||
'Weak',
|
||||
'So-so',
|
||||
'Good',
|
||||
'Perfect'
|
||||
],
|
||||
tilesOptions:{
|
||||
tooltip: true,
|
||||
element: false
|
||||
},
|
||||
drawTitles: false,
|
||||
drawMessage: false,
|
||||
drawBars: true
|
||||
};
|
||||
|
||||
// style strengthify bar
|
||||
// possible scores: 0-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;
|
||||
}
|
||||
return this.each(function() {
|
||||
var options = $.extend(defaults, paramOptions);
|
||||
|
||||
$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) + '%'
|
||||
);
|
||||
if (!options.drawTitles
|
||||
&& !options.drawMessage
|
||||
&& !options.drawBars)
|
||||
console.warn("expect at least one of 'drawTitles', 'drawMessage', or 'drawBars' to be true");
|
||||
|
||||
// set a title for the wrapper
|
||||
$wrapper.attr(
|
||||
'title',
|
||||
options.titles[result.score]
|
||||
).tooltip({
|
||||
placement: 'bottom',
|
||||
trigger: 'manual',
|
||||
}).tooltip(
|
||||
'show'
|
||||
);
|
||||
function getWrapperFor(id) {
|
||||
return $('div[data-strengthifyFor="' + id + '"]');
|
||||
};
|
||||
|
||||
if(opacity === 0) {
|
||||
$wrapper.tooltip(
|
||||
'hide'
|
||||
);
|
||||
}
|
||||
function drawStrengthify() {
|
||||
var password = $(this).val(),
|
||||
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
|
||||
$('.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%" />');
|
||||
// style strengthify bar
|
||||
// possible scores: 0-4
|
||||
switch (result.score) {
|
||||
case 0:
|
||||
case 1:
|
||||
css = 'password-bad';
|
||||
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({
|
||||
cache: true,
|
||||
dataType: 'script',
|
||||
url: options.zxcvbn
|
||||
}).done(function() {
|
||||
me.bind('keyup input change', drawStrengthify);
|
||||
});
|
||||
// reset state for empty string password
|
||||
if (password === '') {
|
||||
message = '';
|
||||
}
|
||||
$message.html(message);
|
||||
}
|
||||
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)
|
||||
* https://github.com/MorrisJobke/strengthify
|
||||
* Version: 0.4.2
|
||||
* Version: 0.5.1
|
||||
* 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 > * {
|
||||
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
filter: alpha(opacity=0);
|
||||
|
|
@ -15,7 +19,7 @@
|
|||
transition:all .5s ease-in-out;
|
||||
}
|
||||
|
||||
.strengthify-bg, .strengthify-container, .strengthify-wrapper, .strengthify-separator {
|
||||
.strengthify-bg, .strengthify-container, .strengthify-separator {
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -46,3 +50,11 @@
|
|||
.password-good {
|
||||
background-color: #3C3;
|
||||
}
|
||||
|
||||
div[data-strengthifyMessage] {
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.strengthify-tiles{
|
||||
float: right;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue