April 9, 2017
Strong Password Generator Using AngularJS
Hi, friends in this post I show you how to generate strong passwords using AngularJS. In these days it is most important to have a strong password for your account to keep it secure. There is a chance for hacking if you are using simple passwords. So generate strong passwords for your account using AngularJS. AngularJS enables you to generate random passwords securely. You can customize the character set and the high-security level. All the computation is performed locally on the client side. No data is sent or received from the server. The advantage of providing this system is that it generates stronger passwords than maximum people would create for themselves so allows more protection for important applications.
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 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>SoftAOX | Strong Password Generator Using AngularJS</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script> <script src="myapp.js"></script> </head> <body> <div class="container" data-ng-app="passGenerate" data-ng-controller="passController"> <h1 align="center">Strong Password Generator Using AngularJS</h1> <hr/> <form role="form"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> <input type="text" data-ng-model="passwordInput" id="passwordInput" class="form-control" name="password" placeholder="Generate your own strong password"> </div> <br/> <div class="panel panel-default"> <div class="panel-body"> <label class="checkbox-inline"> <input type="checkbox" data-ng-model="upperGen">Uppercase Letters </label> <label class="checkbox-inline"> <input type="checkbox" data-ng-model="numbersGen">Numbers </label> <label class="checkbox-inline"> <input type="checkbox" data-ng-model="symbolsGen">Special Characters (e.g. !@#$) </label> </div> </div> <div class="form-group"> <label for="passwordInput">Password Length</label> <input type="range" min="5" max="30" step="1" value="15" data-ng-model="passwordLength">{{passwordLength}} </div> <button type="button" class="btn btn-success" data-ng-click="generatePassword()">Generate</button> </form> </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 |
// myapp.js var passGenerate = angular.module('passGenerate', ['ui.bootstrap']); var controllers = {}; controllers.passController = function($scope) { $scope.passwordLength = 15; $scope.upperGen = true; $scope.numbersGen = false; $scope.symbolsGen = false; $scope.generatePassword = function() { var lowerLetters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']; var upperLetters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; var specialCharacters = ['!', '"', '"', '#', '$', '%', '&', '\'', '(', ')', '*', '+', ',', '-', '.', '/', ':', ';', '<', '=', '>', '?', '@', '[', '\\', ']', '^', '_', '`', '{', '|', '}', '~']; var outCharacters = lowerLetters; if ($scope.upperGen) { outCharacters = outCharacters.concat(upperLetters); } if ($scope.numbersGen) { outCharacters = outCharacters.concat(numbers); } if ($scope.symbolsGen) { outCharacters = outCharacters.concat(specialCharacters); } var passwordArray = []; for (var i = 1; i < $scope.passwordLength; i++) { passwordArray.push(outCharacters[Math.floor(Math.random() * outCharacters.length)]); }; $scope.passwordInput = passwordArray.join(""); }; }; passGenerate.controller(controllers); |
