bitexploder/password-strength-indicator.html

## password-strength-indicator.html
<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <meta charset="utf-8">
        <script>
            var passwordTypingTimer;
            var passwordDoneTypingInterval = 400;
            // $('#myModal').modal('show')
            var passwordHelp = '<br>Try:<ul><li>Adding Special Symbols\n<li>Increasing the Length<li>Using Different case Letters<li>Numbers<li><a onclick="$(\'#breachInfo\').modal(\'show\')" href="#">About password breach data</a></ul>'

            var passwordScore = 0;
            function setupPasswordMeter(elemId) {
                $(document).ready(function() {
                $('#' + elemId).keyup(function(evt) {
                    var result  = zxcvbn(evt.target.value)
                    var score   = result.score
                    var message = result.feedback.warning || 'The password is weak';

                    if (score < 4) {
                        message += passwordHelp
                    } else {
                        message = '<span class="text-success">Strong password 💪</span>'
                    }
                    $('#passwordmessage').html(message);

                    var $bar = $('#strengthBar');
                    passwordScore = score;
                    switch (score) {
                        case 0:
                            $bar.attr('class', 'progress-bar bg-danger')
                                .css('width', '1%');
                            break;
                        case 1:
                            $bar.attr('class', 'progress-bar bg-danger')
                                .css('width', '25%');
                            break;
                        case 2:
                            $bar.attr('class', 'progress-bar bg-danger')
                                .css('width', '50%');
                            break;
                        case 3:
                            $bar.attr('class', 'progress-bar bg-warning')
                                .css('width', '75%');
                            break;
                        case 4:
                            $bar.attr('class', 'progress-bar bg-success')
                                .css('width', '100%');
                            break;
                    }

                    clearTimeout(passwordTypingTimer);
                    passwordTypingTimer = setTimeout(passwordDoneTyping, passwordDoneTypingInterval)
                });
                });

            function passwordDoneTyping() {
                var password = $('#' + elemId)[0].value
                var passhash = sha1(password);
                $.get('https://api.pwnedpasswords.com/range/' + passhash.slice(0, 5), function ( data ) {
                    var hashes = {}
                    var rows = data.split('\n')
                    for (row in rows) {
                        var hashdata = rows[row].split(':')
                        hashes[hashdata[0]] = hashdata[1]
                    }
                    hashsuffix = passhash.slice(5, 40).toUpperCase()
                    var found = hashes[hashsuffix]
                    if(found !== undefined) {
                        if(passwordScore == 4) {
                            $('#passwordmessage').html('Password is strong, but has been breached<br>')
                        }
                        var msg = $('#passwordmessage').html()
                        msg = 'Password was involved in ' + found + ' password breaches <br>' + msg
                        if(passwordScore == 4) {
                            msg += passwordHelp
                        }
                        var $bar = $('#strengthBar');
                        $bar.attr('class', 'progress-bar bg-danger')
                            .css('width', '0%');
                        $('#passwordmessage').html(msg);

                    }
                });
            }
            }
        </script>
    </head>
    <body>
        <div class="container">

                <div class="row">
                        <div class="col-md-8 col-sm-10 col-xs-12">
                            <form method="post" action="">
                                <div class="form-group">
                                    <label for="username">Username</label>
                                    <input class="form-control"
                                        type="username"
                                        name="username"
                                        value=""
                                        required"required"
                                        placeholder="Enter username">
                                </div>
                                <div style="height:10px;">&nbsp;</div>
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input type="password" id="password_id" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password" value="">

                                <div class="progress password-progress">
                                    <div id="strengthBar" class="progress-bar" role="progressbar" style="width: 0;"></div>
                                </div>

                                <div class="text-danger" id="passwordmessage">
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">Signup</button>
                            </form>
                        </div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha1/0.6.0/sha1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js" integrity="sha384-6ePHh72Rl3hKio4HiJ841psfsRJveeS+aLoaEf3BWfS+gTF0XdAqku2ka8VddikM" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script>
            setupPasswordMeter('password_id');
        </script>
    </body>
