Better handling of invalid credentials on login

* Notify on page as this is more appropriate
* Reset entered password
This commit is contained in:
Ferdinand Thiessen 2020-11-16 14:17:26 +01:00
parent 967458a51b
commit 5061d18956
3 changed files with 38 additions and 24 deletions

View File

@ -1,8 +1,9 @@
<template>
<q-page padding class="fit row justify-center items-center content-center">
<q-card
class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center"
<q-page
padding
class="fit row justify-center items-center content-center"
>
<q-card class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center">
<q-toolbar class="bg-primary text-white">
<q-toolbar-title>
Login
@ -10,7 +11,11 @@
</q-toolbar>
<q-card-section>
<q-form ref="LoginForm" @submit="doLogin" class="q-gutter-md">
<q-form
ref="LoginForm"
@submit="doLogin"
class="q-gutter-md"
>
<q-input
filled
v-model="userid"
@ -25,7 +30,11 @@
:rules="rules"
/>
<div class="row justify-end">
<q-btn label="Login" type="submit" color="primary" />
<q-btn
label="Login"
type="submit"
color="primary"
/>
</div>
</q-form>
</q-card-section>
@ -35,7 +44,7 @@
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import { Loading } from 'quasar';
import { Loading, Notify } from 'quasar';
export default defineComponent({
// name: 'PageName'
@ -46,17 +55,17 @@ export default defineComponent({
const userid = ref('');
const password = ref('');
const rules = [
(val: string) => (val && val.length > 0) || 'Feld darf nicht leer sein!'
(val: string) => (val && val.length > 0) || 'Feld darf nicht leer sein!',
];
function doLogin() {
Loading.show({
message: 'Du wirst angemeldet'
message: 'Du wirst angemeldet',
});
root.$store
.dispatch('session/login', {
userid: userid.value,
password: password.value
password: password.value,
})
.then(() => {
const x = root.$route.query['redirect'];
@ -64,12 +73,25 @@ export default defineComponent({
typeof x === 'string' ? { path: x } : mainRoute
);
})
.catch((error: { status: number } | undefined) => {
if (error && error.status === 401) {
password.value = '';
Notify.create({
group: false,
type: 'negative',
message: 'Benutzername oder Passwort sind falsch.',
timeout: 10000,
progress: true,
actions: [{ icon: 'mdi-close', color: 'white' }],
});
}
})
.finally(() => {
Loading.hide();
});
}
return { userid, password, doLogin, rules };
}
},
});
</script>

View File

@ -2,10 +2,12 @@
<q-card style="text-align: center;">
<q-card-section class="row justify-center content-stretch">
<div class="col-4">
<q-avatar style="width: 100%; height: auto;">
<div style="width: 100%; padding-bottom: 100%; position: relative;">
<q-avatar style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
<img :src="avatarLink" />
</q-avatar>
</div>
</div>
<div class="col-8">
<span class="text-h6">Hallo {{ name }}</span><br />
<span v-if="hasBirthday">Herzlichen Glückwunsch zum Geburtstag!<br /></span>

View File

@ -5,7 +5,6 @@ import { axios } from 'src/boot/axios';
import { AxiosError, AxiosResponse } from 'axios';
import { Router } from 'src/router';
import { LocalStorage } from 'quasar';
import { Notify } from 'quasar';
export interface SessionInterface {
currentSession?: FG.Session;
@ -64,15 +63,6 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
});
})
.catch((error: AxiosError) => {
if (error.response && error.response.status === 401)
Notify.create({
group: false,
type: 'negative',
message: 'Benutzername oder Passwort sind falsch.',
timeout: 10000,
progress: true,
actions: [{ icon: 'mdi-close', color: 'white' }]
});
return Promise.reject(error.response);
});
},