Add back that login error thing that someone removed

4 files changed, 52 insertions, 22 deletions

diff --git a/src/App.scss b/src/App.scss
index ed06bbbc..ba8770e2 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -654,6 +654,33 @@ nav {
   border-radius: var(--inputRadius, $fallback--inputRadius);
 }
 
+@keyframes shakeError {
+  0% {
+    transform: translateX(0);
+  }
+  15% {
+    transform: translateX(0.375rem);
+  }
+  30% {
+    transform: translateX(-0.375rem);
+  }
+  45% {
+    transform: translateX(0.375rem);
+  }
+  60% {
+    transform: translateX(-0.375rem);
+  }
+  75% {
+    transform: translateX(0.375rem);
+  }
+  90% {
+    transform: translateX(-0.375rem);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
 @media all and (max-width: 959px) {
   .mobile-hidden {
     display: none;
diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js
index 013222a8..ae9322d5 100644
--- a/src/components/login_form/login_form.js
+++ b/src/components/login_form/login_form.js
@@ -22,6 +22,7 @@ const LoginForm = {
         oauth: this.$store.state.oauth,
         instance: this.$store.state.instance.server
       }
+      this.clearError()
       oauthApi.getOrCreateApp(data).then((app) => {
         oauthApi.getTokenWithCredentials(
           {
@@ -30,11 +31,19 @@ const LoginForm = {
             username: this.user.username,
             password: this.user.password})
           .then((result) => {
+            if (result.error) {
+              this.authError = result.error
+              this.user.password = ''
+              return
+            }
             this.$store.commit('setToken', result.access_token)
             this.$store.dispatch('loginUser', result.access_token)
             this.$router.push({name: 'friends'})
           })
       })
+    },
+    clearError () {
+      this.authError = false
     }
   }
 }
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 12971882..b6a15776 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -33,6 +33,12 @@
           </div>
         </div>
       </form>
+      <div v-if="authError" class='form-group'>
+        <div class='alert error'>
+          {{authError}}
+          <i class="button-icon icon-cancel" @click="clearError"></i>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -48,10 +54,6 @@
     width: 10em;
   }
 
-  .error {
-    text-align: center;
-  }
-
   .register {
     flex: 1 1;
   }
@@ -64,4 +66,14 @@
     justify-content: space-between;
   }
 }
+
+.login {
+  .error {
+    text-align: center;
+
+    animation-name: shakeError;
+    animation-duration: 0.4s;
+    animation-timing-function: ease-in-out;
+  }
+}
 </style>
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 25c1a9d0..cf9bf5d9 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -147,24 +147,6 @@ $validations-cRed: #f04124;
     margin-bottom: 1em;
   }
 
-  @keyframes shakeError {
-    0% {
-      transform: translateX(0); }
-    15% {
-      transform: translateX(0.375rem); }
-    30% {
-      transform: translateX(-0.375rem); }
-    45% {
-      transform: translateX(0.375rem); }
-    60% {
-      transform: translateX(-0.375rem); }
-    75% {
-      transform: translateX(0.375rem); }
-    90% {
-      transform: translateX(-0.375rem); }
-    100% {
-      transform: translateX(0); } }
-
   .form-group--error {
     animation-name: shakeError;
     animation-duration: .6s;