handle unauthorized connection to es

closes lmenezes#199 lmenezes#169

public/connect.html

@@ -1,59 +1,76 @@
-<div class="row" style="padding-top: 80px;">
-  <div class="col-lg-offset-4 col-lg-4">
-    <div>
-      <div class="text-center">
-        <img src="img/logo.png" height="160px">
-        <h4>Cerebro
-          <small>{{appVersion}}</small>
-        </h4>
-      </div>
-    </div>
-    <div style="padding-top: 60px;">
-      <h6>HOSTS</h6>
+<div class="row" style="padding-top: 80px; padding-bottom: 60px;">
+  <div class="col-xs-12 text-center">
+    <img src="img/logo.png" height="160px">
+    <h4>Cerebro
+      <small>{{appVersion}}</small>
+    </h4>
+  </div>
+</div>
+
+<div style="max-width: 400px; margin-left: auto; margin-right: auto">
+  <div class="text-center">
+    <span>
+      <p>
+        <span ng-show="connecting">
+          <i class="fa fa-fw fa-circle-o-notch fa-spin"> </i> Connecting...
+        </span>&nbsp;
+        <span class="text-danger" ng-show="feedback">
+          {{feedback}}
+        </span>
+      </p>
+    </span>
+  </div>
+  <div ng-hide="unauthorized">
+    <div ng-show="hosts.length > 0">
       <table class="table">
+        <thead>
+        <tr>
+          <th>Known clusters</th>
+        </tr>
+        </thead>
+        <tbody>
         <tr ng-repeat="host in hosts | orderBy track by $index">
           <td class="normal-action" ng-click="connect(host)">
             <span>{{host}}</span>
           </td>
         </tr>
+        </tbody>
       </table>
-      <form>
-        <div class="row">
-          <div class="col-xs-12">
-            <input id="newHost" type="text" ng-model="host" class="form-control form-control-sm"
-                   placeholder="example: http://localhost:9200" ng-enter="connect(host, username, password)">
-          </div>
-        </div>
-        <div class="row form-group">
-          <div class="col-xs-12 text-right">
-          <span ng-click="showAuth = !showAuth" data-toggle="collapse" data-target="#collapseAuth"
-                class="normal-action">
-            <small>Authentication</small>
-            <i class="fa" ng-class="{'fa-angle-down': !showAuth, 'fa-angle-up': showAuth}"></i>
-          </span>
-            <div class="collapse text-left" id="collapseAuth">
-              <div class="form-group">
-                <label for="username">Username</label>
-                <input id="username" type="text" ng-model="username" class="form-control form-control-sm"
-                       placeholder="admin" ng-enter="connect(host, username, password)">
-              </div>
-              <div class="form-group">
-                <label for="password">Password</label>
-                <input id="password" type="password" ng-model="password" class="form-control form-control-sm"
-                       ng-enter="connect(host, username, password)">
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="form-group row">
-          <div class="col-xs-12">
-                <span class="pull-left subtitle" ng-show="connecting">
-                    <i class="fa fa-fw fa-circle-o-notch fa-spin"> </i> Connecting
-                </span>
-            <button type="submit" class="btn btn-success pull-right" ng-click="connect(host, username, password)" ng-disabled ="!host">Connect</button>
-          </div>
-        </div>
-      </form>
     </div>
+    <form>
+      <div class="form-group">
+        <label for="host">Node address</label>
+        <input id="host" type="text" ng-model="host"
+               class="form-control form-control-sm"
+               placeholder="e.g.: http://localhost:9200"
+               ng-enter="connect(host)">
+      </div>
+      <button type="submit" class="btn btn-success pull-right"
+              ng-click="connect(host)"
+              ng-disabled="!host">
+        Connect
+      </button>
+    </form>
+  </div>
+  <div ng-show="unauthorized">
+    <form>
+      <div class="form-group">
+        <label for="username">Username</label>
+        <input id="username" type="text" ng-model="username"
+               class="form-control form-control-sm"
+               placeholder="admin"
+               ng-enter="authorize(host, username, password)">
+      </div>
+      <div class="form-group">
+        <label for="password">Password</label>
+        <input id="password" type="password" ng-model="password"
+               class="form-control form-control-sm"
+               ng-enter="authorize(host, username, password)">
+      </div>
+      <button type="submit" class="btn btn-success pull-right"
+              ng-click="authorize(host, username, password)">
+        Authenticate
+      </button>
+    </form>
   </div>
 </div>

