
10 changed files with 133 additions and 5 deletions
@ -1,2 +1,5 @@
|
||||
import "bootstrap"; |
||||
import "./style.css"; |
||||
import $ from "jquery" |
||||
window.jQuery = $; |
||||
window.$ = $; |
||||
|
@ -0,0 +1,73 @@
|
||||
//Requires zxcvbn.js and Bootstrap
|
||||
(function ($) { |
||||
|
||||
$.fn.zxcvbnProgressBar = function (options) { |
||||
|
||||
//init settings
|
||||
var settings = $.extend({ |
||||
passwordInput: '#Password', |
||||
userInputs: [], |
||||
ratings: ["Very weak", "Weak", "OK", "Strong", "Very strong"], |
||||
//all progress bar classes removed before adding score specific css class
|
||||
allProgressBarClasses: "progress-bar-danger progress-bar-warning progress-bar-success progress-bar-striped active", |
||||
//bootstrap css classes (0-4 corresponds with zxcvbn score)
|
||||
progressBarClass0: "progress-bar-danger progress-bar-striped active", |
||||
progressBarClass1: "progress-bar-danger progress-bar-striped active", |
||||
progressBarClass2: "progress-bar-warning progress-bar-striped active", |
||||
progressBarClass3: "progress-bar-success", |
||||
progressBarClass4: "progress-bar-success" |
||||
}, options); |
||||
|
||||
return this.each(function () { |
||||
settings.progressBar = this; |
||||
//init progress bar display
|
||||
UpdateProgressBar(); |
||||
//Update progress bar on each keypress of password input
|
||||
$(settings.passwordInput).keyup(function (event) { |
||||
UpdateProgressBar(); |
||||
}); |
||||
}); |
||||
|
||||
function UpdateProgressBar() { |
||||
var progressBar = settings.progressBar; |
||||
var password = $(settings.passwordInput).val(); |
||||
if (password) { |
||||
var result = zxcvbn(password, settings.userInputs); |
||||
//result.score: 0, 1, 2, 3 or 4 - if crack time is less than 10**2, 10**4, 10**6, 10**8, Infinity.
|
||||
var scorePercentage = (result.score + 1) * 20; |
||||
$(progressBar).css('width', scorePercentage + '%'); |
||||
|
||||
if (result.score == 0) { |
||||
//weak
|
||||
$(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass0); |
||||
$(progressBar).html(settings.ratings[0]); |
||||
} |
||||
else if (result.score == 1) { |
||||
//normal
|
||||
$(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass1); |
||||
$(progressBar).html(settings.ratings[1]); |
||||
} |
||||
else if (result.score == 2) { |
||||
//medium
|
||||
$(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass2); |
||||
$(progressBar).html(settings.ratings[2]); |
||||
} |
||||
else if (result.score == 3) { |
||||
//strong
|
||||
$(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass3); |
||||
$(progressBar).html(settings.ratings[3]); |
||||
} |
||||
else if (result.score == 4) { |
||||
//very strong
|
||||
$(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass4); |
||||
$(progressBar).html(settings.ratings[4]); |
||||
} |
||||
} |
||||
else { |
||||
$(progressBar).css('width', '0%'); |
||||
$(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass0); |
||||
$(progressBar).html(''); |
||||
} |
||||
} |
||||
}; |
||||
})(jQuery); |
File diff suppressed because one or more lines are too long
@ -1,3 +1,2 @@
|
||||
<script src="/bundle.js"></script> |
||||
</body> |
||||
</html> |
||||
|
Loading…
Reference in new issue