Random Password Generator With AngularJS

on June 16, 2017
🔥 2608 views
Contents hide
1) Implementation
2) Password Generator
3) Generator Angular App
4) Generating Function

In this tutorial, we will see how to create the Random Password Generator With AngularJS. We will set 4 option in which it will generate password with
– Uppercase Letter
– Lowercase Letter
– Symbol
– Number

Check out the demo on how to Create the Random Password Generator With AngularJS.



Implementation

To create a Random Password Generator we will be using the AngularJS and the Bootstrap(optional) for design purpose.
let’s start with implementing the dependencies.
Next, create two files index.html and app.js
Now let’s include the required files into our index.html

index.html

<html>
	<head>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	</head>
	
	<body>
		<!-- Our App Goes Here -->
		
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
		<script src="app.js"></script> <!-- Custome Script -->
	</body>
</html>

Here you can see we have included Angular.min.js and our main app.js at bottom of the page, and the bootstrap.min.css at the top of the page.
And if you are using the package manager(npm) you can download through a command in terminal:

BASH

$ npm install angular --save // AngularJS

$ npm install [email protected] --save // Latest Bootsrap v 3.x.x

Password Generator

Now let’s first create our random password generator form for taking parameters from the user.

index.html

<div class="container" ng-app="passwordGenerator">
    <h2 class="text-center">Password Generator</h2>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form autocomplete="off" ng-controller="PasswordGeneratorController">
                <div class="form-group">
                    <label>Password Length: </label><br>
                    <select ng-model="passwordLength" ng-change="passwordLengthCheck()" class="form-control">
                        <optgroup label="Weak">
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                        </otpgroup>
                        <optgroup label="Strong">
                            <option value="16">16</option>
                            <option value="24">24</option>
                        </optgroup>
                        <optgroup label="Very Strong">
                            <option value="32">32</option>
                            <option value="64">64</option>
                            <option value="128">128</option>
                            <option value="256">256</option>
                        </optgroup>
                        <optgroup label="Unbelievable">
                            <option value="512">512</option>
                            <option value="1024">1024</option>
                            <option value="2048">2048</option>
                        </optgroup>
                    </select>
                </div>

                <label class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" ng-model="checkboxModel.lowerCase">
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Include Lowercase Characters</span>
                </label>
                <br />
                <label class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" ng-model="checkboxModel.numbers">
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Include Numbers</span>
                </label>
                <br />
                <label class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" ng-model="checkboxModel.symbols">
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Include Symbols </span>
                </label>
                <br />
                <label class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" ng-model="checkboxModel.upperCase">
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Include Uppercase Characters</span>
                </label>

                <div class="form-group">
                    <label for="password">Your Password:</label>
                    <input type="text" class="form-control" id="password" placeholder="Your Password" ng-model="password"/>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary" ng-click="generatePassword()">Generate Password</button>
                </div>
            </form>
        </div>
    </div>
</div>

As you can see we have assigned the main app and the controller which Will control the angular functioning. we have created the input to select the size of the password, then after we have set four checkBox to generate the password as per given rule. Then an input field that will give the generated password and on last a submit button which will generate the password

Generator Angular App

As above we create a file named app.js, so let’s create our app by giving any specific name for the angular application and its controller.

We will see stepwise, First of all, we will set our angular application


var app = angular.module('passwordGenerator', []); // app name
//controller name
app.controller('PasswordGeneratorController', function($scope) {
// functionality Goes Here
});

Now let’s begin with the functionality part in which that it can generate a password with the given size and rules.
Step by step we will set the app, So first we will create an object checkboxModel which will set the default rules to false value


var app = angular.module('passwordGenerator', []);
app.controller('PasswordGeneratorController', function($scope) {
$scope.checkboxModel = {
       symbols : false,
       numbers : false,
       upperCase : false,
       lowerCase : false
     };
});

After defining the object we will create the empty variables and 4 arrays which will be containing the Uppercase Letters, Lowercase Letters, Symbols and last the numbers. this all array will be defined in controller only.


var app = angular.module('passwordGenerator', []);
app.controller('PasswordGeneratorController', function($scope) {
$scope.checkboxModel = {...};
// variables and Array's
$scope.passwordLength = '';
      $scope.password = '';
      $scope.upperCaseArray = ['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'];

      $scope.lowerCaseArray = ['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'];

      $scope.numbersArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

      $scope.symbolsArray = ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')', 
                             '_', '-', '+', '=', '{', '}', '[', ']', '|', '\\', ':',
                             ';', '"', '\'', '<', '>', ',', '.', '?', '/', '`', '~'];
});

