labswp_2019_sose_geocaching/frontend/src/pages/Login.vue

<template>
  <div class="q-pa-md">
    <form class="login">
      <div class="q-pa-md">
        <p class="text-black text-h5"> Login </p>
        <div class="column q-gutter-lg" style="">
          <div class="col">
            <div class="">
              <div class="" style="max-width: 440px">
                <q-input lazy-rules outlined filled stack-label v-model="user.email" type="text" label="Email"
                         autocomplete="username" :rules="[val=>validateEmail(val)||'Bitte gültige E-Mail eingeben!']"/>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="">
              <div class="" style="max-width: 440px">
                <q-input lazy-rules outlined filled stack-label v-model="user.password" type="password" label="Passwort"
                         autocomplete="current-password" :rules="[val=>val.length>=8||'Bitte gültiges Passwort eingeben!']"/>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="">
              <div class="" style="max-width: 440px">
                <q-btn
                  :outline="userAuthenticated"
                  :disabled="!loginValidation"
                  :loading="loading"
                  label="Login"
                  color="primary"
                  class="full-width"
                  @click="login"
                  @keyup.enter="login"
                  unelevated
                >
                  <template v-slot:loading>
                    <q-spinner-oval class="on-left"/>
                    wird eingeloggt...
                  </template>
                </q-btn>
                <div class="q-pt-md">
                  <q-btn
                    :disabled="userAuthenticated"
                    label="Registrieren"
                    color="primary"
                    class="full-width q-mt-md"
                    unelevated
                    to="/register"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        user: {
          email: "",
          password: "",
        },
      };
    },
    created() {
      this.evalAuthentication();
      console.log("created: initiated");
    },
    computed: {
      userAuthenticated() {
        console.log("login: userAuthenticated()");
        console.log(this.$store.state.auth.isAuthenticated);
        return this.$store.state.auth.isAuthenticated;
      },
      loginValidation() {
        if (this.validateEmail(this.user.email)
          && this.user.password.length>=8
          && !this.$store.state.auth.isAuthenticated) {
          return true;
        }
        return false;
      },
    },
    methods: {
      login: function () {
        console.log("login called");
        this.loading = true;
        const data = {
          email: this.user.email,
          password: this.user.password
        };

        console.log("GET /api/login/ - json: " + JSON.stringify(data));

        this.$axios.post(process.env.USER_API + '/account/login', data)
          .then((response) => {
            console.log("GET/POST /api/login/ - response: ");
            console.log(response.data);
            console.log("TOKEN");
            console.log(response.data.token);
            localStorage.setItem('userToken', JSON.stringify(response.data));
            localStorage.setItem('userMail', JSON.stringify(data.email));
            this.evalAuthentication();
            this.$router.push({path: `/overview`})
          }).catch((error) => {
          let msg;
          let title;
          if (error.response) {
            title = "Fehler!";
            msg = error.response.data;
          } else if (error.request) {
            title = "Verbindungsfehler!";
            msg = "Es konnte keine Verbindung zum Server aufgebaut werden. Versuchen Sie es später noch einmal!"
            console.log(error.request);
          } else {
            title = "Error";
            msg = error.message;
            console.log('Error', error.message);
          }
          console.log(error.config);
          this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
        }).finally(() => {
          this.loading = false;
          this.evalAuthentication();
        })
      },
      evalAuthentication: function () {
        this.$store.commit('auth/SET_AUTHENTICATED');
        this.$store.commit('auth/SET_USER');
      },
      logout: function () {
        console.log("logout()");
        console.log(JSON.parse(localStorage.getItem('userToken')));
        localStorage.removeItem('userToken');
        this.evalAuthentication();
      },
      validateEmail(email) {
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
      },
    },
  };
</script>