Password Strength Checker with Generator

by Ihor Vyspiansky

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <style type="text/css">
	.password-group {
		padding: 10px;
		width: 250px;
	}
	input {
		width: 100%;
	}
	</style>
</head>
<body>
<div class="password-group">
    <label for="UserPasswordInput">Password</label>
    <a href="#" id="generatePassword">Generate</a>
    <input name="user_password" type="text" class="password-field" id="UserPasswordInput">
</div>
</body>
</html>

CSS

.strengthify-wrapper{position:relative}.strengthify-wrapper>*{-ms-filter:"alpha(opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.strengthify-bg,.strengthify-container,.strengthify-separator{height:3px}.strengthify-bg,.strengthify-container{display:block;position:absolute;width:100%}.strengthify-bg{background-color:#BBB}.strengthify-separator{display:inline-block;position:absolute;background-color:#FFF;width:1px;z-index:10}.password-bad{background-color:#C33}.password-medium{background-color:#F80}.password-good{background-color:#3C3}div[data-strengthifyMessage]{padding:3px 8px}.strengthify-tiles{float:right}

JavaScript

$('#generatePassword').click(function (e) {
    password = $.password(10);

    $('.password-field').val(password);
    
    $('.password-field').trigger("change");

    e.preventDefault();
});

$.extend({
    password: function (length, special) {
        var iteration = 0;
        var password = "";
        var randomNumber;
        if (special == undefined) {
            var special = false;
        }
        while (iteration < length) {
            randomNumber = (Math.floor((Math.random() * 100)) % 94) + 33;
            if (!special) {
                if ((randomNumber >= 33) && (randomNumber <= 47)) {
                    continue;
                }
                if ((randomNumber >= 58) && (randomNumber <= 64)) {
                    continue;
                }
                if ((randomNumber >= 91) && (randomNumber <= 96)) {
                    continue;
                }
                if ((randomNumber >= 123) && (randomNumber <= 126)) {
                    continue;
                }
            }
            iteration++;
            password += String.fromCharCode(randomNumber);
        }
        return password;
    }
});

/**
 * Strengthify - show the weakness of a password (uses zxcvbn for this)
 * https://github.com/MorrisJobke/strengthify
 */
(function($){$.fn.strengthify=function(paramOptions){"use strict";var defaults={zxcvbn:'zxcvbn/zxcvbn.js',userInputs:[],titles:['Weakest','Weak','So-so','Good','Perfect'],tilesOptions:{tooltip:true,element:false},drawTitles:false,drawMessage:false,drawBars:true,$addAfter:null,nonce:null};return this.each(function(){var options=$.extend(defaults,paramOptions);if(!options.drawTitles&&!options.drawMessage&&!options.drawBars){console.warn("expect at least one of 'drawTitles', 'drawMessage', or 'drawBars' to be true")}function getWrapperFor(id){return $('div[data-strengthifyFor="'+id+'"]')};function drawStrengthify(){var...