Web development | Build Website to Show Password Strength

Check Your Password Strength Without Any Privacy Issue Build Your Own Website

Step 1:-Front-end code containing Password Strength Checker

//create a file with name index.php

<!DOCTYPE html>
<! — Code By HackMefu →
<html lang=”en” >
<head>
<meta charset=”UTF-8″>
<title>Password Strength Checker | HackMefu</title>
<link rel=’stylesheet’ href=’
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css’>
<link rel=’stylesheet’ href=’
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’>
<link rel=’stylesheet’ href=’
https://fonts.googleapis.com/css?family=Lato:300,400′>
<link rel=”stylesheet” href=”./style.css”>

</head>
<body>

<div class=”container”>
<div class=”row”>
<div class=”col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3″>
<form class=”form-horizontal mar-top-bot-50″ id=”validateForm” action=”#”>
<h1>Check Password</h1>
<fieldset>
<! — Password input →
<div class=”form-group”>
<label class=”col-md-12 control-label” for=”passwordinput”>Password <span id=”popover-password-top” class=”hide pull-right block-help”><i class=”fa fa-info-circle text-danger” aria-hidden=”true”></i> Enter a strong password</span></label>
<div class=”col-md-12″>
<input id=”password” name=”password” type=”password” placeholder=”” class=”form-control input-md” data-placement=”bottom” data-toggle=”popover” data-container=”body” type=”button” data-html=”true”>
<div id=”popover-password”>
<p>Password Strength: <span id=”result”> </span></p>
<div class=”progress”>
<div id=”password-strength” class=”progress-bar progress-bar-success” role=”progressbar” aria-valuenow=”40″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width:0%”>
</div>
</div>
<ul class=”list-unstyled”>
<li class=””><span class=”low-upper-case”><i class=”fa fa-times” aria-hidden=”true”></i></span>&nbsp; 1 lowercase &amp; 1 uppercase</li>
<li class=””><span class=”one-number”><i class=”fa fa-times” aria-hidden=”true”></i></span> &nbsp;1 number (0–9)</li>
<li class=””><span class=”one-special-char”><i class=”fa fa-times” aria-hidden=”true”></i></span> &nbsp;1 Special Character (!@#$%^&*).</li>
<li class=””><span class=”eight-character”><i class=”fa fa-times” aria-hidden=”true”></i></span>&nbsp; Atleast 8 Character</li>
</ul>
</div>
</div>
</div>
<! — Repeat Password →
<div class=”form-group”>
<label class=”col-md-12 control-label” for=”passwordinput”>Password Confirmation <span id=”popover-cpassword” class=”hide pull-right block-help”><i class=”fa fa-info-circle text-danger” aria-hidden=”true”></i> Password don’t match</span></label>
<div class=”col-md-12″>
<input id=”confirm-password” name=”confirm-password” type=”password” placeholder=”” class=”form-control input-md”>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>

<script src=’https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js’></script>
<script src=’
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js’>
</script><script src=”function.js”></script>

</body>
</html>

Step 2:-Back-end code containing functions to check password strength

//Create a file with name function.js

// Code By HackMeFu
$(document).ready(function() {

$(‘#password’).keyup(function() {
var password = $(‘#password’).val();
if (checkStrength(password) == false) {
$(‘#sign-up’).attr(‘disabled’, true);
}
});
$(‘#confirm-password’).blur(function() {
if ($(‘#password’).val() !== $(‘#confirm-password’).val()) {
$(‘#popover-cpassword’).removeClass(‘hide’);
$(‘#sign-up’).attr(‘disabled’, true);
} else {
$(‘#popover-cpassword’).addClass(‘hide’);
}
});

function checkStrength(password) {
var strength = 0;

//If password contains both lower and uppercase characters, increase strength value.
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) {
strength += 1;
$(‘.low-upper-case’).addClass(‘text-success’);
$(‘.low-upper-case i’).removeClass(‘fa-times’).addClass(‘fa-check’);
$(‘#popover-password-top’).addClass(‘hide’);

} else {
$(‘.low-upper-case’).removeClass(‘text-success’);
$(‘.low-upper-case i’).addClass(‘fa-times’).removeClass(‘fa-check’);
$(‘#popover-password-top’).removeClass(‘hide’);
}

//If it has numbers and characters, increase strength value.
if (password.match(/([a-zA-Z])/) && password.match(/([0–9])/)) {
strength += 1;
$(‘.one-number’).addClass(‘text-success’);
$(‘.one-number i’).removeClass(‘fa-times’).addClass(‘fa-check’);
$(‘#popover-password-top’).addClass(‘hide’);

} else {
$(‘.one-number’).removeClass(‘text-success’);
$(‘.one-number i’).addClass(‘fa-times’).removeClass(‘fa-check’);
$(‘#popover-password-top’).removeClass(‘hide’);
}

//If it has one special character, increase strength value.
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) {
strength += 1;
$(‘.one-special-char’).addClass(‘text-success’);
$(‘.one-special-char i’).removeClass(‘fa-times’).addClass(‘fa-check’);
$(‘#popover-password-top’).addClass(‘hide’);

} else {
$(‘.one-special-char’).removeClass(‘text-success’);
$(‘.one-special-char i’).addClass(‘fa-times’).removeClass(‘fa-check’);
$(‘#popover-password-top’).removeClass(‘hide’);
}

if (password.length > 7) {
strength += 1;
$(‘.eight-character’).addClass(‘text-success’);
$(‘.eight-character i’).removeClass(‘fa-times’).addClass(‘fa-check’);
$(‘#popover-password-top’).addClass(‘hide’);

} else {
$(‘.eight-character’).removeClass(‘text-success’);
$(‘.eight-character i’).addClass(‘fa-times’).removeClass(‘fa-check’);
$(‘#popover-password-top’).removeClass(‘hide’);
}

// If value is less than 2

if (strength < 2) {
$(‘#result’).removeClass()
$(‘#password-strength’).addClass(‘progress-bar-danger’);

$(‘#result’).addClass(‘text-danger’).text(‘Very Week’);
$(‘#password-strength’).css(‘width’, ‘10%’);
} else if (strength == 2) {
$(‘#result’).addClass(‘good’);
$(‘#password-strength’).removeClass(‘progress-bar-danger’);
$(‘#password-strength’).addClass(‘progress-bar-warning’);
$(‘#result’).addClass(‘text-warning’).text(‘Week’)
$(‘#password-strength’).css(‘width’, ‘60%’);
return ‘Week’
} else if (strength == 4) {
$(‘#result’).removeClass()
$(‘#result’).addClass(‘strong’);
$(‘#password-strength’).removeClass(‘progress-bar-warning’);
$(‘#password-strength’).addClass(‘progress-bar-success’);
$(‘#result’).addClass(‘text-success’).text(‘Strength’);
$(‘#password-strength’).css(‘width’, ‘100%’);

return ‘Strong’
}

}

});

Step 3:-Back-end code containing style-sheet to make website beautiful //Create a file with name style.css

/* Code By HackMeFu */
body {
font-family: ‘Lato’, sans-serif;
background: #eeeeee;
}
.form-horizontal {
background: white;
}
.container {
margin-top: 10%;
}
.progress {
height: 5px;
}
.control-label {
text-align: left !important;
padding-bottom: 7px;
}
.form-horizontal {
padding: 25px 20px;
border: 2px solid #e8eaed;
border-radius: 5px;
}
.fa-times {
color: blue;
}

Step 4 Host Website using xampp on local system and CPanel on live website and Getting Output

Image for post
Image for post

Leave a Reply

error: Content is protected !!