I am currently using Angular along with a JWT token for user authentication.
However, I have encountered an issue where the login() function assigned to $scope is not being called. Any assistance on this matter would be greatly appreciated.
app.js snippet:
var admin = angular.module('admin',['admin.core','admin.auth']);
angular.module('admin.core', ['ui.router', 'satellizer', 'ngResource', 'ngAnimate',
'ngStorage']);
admin.config(function($httpProvider, $stateProvider, $urlRouterProvider,
$authProvider, $provide, $locationProvider) {
$authProvider.loginUrl = '/api/authenticate';
$urlRouterProvider.otherwise('/login');
$locationProvider.html5Mode(true);
$stateProvider
.state('login', {
url: '/login',
templateUrl: '/partials/admin/login.html',
title : 'Admin Login'
})
});
angular.module("admin.auth", []).controller("AuthController", AuthController);
function AuthController($auth, $state, $http, $rootScope, $scope) {
console.log("Auth Called");
$scope.email='';
$scope.password='';
$scope.newUser={};
$scope.loginError=false;
$scope.loginErrorText='';
$scope.login = function() {
var credentials = {
email: $scope.email,
password: $scope.password
}
$auth.login(credentials).then(function() {
return $http.get('/api/authenticate/user');
}, function(error) {
$scope.loginError = true;
$scope.loginErrorText = error.data.error;
}).then(function(response) {
if(typeof response != "undefined"){
var user = JSON.stringify(response.data.user);
localStorage.setItem('user', user);
$rootScope.authenticated = true;
$rootScope.currentUser = response.data.user;
$scope.loginError = false;
$scope.loginErrorText = '';
$state.go('dashboard');
}
});
}
$scope.logout = function() {
$auth.logout().then(function() {
// Remove the authenticated user from local storage
localStorage.removeItem('user');
// Set authenticated to false so that certain UI elements dependent on the user's login status are no longer displayed
$rootScope.authenticated = false;
// Delete current user info from rootscope
$rootScope.currentUser = null;
$state.go('login');
});
}
}
I am also attempting to utilize AuthConrtoller as follows:
<body ng-controller="AuthController">
<ui-view></ui-view>
</body>
Additionally, the content of login.html is shown below:
<form name="loginForm" autocomplete="off" novalidate>
<md-input-container class="md-block">
<label for="email">Username</label>
<input type="text" name="email" required="required" ng-model="email" md-no-asterisk/>
<div ng-messages="loginForm.email.$error" role="alert">
<div ng-message="required">Username is required</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label for="password">Password</label>
<input type="password" name="password" required="required" ng-model="password" md-no-asterisk/>
<div ng-messages="loginForm.password.$error" role="alert">
<div ng-message="required">Password can not be blank</div>
</div>
</md-input-container>
<md-button type="submit" class="md-primary md-raised" ng-disabled="!loginForm.$valid" ng-click="login()">Login</md-button>
</form>