<template>
  <div>
    <div v-if="!$store.getters['user/loggedIn']">
      <div class="group">
        <h5>Parry Login</h5>
        <p v-if="authError" class="text-negative">
          <span v-if="typeof authError === 'object'">Username or password {{ authError['username or password'] }}</span>
          <span v-else>{{ authError }}</span>
        </p>
        <div class="group">
          <q-input @keyup.enter="parryLogin" :error="authError !== undefined" v-model="username" name="user" float-label="Username" />
          <q-input @keyup.enter="parryLogin" :error="authError !== undefined" v-model="password" name="pass" type="password" float-label="Password" />
          <q-btn color="positive" @click="parryLogin" icon="fa-sign-in">Parry login</q-btn>
        </div>
      </div>
    </div>
    <div v-else>
      <q-card>
        <q-card-title class="bg-positive text-white">
          Hi {{ $store.state.user.decodedToken.username }}
        </q-card-title>
        <q-card-separator />
        <q-card-main>
          <p>You have successfully logged in!</p>
          <q-btn color="negative" outline small icon="fa-sign-out" @click="$store.commit('user/logout')">Logout</q-btn>
        </q-card-main>
      </q-card>
    </div>
  </div>
</template>

<script>
  import {
    LocalStorage,
  } from 'quasar'

  export default {
    data () {
      return {
        username: '',
        password: '',
        authError: undefined,
        token: null,
        useParryLogin: true,
        authWindow: null,
        authFailed: false,
      }
    },
    mounted () {
      let token = LocalStorage.get.item('authToken')
      if (token) {
        this.$store.commit('user/setAuthToken', { authToken: token })
      }
    },
    methods: {
      parryLogin () {
        let that = this
        let params = {
          username: this.username,
          password: this.password,
        }
        this.authError = undefined
        this.$http.post('/auth', params).then((response) => {
          that.$store.commit('user/setAuthToken', { authToken: response.data.token })
          that.username = ''
          that.password = ''
          setTimeout(() => this.$store.commit('user/logout'), Math.max(parseInt(response.data.expires) - Math.floor(Date.now() / 1000), 0) * 1000)
        }).catch((error) => {
          if (error.response && error.response.data) {
            that.authError = error.response.data.errors
          }
          else if (error.message) {
            that.authError = error.message
          }
          else {
            that.authError = 'Failed to log in'
            console.error({error})
          }
        })
      },
      checkTokenLoop (retryCount) {
        let token = LocalStorage.get.item('authToken')
        if (token) {
          this.$store.commit('user/setAuthToken', { authToken: token })
          this.authWindow.close()
          this.authWindow = null
        }
        else {
          setTimeout(this.checkTokenLoop, 500)
        }
      },
    },
  }
</script>

<style lang="styl" type="text/stylus" scoped>
</style>
