Add button shake on invalid login

app/public/css/form.css

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

app/public/services/AuthSvc.js

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

app/public/shimapan/components/LoginComp.js

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

public/views/shimapan/login-form.html

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