labswp_2019_sose_geocaching/frontend/src/pages/Login.vue

<template>
  <div class="q-pa-md">
    <form class="login">
      <div class="q-pa-md">
        <div class="column q-gutter-lg" style="">
          <div class="col">
            <div class="">
              <div class="" style="max-width: 440px">
                <q-input outlined filled stack-label v-model="user.email" type="text" label="Email"
                         autocomplete="username"/>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="">
              <div class="" style="max-width: 440px">
                <q-input outlined filled stack-label v-model="user.password" type="password" label="Passwort"
                         autocomplete="current-password"/>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="">
              <div class="" style="max-width: 440px">
                <q-btn
                  :outline="userAuthenticated"
                  :disabled="userAuthenticated"
                  :loading="loading"
                  label="Login"
                  color="primary"
                  class="full-width"
                  @click="login"
                  unelevated
                >
                  <template v-slot:loading>
                    <q-spinner-oval class="on-left" />
                    wird eingeloggt...
                  </template>
                </q-btn>
                <q-btn
                  :outline="!userAuthenticated"
                  :disabled="!userAuthenticated"
                  label="Logout"
                  color="red"
                  class="full-width q-mt-md"
                  unelevated
                  @click="logout"
                />
                <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: "",
          //token: "",
          // evalAuthentication: false
        },
      };
    },
    // beforeMount: {
    //   init: function () {
    //     this.evalAuthentication();
    //     console.log("initiated");
    //   }
    // },
    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;
      }
    },
    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 message;
            let header = "Fehler: ";
            if (error.response) {
              console.log("ERROR RESPONSE");
              // The request was made and the server responded with a status code
              // that falls out of the range of 2xx
              message = error.response.data.error;
              header += error.response.status;
            } else if (error.request) {
              // The request was made but no response was received
              // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
              // http.ClientRequest in node.js
              message = "Anfrage fehlgeschlagen.";
            } else {
              // Something happened in setting up the request that triggered an Error
              console.log('Error', error.message);
              message = error.message;
            }
            console.log(error.config);
            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
          }).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();
      },
    },
  };
</script>