<template>
  <section class="hero is-info is-fullheight-with-navbar">
    <div class="hero-body">
      <div class="container">
        <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>Sorry to see you go!</h1>
                  <p>Hopefully you'll return to Kaverti soon. Mind taking a <router-link to="/survey/delete">short survey</router-link>?</p>
                  <b-field label="Password">
                    <b-input
                      v-model='password'
                      type="password"
                      :label-position="kavelabelPosition"
                      placeholder='Very secure password goes here.'
                      width='100%'
                    >
                    </b-input>
                  </b-field>
                  <br>
                  <a v-bind:href="$route.params.out"><b-button @click="verifyDelete" :loading="verification.loading" class="is-warning-passive">Delete account</b-button></a>
                </div>
              </center>
            </div>
          </article>
        </div>
        <div class="box" v-else>
          <article class="media">
            <div class="media-content">
              <center>
                <i class="fas fa-envelope-open" style="color:#0a8bff; font-size: 30px;"></i>
                <h1>Please login to perform this action.</h1>
              </center>
            </div>
          </article>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
  import logger from "../../assets/js/logger";
  import AjaxErrorHandler from "../../assets/js/errorHandler";

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

        this.axios.post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `users/delete/verify`, {
          token: this.$route.query.token,
          password: this.password
        }).then(() => {
          this.verification.loading = false
          this.$store.commit('setUsername', null)
          this.$store.commit('setAdmin', false)
          this.$router.push('/')
        }).catch(e => {
          this.verification.loading = false

          AjaxErrorHandler(this.$store)(e, (error, errors) => {
            let path = error.path

            if(this.errors[path] !== undefined) {
              this.errors[path] = error.message
            } else {
              errors.push(error.message)
            }
          })
        })
      }
    },
    watch: {
      created() {
        if (this.$route.query.token) {
          this.$store.commit('setEmailToken', this.$route.query.emailToken)
        }
      },
    },
    mounted () {
      this.$store.dispatch('setTitle', 'Email Verification')
      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>
