<template lang='pug'>
form#reset(autocomplete="off", @submit.prevent="submitForm" method="post")
  .title \{{ $t('login.reset_password') }}
  b-form-group
    vm-input(icon='email-outline', :placeholder='$t("login.email")' v-model="form.email", required, autofocus)

  b-form-group
    vm-input(type="password", icon='lock-outline', :placeholder='$t("login.password")' v-model="form.password", required)

  b-form-group
    vm-input(type="password", icon='lock-outline', :placeholder='$t("login.password_confirmation")' v-model="form.password_confirmation", required)

  b-form-group
    vm-button#loginButton.vm-con-loading__container(color="primary", type="filled")  \{{ $t('login.reset_password') }}
</template>

<script>
import formValidation from '@/utils/formValidations'
import checkResponse from '@/utils/checkResponse'
import { mapActions } from 'vuex'

export default {
  name: 'reset-link',
  data () {
    return {
      form: {
        token: ''
      }
    }
  },
  async mounted () {
    this.form.token = this.$route.params.token
  },
  methods: {
    ...mapActions({
      setAlertMessage: 'setAlertMessage'
    }),
    async doSubmit () {
      const response = await this.axios.post('../password/reset', this.form)
      const checkErrors = checkResponse(response)
      if (checkErrors) {
        this.setAlertMessage({ color: 'danger', title: 'errors.connection_error', text: checkErrors.message })
        return
      }
      this.setAlertMessage({ color: 'success', title: 'login.reset_password', text: 'passwords.reset' })
      this.$router.push({ name: 'login' })
    },
    async submitForm (evt) {
      if (!formValidation(evt)) return
      this.$vm.loading({
        background: 'primary',
        color: '#fff',
        container: '#loginButton',
        scale: 0.45
      })
      try {
        await this.doSubmit()
      } catch (error) {
        this.setAlertMessage({ color: 'danger', title: 'errors.connection_error', text: 'errors.generic_error' })
      }
      this.$vm.loading.close('#loginButton > .con-vm-loading')
    }
  }
}
</script>
