diff --git a/public/app/core/controllers/login_ctrl.ts b/public/app/core/controllers/login_ctrl.ts index daf562c65da..737596fcdf6 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; @@ -105,16 +106,23 @@ export class LoginCtrl { if (!$scope.loginForm.$valid) { return; } + $scope.loggingIn = true; - 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.toGrafana(); - return; - } - $scope.changeView(); - }); + if ($scope.formModel.password !== 'admin' || $scope.ldapEnabled || $scope.authProxyEnabled) { + $scope.toGrafana(); + return; + } else { + $scope.changeView(); + } + }) + .catch(() => { + $scope.loggingIn = false; + }); }; $scope.toGrafana = function() { diff --git a/public/app/partials/login.html b/public/app/partials/login.html index 656103adce2..260de80e389 100644 --- a/public/app/partials/login.html +++ b/public/app/partials/login.html @@ -16,9 +16,12 @@ placeholder="password">
- +
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; + } +}