<template>
  <div class="q-pa-md">
    <form class="login" @submit.prevent="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.username" type="text" label="Benutzername" 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"
                      label="Login"
                      color="primary"
                      class="full-width"
                      type="submit"
                      unelevated
                    />
                    <q-btn
                      :outline="!userAuthenticated"
                      :disabled="!userAuthenticated"
                      label="Logout"
                      color="red"
                      class="full-width q-mt-md"
                      unelevated
                      @click="logout"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
    </form>
    <q-dialog v-model="credentialsDialog" persistent transition-show="scale" transition-hide="scale">
      <q-card class="bg-red-9 text-white" style="">
        <q-card-section>
          <div class="text-h6">Fehler</div>
        </q-card-section>

        <q-card-section>
          Es konnten keine übereinstimmenden Zugangsdaten in der Datenbank gefunden werden.
        </q-card-section>

        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn flat label="OK" color="red-9" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>  </div>
</template>

<script>
  export default {
    data() {
      return {
        user: {
          username: "moximoti",
          password: "1234",
          //token: "",
          // evalAuthentication: false
        },
        credentialsDialog: false,
      };
    },
    // beforeMount: {
    //   init: function () {
    //     this.evalAuthentication();
    //     console.log("initiated");
    //   }
    // },
    created () {
      this.evalAuthentication();
      console.log("created: initiated");
    },
    computed: {
      userAuthenticated() {
        return this.$store.state.auth.userAuthenticated.isAuthenticated
      }
    },
    methods: {
      login: function () {
        const data = {
          username: this.user.username,
          password: this.user.password
        };

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

        this.$axios.post('http://localhost:8080/api/login', data)
          .then((response) => {
            // TODO Catch clause funktioniert nicht mehr wenn Statuscode zurückgegeben wird. -> hier if/else mit HTTP-Codes
            console.log("GET/POST http://localhost:8080/api/login/ - response: " + response.data);
            localStorage.setItem('userToken', JSON.stringify(response.data));
            this.evalAuthentication();
          })
          .catch((error) => {
            console.log("error: " + error);
            this.credentialsDialog=true;
          })
      },
      evalAuthentication: function () {
        this.$store.commit('auth/SET_AUTHENTICATED');
      },
      logout: function () {
        console.log("logout()");
        console.log(JSON.parse(localStorage.getItem('userToken')));
        this.$axios.get('http://localhost:8080/api/logout', {
            params: {
              token: JSON.parse(localStorage.getItem('userToken'))
            }
          })
          .then((response) => {
            console.log("GET/POST http://localhost:8080/api/logout/ - response: " + response.data);
            localStorage.removeItem('userToken');
            this.evalAuthentication();
          })
          .catch((error) => {
          });
      },
    },
  };
</script>
