Random Strong Password Generate Using AngularJS

Random Strong Password Generate Using AngularJS

Random Strong Password Generate Using AngularJS

Hi, friends here we going to see how to generate a random password using AngularJS. This is especially helpful for websites targeted to users of mobile devices.

Live Demo   Download Source Code

Index.php

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Lisenme | Random Strong Password Generate 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="angular.js"></script>
</head>
<body>
<div class="container" data-ng-app="passGenerate" data-ng-controller="passController">
    <h1 align="center">Random Strong Password Generate 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="Create Your 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 (e.g. ABCD...etc)
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" data-ng-model="numbersGen">Numbers (e.g. 1234...etc)
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" data-ng-model="symbolsGen">Special Characters (e.g. !@#$...etc)
                </label>
            </div>
        </div>
        <div class="form-group">
            <label for="passwordInput">Password Length</label>
            <input type="range" min="5" max="20" step="1" value="15" data-ng-model="passwordLength">{{passwordLength}}
        </div>
        <button type="button" class="btn btn-success" data-ng-click="generatePassword()" style="border-color: aquamarine; background-color: #029acc;">Generate Your Password</button>
    </form>
</div>
</body>
</html>

angular.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);

 

You May Also Like

About the Author: admin

Leave a Reply

Your email address will not be published. Required fields are marked *