</html>
	<!doctype html>
	<html>
	<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<meta charset="utf-8">
	<script>
	var passwordTypingTimer;
	var passwordDoneTypingInterval = 400;
	// $('#myModal').modal('show')
	var passwordHelp = '<br>Try:<ul><li>Adding Special Symbols\n<li>Increasing the Length<li>Using Different case Letters<li>Numbers<li><a onclick="$(\'#breachInfo\').modal(\'show\')" href="#">About password breach data</a></ul>'

	var passwordScore = 0;
	function setupPasswordMeter(elemId) {
	$(document).ready(function() {
	$('#' + elemId).keyup(function(evt) {
	var result = zxcvbn(evt.target.value)
	var score = result.score
	var message = result.feedback.warning \|\| 'The password is weak';

	if (score < 4) {
	message += passwordHelp
	} else {
	message = '<span class="text-success">Strong password 💪</span>'
	}
	$('#passwordmessage').html(message);

	var $bar = $('#strengthBar');
	passwordScore = score;
	switch (score) {
	case 0:
	$bar.attr('class', 'progress-bar bg-danger')
	.css('width', '1%');
	break;
	case 1:
	$bar.attr('class', 'progress-bar bg-danger')
	.css('width', '25%');
	break;
	case 2:
	$bar.attr('class', 'progress-bar bg-danger')
	.css('width', '50%');
	break;
	case 3:
	$bar.attr('class', 'progress-bar bg-warning')
	.css('width', '75%');
	break;
	case 4:
	$bar.attr('class', 'progress-bar bg-success')
	.css('width', '100%');
	break;
	}

	clearTimeout(passwordTypingTimer);
	passwordTypingTimer = setTimeout(passwordDoneTyping, passwordDoneTypingInterval)
	});
	});

	function passwordDoneTyping() {
	var password = $('#' + elemId)[0].value
	var passhash = sha1(password);
	$.get('https://api.pwnedpasswords.com/range/' + passhash.slice(0, 5), function ( data ) {
	var hashes = {}
	var rows = data.split('\n')
	for (row in rows) {
	var hashdata = rows[row].split(':')
	hashes[hashdata[0]] = hashdata[1]
	}
	hashsuffix = passhash.slice(5, 40).toUpperCase()
	var found = hashes[hashsuffix]
	if(found !== undefined) {
	if(passwordScore == 4) {
	$('#passwordmessage').html('Password is strong, but has been breached<br>')
	}
	var msg = $('#passwordmessage').html()
	msg = 'Password was involved in ' + found + ' password breaches <br>' + msg
	if(passwordScore == 4) {
	msg += passwordHelp
	}
	var $bar = $('#strengthBar');
	$bar.attr('class', 'progress-bar bg-danger')
	.css('width', '0%');
	$('#passwordmessage').html(msg);

	}
	});
	}
	}
	</script>
	</head>
	<body>
	<div class="container">

	<div class="row">
	<div class="col-md-8 col-sm-10 col-xs-12">
	<form method="post" action="">
	<div class="form-group">
	<label for="username">Username</label>
	<input class="form-control"
	type="username"
	name="username"
	value=""
	required"required"
	placeholder="Enter username">
	</div>
	<div style="height:10px;"> </div>
	<div class="form-group">
	<label for="password">Password</label>
	<input type="password" id="password_id" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password" value="">

	<div class="progress password-progress">
	<div id="strengthBar" class="progress-bar" role="progressbar" style="width: 0;"></div>
	</div>

	<div class="text-danger" id="passwordmessage">
	</div>
	</div>
	<button type="submit" class="btn btn-primary">Signup</button>
	</form>
	</div>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha1/0.6.0/sha1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js" integrity="sha384-6ePHh72Rl3hKio4HiJ841psfsRJveeS+aLoaEf3BWfS+gTF0XdAqku2ka8VddikM" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script>
	setupPasswordMeter('password_id');
	</script>
	</body>
	</html>