I would like to hide the following Login and Register navbar items after successful login:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
<li>LogOut</li>
<li>Register</li>
</ul>
</div>
Here is my Login Controller:
app.controller('loginController', ['$scope', '$window', 'accountService', '$location', function ($scope, $window, accountService, $location) {
$scope.loginPageHeader = "Login Page";
$scope.account = {
username: '',
password: ''
}
$scope.login = function () {
accountService.login($scope.account).then(function (data) {
$location.path('/home');
}, function (error) {
$scope.message = error.error_description;
})
}
$scope.logout = function () {
accountService.logout();
$location.path('/login');
}
}])
Here is my AccountService:
app.factory('accountService', ['$http', '$q', 'serviceBasePath', 'userService', '$window', function ($http, $q, serviceBasePath, userService, $window) {
var fac = {};
fac.login = function (user) {
var obj = { 'username': user.username, 'password': user.password, 'grant_type': 'password' };
Object.toparams = function ObjectsToParams(obj) {
var p = [];
for (var key in obj) {
p.push(key + '=' + encodeURIComponent(obj[key]));
}
return p.join('&');
}
var defer = $q.defer();
$http({
method: 'post',
url: serviceBasePath + "/token",
data: Object.toparams(obj),
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function (response) {
userService.SetCurrentUser(response.data);
defer.resolve(response.data);
}, function (error) {
defer.reject(error.data);
})
return defer.promise;
}
fac.logout = function () {
userService.CurrentUser = null;
userService.SetCurrentUser(userService.CurrentUser);
}
return fac;
}])
Here is my UserService:
app.factory('userService', function () {
var fac = {};
fac.CurrentUser = null;
fac.SetCurrentUser = function (user) {
fac.CurrentUser = user;
sessionStorage.user = angular.toJson(user);
}
fac.GetCurrentUser = function () {
fac.CurrentUser = angular.fromJson(sessionStorage.user);
return fac.CurrentUser;
}
return fac;
})
Tried with $rootScope but didn't work after page refresh as $rootScope is lost after page refresh. Any Help Please!!
You can add a check in your app's run function and set it on the $rootScope. This way a reload (f5) doesn't interfere with the login:
app.run(["$rootScope", "userService", function($rootScope, userService) {
var user = userService.GetCurrentUser();
if (user) {
$rootScope.user = user;
}
}]);
Then in your view:
<li>Login</li>
Also mind that you set it on the $rootScope when logging in:
fac.SetCurrentUser = function (user) {
fac.CurrentUser = user;
sessionStorage.user = angular.toJson(user);
$rootScope.user = user;
}
See jsfiddle
Related
I would like to get the currently loged in username so i can display it. But i dont know how to do it ? Any ideas ? I am using authservice Here is my angular controller in which i would like to get the username.
myApp.controller('meetupsController', ['$scope', '$resource', function ($scope, $resource) {
var Meetup = $resource('/api/meetups');
$scope.meetups = []
Meetup.query(function (results) {
$scope.meetups = results;
});
$scope.createMeetup = function () {
var meetup = new Meetup();
meetup.name = $scope.meetupName;
meetup.$save(function (result) {
$scope.meetups.push(result);
$scope.meetupName = '';
});
}
}]);
my main angular controller code
var myApp = angular.module('myApp', ['ngResource', 'ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/main.html',
access: {restricted: true}
})
.when('/api/meetups', {
templateUrl: 'partials/main.html',
access: {restricted: true}
})
.when('/login', {
templateUrl: 'partials/login.html',
controller: 'loginController',
access: {restricted: false}
})
.when('/prive', {
templateUrl: 'partials/prive.html',
controller: 'userController',
access: {restricted: true}
})
.when('/logout', {
controller: 'logoutController',
access: {restricted: true}
})
.when('/register', {
templateUrl: 'partials/register.html',
controller: 'registerController',
access: {restricted: false}
})
.when('/one', {
template: '<h1>This is page one!</h1>',
access: {restricted: true}
})
.when('/two', {
template: '<h1>This is page two!</h1>',
access: {restricted: false}
})
.otherwise({
redirectTo: '/'
});
});
myApp.run(function ($rootScope, $location, $route, AuthService) {
$rootScope.$on('$routeChangeStart',
function (event, next, current) {
AuthService.getUserStatus()
.then(function(){
if (next.access.restricted && !AuthService.isLoggedIn()){
$location.path('/login');
$route.reload();
}
});
});
});
myApp.controller('meetupsController', ['$scope', '$resource', function ($scope, $resource) {
var Meetup = $resource('/api/meetups');
$scope.meetups = []
Meetup.query(function (results) {
$scope.meetups = results;
});
$scope.createMeetup = function () {
var meetup = new Meetup();
meetup.name = $scope.meetupName;
meetup.$save(function (result) {
$scope.meetups.push(result);
$scope.meetupName = '';
});
}
}]);
my second angular code :
var app = angular.module('myApp');
app.controller('loginController',
['$scope', '$location', 'AuthService',
function ($scope, $location, AuthService) {
$scope.login = function () {
// initial values
$scope.error = false;
$scope.disabled = true;
// call login from service
AuthService.login($scope.loginForm.username, $scope.loginForm.password)
// handle success
.then(function () {
$location.path('/');
$scope.disabled = false;
$scope.loginForm = {};
})
// handle error
.catch(function () {
$scope.error = true;
$scope.errorMessage = "Invalid username and/or password";
$scope.disabled = false;
$scope.loginForm = {};
});
};
$scope.posts = [];
$scope.newPost = {created_by: '', text: '', created_at: ''};
$scope.post = function(){
$scope.newPost.created_at = Date.now();
$scope.posts.push($scope.newPost);
$scope.newPost = {created_by: '', text: '', created_at: ''};
};
}]);
app.controller('logoutController',
['$scope', '$location', 'AuthService',
function ($scope, $location, AuthService) {
$scope.logout = function () {
// call logout from service
AuthService.logout()
.then(function () {
$location.path('/login');
});
};
$scope.gotoregister = function () {
$location.path('/register');
};
$scope.gotoprive = function () {
$location.path('/prive');
};
}]);
app.controller('registerController',
['$scope', '$location', 'AuthService',
function ($scope, $location, AuthService) {
$scope.register = function () {
// initial values
$scope.error = false;
$scope.disabled = true;
// call register from service
AuthService.register($scope.registerForm.username, $scope.registerForm.password)
// handle success
.then(function () {
$location.path('/login');
$scope.disabled = false;
$scope.registerForm = {};
})
// handle error
.catch(function () {
$scope.error = true;
$scope.errorMessage = "Something went wrong!";
$scope.disabled = false;
$scope.registerForm = {};
});
};
}]);
and my services
angular.module('myApp').factory('AuthService',
['$q', '$timeout', '$http',
function ($q, $timeout, $http) {
// create user variable
var user = null;
// return available functions for use in the controllers
return ({
isLoggedIn: isLoggedIn,
getUserStatus: getUserStatus,
login: login,
logout: logout,
register: register
});
function isLoggedIn() {
if(user) {
return true;
} else {
return false;
}
}
function getUserStatus() {
return $http.get('/user/status')
// handle success
.success(function (data) {
if(data.status){
user = true;
} else {
user = false;
}
})
// handle error
.error(function (data) {
user = false;
});
}
function login(username, password) {
// create a new instance of deferred
var deferred = $q.defer();
// send a post request to the server
$http.post('/user/login',
{username: username, password: password})
// handle success
.success(function (data, status) {
if(status === 200 && data.status){
user = true;
deferred.resolve();
} else {
user = false;
deferred.reject();
}
})
// handle error
.error(function (data) {
user = false;
deferred.reject();
});
// return promise object
return deferred.promise;
}
function logout() {
// create a new instance of deferred
var deferred = $q.defer();
// send a get request to the server
$http.get('/user/logout')
// handle success
.success(function (data) {
user = false;
deferred.resolve();
})
// handle error
.error(function (data) {
user = false;
deferred.reject();
});
// return promise object
return deferred.promise;
}
function register(username, password) {
// create a new instance of deferred
var deferred = $q.defer();
// send a post request to the server
$http.post('/user/register',
{username: username, password: password})
// handle success
.success(function (data, status) {
if(status === 200 && data.status){
deferred.resolve();
} else {
deferred.reject();
}
})
// handle error
.error(function (data) {
deferred.reject();
});
// return promise object
return deferred.promise;
}
}]);
So this should probably work, maybe you will need to make some small adjustments because i don't know how exactly is your app structured, but this will work.
First you need to change your AuthService to look like this
angular.module('myApp').factory('AuthService',
['$q', '$timeout', '$http',
function ($q, $timeout, $http, $cookies) {
// create user variable
var user = null;
// we must create authMemberDefer var so we can get promise anywhere in app
var authenticatedMemberDefer = $q.defer();
// return available functions for use in the controllers
return ({
isLoggedIn: isLoggedIn,
getUserStatus: getUserStatus,
login: login,
logout: logout,
register: register,
getAuthMember: getAuthMember,
setAuthMember: setAuthMember
});
function isLoggedIn() {
if(user) {
return true;
} else {
return false;
}
}
//this is function that we will call each time when we need auth member data
function getAuthMember() {
return authenticatedMemberDefer.promise;
}
//this is setter function to set member from coockie that we create on login
function setAuthMember(member) {
authenticatedMemberDefer.resolve(member);
}
function getUserStatus() {
return $http.get('/user/status')
// handle success
.success(function (data) {
if(data.status){
user = true;
} else {
user = false;
}
})
// handle error
.error(function (data) {
user = false;
});
}
function login(username, password) {
// create a new instance of deferred
var deferred = $q.defer();
// send a post request to the server
$http.post('/user/login',
{username: username, password: password})
// handle success
.success(function (data, status) {
if(status === 200 && data.status){
user = true;
deferred.resolve();
//**
$cookies.putObject('loginSession', data);
// here create coockie for your logged user that you get from this response, im not sure if its just "data" or data.somethingElse, check you response you should have user object there
} else {
user = false;
deferred.reject();
}
})
// handle error
.error(function (data) {
user = false;
deferred.reject();
});
// return promise object
return deferred.promise;
}
function logout() {
// create a new instance of deferred
var deferred = $q.defer();
// send a get request to the server
$http.get('/user/logout')
// handle success
.success(function (data) {
user = false;
deferred.resolve();
//on log out remove coockie
$cookies.remove('loginSession');
})
// handle error
.error(function (data) {
user = false;
deferred.reject();
});
// return promise object
return deferred.promise;
}
function register(username, password) {
// create a new instance of deferred
var deferred = $q.defer();
// send a post request to the server
$http.post('/user/register',
{username: username, password: password})
// handle success
.success(function (data, status) {
if(status === 200 && data.status){
deferred.resolve();
} else {
deferred.reject();
}
})
// handle error
.error(function (data) {
deferred.reject();
});
// return promise object
return deferred.promise;
}
}]);
after that changes in authService, you must make this on your app run, so each time application run (refresh) it first check coockie to see if there is active session(member) and if there is it will set it inside our AuthService.
myApp.run(function($rootScope, $location, $route, AuthService, $cookies) {
$rootScope.$on('$routeChangeStart',
function(event, next, current) {
if ($cookies.get('loginSession')) {
var session = JSON.parse($cookies.get('loginSession'));
AuthService.setAuthMember(session);
} else {
$location.path('/login');
}
});
});
And simply anywhere where you want to get auth member you have to do this, first include in your controller/directive AuthService and do this
AuthService.getAuthMember().then(function(member){
console.log(member);
//here your member should be and you can apply any logic or use that data where u want
});
I hope this helps you, if you find any difficulties i'm happy to help
just a demo example
in login controller
var login = function(credentials) {
AuthService.login(credentials).then(function(result) {
var user = result.data;
AuthService.setCurrentUser(user);
$rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
}).catch(function(err) {
if (err.status < 0) {
comsole.error('Please check your internet connection!');
} else {
$rootScope.$broadcast(AUTH_EVENTS.loginFailed);
}
});
};
in AuthService
.factory('AuthService', function($http, $cookies, BASE_URL) {
var service = {
login: function(formdata) {
return $http.post(BASE_URL + '/login', formdata);
},
setCurrentUser: function(user) {
$cookies.putObject('currentUser', user);
},
isAuthenticated: function() {
return angular.isDefined($cookies.getObject('currentUser'));
},
getFullName: function() {
return $cookies.getObject('currentUser').firstName + ' ' + $cookies.getObject('currentUser').lastName;
}
}
return service;
});
in the controller which attached with your dashboard view
$scope.$watch(AuthService.isAuthenticated, function(value) {
vm.isAuthenticated = value;
if (vm.isAuthenticated) {
vm.fullName = AuthService.getFullName();
vm.currentUser = AuthService.getCurrentUser();
}
});
There are few methods how you can get currently logged user, it mostly depends on you app structure and API, you probably should have API end point to get authenticated member and that call is made on each app refresh.
Also if you can show us your authservice.
Edit:
Also on successful login you can store information about logged user in coockie like this
function doLogin(admin) {
return authMemberResources.login(details).then(function(response) {
if (response) {
$cookies.putObject('loginSession', response);
} else {
console.log('wrong details');
}
});
So basically you can use angularjs coockies service and make loginSession coockie like that, and on app refresh or anywhere where you need logged user info, you can get that like this:
if ($cookies.get('loginSession')) {
var session = JSON.parse($cookies.get('loginSession'));
console.log(session);
}
.factory('AuthService', function($http, $cookies, BASE_URL) {
var service = {
login: function(formdata) {
return $http.post(BASE_URL + '/login', formdata);
},
setCurrentUser: function(user) {
$cookies.putObject('currentUser', user);
},
isAuthenticated: function() {
return angular.isDefined($cookies.getObject('currentUser'));
},
getFullName: function() {
return $cookies.getObject('currentUser').firstName + ' ' + $cookies.getObject('currentUser').lastName;
},
getAuthenticatedMember: function() {
if ($cookies.get('currentUser')) {
return JSON.parse($cookies.get('currentUser'));
}
}
}
return service;
});
That should work, i added new function getAuthenticatedMember and you can use it where you need it. And you can use it like this:
$scope.$watch(AuthService.isAuthenticated, function(value) {
vm.isAuthenticated = value;
if (vm.isAuthenticated) {
vm.currentUser = AuthService.getAuthenticatedMember();
}
});
I want to create my own user system and make them login with a token.
I have used this tutorial as a starting point: http://bitoftech.net/2014/06/09/angularjs-token-authentication-using-asp-net-web-api-2-owin-asp-net-identity/
I have created a angular app.
Every time I try to login, I get a 400 error:
Bad Request with errormessage: invalid_client.
How can I fix this error?
I've created my endpoint class like this:
public class AuthorizationServerProvider : OAuthAuthorizationServerProvider
{
public override async Task ValidateClientAuthentication(OAuthValidateClientAuthenticationContext context)
{
context.Validated();
}
public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
{
context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });
try
{
BCContext db = new BCContext();
UserHelper uh = new UserHelper();
// Retrieve user
var user = await uh.CheckLogin(context.UserName, context.Password);
if (user != null)
{
var identity = new ClaimsIdentity(context.Options.AuthenticationType);
identity.AddClaim(new Claim(ClaimTypes.Name, user.Firstname + " " + user.Lastname));
identity.AddClaim(new Claim(ClaimTypes.Email, user.Email));
context.Validated(identity);
}
}
catch (Exception ex)
{
context.SetError("invalid_grant", ex.Message);
}
}
}
My authService.js:
app.factory('authService', ['$http', '$q', 'localStorageService', function ($http, $q, localStorageService) {
var serviceUrl = "http://localhost:55520/";
var authServiceFactory = {};
var authentication = {
isAuth: false,
username: ""
};
var register = function (data) {
console.log(data);
return $http.post(serviceUrl + 'api/users', data).then(function (response) {
return response;
});
};
var login = function (loginData) {
var data = "grant_type=password&username=" + loginData.username + "&password=" + loginData.password;
var deferred = $q.defer();
$http.defaults.headers.post["Content-Type"] = "text/plain";
$http.post(serviceUrl + 'api/security/token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (response) {
localStorageService.set('authorizationData', { token: response.access_token, username : loginData.username });
authentication.isAuth = true;
authentication.username = loginData.username;
$q.defer().resolve(response);
}).error(function (err, status) {
//alert(err);
console.log(err);
$q.defer().reject(err);
});
return $q.defer().promise;
};
var fillAuthData = function() {
var authData = localStorageService.get('authorizationData');
if(authData) {
authentication.isAuth = true;
authentication.username = authData.username;
}
}
authServiceFactory.login = login;
authServiceFactory.register = register;
authServiceFactory.fillAuthData = fillAuthData
authServiceFactory.authentication = authentication;
return authServiceFactory;
}]);
My loginController.js:
app.controller('loginController', ['$scope', '$location', 'authService', function ($scope, $location, authService) {
$scope.loginData = {
username: "",
password: ""
};
$scope.message = "";
$scope.login = function () {
authService.login($scope.loginData).then(function (response) {
$location.path('/users');
}),
function (err) {
$scope.message = err.error_description;
console.log(err);
}
};
}]);
My authInterceptor.js:
app.factory('authInterceptorService', ['$q', '$location', 'localStorageService', function ($q, $location, localStorageService) {
var authInterceptorServiceFactory = {};
var request = function (config) {
config.headers = config.headers || {};
var authData = localStorageService.get('authorizationData');
if (authData) {
config.headers.Authorization = 'Bearer ' + authData.token;
}
return config;
}
var responseError = function (rejection) {
if (rejection.status === 401) {
$location.path('/login');
}
return $q.reject(rejection);
}
authInterceptorServiceFactory.request = request;
authInterceptorServiceFactory.responseError = responseError;
return authInterceptorServiceFactory;
}]);
My login.html:
<form class="form-login" role="form">
<h2>Login</h2>
<input type="text" class="form-control" placeholder="Username" ng-model="loginData.username" required autofocus />
<input type="password" class="form-control" placeholder="Password" ng-model="loginData.password" required />
<button class="btn btn-primary" type="submit" ng-click="login()">Login</button>
<div ng-hide="message == ''" class="alert alert-danger">
{{message}}
</div>
</form>
This is what I send:
Hello evryone am having a problem with angular. I have a SPA the angular code is as it follows :
angular.module('myApp', ['ngResource']).controller('loginController',
['$scope', '$location', 'AuthService',
function ($scope, $location, AuthService) {
$scope.login = function () {
// initial values
$scope.error = false;
$scope.disabled = true;
// call login from service
AuthService.login($scope.loginForm.username, $scope.loginForm.password)
// handle success
.then(function () {
$location.path('/');
$scope.disabled = false;
$scope.loginForm = {};
})
// handle error
.catch(function () {
$scope.error = true;
$scope.errorMessage = "Invalid username and/or password";
$scope.disabled = false;
$scope.loginForm = {};
});
};
}]);
angular.module('myApp', ['ngResource']).controller('logoutController',
['$scope', '$location', 'AuthService',
function ($scope, $location, AuthService) {
$scope.logout = function () {
// call logout from service
AuthService.logout()
.then(function () {
$location.path('/login');
});
};
/*
$scope.posts = [];
$scope.newPost = {created_by: '', text: '', create_at: ''};
$scope.afficher = function(){
$scope.newPost.created_at = Date.now();
$scope.posts.push($scope.newPost);
$scope.newPost = {created_by: '', text: '', created_at: ''};
};
*/
/**
var Meetup = $resource('/api/meetups');
Meetup.query(function (results) {
$scope.meetups = results;
});
$scope.meetups = []
$scope.createMeetup = function () {
var meetup = new Meetup();
meetup.name = $scope.meetupName;
meetup.$save(function (result) {
$scope.meetups.push(result);
$scope.meetupName = '';
});
}
*/
}]);
angular.module('myApp', ['ngResource']).controller('registerController',
['$scope', '$location', 'AuthService',
function ($scope, $location, AuthService) {
$scope.register = function () {
// initial values
$scope.error = false;
$scope.disabled = true;
// call register from service
AuthService.register($scope.registerForm.username, $scope.registerForm.password)
// handle success
.then(function () {
$location.path('/login');
$scope.disabled = false;
$scope.registerForm = {};
})
// handle error
.catch(function () {
$scope.error = true;
$scope.errorMessage = "Something went wrong!";
$scope.disabled = false;
$scope.registerForm = {};
});
};
}]);
when my code is like this i get blank pages. but if i withdraw ['ngResource'] from the declaration off the app evrything works fine . can you help
// here you define the module with moduleName as 1st argument and dependencies as 2nd argument.
angular.module('myApp', ['ngResource']);
// When you call angular.module('myApp') with just the 1st argument (module name), it returns you the module already defined.
// here you declare a controller in the module already defined.
angular.module('myApp')
.controller('loginController',
['$scope', '$location', 'AuthService',
function ($scope, $location, AuthService) {
$scope.login = function () {
// initial values
$scope.error = false;
$scope.disabled = true;
// call login from service
AuthService.login($scope.loginForm.username, $scope.loginForm.password)
// handle success
.then(function () {
$location.path('/');
$scope.disabled = false;
$scope.loginForm = {};
})
// handle error
.catch(function () {
$scope.error = true;
$scope.errorMessage = "Invalid username and/or password";
$scope.disabled = false;
$scope.loginForm = {};
});
};
}]);
// here you declare another controller in the module already defined.
angular.module('myApp')
.controller('logoutController',
['$scope', '$location', 'AuthService',
function ($scope, $location, AuthService) {
$scope.logout = function () {
// call logout from service
AuthService.logout()
.then(function () {
$location.path('/login');
});
};
/*
$scope.posts = [];
$scope.newPost = {created_by: '', text: '', create_at: ''};
$scope.afficher = function(){
$scope.newPost.created_at = Date.now();
$scope.posts.push($scope.newPost);
$scope.newPost = {created_by: '', text: '', created_at: ''};
};
*/
/**
var Meetup = $resource('/api/meetups');
Meetup.query(function (results) {
$scope.meetups = results;
});
$scope.meetups = []
$scope.createMeetup = function () {
var meetup = new Meetup();
meetup.name = $scope.meetupName;
meetup.$save(function (result) {
$scope.meetups.push(result);
$scope.meetupName = '';
});
}
*/
}]);
// here you declare another controller in the module already defined.
angular.module('myApp')
.controller('registerController',
['$scope', '$location', 'AuthService',
function ($scope, $location, AuthService) {
$scope.register = function () {
// initial values
$scope.error = false;
$scope.disabled = true;
// call register from service
AuthService.register($scope.registerForm.username, $scope.registerForm.password)
// handle success
.then(function () {
$location.path('/login');
$scope.disabled = false;
$scope.registerForm = {};
})
// handle error
.catch(function () {
$scope.error = true;
$scope.errorMessage = "Something went wrong!";
$scope.disabled = false;
$scope.registerForm = {};
});
};
}]);
You can store the module reference in a variable and then use it further when defining controllers, services etc.
var myAppModule = angular.module('myApp', ['ngResource']);
myAppModule.controller('loginController',
['$scope', '$location', 'AuthService',
function ($scope, $location, AuthService) {
// Your code here
}]);
I am following a tutorial from this blog
https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec#.4st6f3te5
for Authentication and Authorization in angualrJS
Also trying to fallow some implementation in Stackoverflow
on this link
$injector:modulerr : authentication in AngularJS applications
I keep getting this error
$scope.setCurrentUser is not a function
which is coming from the loginController
Can someone help please?
this the AuthService
pmaster.factory('AuthService', ['$http', 'Session', function ($http,
Session) {
var authService = {};
authService.login = function (credentials)
{
return $http.get('/api/userLogin/' + credentials).then(function (data)
{
// this is the date coming from the Server //[{"sessionID":"aendypagaw5ytojlxjcvjgyo","userID":"ljanneh1","Role":"superAdmin"}]
Session.create(data.sessionID, data.userID, data.Role);
return data
});
};
authService.isAuthenticated = function()
{
return !!Session.userId;
};
authService.isAuthorized = function (authorizedRoles) {
if (!angular.isArray(authorizedRoles)) {
authorizedRoles = [authorizedRoles];
}
return (authService.isAuthenticated() &&
authorizedRoles.indexOf(Session.userRole) !== -1);
};
return authService; }]);
this is the login control
pmaster.controller('loginController', ['$scope', '$location',
'$rootScope', 'AUTH_EVENTS', 'AuthService',
function ($scope, $location, $rootScope, AUTH_EVENTS, AuthService)
{
$rootScope.menuHide = true;
$rootScope.sideHide = true;
$scope.Login = function()
{
$scope.loading = true;
var credentials =
{
'username': $scope.username,
'password': $scope.password
}
var obj = credentials.username + "-" + credentials.password;
AuthService.login(obj).then(function (data)
{
console.log(data);
$rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
//$scope.setCurrentUser = function (data)
//{
// $rootScope.$emit("setUserRoles", data);
//}
$scope.setCurrentUser(data);
$location.path('/addBank');
$scope.loading = false;
}, function (error) {
$rootScope.$broadcast(AUTH_EVENTS.loginFailed);
alert("Bad");
$scope.loading = false;
});
}
}]);
Hello I have this controller that handles login:
angular.module('fancyApp')
.controller('MainCtrl', function ($scope, $location, $http, LoginFactory) {
$scope.loginForm = function(isValid) {
if (isValid) {
var status;
LoginFactory.login($scope.person).then(function(d) {
console.log(d);
$scope.data = d;
if (d.status === 200) {
//login success
$('.loginFail').hide();
$location.path('/student');
} else {
$scope.loginFail = 'Failed to login';
$('.loginFail').show();
}
});
} else {
$scope.login_form.submitted = true;
}
};
});
And this is my LoginFactory login function:
angular.module('fancyApp')
.factory('LoginFactory', function ($http, $q) {
return {
login: function(user) {
var promise = $http.post( 'api/v1/login', user).then(function (response) {
return response;
}, function(error) {
return error;
});
return promise;
};
});
This is my beforeEach:
beforeEach(inject(function ($controller, $provide, $location, $rootScope) {
location = $location;
rootScope = $rootScope;
var testService = {
getStudents: function() {
return ['student1', 'student2'];
},
getAdmins: function() {
return ['admin1', 'admin2'];
},
login: function(person) {
console.log(testService.getStudents().indexOf(person.user));
if(testService.getStudents().indexOf(person.user) !== -1) {
return {status:200, token:'xxx', role:'student'};
}
else if(testService.getAdmins().indexOf(person.user) !== -1) {
return {status:200, token:'xxx', role:'admin'};
}
else {
return {status:401, token:'xxx', role:'student'};
}
}
};
scope = $rootScope.$new();
$provide.service('LoginService', testService);
MainCtrl = $controller('MainCtrl', {
$scope: scope
});
}));
And here is my test:
it('Login should succeed', inject(function($httpBackend){
spyOn(testService, 'login');
scope.person.user = 'student1';
scope.person.pass = '123456';
scope.login(true);
expect(testService.login).toHaveBeenCalledWith('student1', '123456');
}));
The error I get is:
Error: [$injector:unpr] Unknown provider: $provideProvider < $provide
I'm not sure if this is the correct way of testing this, any suggestions would be nice.
Thank you.
You can't use $provide within the inject function because the former registers providers for the latter to use. Do it like this:
describe('...', function() {
beforeEach(function() {
module(function($provide) {
$provide.service('LoginService', testService);
});
inject(function(someValue) {
//Rest of the code within the inject..........
});
});
});