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> <template>
<q-page padding class="fit row justify-center items-center content-center"> <q-page
<q-card padding
class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center" 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 class="bg-primary text-white">
<q-toolbar-title> <q-toolbar-title>
Login Login
@ -10,7 +11,11 @@
</q-toolbar> </q-toolbar>
<q-card-section> <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 <q-input
filled filled
v-model="userid" v-model="userid"
@ -25,7 +30,11 @@
:rules="rules" :rules="rules"
/> />
<div class="row justify-end"> <div class="row justify-end">
<q-btn label="Login" type="submit" color="primary" /> <q-btn
label="Login"
type="submit"
color="primary"
/>
</div> </div>
</q-form> </q-form>
</q-card-section> </q-card-section>
@ -35,7 +44,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from '@vue/composition-api'; import { defineComponent, ref } from '@vue/composition-api';
import { Loading } from 'quasar'; import { Loading, Notify } from 'quasar';
export default defineComponent({ export default defineComponent({
// name: 'PageName' // name: 'PageName'
@ -46,17 +55,17 @@ export default defineComponent({
const userid = ref(''); const userid = ref('');
const password = ref(''); const password = ref('');
const rules = [ 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() { function doLogin() {
Loading.show({ Loading.show({
message: 'Du wirst angemeldet' message: 'Du wirst angemeldet',
}); });
root.$store root.$store
.dispatch('session/login', { .dispatch('session/login', {
userid: userid.value, userid: userid.value,
password: password.value password: password.value,
}) })
.then(() => { .then(() => {
const x = root.$route.query['redirect']; const x = root.$route.query['redirect'];
@ -64,12 +73,25 @@ export default defineComponent({
typeof x === 'string' ? { path: x } : mainRoute 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(() => { .finally(() => {
Loading.hide(); Loading.hide();
}); });
} }
return { userid, password, doLogin, rules }; return { userid, password, doLogin, rules };
} },
}); });
</script> </script>

View File

@ -2,10 +2,12 @@
<q-card style="text-align: center;"> <q-card style="text-align: center;">
<q-card-section class="row justify-center content-stretch"> <q-card-section class="row justify-center content-stretch">
<div class="col-4"> <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" /> <img :src="avatarLink" />
</q-avatar> </q-avatar>
</div> </div>
</div>
<div class="col-8"> <div class="col-8">
<span class="text-h6">Hallo {{ name }}</span><br /> <span class="text-h6">Hallo {{ name }}</span><br />
<span v-if="hasBirthday">Herzlichen Glückwunsch zum Geburtstag!<br /></span> <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 { AxiosError, AxiosResponse } from 'axios';
import { Router } from 'src/router'; import { Router } from 'src/router';
import { LocalStorage } from 'quasar'; import { LocalStorage } from 'quasar';
import { Notify } from 'quasar';
export interface SessionInterface { export interface SessionInterface {
currentSession?: FG.Session; currentSession?: FG.Session;
@ -64,15 +63,6 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
}); });
}) })
.catch((error: AxiosError) => { .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); return Promise.reject(error.response);
}); });
}, },