Web Stuff 25.08.2015 11681
We have designed a password meter for our products and here it is. Bootstrap 3 and jQuery is necessary to run the password strenght meter.
Password indicators shown how strong the password is in a graphical way, it has been proven that user actually use a stronger password when they see how strong or weak the password is.
We will use a little bit of jQuery and the build in progress bar from bootstrap to achieve the stylish password indicator.
/* Password strength indicator */
function passwordStrength(password) {
var desc = [{'width':'0px'}, {'width':'20%'}, {'width':'40%'}, {'width':'60%'}, {'width':'80%'}, {'width':'100%'}];
var descClass = ['', 'progress-bar-danger', 'progress-bar-danger', 'progress-bar-warning', 'progress-bar-success', 'progress-bar-success'];
var score = 0;
//if password bigger than 6 give 1 point
if (password.length > 6) score++;
//if password has both lower and uppercase characters give 1 point
if ((password.match(/[a-z]/)) && (password.match(/[A-Z]/))) score++;
//if password has at least one number give 1 point
if (password.match(/d+/)) score++;
//if password has at least one special caracther give 1 point
if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
//if password bigger than 12 give another 1 point
if (password.length > 10) score++;
// display indicator
$("#jak_pstrength").removeClass(descClass[score-1]).addClass(descClass[score]).css(desc[score]);
}
jQuery(document).ready(function(){
jQuery("#oldpass").focus();
jQuery("#pass").keyup(function() {
passwordStrength(jQuery(this).val());
});
});
<div class="progress progress-striped active">
<div id="jak_pstrength" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>