Add authentication in frontend.
This commit is contained in:
parent
d4472925ee
commit
8bcabee6dd
@ -19,28 +19,33 @@ var accountantApp = angular.module("accountantApp", [
|
|||||||
"mgcrea.ngStrap",
|
"mgcrea.ngStrap",
|
||||||
"highcharts-ng",
|
"highcharts-ng",
|
||||||
"jlareau.pnotify",
|
"jlareau.pnotify",
|
||||||
|
"http-auth-interceptor",
|
||||||
|
"Storage.Service",
|
||||||
"xeditable"
|
"xeditable"
|
||||||
])
|
])
|
||||||
|
|
||||||
.config(function($httpProvider, $routeProvider, $locationProvider) {
|
.factory("sessionInjector", ["$storage", function($storage) {
|
||||||
// Define interceptors.
|
var sessionInjector = {
|
||||||
$httpProvider.interceptors.push(function($q, notificationService) {
|
request : function(config) {
|
||||||
return {
|
var token = $storage.get('token');
|
||||||
"response": function(response) {
|
|
||||||
if(response.data.ok === false) {
|
|
||||||
return $q.reject(response);
|
|
||||||
}
|
|
||||||
// TODO Intercept validation error.
|
|
||||||
return response;
|
|
||||||
},
|
|
||||||
|
|
||||||
"responseError": function(response) {
|
if(token) {
|
||||||
// TODO Intercept Authentication Required error
|
var token_type = $storage.get('token_type');
|
||||||
notificationService.error(response.data.text);
|
var authorization = token_type + " " + token;
|
||||||
return $q.reject(response);
|
config.headers["Authorization"] = authorization;
|
||||||
}
|
}
|
||||||
};
|
return config;
|
||||||
});
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return sessionInjector;
|
||||||
|
}])
|
||||||
|
|
||||||
|
|
||||||
|
.config(["$httpProvider", "$routeProvider", "$locationProvider", "$storageProvider",
|
||||||
|
function($httpProvider, $routeProvider, $locationProvider, $storageProvider) {
|
||||||
|
// Define interceptors.
|
||||||
|
$httpProvider.interceptors.push('sessionInjector');
|
||||||
|
|
||||||
// Defining template and controller in function of route.
|
// Defining template and controller in function of route.
|
||||||
$routeProvider.when('/account/:accountId/operations', {
|
$routeProvider.when('/account/:accountId/operations', {
|
||||||
@ -58,9 +63,93 @@ var accountantApp = angular.module("accountantApp", [
|
|||||||
|
|
||||||
// Enable HTML5 mode.
|
// Enable HTML5 mode.
|
||||||
$locationProvider.html5Mode(true);
|
$locationProvider.html5Mode(true);
|
||||||
})
|
|
||||||
|
// Configure storage
|
||||||
|
// Set global prefix for stored keys
|
||||||
|
$storageProvider.setPrefix("accountant");
|
||||||
|
|
||||||
|
// Change the default storage engine
|
||||||
|
// Defaults to "local"
|
||||||
|
$storageProvider.setDefaultStorageEngine("session");
|
||||||
|
|
||||||
|
// Change the enabled storage engines
|
||||||
|
// Defaults to ['memory', 'cookie', 'session', 'local']
|
||||||
|
$storageProvider.setEnabledStorageEngines(['local', 'session']);
|
||||||
|
}])
|
||||||
|
|
||||||
.run(function(editableOptions) {
|
.run(function(editableOptions) {
|
||||||
editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
|
editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
.controller("MainController", [
|
||||||
|
"$scope", "$rootScope", "$http", "authService", "notify", "$storage",
|
||||||
|
function($scope, $rootScope, $http, authService, notify, $storage) {
|
||||||
|
$scope.dialogShown = false;
|
||||||
|
|
||||||
|
$scope.showLoginForm = function(e) {
|
||||||
|
// First, if there are registered credentials, use them
|
||||||
|
if($scope.dialogShown) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.dialogShown = true;
|
||||||
|
|
||||||
|
bootbox.dialog({
|
||||||
|
title: "Authentification requise",
|
||||||
|
message: '<form class="form-horizontal">' +
|
||||||
|
' <div class="form-group">' +
|
||||||
|
' <label for="email" class="col-sm-4 control-label">Adresse email</label>' +
|
||||||
|
' <div class="col-sm-8">' +
|
||||||
|
' <input type="text" class="form-control" id="email" ng-model="email" placeholder="Nom d\'utilisateur">' +
|
||||||
|
' </div>' +
|
||||||
|
' </div>' +
|
||||||
|
' <div class="form-group">' +
|
||||||
|
' <label for="password" class="col-sm-4 control-label">Mot de passe</label>' +
|
||||||
|
' <div class="col-sm-8">' +
|
||||||
|
' <input type="password" class="form-control" id="password" ng-model="password" placeholder="Mot de passe">' +
|
||||||
|
' </div>' +
|
||||||
|
' </div>' +
|
||||||
|
' </div>' +
|
||||||
|
'</form>',
|
||||||
|
buttons: {
|
||||||
|
login: {
|
||||||
|
label: "Login",
|
||||||
|
className: "btn-primary",
|
||||||
|
callback: function(result) {
|
||||||
|
$scope.dialogShown = false;
|
||||||
|
|
||||||
|
var email = $('#email').val();
|
||||||
|
var password = $('#password').val();
|
||||||
|
$http.post(
|
||||||
|
"/api/users/login",
|
||||||
|
{
|
||||||
|
"email": email,
|
||||||
|
"password": password
|
||||||
|
}
|
||||||
|
).success(function(result) {
|
||||||
|
// TODO Alexis Lahouze 2015-08-28 Handle callback.
|
||||||
|
// Call to /api/login to retrieve the token
|
||||||
|
$storage.set('token_type', result.token_type);
|
||||||
|
$storage.set('token', result.token);
|
||||||
|
$storage.set('expiration_date', result.expiration_date);
|
||||||
|
|
||||||
|
authService.loginConfirmed();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cancel: {
|
||||||
|
label: "Annuler",
|
||||||
|
className: "btn-default",
|
||||||
|
callback: function(result) {
|
||||||
|
authService.loginCancelled(null, "Login cancelled by user action.");
|
||||||
|
$scope.dialogShown = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
$rootScope.$on("event:auth-loginRequired", $scope.showLoginForm);
|
||||||
|
}])
|
||||||
|
|
||||||
;
|
;
|
||||||
|
@ -75,6 +75,8 @@
|
|||||||
<script type="text/javascript" src="{{ url_for('bower.static', filename='angular-strap/dist/angular-strap.tpl.js') }}"></script>
|
<script type="text/javascript" src="{{ url_for('bower.static', filename='angular-strap/dist/angular-strap.tpl.js') }}"></script>
|
||||||
<script type="text/javascript" src="{{ url_for('bower.static', filename='highcharts-ng/dist/highcharts-ng.js') }}"></script>
|
<script type="text/javascript" src="{{ url_for('bower.static', filename='highcharts-ng/dist/highcharts-ng.js') }}"></script>
|
||||||
<script type="text/javascript" src="{{ url_for('bower.static', filename='angular-pnotify/src/angular-pnotify.js') }}"></script>
|
<script type="text/javascript" src="{{ url_for('bower.static', filename='angular-pnotify/src/angular-pnotify.js') }}"></script>
|
||||||
|
<script type="text/javascript" src="{{ url_for('bower.static', filename='angular-http-auth/src/http-auth-interceptor.js') }}"></script>
|
||||||
|
<script type="text/javascript" src="{{ url_for('bower.static', filename='meanie-angular-storage/release/meanie-angular-storage.js') }}"></script>
|
||||||
|
|
||||||
<!-- xeditable -->
|
<!-- xeditable -->
|
||||||
<link href="{{ url_for('bower.static', filename='angular-xeditable/dist/css/xeditable.css') }}" rel="stylesheet">
|
<link href="{{ url_for('bower.static', filename='angular-xeditable/dist/css/xeditable.css') }}" rel="stylesheet">
|
||||||
@ -83,7 +85,7 @@
|
|||||||
|
|
||||||
<body style="padding-bottom: 50px; padding-top: 70px">
|
<body style="padding-bottom: 50px; padding-top: 70px">
|
||||||
<!-- Navbar -->
|
<!-- Navbar -->
|
||||||
<nav class="navbar navbar-fixed-top navbar-inverse" ng-controller="AccountController">
|
<nav class="navbar navbar-fixed-top navbar-inverse">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<!-- Brand -->
|
<!-- Brand -->
|
||||||
<div class="navbar-header">
|
<div class="navbar-header">
|
||||||
@ -92,7 +94,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="container-fluid">
|
<div class="container-fluid" ng-controller="MainController">
|
||||||
<div ng-view></div>
|
<div ng-view></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user