Merge pull request #12939 from grafana/12865-login-loading-animation

animation during slow login

public/app/core/controllers/login_ctrl.ts

@@ -13,6 +13,7 @@ export class LoginCtrl {
 
     $scope.command = {};
     $scope.result = '';
+    $scope.loggingIn = false;
 
     contextSrv.sidemenu = false;
 
@@ -105,15 +106,22 @@ export class LoginCtrl {
       if (!$scope.loginForm.$valid) {
         return;
       }
+      $scope.loggingIn = true;
 
-      backendSrv.post('/login', $scope.formModel).then(function(result) {
+      backendSrv
+        .post('/login', $scope.formModel)
+        .then(function(result) {
           $scope.result = result;
 
           if ($scope.formModel.password !== 'admin' || $scope.ldapEnabled || $scope.authProxyEnabled) {
             $scope.toGrafana();
             return;
-        }
+          } else {
             $scope.changeView();
+          }
+        })
+        .catch(() => {
+          $scope.loggingIn = false;
         });
     };
 

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?

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;
+  }
+}