<template>
  <section class="hero is-info is-large">
    <div class="hero-body">
      <div class="container">
        <h2>
          Email verification
        </h2>
        <h1 class="title">
          You made it this far, great!
        </h1>
        <a v-bind:href="$route.params.out"><b-button @click="verifyEmail" :loading="verification.loading" class="is-warning-passive">Yes, Verify my account.</b-button></a>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  name: 'verification',
  data() {
    return {
      token: '',
      verification: {
        loading: false
      }
    }
  },
  methods: {
    verifyEmail () {
        this.verification.loading = true

        this.axios.get(`/api/v1/users/email-verify/` + this.$route.query.token).then(res => {
          this.verification.loading = false
          this.$store.commit('setAdmin', res.data.admin)
        }).then(() => {
          this.verification.loading = false
          this.$router.push(`/verify/success`)
        }).catch(err => {
          this.verification.loading = false
          this.$router.push('/verify/error')
          this.ajaxErrorHandler(err)
        })
      }
    },
  watch: {
    created() {
      if (this.$route.query.token) {
        this.$store.commit('setEmailToken', this.$route.query.emailToken)
      }
    },
  }
}
</script>
