<template>
  <section class="hero is-info is-fullheight-with-navbar">
    <div class="hero-body">
      <div class="container">
        <h2>
          Connection problems
        </h2>
        <h1>
          Oh uh! The client is having some problems connecting to Kaverti.
        </h1>
        <a v-bind:href="$route.params.out"><b-button @click="retryConnection" :loading="connection.loading">Retry</b-button></a>
        <h3>This could be due to maintenance, or a network outage, check the <a style="color: #ffffff;" href="https://status.troplo.com">Service Status</a> to see if anything is wrong, or report the issue to <a style="color: #ffffff;" href="mailto:troplo@flowinity.com">troplo@flowinity.com</a></h3>
        <p>(auto retries every 10 seconds)</p>
      </div>
    </div>
  </section>
</template>
<script>
import AjaxErrorHandler from '../../assets/js/errorHandler'

export default {
  name: 'verification',
  data() {
    return {
      token: '',
      connection: {
        loading: false
      }
    }
  },
  methods: {
    retryConnection() {
      this.connection.loading = true

      this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
        .then(res => {
          this.$store.commit('setUsername', res.data.username)
          this.$store.commit('setEmail', res.data.email)
          this.$store.commit('setEmailVerified', res.data.emailVerified)
          this.$store.commit('setAdmin', res.data.admin)
          this.$store.commit('setKoins', res.data.koins)
          this.$router.push('/')
        })
        .catch(e => {
          this.connection.loading = false

          AjaxErrorHandler(this.$store)(e, error => {
            error.message
          })
        })
    },
    pollConn() {
      this.polling = setInterval(() => {
        this.retryConnection()
      }, 10000)
    }
  },
  mounted: function () {
    this.pollConn()
    this.retryConnection()
  }
}
</script>
