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" /> 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
<html>
<head>
<title>Success</title>
<style type="text/css">
.modal
{
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content
{
background-color: #fefefe;
margin: 15% auto;
padding: 10px;
border: 1px solid #888;
width: 30%;
}
</style>
<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" src="https://cdnjs.cloudflare.com/ajax/libs/ng-idle/1.3.2/angular-idle.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", ['ngIdle']);
app.config(['KeepaliveProvider', 'IdleProvider', function (KeepaliveProvider, IdleProvider) {
IdleProvider.idle(10);
IdleProvider.timeout(5);
KeepaliveProvider.interval(10);
IdleProvider.interrupt('keydown wheel mousedown touchstart touchmove scroll');
} ]);
app.run(function (Idle) {
Idle.watch();
});
app.controller("myCntrl", ['$scope', '$http', 'Idle', 'Keepalive', function ($scope, $http, Idle, Keepalive) {
$scope.IsVisible = false;
$scope.idle = 10;
$scope.timeout = 5;
$scope.IsVisible = false;
$scope.$on('IdleStart', function () {
// the user appears to have gone idle.
});
$scope.$on('IdleEnd', function () {
// the user is doing stuff. if you are warning them, you can use this to hide the dialog.
});
$scope.$on('Keepalive', function () {
// do something to keep the user's session alive.
});
$scope.$on('IdleWarn', function (e, countdown) {
// the countdown arg is the number of seconds remaining until then.
// you can change the title or display a warning dialog from here.
// you can let them resume their session by calling Idle.watch()
$scope.IsVisible = true;
document.getElementById('myModal').style.display = "block";
});
$scope.$on('IdleTimeout', function () {
// the user has timed out (meaning idleDuration + timeout has passed without any activity).
// this is where you'd log them.
window.location.href = "/Home/Index";
});
$scope.Reset = function () { window.location = window.location.href; }
$scope.SignOut = function () { window.location.href = "/Home/Index"; }
$scope.$watch('idle', function (value) {
if (value !== null) {
Idle.setIdle(value);
}
});
$scope.$watch('timeout', function (value) {
if (value !== null) {
Idle.setTimeout(value);
}
});
} ]);
</script>
</head>
<body>
<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>
<div ng-show="IsVisible" id="myModal" class="modal" ng-app="myApp" ng-controller="myCntrl">
<div idle-countdown="countdown" class="modal-content">
<h4>Your Session is about to expire!</h4>
<div style="float: left; height: 50px;">
<span class="glyphicon glyphicon-warning-sign text-danger btn-lg"></span>
</div>
<div idle-countdown="countdown">
Session will expire in <b>{{countdown}}</b> seconds.<br />
Do you want to reset?
<br /><br />
<button type="button" ng-click="Reset()" class="btn btn-primary btn-sm">Yes</button>
<button type="button" ng-click="SignOut()" class="btn btn-danger btn-sm">No</button>
</div>
</div>
</div>
</body>
</html>
Screenshot
