<template lang='pug'>
form#reset(autocomplete="off", @submit.prevent="submitForm" method="post")
  b-form-group
    .msg
      h3 \{{ $t('passwords.cant_login') }}

  .sended(v-if="sending")
    b-form-group
      span \{{ $t('passwords.sent') }}

    b-form-group
      .msg
        h3 \{{ form.email }}
    b-form-group
      img(src="https://aid-frontend.prod.atl-paas.net/atlassian-id/front-end/5.0.32/static/media/check-your-email.d7f186eb.svg")

  .send(v-else)
    b-form-group
      vm-input(icon='email-outline', :label="$t('login.reset_password')" :placeholder='$t("login.email")' v-model="form.email" required autofocus type="email")

    b-form-group
      vm-button#loginButton.vm-con-loading__container(:disabled="$v.form.$invalid" color="primary", type="filled")  \{{ $t('login.send_reset_link') }}

  .back
    router-link.content-vertical.text-secondary(to='/login') \{{ $t('login.back_login') }}
</template>

<script>
import { required, email } from 'vuelidate/lib/validators'
import checkResponse from '@/utils/checkResponse'
import { mapActions } from 'vuex'

export default {
  name: 'ResetLink',
  data () {
    return {
      form: {
      },
      sending: false
    }
  },
  validations: {
    form: {
      email: {
        required,
        email
      }
    }
  },
  methods: {
    ...mapActions([
      'setAlertMessage'
    ]),
    async doSubmit () {
      const response = await this.axios.post('../password/email', this.form)
      const checkErrors = checkResponse(response)
      if (checkErrors) {
        this.setAlertMessage({ color: 'danger', title: 'errors.connection_error', text: checkErrors.message })
        return
      }
      this.sending = true
    },
    async submitForm (evt) {
      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>

<style lang="scss" scoped>
.msg {
  text-align: center;
  margin-top: 10px;
}
#loginButton {
  width: 100%;
}
.back{
  color: rgb(107, 119, 140);
  padding-top: 24px;
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
  border-top: 1px solid rgb(213, 216, 222);
}
</style>
