Login Page with Remember Me using AngularJS in ASP.Net MVC

Last Reply 6 months ago By dharmendr

Posted 6 months ago

Hi,

I have login form in that i am going to implement Remember me password functionality

Could you please help me

<div class="row">
    UserName:<input type="text"  ng-model="UserName" /><br />
    Password: <input  type="password"  ng-model="Password" name="EMI_LoginPwd" /><br />
    <input type="checkbox" />:Remember Me         
    <div class="form-group ">
        <button type="submit" id="signin" name="name"  ng-click="LoginCheck()">Proceed</button>
    </div>
</div>

 

       $scope.LoginCheck = function () {
            var User = {
                UserName: $scope.UserName,
                Password: $scope.Password
            };
            var getData = myService.UserLogin(User);
            getData.then(function (msg) {
                if (msg.data == "0") {
                    $("#divLoading").hide();
                    $("#alertModal").modal('show');
                    $scope.msg = "Password Incorrect !";
                }
                else if (msg.data == "-1") {
                    $("#divLoading").hide();
                    $("#alertModal").modal('show');
                    $scope.msg = "Username Incorrect !";
                }
                else {
                    uID = msg.data;
                    $("#divLoading").hide();
                    window.location.href = "/Home/Index";
                }
            });
        }

 

    app.service("myService", function ($http) {
        this.UserLogin = function (User) {
            var response = $http({
                method: "post",
                url: "/login/Login",
                data: JSON.stringify(User),
                dataType: "json"
            });
            return response;
        }
    });

 

        [HttpPost]
        public string Login(Encrypt data)
        {
            bool isPasswordCorrect = false;
            string un = data.UserName;
            string Password = data.Password;
            var user = db.Encrypts.Where(u => u.UserName == un).FirstOrDefault();
            if (user != null)
            {
                if (Password == user.Password)
                {
                    Session["Id"] = user.Id;
                    Session["UserName"] = user.UserName;
                    Session["Password"] = user.Password;
                   
                    return user.Id.ToString();
                }
                else
                {
                    return "0";
                }
            }
            else
            {
                return "-1";
            }
        }

 

Posted 6 months ago

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

Model

public class Encrypt
{
    public int UserId { get; set; }
    public string UserName { get; set; }
    public string Password { get; set; }
    public bool RememberMe { get; set; }
    public int Status { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Default()
    {
        if (Request.Cookies["LoginDetail"] != null)
        {
            return View();
        }
        else
        {
            return View("Index");
        }
    }

    [HttpPost]
    public string Login(Encrypt data)
    {
        LoginEntities db = new LoginEntities();
        string username = data.UserName;
        string password = data.Password;
        bool remberMe = data.RememberMe;
        var user = db.Users.Where(u => u.Username == username).FirstOrDefault();
        if (user != null)
        {
            if (password == user.Password)
            {
                Session["Id"] = user.UserId;
                Session["UserName"] = user.Username;
                Session["Password"] = user.Password;
                data.Status = 1;
                data.UserId = user.UserId;

                if (remberMe)
                {
                    // Add Cookies.
                    HttpCookie mycookie = new HttpCookie("LoginDetail");
                    mycookie.Values["Username"] = user.Username;
                    mycookie.Values["Password"] = user.Password;
                    mycookie.Expires = System.DateTime.Now.AddDays(365);
                    Response.Cookies.Add(mycookie);
                }
            }
            else
            {
                data.Status = 0;
            }
        }
        else
        {
            data.Status = -1;
        }

        System.Web.Script.Serialization.JavaScriptSerializer se = new System.Web.Script.Serialization.JavaScriptSerializer();
        return se.Serialize(data);
    }

    public ActionResult Success()
    {
        if (Request.Cookies["LoginDetail"] != null)
        {
            return View();
        }
        else
        {
            return View("Index");
        }
    }

    [HttpPost]
    public ActionResult Logout()
    {
        // Remove Cookies.
        HttpCookie mycookie = Request.Cookies["LoginDetail"];
        mycookie.Expires = DateTime.Now.AddDays(-1);
        Response.Cookies.Add(mycookie);
        return View("Index");
    }
}

View

Index

<html>
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCntrl", ['$scope', '$http', 'myService', function ($scope, $http, myService) {
            $scope.UserName = "Admin";
            $scope.Password = "12345";
            $scope.LoginCheck = function () {
                var User = {
                    UserName: $scope.UserName,
                    Password: $scope.Password,
                    RememberMe: $scope.Checked
                };
                var getData = myService.UserLogin(User);
                getData.then(function (msg) {
                    if (msg.data.Status == "0") {
                        $scope.msg = "Password Incorrect !";
                    }
                    else if (msg.data.Status == "-1") {
                        $scope.msg = "Username Incorrect !";
                    }
                    else {
                        window.location.href = "/Home/Success";
                    }
                });
            }
        } ]);
        app.service("myService", function ($http) {
            this.UserLogin = function (User) {
                var response = $http({
                    method: "post",
                    url: "/Home/Login",
                    params: User,
                    dataType: "json"
                });
                return response;
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCntrl">
    <div class="container" align="center">
        <div class="form-horizontal">
            <div class="row">
                UserName:<input type="text" ng-model="UserName" name="username" class="form-control" /><br />
                Password:
                <input type="password" ng-model="Password" name="password" class="form-control" /><br />
                <input type="checkbox" ng-model="Checked" />&nbsp;Remember Me.
                <br />
                <br />
                <button type="submit" id="signin" name="name" ng-click="LoginCheck()" class="btn btn-primary">
                    Proceed</button>
                <span style="color: Red">{{msg}}</span>
            </div>
        </div>
    </div>
</body>
</html>

Success

<div style="width: 30%; padding-top: 10px;">
    <%if (Session["UserName"] != null)
        {%>
    Welcome<b>
        <%=Session["UserName"] %></b>
    <%} %>
    <%using (Html.BeginForm("Logout", "Home", FormMethod.Post))
        {%>
    <button type="submit" class="btn btn-primary btn-xs">
        SignOut</button>
    <%} %>
</div>

Screenshot