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:
parent
24ba7b6eb3
commit
a529691fb1
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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';
|
||||
})
|
||||
};
|
||||
|
||||
|
@ -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);
|
||||
});
|
||||
};
|
||||
}]
|
||||
|
@ -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>
|
Loading…
Reference in New Issue
Block a user