From a529691fb1db77044bb2bb49695e38bf673cfb88 Mon Sep 17 00:00:00 2001
From: Jack Foltz <jack@foltz.io>
Date: Sat, 13 Jan 2018 19:06:52 -0500
Subject: [PATCH] Add button shake on invalid login

---
 app/public/css/form.css                     | 30 ++++++++++++++++++++++++++++-
 app/public/services/AuthSvc.js              |  4 ++--
 app/public/shimapan/components/LoginComp.js |  7 ++++++-
 public/views/shimapan/login-form.html       |  2 +-
 4 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/app/public/css/form.css b/app/public/css/form.css
index 08f34b0..01d998a 100755
--- a/app/public/css/form.css
+++ b/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);
+    }
+}
diff --git a/app/public/services/AuthSvc.js b/app/public/services/AuthSvc.js
index 03c38f7..4ad4648 100755
--- a/app/public/services/AuthSvc.js
+++ b/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;
-            $window.location.href = '/home';
+            if (res.status !== 401)
+                $window.location.href = '/home';
         })
     };
 
diff --git a/app/public/shimapan/components/LoginComp.js b/app/public/shimapan/components/LoginComp.js
index 103e79e..8b04b41 100755
--- a/app/public/shimapan/components/LoginComp.js
+++ b/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);
             });
         };
     }]
diff --git a/public/views/shimapan/login-form.html b/public/views/shimapan/login-form.html
index 4661651..f220de2 100755
--- a/public/views/shimapan/login-form.html
+++ b/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>
\ No newline at end of file