I am working on AngularJs application and back end is developed in Ruby on Rails. We have not used Devise gem for User authentication. Whole user authentication process is written in AngularJs. Now I want to add "Keep me logged in" functionality to my application using AngularJs.
Question: How I could implement "Keep me logged in" functionality in AngularJs for my application?
I am using angularJs for views and controllers and model are written in Ruby on Rails.
I have attached my session-controller.js below with views file.
session-controller.js
App.controller('SessionsCtrl', function($rootScope, $scope, $http, $location, Facebook, $timeout, flash, $remember) {
$scope.fbloginContent = "";
$scope.googleloginContent = "";
$scope.linkedinloginContent = "";
$scope.$on('facebook_login', function() {
$timeout(function() {
$scope.fbloginContent = Facebook.getfbLoginContent();
$scope.loginEmail = $scope.fbloginContent.email;
}, 2000);
});
$scope.$on('google_login', function() {
$timeout(function() {
$scope.googleloginContent = helper.getGoogleloginContent();
$scope.loginEmail = $scope.googleloginContent.email;
}, 2000);
});
$scope.$on('linkedin_login', function() {
$timeout(function() {
$scope.linkedinloginContent = linkedInHelper.linkedinloginContent();
$scope.loginEmail = $scope.linkedinloginContent['emailAddress'];
}, 2000);
});
$scope.login = function() {
if ($('#signInForm').valid()) {
if ($scope.linkedinloginContent) {
var param = {
"user" : {
"email" : $scope.linkedinloginContent['emailAddress'],
"password" : $scope.loginPassword
}
};
} else if ($scope.googleloginContent) {
var param = {
"user" : {
"email" : $scope.googleloginContent.email,
"password" : $scope.loginPassword
}
};
} else if ($scope.fbloginContent) {
var param = {
"user" : {
"email" : $scope.fbloginContent.email,
"password" : $scope.loginPassword
}
};
} else {
if ($scope.loginEmail && $scope.loginPassword) {
var param = {
"user" : {
"email" : $scope.loginEmail,
"password" : $scope.loginPassword
}
};
} else {
var param = {
"user" : {
"email" : $("#signInForm [name=email]").val(),
"password" : $("#signInForm [name=password]").val()
}
};
}
}
$http({
method : 'post',
url : '/api/sessions',
data : param
}).success(function(data, status) {
createCookie("access_token", data.user.access_token, '');
createCookie("user", data.user.id, '');
createCookie("name", data.user.name, '');
if (data.user.temp_password == true && data.user.login_count == 1) {
$location.path('/changepassword');
} else {
if (data.user.role == "SmartonAdmin") {
$location.path('/api/users');
flash.info = ($rootScope.config && $rootScope.config.login_message) ? $rootScope.config.login_message : "Logged in successfully";
goToTop();
if (data.user.login_count == 1) {
$('#intro-video').modal('show');
}
} else {
$location.path('/student_dashboard');
flash.info = ($rootScope.config && $rootScope.config.login_message) ? $rootScope.config.login_message : "Logged in successfully";
goToTop();
if (data.user.login_count == 1) {
$('#intro-video').modal('show');
}
}
}
}).error(function(data, status) {
flash.error = data.errors;
goToTop();
});
}
};
$scope.validations = function() {
$('#signInForm').validate({
rules : {
email : {
required : true,
email : true
},
password : {
required : true,
}
},
messages : {
email : {
required : "Email can't be blank.",
email : "Email must be in the format of [email protected].",
remote : "Email already exists."
},
password : {
required : "Password can't be blank.",
minlength : "Password should have minimum of 8 characters.",
maxlength : "Password should not exceed more than 15 characters."
}
},
errorPlacement : function(error, element) {
error.insertBefore('.errorMsg1');
}
});
};
$scope.validations();
$("#loginemail").keyup(function() {
if (!this.value) {
$(".errormsg").css("display", "none");
}
if (!(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(this.value))) {
$(".errormsg").css("display", "none");
}
});
$("#loginpassword").keyup(function() {
if (!this.value) {
$(".errormsg").css("display", "none");
}
});
$scope.showForgotPasswordForm = function() {
$('#signInForm').css('opacity', '0.5');
$('#forgotPassForm').show();
};
$scope.remember = false;
if ($remember('email') && $remember('password') ) {
$scope.remember = true;
$scope.email = $remember('email');
$scope.password = $remember('password');
}
$scope.rememberMe = function() {
if ($scope.remember) {
$remember('email', $scope.email);
$remember('password', $scope.password);
} else {
$remember('email', '');
$remember('password', '');
}
};
});
views file as Templates( AngularJs):
<input type="checkbox" name="remember" class="signup-footage terms-condition " data-ng- click="rememberMe()" data-ng-model="remember"> Remember Me
What I want that If user clicks "remember me" checkbox, then next time,user does need to logged in to system. How it can be achieved using AngualarJs?
