Add authentication in frontend.

accountant/frontend/static/js/app.js

@@ -19,28 +19,33 @@ var accountantApp = angular.module("accountantApp", [
     "mgcrea.ngStrap",
     "highcharts-ng",
     "jlareau.pnotify",
+    "http-auth-interceptor",
+    "Storage.Service",
     "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.
     $routeProvider.when('/account/:accountId/operations', {
@@ -58,9 +63,93 @@ var accountantApp = angular.module("accountantApp", [
 
     // Enable HTML5 mode.
     $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) {
     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);
+}])
+
 ;

accountant/frontend/templates/layout.html

@@ -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='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-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 -->
     <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">
       <!-- Navbar -->
-    <nav class="navbar navbar-fixed-top navbar-inverse" ng-controller="AccountController">
+    <nav class="navbar navbar-fixed-top navbar-inverse">
       <div class="container-fluid">
         <!-- Brand -->
         <div class="navbar-header">
@@ -92,7 +94,7 @@
       </div>
     </nav>
 
-    <div class="container-fluid">
+    <div class="container-fluid" ng-controller="MainController">
       <div ng-view></div>
     </div>