gh-158 Fix: Dashboard refresh causes user session logout

ghillert · BoykoAlex · commit b2894499644b · 2017-03-03T12:43:59.000-05:00
* Store oauth-token in session-store
* Restore Dashboard UI in-case a pre-existing oauth-token can be retrieved AND if the SecurityInfo REST endpoint indicates that the user is still logged in
* Polish login page
  - Improve error handling
  - Disable login button as long as both form-fields (username / password) are not filled
* Logout will clear the session-store
diff --git a/ui/app/scripts/auth/controllers/login.js b/ui/app/scripts/auth/controllers/login.js
@@ -23,37 +23,50 @@
 
 define([], function () {
   'use strict';
-  return ['$scope', '$state', 'userService', 'DataflowUtils', '$log', '$rootScope', '$http',
-          function ($scope, $state, user, utils, $log, $rootScope, $http) {
-          $scope.loginForm = {};
+  return ['$scope', '$state', 'userService', 'DataflowUtils', '$log', '$rootScope', '$http', '$window',
+          function ($scope, $state, userService, utils, $log, $rootScope, $http, $window) {
+          $scope.loginModel = {
+            username: '',
+            password: ''
+          };
+          $scope.errorMessage = null;
+
           $scope.login = function() {
-            $log.info('Logging in user:', $scope.loginForm.username);
-            var authenticationPromise = $http.post($rootScope.dataflowServerUrl + '/authenticate', $scope.loginForm);
+            $log.info('Logging in user:', $scope);
+            var authenticationPromise = $http.post($rootScope.dataflowServerUrl + '/authenticate', $scope.loginModel);
             utils.addBusyPromise(authenticationPromise);
             authenticationPromise.then(
               function(response) {
-                $rootScope.user.username = $scope.loginForm.username;
-                $rootScope.user.isAuthenticated = true;
-                $rootScope.user.isFormLogin = true;
-                $http.defaults.headers.common[$rootScope.xAuthTokenHeaderName] = response.data;
+                var oauthToken = response.data;
+                $http.defaults.headers.common[$rootScope.xAuthTokenHeaderName] = oauthToken;
 
                 var securityInfoUrl = '/security/info';
                 var timeout = 20000;
                 var promiseHttp = $http.get(securityInfoUrl, {timeout: timeout});
-                utils.growl.success('User ' + $scope.loginForm.username + ' logged in.');
-                $scope.loginForm = {};
 
                 promiseHttp.then(function(response) {
                   console.log('Security info retrieved ...', response.data);
-                  $rootScope.user.roles = response.data.roles;
-                  $state.go('home.apps.tabs.appsList');
+                  userService.populateUser(response.data);
+                  $window.sessionStorage.setItem('xAuthToken', oauthToken);
+
+                  if (response.data.authenticated) {
+                    utils.growl.success('User ' + response.data.username + ' logged in.');
+                    $scope.loginModel = {
+                      username: '',
+                      password: ''
+                    };
+                    $state.go('home.apps.tabs.appsList');
+                  }
+                  else {
+                    $scope.errorMessage = 'Login failed. Please retry.';
+                  }
                 }, function(errorResponse) {
-                  var errorMessage = 'Error retrieving security info from ' + securityInfoUrl + ' (timeout: ' + timeout + 'ms)';
-                  console.log(errorMessage, errorResponse);
-                  $('.splash .container').html(errorMessage);
+                  console.log('Error getteng securityInfo', errorResponse);
+                  $scope.errorMessage = 'Error retrieving security info from ' + securityInfoUrl + ' (timeout: ' + timeout + 'ms)';
                 });
               },
               function(response) {
+                $scope.errorMessage = response.data[0].message ;
                 utils.growl.error(response.data[0].message);
               }
             );
diff --git a/ui/app/scripts/auth/controllers/logout.js b/ui/app/scripts/auth/controllers/logout.js
@@ -21,29 +21,24 @@
  */
 define([], function () {
   'use strict';
-  return ['$window', 'DataflowUtils', '$state', '$log', '$rootScope', '$http', 'userService', function ($window, DataflowUtils, $state, $log, $rootScope, $http, user) {
-    $log.info('Logging out...');
+  return ['$window', 'DataflowUtils', '$state', '$log', '$rootScope', '$http', 'userService', function ($window, DataflowUtils, $state, $log, $rootScope, $http, userService) {
 
-    if ($rootScope.user.isFormLogin) {
-      $http.get($rootScope.dataflowServerUrl + '/dashboard/logout').then(function() {
-
-        $rootScope.user.username = '';
-        $rootScope.user.isAuthenticated = false;
-        $rootScope.user.isFormLogin = false;
-
-        user = {
-          authenticationEnabled: true,
-          isFormLogin: false,
-          isAuthenticated: false,
-          username: ''
-        };
+    $log.info('Logging out ...');
 
+    if (userService.isFormLogin) {
+      console.log('Logging out user ' + userService.username + ' (FormLogin)');
+      $http.get($rootScope.dataflowServerUrl + '/dashboard/logout').then(function() {
+        userService.resetUser();
         delete $http.defaults.headers.common[$rootScope.xAuthTokenHeaderName];
+        $window.sessionStorage.removeItem('xAuthToken-token');
         DataflowUtils.growl.success('Logged out.');
         $state.go('login');
       });
     }
-    else{
+    else {
+      console.log('Logging out user ' + userService.username + ' (OAuth)');
+      delete $http.defaults.headers.common[$rootScope.xAuthTokenHeaderName];
+      $window.sessionStorage.removeItem('xAuthToken-token');
       var logoutUrl = '//' + $window.location.host + '/logout';
       console.log('Redirecting to ' + logoutUrl);
       $window.open(logoutUrl, '_self');
diff --git a/ui/app/scripts/auth/services.js b/ui/app/scripts/auth/services.js
@@ -1,5 +1,5 @@
 /*
- * Copyright 2013-2014 the original author or authors.
+ * Copyright 2013-2017 the original author or authors.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,12 +24,13 @@ define(['angular'], function (angular) {
   'use strict';
 
   return angular.module('dataflowAuth.services', [])
-      .factory('userService', function(securityInfo) {
+      .factory('userService', function(securityInfo, $rootScope, $window, $http) {
           var user = {
             authenticationEnabled: securityInfo.authenticationEnabled,
             isAuthenticated: securityInfo.authenticated,
             username: securityInfo.username,
             roles: securityInfo.roles,
+            isFormLogin: securityInfo.formLogin,
             hasRole: function(role) {
               if (user.roles.indexOf(role) >= 0){
                 return true;
@@ -38,7 +39,49 @@ define(['angular'], function (angular) {
                 return false;
               }
             },
-            isFormLogin: false
+            resetUser: function() {
+              user.authenticationEnabled = null;
+              user.isAuthenticated = null;
+              user.isFormLogin = null;
+              user.roles = [];
+              user.username = null;
+              $rootScope.user.username = '';
+              $rootScope.user.isAuthenticated = false;
+            },
+            populateUser: function(userInfo) {
+              user.authenticationEnabled = userInfo.authenticationEnabled;
+              user.isAuthenticated = userInfo.authenticated;
+              user.isFormLogin = userInfo.formLogin;
+              user.roles = userInfo.roles;
+              user.username = userInfo.username;
+
+              $rootScope.user.username = user.username;
+              $rootScope.user.isAuthenticated = user.isAuthenticated;
+            },
+            restoreUser: function (xAuthToken) {
+                if (xAuthToken !== null) {
+                  $http.defaults.headers.common[$rootScope.xAuthTokenHeaderName] = xAuthToken;
+                  $window.sessionStorage.setItem('xAuthToken', xAuthToken);
+                }
+
+                var securityInfoUrl = '/security/info';
+                var timeout = 20000;
+                var promiseHttp = $http.get(securityInfoUrl, {timeout: timeout});
+
+                promiseHttp.then(function(response) {
+                  console.log('Security info retrieved ...', response.data);
+
+                  $rootScope.user = {
+                    username: response.data.username,
+                    isAuthenticated: response.data.authenticated,
+                    isFormLogin: true,
+                    roles: response.data.roles
+                  };
+
+                  console.log($rootScope.user);
+                });
+                return promiseHttp;
+            }
           };
           return user;
         })
diff --git a/ui/app/scripts/auth/views/login.html b/ui/app/scripts/auth/views/login.html
@@ -12,14 +12,19 @@
           <div class="platform--title" ng-if="user.isAuthenticated">Please sign out first</div>
           <div class="platform--text">
             <div class="container-fluid">
+              <div class="row" ng-hide="errorMessage === null">
+                <div class="col-md-4 col-md-offset-4">
+                  {{errorMessage}}
+                </div>
+              </div>
               <div class="row">
                 <div class="col-md-4 col-md-offset-4">
-                <form class="form-signin" role="form" ng-submit="login()" novalidate ng-if="!user.isAuthenticated">
-                  <input ng-model="loginForm.username" type="text" class="form-control" placeholder="Username" required autofocus>
+                <form name="loginForm" class="form-signin" role="form" ng-submit="login()" novalidate ng-if="!user.isAuthenticated">
+                  <input name="username" ng-model="loginModel.username" type="text" class="form-control" placeholder="Username" required autofocus>
                   <div class="help-block"></div>
-                  <input ng-model="loginForm.password" type="password" class="form-control" placeholder="Password" required>
+                  <input name="password" ng-model="loginModel.password" type="password" class="form-control" placeholder="Password" required>
                   <div class="help-block"></div>
-                  <button class="btn btn-lg btn-default btn-block" type="submit">Sign in</button>
+                  <button class="btn btn-lg btn-default btn-block" type="submit" ng-disabled="loginForm.$invalid">Sign in</button>
                 </form>
                 <form class="form-signin" role="form" ng-submit="logout()" novalidate ng-if="user.isAuthenticated">
                   <button class="btn btn-lg btn-default btn-block" type="submit">Sign out</button>
diff --git a/ui/app/scripts/main.js b/ui/app/scripts/main.js
@@ -135,13 +135,26 @@ define([
 
   var initInjector = angular.injector(['ng']);
   var $http = initInjector.get('$http');
+  var $window = initInjector.get('$window');
+
+  console.log('Checking whether current session is active ...');
+  var xAuthToken = $window.sessionStorage.getItem('xAuthToken');
+
+  if (xAuthToken !== null) {
+    console.log('Current session found.');
+    $http.defaults.headers.common['x-auth-token'] = xAuthToken;
+  }
+  else {
+    console.log('Initiating new session.');
+  }
+
   var securityInfoUrl = '/security/info';
   var timeout = 20000;
   var promiseHttp = $http.get(securityInfoUrl, {timeout: timeout});
   var promiseFeature = $http.get('/features', {timeout: timeout});
 
   promiseHttp.then(function(response) {
-    console.log('Security info retrieved ...', response.data);
+    console.log('Security info retrieved, user authenticated: ' + response.data.authenticated, response.data);
     app.constant('securityInfo', response.data);
 
     promiseFeature.then(function(featuresResponse) {
@@ -155,6 +168,7 @@ define([
     console.log(errorMessage, errorResponse);
     $('.splash .container').html(errorMessage);
   });
+
   function updateGrowl() {
     var bodyScrollTop = $(document).scrollTop();
     var navHeight = $('nav').outerHeight();
diff --git a/ui/app/scripts/routes.js b/ui/app/scripts/routes.js
@@ -436,7 +436,7 @@ define(['./app'], function (dashboard) {
           }
         });
   });
-  dashboard.run(function ($rootScope, $state, $stateParams, userService, featuresService, $log) {
+  dashboard.run(function ($rootScope, $state, $stateParams, userService, featuresService, $log, $window, $http) {
 
     $rootScope.$state = $state;
     $rootScope.$stateParams = $stateParams;
@@ -447,6 +447,11 @@ define(['./app'], function (dashboard) {
     $rootScope.pageRefreshTime = 5000;
     $rootScope.enableMessageRates = true;
 
+    var xAuthToken = $window.sessionStorage.getItem('xAuthToken');
+    if (xAuthToken !== null && userService.isAuthenticated) {
+      console.log('User ' + userService.username + ' is already authenticated, populating http header ' + $rootScope.xAuthTokenHeaderName);
+      $http.defaults.headers.common[$rootScope.xAuthTokenHeaderName] = xAuthToken;
+    }
     $rootScope.$on('$stateChangeStart', function(event, toState) {
         if (toState.data.feature && !$rootScope.features[toState.data.feature]) {
           $log.error('Feature disabled: ' + toState.data.feature);
