Skip to content

Instantly share code, notes, and snippets.

@bitexploder

bitexploder/password-strength-indicator.html

Last active June 22, 2018 17:28
Show Gist options
  • Save bitexploder/9af6a891a4639cac23ee39fce749e0d4 to your computer and use it in GitHub Desktop.
Save bitexploder/9af6a891a4639cac23ee39fce749e0d4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment