I am working on an AngularJs application and the back end is developed in Ruby on Rails. We did not use Devise gem for user authentication. The entire user authentication process is written in AngularJs. Now I want to add the "Keep me logged" functionality to my application using AngularJs.
Question: How can I implement the "Keep me logged" function in AngularJs for my application?
I use angularJs for views and controllers, and the model is written in Ruby on Rails.
I connected my session-controller.js below with view files.
<strong> 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 name@domain.com.",
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', '');
}
};
});
displays the file as templates (AngularJs):
<input type="checkbox" name="remember" class="signup-footage terms-condition " data-ng- click="rememberMe()" data-ng-model="remember"> Remember Me
, " ", . AngualarJs?