<template>
  <v-container grid-list-md text-xs-center class="auth-form">
    <v-layout row wrap justify-center class="auth-form">
      <v-flex v-if="loading" xs6>
        <v-progress-circular
          indeterminate
          color="primary"/>
        <div class="display-1 primary--text font-weight-thin mt-5 mb-3">Verifying ...</div>
        <div class="title font-weight-thin">
          We're activating your account... Please wait
        </div>
      </v-flex>
      <v-flex v-else-if="!loading && verified" xs6>
        <div class="display-1 primary--text font-weight-thin mb-3">Account Verified</div>
        <div class="title font-weight-thin">
          Your email has been successfully confirmed. You can proceed to
          <span
            class="active-link title font-weight-thin primary--text"
            @click="goToLogin">
            Login!
          </span>
        </div>
      </v-flex>
      <v-flex v-else-if="!loading && !verified" xs6>
        <div class="display-1 primary--text font-weight-thin mb-3">Incorrect key</div>
        <div class="title font-weight-thin">
          Your email couldn't be confirmed.
        </div>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import { verifyEmail } from '@/utils/api'

export default {
  name: 'VerifyEmail',
  data () {
    return {
      loading: false,
      verified: false
    }
  },
  created (to, from, next) {
    this.verifyEmail()
  },
  methods: {
    verifyEmail () {
      this.loading = true
      const { key } = this.$route.query
      if (key) {
        verifyEmail(key)
          .then(response => {
            this.verified = true
          })
          .catch(() => {
            this.verified = false
          })
          .finally(() => {
            this.loading = false
          })
      } else {
        this.loading = false
      }
    },
    goToLogin () {
      this.$router.push({ name: 'login' })
    }
  }
}
</script>
