I have developed an app for password validation using an AngularJS directive. The requirements for the password include at least one special character, one capital letter, one number, and a minimum length of 8 characters. Additionally, I have included a password strength bar.
If you encounter any errors or mistakes in the app, please feel free to correct them.
Thank you!
You can access the Plunkr Link here
Here is the HTML file:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script data-require="angular.js@*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
<script src="passwordModule.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div ng-app="passwordModule" ng-controller="pwdCtrl" class="container">
<h2>Password Validation:</h2>
<form name="form">
<div class="form-group">
<label>Password</label>
<input type="text" name="password" id="password" ng-model="user.password" ng-model-options="{allowInvalid: true}"
pattern-validator="((?=.*\d)(?=.*[A-Z])(?=.*\W).{8,8})" class="form-control"/>
</div>
<span class="alert alert-error" ng-show="form.password.$error.passwordPattern">
Password should contain 1 special & capital letter, 1 numeric character <br> and be a minimum of 8 characters long.</span>
<div class="form-group">
<label>Password Strength</label>
<password-strength ng-model="user.password"></password-strength>
<label>Confirm Password</label>
<input class="form-control" type = "text" name = "Confpassword" ng-model="user.cnfPwd" data-equal-to="password" >
<div data-ng-show = "showmsg"> Password matched </div>
<div data-ng-show = "hidemsg"> Password not matched </div>
</div>
<button class="btn btn-primary" type="button" ng-disabled = "disabledButton"> save </button>
</form>
</div>
<script type="text/javascript">
</script>
</body>
</html>
And here is the Controller File :
var pwdModule = angular.module('passwordModule', []);
//Controller
pwdModule.controller('pwdCtrl', ['$scope',
function($scope) {
// Initialise the password as hello
$scope.user = {};
$scope.showmsg = false;
$scope.disabledButton = true;
if($scope.user.password === undefined) {
$scope.showmsg = false;
}
$scope.$watch('user.cnfPwd', function(newVal, oldVal) {
if(newVal !== undefined){
$scope.hidemsg = true;
}
if(newVal === $scope.user.password && $scope.user.password !== undefined) {
$scope.showmsg = true;
$scope.disabledButton = false;
$scope.hidemsg = false;
} else {
$scope.showmsg = false;
$scope.disabledButton = true;
}
})
}
]);
// Directive: Validate a regex pattern
pwdModule.directive('patternValidator', [
function() {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, elem, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
var patt = new RegExp(attrs.patternValidator);
var isValid = patt.test(viewValue);
ctrl.$setValidity('passwordPattern', isValid);
return viewValue;
});
}
};
}
]);
// Dircetive: Display strength bar
pwdModule.directive('passwordStrength', [
function() {
return {
require: 'ngModel',
restrict: 'E',
scope: {
password: '=ngModel'
},
link: function(scope, elem, attrs, ctrl) {
scope.$watch('password', function(newVal) {
var strength = isSatisfied(newVal && newVal.length >= 8) +
isSatisfied(newVal && /[A-z]/.test(newVal)) +
isSatisfied(newVal && /(?=.*\W)/.test(newVal)) +
isSatisfied(newVal && /\d/.test(newVal));
var style = '',
percent= 0;
switch (strength) {
case 1:
style = 'danger';
percent = 25;
break;
case 2:
style = 'warning';
percent = 50;
break;
case 3:
style = 'warning';
percent = 75;
break;
case 4:
style = 'success';
percent = 100;
break;
}
scope.style = style;
scope.percent = percent;
function isSatisfied(criteria) {
return criteria ? 1 : 0;
}
}, true);
},
template: '<div class="progress">' +
'<div class="progress-bar progress-bar-{{style}}" style="width: {{percent}}%"></div>' +
'</div>'
}
}
])
Please review this code and make necessary modifications if required. Thanks!