April 8, 2017
Password Strength Checker Using AngularJS
Hi, friends in this post we going to see how to do password strength checker using AngularJS. Password are generally used for user authentication in largest web applications and it is essential that password is stored in a secure way. The user who uses a pretty common word as the password does the effort of hashing useless since a monster attack can crack such password in a very short period. In fact, if highly complex foundation The user for the attack, it may also take a crack in milliseconds, depending upon the password complexity or length. Several web applications now such as Facebook, Twitter, etc.. require users must appreciably secure password either by assuring alphanumeric characters or minimum password length and symbols in the password. I think this is really useful for a lot of purposes, that everyone can understand simply.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>SoftAOX | Password Strength Checker Using AngularJS</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script> <script type="text/javascript" src="myapp.js"></script> </head> <body> <div class="container" ng-app="sa_strength" ng-controller="controller"> <h1 align="center">Password Strength Checker Using AngularJS</h1> <hr/> <div class="panel panel-default"> <div class="panel-body"> <div class="text-center"> <h3> <i class="glyphicon glyphicon-lock" style="font-size:50px;"></i> </h3> <h2 class="text-center">Password Strength Checker</h2> <form name="password_form"> <label for="pass">Password</label> <div class="form-group input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i> </span> <input type="password" name="pass" id="pass" ng-model="user_input.pass" ng-model-options="{allowInvalid: true}" pattern-validator="((?=.*\d)(?=.*[A-Z])(?=.*\W).{8,8})" class="form-control" placeholder="Enter Password" type="password" > </div> <div class="form-group"> <label>Password Strength</label> <password-strength ng-model="user_input.pass"></password-strength> </div> <div class="alert alert-info" ng-show="password_form.pass.$error.pass_Check"> <strong>Info!</strong> Please enter At leaset 8 characters, and combine uppercase letters, lowercase letter, number and symbols. </div> </form> </div> </div> </div> </div> </body> </html> |
myapp.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
// myapp.js var app = angular.module('sa_strength', []) .controller('controller', ['$scope', function($scope) { $scope.user_input = { pass: '' }; } ]) .directive('passwordStrength', [ function() { return { require: 'ngModel', restrict: 'E', scope: { pass: '=ngModel' }, link: function(scope, elem, attrs, ctrl) { scope.$watch('pass', function(input_Value) { scope.strength = isSatisfied(input_Value && input_Value.length >= 8) + isSatisfied(input_Value && /[A-z]/.test(input_Value)) + isSatisfied(input_Value && /(?=.*\W)/.test(input_Value)) + isSatisfied(input_Value && /\d/.test(input_Value)); function isSatisfied(criteria) { return criteria ? 1 : 0; } }, true); }, template: '<div class="progress">' + '<div class="progress-bar progress-bar-danger progress-bar-striped active" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: {{strength >= 1 ? 25 : 0}}%"></div>' + '<div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: {{strength >= 2 ? 25 : 0}}%"></div>' + '<div class="progress-bar progress-bar-info progress-bar-striped active" style="width: {{strength >= 3 ? 25 : 0}}%"></div>' + '<div class="progress-bar progress-bar-success progress-bar-striped active" style="width: {{strength >= 4 ? 25 : 0}}%"></div>' + '</div>' } } ]) .directive('patternValidator', [ function() { return { require: 'ngModel', restrict: 'A', link: function(scope, elem, attrs, ctrl) { ctrl.$parsers.unshift(function(viewStrength) { var patt = new RegExp(attrs.patternValidator); var isValid = patt.test(viewStrength); ctrl.$setValidity('pass_Check', isValid); return viewStrength; }); } }; } ]); |
