From 8877200ef49b0ced30683297b786a859012bb16c Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Thu, 16 Aug 2018 10:58:47 +0200
Subject: [PATCH 1/3] created a class for loading buttons, added a button for
 when login slow on login page

---
 public/app/core/controllers/login_ctrl.ts |  5 +++-
 public/app/partials/login.html            |  5 +++-
 public/sass/components/_buttons.scss      | 32 +++++++++++++++++++++++
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/public/app/core/controllers/login_ctrl.ts b/public/app/core/controllers/login_ctrl.ts
index 0a66f83d08a..606841cb19d 100644
--- a/public/app/core/controllers/login_ctrl.ts
+++ b/public/app/core/controllers/login_ctrl.ts
@@ -13,6 +13,7 @@ export class LoginCtrl {
 
     $scope.command = {};
     $scope.result = '';
+    $scope.loggingIn = false;
 
     contextSrv.sidemenu = false;
 
@@ -110,10 +111,12 @@ export class LoginCtrl {
         $scope.result = result;
 
         if ($scope.formModel.password !== 'admin' || $scope.ldapEnabled || $scope.authProxyEnabled) {
+          $scope.loggingIn = true;
           $scope.toGrafana();
           return;
+        } else {
+          $scope.changeView();
         }
-        $scope.changeView();
       });
     };
 
diff --git a/public/app/partials/login.html b/public/app/partials/login.html
index 87b3cada7b5..9093b27ea28 100644
--- a/public/app/partials/login.html
+++ b/public/app/partials/login.html
@@ -16,9 +16,12 @@
               placeholder="password">
           </div>
           <div class="login-button-group">
-            <button type="submit" class="btn btn-large p-x-2" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
+            <button type="submit" class="btn btn-large p-x-2" ng-if="!loggingIn" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
               Log In
             </button>
+            <button type="submit" class="btn btn-large p-x-2 btn-inverse btn-loading" ng-if="loggingIn">
+              Logging In<span>.</span><span>.</span><span>.</span>
+            </button>
             <div class="small login-button-forgot-password">
               <a href="user/password/send-reset-email">
                 Forgot your password?
diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss
index 5d74122cdd9..b44f792fd7a 100644
--- a/public/sass/components/_buttons.scss
+++ b/public/sass/components/_buttons.scss
@@ -220,3 +220,35 @@ $btn-service-icon-width: 35px;
     background-size: 60%;
   }
 }
+
+//Button animations
+
+.btn-loading span {
+  animation-name: blink;
+  animation-duration: 1.4s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+}
+
+.btn-loading span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.btn-loading span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+    font-size: 14;
+  }
+  20% {
+    opacity: 1;
+    font-size: 18;
+  }
+  100% {
+    opacity: 0.2;
+    font-size: 14;
+  }
+}

From 050902a1e7a1ef0f6c937ecc4a0eac99e3149924 Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Thu, 23 Aug 2018 15:31:25 +0200
Subject: [PATCH 2/3] fixed so animation starts as soon as one pushes the
 button and animation stops if login failed

---
 public/app/core/controllers/login_ctrl.ts | 25 ++++++++++++++---------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/public/app/core/controllers/login_ctrl.ts b/public/app/core/controllers/login_ctrl.ts
index 606841cb19d..1834892a536 100644
--- a/public/app/core/controllers/login_ctrl.ts
+++ b/public/app/core/controllers/login_ctrl.ts
@@ -102,22 +102,27 @@ export class LoginCtrl {
 
     $scope.login = function() {
       delete $scope.loginError;
+      $scope.loggingIn = true;
 
       if (!$scope.loginForm.$valid) {
         return;
       }
 
-      backendSrv.post('/login', $scope.formModel).then(function(result) {
-        $scope.result = result;
+      backendSrv
+        .post('/login', $scope.formModel)
+        .then(function(result) {
+          $scope.result = result;
 
-        if ($scope.formModel.password !== 'admin' || $scope.ldapEnabled || $scope.authProxyEnabled) {
-          $scope.loggingIn = true;
-          $scope.toGrafana();
-          return;
-        } else {
-          $scope.changeView();
-        }
-      });
+          if ($scope.formModel.password !== 'admin' || $scope.ldapEnabled || $scope.authProxyEnabled) {
+            $scope.toGrafana();
+            return;
+          } else {
+            $scope.changeView();
+          }
+        })
+        .catch(() => {
+          $scope.loggingIn = false;
+        });
     };
 
     $scope.toGrafana = function() {

From 1a2ab532d13bc7aa4d66f104aa6c93b372e0519b Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Mon, 27 Aug 2018 14:16:34 +0200
Subject: [PATCH 3/3] fixed so validation of empty fields works again

---
 public/app/core/controllers/login_ctrl.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/core/controllers/login_ctrl.ts b/public/app/core/controllers/login_ctrl.ts
index 1834892a536..a86fb9161dc 100644
--- a/public/app/core/controllers/login_ctrl.ts
+++ b/public/app/core/controllers/login_ctrl.ts
@@ -102,11 +102,11 @@ export class LoginCtrl {
 
     $scope.login = function() {
       delete $scope.loginError;
-      $scope.loggingIn = true;
 
       if (!$scope.loginForm.$valid) {
         return;
       }
+      $scope.loggingIn = true;
 
       backendSrv
         .post('/login', $scope.formModel)