src/pages/Login.vue

@@ -1,8 +1,5 @@
 <template>
-  <q-page
-    padding
-    class="fit row  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>
@@ -11,16 +8,13 @@
       </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"
             label="Benutzername oder E-Mail"
             :rules="rules"
+            tabindex="1"
           />
           <q-input
             filled
@@ -28,13 +22,17 @@
             type="password"
             label="Password"
             :rules="rules"
+            tabindex="2"
           />
-          <div class="row justify-end">
+          <div class="row justify-between">
             <q-btn
-              label="Login"
-              type="submit"
-              color="primary"
+              label="Passwort vergessen"
+              type="a"
+              @click="doReset"
+              color="secondary"
+              tabindex="4"
             />
+            <q-btn label="Login" type="submit" color="primary" tabindex="3" />
           </div>
         </q-form>
       </q-card-section>
@@ -54,24 +52,20 @@ export default defineComponent({
     /* Stuff for the real login page */
     const userid = ref('');
     const password = ref('');
-    const rules = [
-      (val: string) => (val && val.length > 0) || 'Feld darf nicht leer sein!',
-    ];
+    const rules = [(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'];
-          void root.$router.push(
-            typeof x === 'string' ? { path: x } : mainRoute
-          );
+          void root.$router.push(typeof x === 'string' ? { path: x } : mainRoute);
         })
         .catch((error: { status: number } | undefined) => {
           if (error && error.status === 401) {
@@ -82,7 +76,7 @@ export default defineComponent({
               message: 'Benutzername oder Passwort sind falsch.',
               timeout: 10000,
               progress: true,
-              actions: [{ icon: 'mdi-close', color: 'white' }],
+              actions: [{ icon: 'mdi-close', color: 'white' }]
             });
           }
         })
@@ -91,7 +85,38 @@ export default defineComponent({
         });
     }
 
-    return { userid, password, doLogin, rules };
-  },
+    function doReset() {
+      if (userid.value == '') {
+        Notify.create({
+          group: false,
+          type: 'negative',
+          message: 'Der Benutzername darf nicht leer sein.',
+          timeout: 10000,
+          progress: true,
+          actions: [{ icon: 'mdi-close', color: 'white' }]
+        });
+        return;
+      }
+      root.$store
+        .dispatch('session/requestPasswordReset', {
+          userid: userid.value
+        })
+        .then(() => {
+          userid.value = '';
+          password.value = '';
+          Notify.create({
+            group: false,
+            type: 'ongoing',
+            message:
+              'Sollte der Benutzername korrekt und vorhanden sein, erhälst du jetzt eine E-Mail.',
+            timeout: 10000,
+            progress: true,
+            actions: [{ icon: 'mdi-close', color: 'white' }]
+          });
+        });
+    }
+
+    return { userid, password, doLogin, doReset, rules };
+  }
 });
 </script>

src/pages/Reset.vue

@@ -0,0 +1,98 @@
+<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-toolbar class="bg-primary text-white">
+        <q-toolbar-title>
+          Passwort vergessen
+        </q-toolbar-title>
+      </q-toolbar>
+
+      <q-card-section>
+        <q-form ref="ResetForm" @submit="doReset" class="q-gutter-md">
+          <q-input
+            filled
+            v-model="password"
+            type="password"
+            label="Passwort"
+            :rules="rules"
+            hint="Min. 8 Zeichen"
+            tabindex="1"
+          />
+          <q-input
+            filled
+            v-model="password2"
+            type="password"
+            label="Passwort Wiederholung"
+            :rules="rules"
+            tabindex="2"
+          />
+          <div class="row justify-end">
+            <q-btn label="Zurücksetzen" type="submit" color="primary" />
+          </div>
+        </q-form>
+      </q-card-section>
+    </q-card>
+  </q-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api';
+import { Loading, Notify } from 'quasar';
+
+export default defineComponent({
+  // name: 'PageName'
+  setup(_, { root }) {
+    const mainRoute = { name: 'dashboard' };
+
+    const password = ref('');
+    const password2 = ref('');
+
+    const rules = [
+      (val: string) =>
+        (val && val.length >= 8) || 'Das Passwort muss mindestens 8 Zeichen lang sein!'
+    ];
+
+    function doReset() {
+      if (password.value !== password2.value) {
+        Notify.create({
+          group: false,
+          type: 'negative',
+          message: 'Die Passwörter stimmen nicht überein!',
+          timeout: 10000,
+          progress: true,
+          actions: [{ icon: 'mdi-close', color: 'white' }]
+        });
+        password2.value = '';
+        return;
+      }
+
+      Loading.show({
+        message: 'Das Passwort wird zurückgesetzt'
+      });
+      root.$store
+        .dispatch('session/resetPassword', {
+          password: password.value,
+          token: root.$route.query.token
+        })
+        .catch(error => {
+          if (error.status == 403) {
+            Notify.create({
+              group: false,
+              type: 'negative',
+              message: 'Der Link ist abgelaufen!',
+              timeout: 10000,
+              progress: true,
+              actions: [{ icon: 'mdi-close', color: 'white' }]
+            });
+          }
+        })
+        .finally(() => {
+          Loading.hide();
+          void root.$router.replace({ name: 'login' });
+        });
+    }
+
+    return { password, password2, doReset, rules };
+  }
+});
+</script>

src/plugins/user/store/session.ts

@@ -72,12 +72,10 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
    */
   logout({ dispatch, rootState }) {
     if (rootState.session.currentSession) {
-      dispatch('deleteSession', rootState.session.currentSession.token).catch(
-        error => {
+      dispatch('deleteSession', rootState.session.currentSession.token).catch(error => {
         console.log(error);
         void dispatch('clearCurrent', false);
-        }
-      );
+      });
     } else {
       void dispatch('clearCurrent', false);
     }
@@ -145,6 +143,14 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
       .finally(() => {
         commit('setLoading', false);
       });
+  },
+  requestPasswordReset({}, data) {
+    return axios.post('/auth/reset', data);
+  },
+  resetPassword({}, data) {
+    return axios.post('/auth/reset', data).catch((error: AxiosError) => {
+      return Promise.reject(error.response);
+    });
   }
 };
 

src/router/routes.ts

@@ -11,6 +11,11 @@ const routes: RouteConfig[] = [
         path: 'login',
         component: () => import('pages/Login.vue')
       },
+      {
+        name: 'password_reset',
+        path: 'reset',
+        component: () => import('pages/Reset.vue')
+      },
       {
         name: 'about_out',
         path: 'about',