flaschengeist-frontend/src/pages/Login.vue

<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>
          Login
        </q-toolbar-title>
      </q-toolbar>

      <q-card-section>
        <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
            v-model="password"
            type="password"
            label="Password"
            :rules="rules"
            tabindex="2"
          />
          <div class="row justify-between">
            <q-btn
              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>
    </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' };

    /* 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!'];

    function doLogin() {
      Loading.show({
        message: 'Du wirst angemeldet'
      });
      root.$store
        .dispatch('session/login', {
          userid: userid.value,
          password: password.value
        })
        .then(() => {
          const x = root.$route.query['redirect'];
          void root.$router.push(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();
        });
    }

    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>