1
0
mirror of https://github.com/Foltik/Shimapan synced 2025-01-05 15:58:03 -05:00

Add button shake on invalid login

This commit is contained in:
Jack Foltz 2018-01-13 19:06:52 -05:00
parent 24ba7b6eb3
commit a529691fb1
Signed by: foltik
GPG Key ID: 303F88F996E95541
4 changed files with 38 additions and 5 deletions

View File

@ -72,7 +72,7 @@ button {
padding: 10px 30px;
margin: auto;
margin-top: 20px;
transition: background 0.25s;
transition: background 0.25s, border-color 0.25s;
}
button:hover {
@ -81,3 +81,31 @@ button:hover {
text-decoration: none;
outline: none;
}
button.shake {
background: #ff6666;
border-color: #ff6666;
color: #fff;
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}

View File

@ -15,8 +15,8 @@ angular.module('AuthSvc', []).service('AuthService', ['$http', '$window', functi
},
data: user
}).then(function(res) {
if (res.status === 401) return false;
$window.location.href = '/home';
if (res.status !== 401)
$window.location.href = '/home';
})
};

View File

@ -2,11 +2,16 @@ var angular = require('angular');
angular.module('LoginComp', ['AuthSvc']).component('loginComponent', {
templateUrl: '/views/shimapan/login-form.html',
controller: ['$scope', 'AuthService', function ($scope, AuthService) {
controller: ['$scope', '$timeout', 'AuthService', function ($scope, $timeout, AuthService) {
$scope.login = function () {
AuthService.login({
username: $scope.username,
password: $scope.password
}).catch(function(err) {
$scope.error = true;
$timeout(function() {
$scope.error = false;
},820);
});
};
}]

View File

@ -4,7 +4,7 @@
<form ng-submit="login()">
<input id="username" placeholder="Username" class="form-control" type="text" ng-model="username"/>
<input id="password" placeholder="Password" class="form-control" type="password" ng-model="password"/>
<button type="submit" class="btn">Submit</button>
<button type="submit" class="btn" ng-class="{shake: error, noshake: !error}">Submit</button>
</form>
</fieldset>
</div>