<template>
  <section class="hero is-info is-fullheight-with-navbar">
    <div class="hero-body">
      <div class="container">
        <div class="box" v-if="!$store.state.emailVerified && $store.state.username">
          <article class="media">
            <div class="media-content">
              <center>
                <i class="fas fa-envelope-open" style="color:#0a8bff; font-size: 30px;"></i>
                <div class="content">
                  <h1>Oh uh! The code you entered was invalid.</h1>
                  <p>Hmm, lets try resending it, if the issue persists, contact <a href="https://twitter.com/Kaverti">support</a>, or check the <a href="https://status.troplo.com">Status Page</a>.</p>
                  <b-button @click='verifyEmailResend' class="is-primary" :loading='email.loading'>Resend Verification Email</b-button>
                </div>
              </center>
            </div>
          </article>
        </div>
        <div class="box" v-if="!$store.state.username">
          <article class="media">
            <div class="media-content">
              <center>
                <i class="fas fa-envelope-open" style="color:#0a8bff; font-size: 30px;"></i>
                <div class="content">
                  <h1>You need to be logged in to perform this action.</h1>
                  <p>Please login, and try again.</p>
                </div>
              </center>
            </div>
          </article>
        </div>
        <div class="box" v-if="$store.state.emailVerified && $store.state.username">
          <article class="media">
            <div class="media-content">
              <center>
                <i class="fas fa-envelope-open" style="color:#0a8bff; font-size: 30px;"></i>
                <div class="content">
                  <h1>Your account is already verified.</h1>
                  <p>You can't verify your email twice!</p>
                </div>
              </center>
            </div>
          </article>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
  import AjaxErrorHandler from "../../assets/js/errorHandler";
  import logger from "../../assets/js/logger";

  export default {
    name: 'verificationcheck',
    data() {
      return {
        email: {
          loading: false
        }
      }
    },
    methods: {
      verifyEmailResend() {
        this.email.loading = true

        this.axios
          .post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/email-verify/send')
          .then(() => {
            this.email.loading = false
          })
          .catch(e => {
            this.email.loading = false
            AjaxErrorHandler(this.$store)(e)
          })
      }
    },
    mounted () {
      this.$store.dispatch('setTitle', 'Email Verification Failure')
      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)
        })
        .catch(e => {
          this.showConn(e)
        })
      logger('settingsAccount')
    }
  }
</script>
