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..fb6dc651 100644 --- a/src/components/login_form/login_form.js +++ b/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) => { - this.$store.commit('setToken', result.access_token) - this.$store.dispatch('loginUser', result.access_token) - this.$router.push({name: 'friends'}) - }) + 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..27a8e48a 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -33,6 +33,13 @@ + +
+
+ {{authError}} + +
+
@@ -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; + } +} 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;