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

This commit is contained in:
Patrick O'Carroll 2018-08-16 10:58:47 +02:00
parent 8af80b323a
commit 8877200ef4
3 changed files with 40 additions and 2 deletions

View File

@ -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();
});
};

View File

@ -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?

View File

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