<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/1.0/zxcvbn-async.min.js"></script>
<div class="container">
<div class="row">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
<div class="password-background"></div>
<a class="show-password" href="">Show password</a>
<span class="strength"></span>
</div>
</form>
</div>
</div>
body {
/* background: #4ec094; */
}
.password-background {
position: relative;
top: -34px;
margin-bottom: -34px;
height: 34px;
width: 0;
border-radius: 4px;
z-index: -1;
/* CSS Transitions */
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#password {
background: none;
}
.strength {
float: right;
}
$( document ).ready(function() {
$('#password').on('propertychange change keyup paste input', function() {
// TODO: only use the first 128 characters to stop this from blocking the browser if a giant password is entered
var password = $(this).val();
var passwordScore = zxcvbn(password)['score'];
var updateMeter = function(width, background, text) {
$('.password-background').css({"width": width, "background-color": background});
$('.strength').text('Strength: ' + text).css('color', background);
}
if (passwordScore === 0) {
if (password.length === 0) {
updateMeter("0%", "#ffa0a0", "none");
} else {
updateMeter("20%", "#ffa0a0", "very weak");
}
}
if (passwordScore == 1) updateMeter("40%", "#ffb78c", "weak");
if (passwordScore == 2) updateMeter("60%", "#ffec8b", "medium");
if (passwordScore == 3) updateMeter("80%", "#c3ff88", "strong");
if (passwordScore == 4) updateMeter("100%", "#ACE872", "very strong"); // Color needs changing
});
// TODO: add ie 8/7 support, what browsers didnt support this check market share
$('.show-password').click(function(event) {
event.preventDefault();
if ($('#password').attr('type') === 'password') {
$('#password').attr('type', 'text');
$('.show-password').text('Hide password');
} else {
$('#password').attr('type', 'password');
$('.show-password').text('Show password');
}
});
});
