<template>
  <section class="hero is-info is-fullheight-with-navbar">
    <div class="hero-body">
      <div class="container">
        <div class="box">
          <article class="media">
            <div class="media-content">
              <center>
                <i class="fas fa-key" style="color:#0a8bff; font-size: 30px;"></i>
                <div class="content">
                  <h1>Forgot your password?</h1>
                  <p>No worries! Using the link provided in the email, you can reset your password.</p>
                  <div>
                    <fancy-input
                      placeholder='Your username'
                      v-model='recovery.username'
                      :error='recovery.errors["username"]'
                    ></fancy-input><br>
                    <fancy-input
                      placeholder='New password'
                      v-model='recovery.password'
                      :error='recovery.errors["password"]'
                      type='password'
                    ></fancy-input>
                  </div>
                  <a v-bind:href="$route.params.out"><b-button @click="recoverAccount" :loading="recovery.loading" class="is-warning-passive">Reset my password.</b-button></a>
                </div>
              </center>
            </div>
          </article>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
  import FancyInput from '../FancyInput'
  import AjaxErrorHandler from "../../assets/js/errorHandler";

  export default {
    name: 'recovery',
    components: {
      FancyInput
    },
    data() {
      return {
        token: '',
        recovery: {
          loading: false,
          username: '',
          password: '',
          errors: {
            'password': '',
            'username': ''
          }
        }
      }
    },
    methods: {
      recoverAccount() {
        this.recovery.loading = true
        this.$route.query.token
        this.axios.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `users/recovery/change`, {
          token: this.$route.query.token,
          username: this.recovery.username,
          password: this.recovery.password
        }).then(res => {
          this.recovery.loading = false
          this.$store.commit('setAdmin', res.data.admin)
        }).then(() => {
          this.recovery.loading = false
          this.$router.push(`/recovery/success`)
        }).catch(err => {
          this.recovery.loading = false
          AjaxErrorHandler(this.$store)(err)
        })
      }
    },
    watch: {
      created() {
        if (this.$route.query.token) {
          this.$store.commit('setRecoveryToken', this.$route.query.token)
        }
      },
    },
    mounted () {
      this.$store.dispatch('setTitle', 'Account Recovery')
      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)
        })
    }
  }
</script>
