Browse Source

created a class for loading buttons, added a button for when login slow on login page

Patrick O'Carroll 7 years ago
parent
commit
8877200ef4

+ 4 - 1
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();
       });
     };
 

+ 4 - 1
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?

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