public/js/app.js

@@ -486,32 +486,83 @@ angular.module('cerebro').factory('ClusterSettingsDataService', ['DataService',
 ]);
 
 angular.module('cerebro').controller('ConnectController', [
-  '$scope', '$location', 'DataService', 'AlertService',
-  function($scope, $location, DataService, AlertService) {
+  '$scope', '$location', 'ConnectDataService', 'AlertService', 'DataService',
+  function($scope, $location, ConnectDataService, AlertService, DataService) {
 
     $scope.hosts = undefined;
 
     $scope.connecting = false;
 
+    $scope.unauthorized = false;
+
+    $scope.feedback = undefined;
+
     $scope.setup = function() {
-      DataService.getHosts(
+      ConnectDataService.getHosts(
         function(hosts) {
           $scope.hosts = hosts;
         },
         function(error) {
           AlertService.error('Error while fetching list of known hosts', error);
         }
       );
+      $scope.host = $location.search().host;
+      $scope.unauthorized = $location.search().unauthorized;
     };
 
-    $scope.connect = function(host, username, password) {
+    $scope.connect = function(host) {
       if (host) {
+        $scope.feedback = undefined;
+        $scope.host = host;
         $scope.connecting = true;
-        DataService.setHost(host, username, password);
-        $location.path('/overview');
+        var success = function(data) {
+          $scope.connecting = false;
+          if (data.status >= 200 && data.status < 300) {
+            DataService.setHost(host);
+            $location.path('/overview');
+          } else {
+            if (data.status === 401) {
+              $scope.unauthorized = true;
+            } else {
+              error(data.body);
+            }
+          }
+        };
+        var error = function(data) {
+          $scope.connecting = false;
+          AlertService.error('Error connecting to [' + host + ']', data);
+        };
+        ConnectDataService.connect(host, success, error);
       }
     };
 
+    $scope.authorize = function(host, username, password) {
+      $scope.feedback = undefined;
+      $scope.connecting = true;
+      var feedback = function(message) {
+        $scope.connecting = false;
+        $scope.feedback  = message;
+      };
+      var success = function(data) {
+        switch (data.status) {
+          case 401:
+            feedback('Invalid username or password');
+            break;
+          case 200:
+            DataService.setHost(host, username, password);
+            $location.path('/overview');
+            break;
+          default:
+            feedback('Unexpected response stats: [' + data.status + ']');
+        }
+      };
+      var error = function(data) {
+        $scope.connecting = false;
+        AlertService.error('Error connecting to [' + host + ']', data);
+      };
+      ConnectDataService.authorize(host, username, password, success, error);
+    };
+
   }]);
 
 angular.module('cerebro').factory('ConnectDataService', ['$http',
@@ -2828,15 +2879,6 @@ angular.module('cerebro').factory('DataService', ['$rootScope', '$timeout',
       clusterRequest('cluster_changes', {}, success, error);
     };
 
-    // ---------- Connect ----------
-    this.getHosts = function(success, error) {
-      var config = {
-        method: 'GET',
-        url: 'connect/hosts'
-      };
-      request(config, success, error);
-    };
-
     // ---------- External API ----------
 
     this.send = function(path, data, success, error) {
@@ -2864,14 +2906,19 @@ angular.module('cerebro').factory('DataService', ['$rootScope', '$timeout',
     var request = function(config, success, error) {
       var handleSuccess = function(data) {
         onGoingRequests[config.url] = undefined;
-        if (data.status === 303) {
-          $window.location.href = 'login';
-        } else {
-          if (data.status >= 200 && data.status < 300) {
-            success(data.body);
-          } else {
-            error(data.body);
-          }
+        switch (data.status) {
+          case 303: // unauthorized in cerebro
+            $window.location.href = './login';
+            break;
+          case 401: // unauthorized in ES instance
+            $location.path('/connect').search({host: host, unauthorized: true});
+            break;
+          default:
+            if (data.status >= 200 && data.status < 300) {
+              success(data.body);
+            } else {
+              error(data.body);
+            }
         }
       };
       var handleError = function(data) {

src/app/components/connect/controller.js

@@ -1,28 +1,79 @@
 angular.module('cerebro').controller('ConnectController', [
-  '$scope', '$location', 'DataService', 'AlertService',
-  function($scope, $location, DataService, AlertService) {
+  '$scope', '$location', 'ConnectDataService', 'AlertService', 'DataService',
+  function($scope, $location, ConnectDataService, AlertService, DataService) {
 
     $scope.hosts = undefined;
 
     $scope.connecting = false;
 
+    $scope.unauthorized = false;
+
+    $scope.feedback = undefined;
+
     $scope.setup = function() {
-      DataService.getHosts(
+      ConnectDataService.getHosts(
         function(hosts) {
           $scope.hosts = hosts;
         },
         function(error) {
           AlertService.error('Error while fetching list of known hosts', error);
         }
       );
+      $scope.host = $location.search().host;
+      $scope.unauthorized = $location.search().unauthorized;
     };
 
-    $scope.connect = function(host, username, password) {
+    $scope.connect = function(host) {
       if (host) {
+        $scope.feedback = undefined;
+        $scope.host = host;
         $scope.connecting = true;
-        DataService.setHost(host, username, password);
-        $location.path('/overview');
+        var success = function(data) {
+          $scope.connecting = false;
+          if (data.status >= 200 && data.status < 300) {
+            DataService.setHost(host);
+            $location.path('/overview');
+          } else {
+            if (data.status === 401) {
+              $scope.unauthorized = true;
+            } else {
+              error(data.body);
+            }
+          }
+        };
+        var error = function(data) {
+          $scope.connecting = false;
+          AlertService.error('Error connecting to [' + host + ']', data);
+        };
+        ConnectDataService.connect(host, success, error);
       }
     };
 
+    $scope.authorize = function(host, username, password) {
+      $scope.feedback = undefined;
+      $scope.connecting = true;
+      var feedback = function(message) {
+        $scope.connecting = false;
+        $scope.feedback  = message;
+      };
+      var success = function(data) {
+        switch (data.status) {
+          case 401:
+            feedback('Invalid username or password');
+            break;
+          case 200:
+            DataService.setHost(host, username, password);
+            $location.path('/overview');
+            break;
+          default:
+            feedback('Unexpected response stats: [' + data.status + ']');
+        }
+      };
+      var error = function(data) {
+        $scope.connecting = false;
+        AlertService.error('Error connecting to [' + host + ']', data);
+      };
+      ConnectDataService.authorize(host, username, password, success, error);
+    };
+
   }]);

src/app/shared/services/data.js

@@ -75,15 +75,6 @@ angular.module('cerebro').factory('DataService', ['$rootScope', '$timeout',
       clusterRequest('cluster_changes', {}, success, error);
     };
 
-    // ---------- Connect ----------
-    this.getHosts = function(success, error) {
-      var config = {
-        method: 'GET',
-        url: 'connect/hosts'
-      };
-      request(config, success, error);
-    };
-
     // ---------- External API ----------
 
     this.send = function(path, data, success, error) {
@@ -111,14 +102,19 @@ angular.module('cerebro').factory('DataService', ['$rootScope', '$timeout',
     var request = function(config, success, error) {
       var handleSuccess = function(data) {
         onGoingRequests[config.url] = undefined;
-        if (data.status === 303) {
-          $window.location.href = 'login';
-        } else {
-          if (data.status >= 200 && data.status < 300) {
-            success(data.body);
-          } else {
-            error(data.body);
-          }
+        switch (data.status) {
+          case 303: // unauthorized in cerebro
+            $window.location.href = './login';
+            break;
+          case 401: // unauthorized in ES instance
+            $location.path('/connect').search({host: host, unauthorized: true});
+            break;
+          default:
+            if (data.status >= 200 && data.status < 300) {
+              success(data.body);
+            } else {
+              error(data.body);
+            }
         }
       };
       var handleError = function(data) {