Merge branch 'fix/add-back-login-error' into 'develop'

Fix/add back login error

See merge request pleroma/pleroma-fe!485

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;

src/components/login_form/login_form.js

@@ -22,19 +22,29 @@ const LoginForm = {
         oauth: this.$store.state.oauth,
         instance: this.$store.state.instance.server
       }
+      this.clearError()
       oauthApi.getOrCreateApp(data).then((app) => {
         oauthApi.getTokenWithCredentials(
           {
             app,
             instance: data.instance,
             username: this.user.username,
-            password: this.user.password})
-          .then((result) => {
+            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
     }
   }
 }

src/components/login_form/login_form.vue

@@ -33,6 +33,13 @@
           </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 +55,6 @@
     width: 10em;
   }
 
-  .error {
-    text-align: center;
-  }
-
   .register {
     flex: 1 1;
   }
@@ -64,4 +67,14 @@
     justify-content: space-between;
   }
 }
+
+.login {
+  .error {
+    text-align: center;
+
+    animation-name: shakeError;
+    animation-duration: 0.4s;
+    animation-timing-function: ease-in-out;
+  }
+}
 </style>

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;