Login And Sign Up Using Angular js with help of local storage

1.index.html

<html ng-app='LogIn'>

<head>
    <meta charset="utf-8">
    <meta http-equiv=="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LOG IN</title>
    <!-- styling css -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <!-- min scripts -->
    <script src="assets/js/angular.min.js"></script>
    <script src="assets/js/angular-route.min.js"></script>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- angular components -->
    <script src="App.js"></script>
    <script src="LogInCtrl.js"></script>
    <script src="accountCtrl.js"></script>
    <script src="homeCtrl.js"></script>
</head>
<!-- end of head -->

<body>
    <div class="header">
        <h3>EMPLOYEE LOG IN PAGE</h3>
    </div>
    <div class="container">
        <div class="ngview">
            <ng-view></ng-view>
            <!-- end of ng-view -->
        </div>
        <!-- end of view div-->
    </div>
    <!-- end of container -->
    <div class="footer">
        &copy;
        </p>
    </div>
    <!-- end of footer -->
</body>
<!-- end of body -->

</html>
<!-- end of html -->

2.App.js

/**
 * @Filename : app.js

 *
 */

var app = angular.module('LogIn', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider, $locationProvider) {
        //$locationProvider.html5Mode(true);
        $routeProvider.when('/', {
            templateUrl: 'templates/LogIn.html',
            controller: 'LogInCtrl'
        }).when('/account', {
            templateUrl: 'templates/account.html',
            controller: 'accountCtrl'
        }).when('/home', {
            resolve: {
                "check": function($location, $rootScope) {
                    if (!$rootScope.login) {
                        $location.path('/');
                    }
                }
            },
            templateUrl: 'templates/home.html',
            controller: 'homeCtrl'
        }).otherwise({
            redirectTo: '/'
        });
    }

3.login.html

<div class="wrapper">
    <form class="form-signin" name="loginform">
        <h2 class="form-signin-heading">Please login</h2>
        <input type="text" class="form-control" name="username" ng-model="username" placeholder="User Name" required autofocus="" id="txtuname" />
        <a ng-model="user=username"></a>
        <input type="password" id="txtpwd" class="form-control" name="password" placeholder="Password" required/>
        <label class="checkbox">
            <input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe" /> Remember me
        </label>
        <button class="btn btn-lg btn-primary btn-block" type="submit" ng-click="homefn()">LOG IN</button>
        <a href="#/account" class="btn btn-lg btn-primary btn-block" style="cursor:pointer" role="button">CREATE ACCOUNT</a>
    </form>
</div>
4.login control
 app.controller("LogInCtrl", function($scope, $location, $window, $rootScope) {

    $scope.homefn = function() {

        var x = document.forms["loginform"]["txtuname"].value;
        var y = document.forms["loginform"]["txtpwd"].value;
        if (x == null || x == "" && y == null || y == "") {
            alert - danger("must be filled out");
            return false;
        }

        var temp = [];
        var xx;
        var z;
        var temp2 = [];
        var name = document.getElementById("txtuname").value;
        var upwd = document.getElementById("txtpwd").value;

        temp = JSON.parse(localStorage.getItem("uname"));
        temp2 = JSON.parse(localStorage.getItem("userpassword"));

        for (var i = 0; i <= temp.length && temp2.length; i++) {
            xx = temp[i];
            z = temp[i];
            if (name == xx && upwd == z) {
                $rootScope.login = true;
                $location.path("/home");
            }
        }
        localStorage.setItem('member', name);
        alert(name);

    };
});

5.Home.html  

<div>
      <div class="logout" style="float:right" >
         
   
       <button class="btn btn-lg btn-primary " type="submit" ng-click="outfn()">LOG OUT</button>
          </div>
    <span>welcome</span>   {{member}}..!<a>

</div>

