Add back that login error thing that someone removed

This commit is contained in:
shpuld 2019-01-28 17:43:51 +02:00
parent 3b1cafc19f
commit 1b76a5a9ea
4 changed files with 52 additions and 22 deletions

View file

@ -654,6 +654,33 @@ nav {
border-radius: var(--inputRadius, $fallback--inputRadius); 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) { @media all and (max-width: 959px) {
.mobile-hidden { .mobile-hidden {
display: none; display: none;

View file

@ -22,6 +22,7 @@ const LoginForm = {
oauth: this.$store.state.oauth, oauth: this.$store.state.oauth,
instance: this.$store.state.instance.server instance: this.$store.state.instance.server
} }
this.clearError()
oauthApi.getOrCreateApp(data).then((app) => { oauthApi.getOrCreateApp(data).then((app) => {
oauthApi.getTokenWithCredentials( oauthApi.getTokenWithCredentials(
{ {
@ -30,11 +31,19 @@ const LoginForm = {
username: this.user.username, username: this.user.username,
password: this.user.password}) password: this.user.password})
.then((result) => { .then((result) => {
if (result.error) {
this.authError = result.error
this.user.password = ''
return
}
this.$store.commit('setToken', result.access_token) this.$store.commit('setToken', result.access_token)
this.$store.dispatch('loginUser', result.access_token) this.$store.dispatch('loginUser', result.access_token)
this.$router.push({name: 'friends'}) this.$router.push({name: 'friends'})
}) })
}) })
},
clearError () {
this.authError = false
} }
} }
} }

View file

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

View file

@ -147,24 +147,6 @@ $validations-cRed: #f04124;
margin-bottom: 1em; 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 { .form-group--error {
animation-name: shakeError; animation-name: shakeError;
animation-duration: .6s; animation-duration: .6s;