We have created an array’s as per the password rule is assigned.

Generating Function

Now let’s jump into the main part of the password generator app. We will create a function which will generate a password as per the checkbox values. This going to be a long if ..else function because there can be 16 opportunities to generate a random password.


$scope.generatePassword = function(){
      $scope.password = "";
      for (var i=0; i<$scope.passwordLength; i++) {
        /* if upperCase : true,*/
        if($scope.checkboxModel.upperCase === true && $scope.checkboxModel.lowerCase === false && $scope.checkboxModel.numbers === false && $scope.checkboxModel.symbols === false){
          $scope.temp = Math.floor(Math.random()*$scope.upperCaseArray.length);
          $scope.password += $scope.upperCaseArray[$scope.temp];
        }
        /*if lowerCase : true,*/
        else if($scope.checkboxModel.upperCase === false && $scope.checkboxModel.lowerCase === true && $scope.checkboxModel.numbers === false && $scope.checkboxModel.symbols === false){
          $scope.temp = Math.floor(Math.random()*$scope.lowerCaseArray.length);
          $scope.password += $scope.lowerCaseArray[$scope.temp];
        }
       /*if numbers   : true,*/
        else if($scope.checkboxModel.upperCase === false && $scope.checkboxModel.lowerCase === false && $scope.checkboxModel.numbers === true && $scope.checkboxModel.symbols === false){
          $scope.temp = Math.floor(Math.random()*$scope.numbersArray.length);
          $scope.password += $scope.numbersArray[$scope.temp];
        }
        /* if symbols   : true */
        else if($scope.checkboxModel.upperCase === false && $scope.checkboxModel.lowerCase === false && $scope.checkboxModel.numbers === false && $scope.checkboxModel.symbols === true){
          $scope.temp = Math.floor(Math.random()*$scope.symbolsArray.length);
          $scope.password += $scope.symbolsArray[$scope.temp];
        }

        /* if upperCase : true, & lowerCase : true,*/
        else if($scope.checkboxModel.upperCase === true && $scope.checkboxModel.lowerCase === true && $scope.checkboxModel.numbers === false && $scope.checkboxModel.symbols === false){
          $scope.upperLowerArray = $scope.upperCaseArray.concat($scope.lowerCaseArray); 
          $scope.temp = Math.floor(Math.random()*$scope.upperLowerArray.length);
          $scope.password += $scope.upperLowerArray[$scope.temp]; 
        }
        /* if upperCase : true,& numbers   : true, */
        else if($scope.checkboxModel.upperCase === true && $scope.checkboxModel.lowerCase === false && $scope.checkboxModel.numbers === true && $scope.checkboxModel.symbols === false){
          $scope.upperNumbersArray = $scope.upperCaseArray.concat($scope.numbersArray); 
          $scope.temp = Math.floor(Math.random()*$scope.upperNumbersArray.length);
          $scope.password += $scope.upperNumbersArray[$scope.temp]; 
        }
        /* iflowerCase : true,& numbers   : true,*/
        else if($scope.checkboxModel.upperCase === false && $scope.checkboxModel.lowerCase === true && $scope.checkboxModel.numbers === true && $scope.checkboxModel.symbols === false){
          $scope.lowerNumbersArray = $scope.lowerCaseArray.concat($scope.numbersArray); 
          $scope.temp = Math.floor(Math.random()*$scope.lowerNumbersArray.length);
          $scope.password += $scope.lowerNumbersArray[$scope.temp]; 
        }
        /* if lowerCase : true, & symbols   : true*/
        else if($scope.checkboxModel.upperCase === false && $scope.checkboxModel.lowerCase === true && $scope.checkboxModel.numbers === false && $scope.checkboxModel.symbols === true){
          $scope.lowerSymbolsArray = $scope.lowerCaseArray.concat($scope.symbolsArray); 
          $scope.temp = Math.floor(Math.random()*$scope.lowerSymbolsArray.length);
          $scope.password += $scope.lowerSymbolsArray[$scope.temp]; 
        }
        /* if numbers   : true, & symbols   : true */
        else if($scope.checkboxModel.upperCase === false && $scope.checkboxModel.lowerCase === false && $scope.checkboxModel.numbers === true && $scope.checkboxModel.symbols === true){
          $scope.numbersSymbolsArray = $scope.numbersArray.concat($scope.symbolsArray); 
          $scope.temp = Math.floor(Math.random()*$scope.numbersSymbolsArray.length);
          $scope.password += $scope.numbersSymbolsArray[$scope.temp]; 
        }
        /* if upperCase : true, & symbols   : true */
        else if($scope.checkboxModel.upperCase === true && $scope.checkboxModel.lowerCase === false && $scope.checkboxModel.numbers === false && $scope.checkboxModel.symbols === true){
          $scope.upperSymbolsArray = $scope.upperCaseArray.concat($scope.symbolsArray); 
          $scope.temp = Math.floor(Math.random()*$scope.upperSymbolsArray.length);
          $scope.password += $scope.upperSymbolsArray[$scope.temp]; 
        }

        /* if upperCase : true, & lowerCase : true, & numbers   : true, */
        else if($scope.checkboxModel.upperCase === true && $scope.checkboxModel.lowerCase === true && $scope.checkboxModel.numbers === true && $scope.checkboxModel.symbols === false){
          $scope.upperLowerArray = $scope.upperCaseArray.concat($scope.lowerCaseArray); 
          $scope.upperLowerNumbersArray = $scope.upperLowerArray.concat($scope.numbersArray); 
          $scope.temp = Math.floor(Math.random()*$scope.upperLowerNumbersArray.length);
          $scope.password += $scope.upperLowerNumbersArray[$scope.temp]; 
        }
        /*if lowerCase : true, & numbers   : true, & symbols   : true */
        else if($scope.checkboxModel.upperCase === false && $scope.checkboxModel.lowerCase === true && $scope.checkboxModel.numbers === true && $scope.checkboxModel.symbols === true){
          $scope.lowerNumbersArray = $scope.lowerCaseArray.concat($scope.numbersArray); 
          $scope.lowerNumbersSymbolsArray = $scope.lowerNumbersArray.concat($scope.symbolsArray); 
          $scope.temp = Math.floor(Math.random()*$scope.lowerNumbersSymbolsArray.length);
          $scope.password += $scope.lowerNumbersSymbolsArray[$scope.temp]; 
        }
        /* if upperCase : true, & numbers   : true, & symbols   : true */
        else if($scope.checkboxModel.upperCase === true && $scope.checkboxModel.lowerCase === false && $scope.checkboxModel.numbers === true && $scope.checkboxModel.symbols === true){
          $scope.numbersSymbolsArray = $scope.numbersArray.concat($scope.symbolsArray); 
          $scope.numbersSymbolsUpperArray = $scope.numbersSymbolsArray.concat($scope.upperCaseArray); 
          $scope.temp = Math.floor(Math.random()*$scope.numbersSymbolsUpperArray.length);
          $scope.password += $scope.numbersSymbolsUpperArray[$scope.temp]; 
        }
        /* if upperCase : true, & lowerCase : true, & symbols   : true */
        else if($scope.checkboxModel.upperCase === true && $scope.checkboxModel.lowerCase === true && $scope.checkboxModel.numbers === false && $scope.checkboxModel.symbols === true){
          $scope.upperLowerArray = $scope.upperCaseArray.concat($scope.lowerCaseArray); 
          $scope.upperLowerSymbolsArray = $scope.upperLowerArray.concat($scope.symbolsArray); 
          $scope.temp = Math.floor(Math.random()*$scope.upperLowerSymbolsArray.length);
          $scope.password += $scope.upperLowerSymbolsArray[$scope.temp]; 
        }
        
        /* if all Are true*/
        else if($scope.checkboxModel.upperCase === true && $scope.checkboxModel.lowerCase === true && $scope.checkboxModel.numbers === true && $scope.checkboxModel.symbols === true){
          $scope.upperLowerArray = $scope.upperCaseArray.concat($scope.lowerCaseArray); 
          $scope.numbersSymbolsArray = $scope.numbersArray.concat($scope.symbolsArray); 
          $scope.upperLowerSymbolsNumbersArray = $scope.upperLowerArray.concat($scope.numbersSymbolsArray); 
          $scope.temp = Math.floor(Math.random()*$scope.upperLowerSymbolsNumbersArray.length);
          $scope.password += $scope.upperLowerSymbolsNumbersArray[$scope.temp]; 
        }
        /* if all are false*/
        else{
          // nothing happens
        }
      }
    };

For every option, we have set the condition for generating the password

Get Some More Angular Here!

Tags: , , , ,