6.Register.html
  <div class="container" style="margin-top:130px">
        <form name="Registerform"  role="form">
            <h2>Registration Form</h2>
            <div class="form-group">
                <label for="firstName" class="col-sm-3 control-label">Full Name</label>
                <div class="col-sm-9">
                    <input type="text" id="firstName" name="firstName" placeholder="Full Name" class="form-control" autofocus ng-pattern="/^[a-zA-Z0-9]*$/" ng-model="firstName" required>
                    <span class="help-block">Last Name, First Name, eg.: Smith, Harry</span>
                    <!--error message -->
                    <div style="color:red" ng-show="Registerform.firstName.$error.pattern">
                        Not a Spcl character
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="firstName" class="col-sm-3 control-label">User Name</label>
                <div class="col-sm-9">
                    <input type="text" id="username" name="username" placeholder="User Name" class="form-control" autofocus ng-pattern="/^[a-zA-Z0-9]*$/" ng-model="username" required>
                    <!--error message -->
                    <div style="color:red" ng-show="Registerform.username.$error.pattern">
                        Not a Spcl character
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="email" class="col-sm-3 control-label">Email</label>
                <div class="col-sm-9">
                    <input type="email" id="email" ng-model="email" placeholder="Email" class="form-control" required>
                    <!--error message -->
                    <div class="alert alert-warning fade in"  style="color:red" ng-show="Registerform.$error.email">
                          Enter Valid E-Mail
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-sm-3 control-label">Password</label>
                <div class="col-sm-9">
                    <input type="password" required placeholder="password" name="password" id="password" class="form-control" ng-model="user.password" />
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-sm-3 control-label">Confirm Password</label>
                <div class="col-sm-9">
                    <input type="password" required ng-pattern="getPattern()" placeholder="confirm password" name="confirm_password" id="confirm_password" ng-model="user.password_verify" class="form-control" />
                    <div class="alert alert-danger fade in" ng-show="Registerform.confirm_password.$error.pattern" style="color:red">
                        Passwords doesn't match
                      </div>
                </div>
            </div>
            <div class="form-group">
                <label for="birthDate" class="col-sm-3 control-label">Date of Birth</label>
                <div class="col-sm-9">
                    <input type="date" id="birthDate" class="form-control" required>
                </div>
            </div>
            <div class="form-group">
                <label for="country" class="col-sm-3 control-label">Country</label>
                <div class="col-sm-9">
                    <select id="country" class="form-control" required>
                        <option>India</option>
                        <option>USA</option>
                        <option>Uk</option>
                        <option>Pakistan</option>
                        <option>West Indies</option>
                    </select>
                </div>
            </div>
            <!-- /.form-group -->
            <div class="form-group">
                <label class="control-label col-sm-3">Gender</label>
                <div class="col-sm-6">
                    <div class="row">
                        <div class="col-sm-4">
                            <label class="radio-inline">
                                <input type="radio" id="femaleRadio" value="Female">Female
                            </label>
                        </div>
                        <div class="col-sm-4">
                            <label class="radio-inline">
                                <input type="radio" id="maleRadio" value="Male">Male
                            </label>
                        </div>
                        <div class="col-sm-4">
                            <label class="radio-inline">
                                <input type="radio" id="uncknownRadio" value="Unknown">Unknown
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.form-group -->
            <div class="form-group">
                <div class="col-sm-9 col-sm-offset-3">
                    <div class="chebox">
                        <label><input type="checkbox">I accept <a href="#">terms</a></label>
                    </div>
                </div>
            </div>
            <!-- /.form-group -->
            <div class="form-group">
                <div class="col-sm-9 col-sm-offset-3">
                    <button  class="btn btn-primary btn-block" ng-click="save()">Register</button>
                </div>
            </div>
        </form>
        <!-- /form -->
    </div>
    <!-- ./container -->

7.Account controller

app.controller('accountCtrl', ['$scope',
    function($scope) {

        $scope.user = {
            password: '',
            password_verify: ''
        };

        $scope.getPattern = function() {
            return $scope.user.password && $scope.user.password.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
        };
        $scope.save = function() {


            var name = document.getElementById("username").value;
            // update the result array
            var result = JSON.parse(localStorage.getItem("uname"));
            if (result == null)
                result = [];
            result.push(name);
            // save the new result array
            localStorage.setItem("uname", JSON.stringify(result));

            // on init fill the ul
            var temp = [];
            if (result != null) {
                for (var i = 0; i < result.length; i++) {
                    temp.push(result[i]);
                }


            }

             var upwd = document.getElementById("password").value;
            // update the result array
            var results = JSON.parse(localStorage.getItem("userpassword"));
            if (results == null)
                results = [];
            results.push(upwd);
            // save the new result array
            localStorage.setItem("userpassword", JSON.stringify(results));

            // on init fill the ul
            var a = [];
            if (results != null) {
                for (var i = 0; i < results.length; i++) {
                    // var item = result[i];
                    a.push(results[i]);
                }


        }
    };
}]);
screenshot:
1.Register Page

2.Login Page

 3.Home page/welcome page
  
 

Comments

Post a Comment

Popular posts from this blog

my reframce

use ReportServerTempDB select *from dbo.ChunkData INNER JOIN [ChunkSegmentMapping] on ChunkSegmentMapping.ChunkId = ChunkData.ChunkID INNER JOIN [PersistedStream] on PersistedStream.SessionID = ChunkData.SnapshotDataID use ReportServerTempDB select *from dbo.Segment select *from dbo.ChunkData alter procedure selectsubquery as declare @department varchar(50) begin --select *from dbo.Segment where SegmentId = (select *from  dbo.Segment where Content= @department) select * from SegmentId where emp_add =(select *  from dbo.Segment where Content =@department) end exec selectsubquery "1" create view selectall as select *from Segment select *from selectall drop view selectall drop procedure selectsubquery create index test_index on ChunkData(SnapshotDataID) drop index ChunkData.test_index select *from dbo.Segment create database testdbset create table userse (userid int ,name varchar(50)) drop table users select * from users --insert into use...
Read more

Angular UI Grid To Bind JSON Data

Image
1.Index.html <!doctype html> <html ng-app="app">   <head>     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.js"></script>     <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>     <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>     <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>     <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>     <link rel=...
Read more