Better handling of invalid credentials on login

* Notify on page as this is more appropriate
* Reset entered password

src/pages/Login.vue

@@ -1,8 +1,9 @@
 <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-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>

src/plugins/user/components/Widget.vue

@@ -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>

src/plugins/user/store/session.ts

@@ -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);
       });
   },