<template lang='pug'>
form#reset
  b-form-group
    .msg
      h4 \{{ $t('verification.check_email') }}

  b-form-group
    span \{{ $t('verification.check_email_label') }}

  b-form-group
    .msg
      h3 \{{ 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")

  .back
    a.content-vertical.text-secondary(@click="resendEmail") \{{ $t('verification.resend_email') }} &nbsp;
    router-link.content-vertical.text-secondary(to="/register") \{{ $t('verification.reset_email') }}
</template>

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

export default {
  name: 'Verify',
  data () {
    return {
      email: this.$route.params.email,
      user_id: this.$route.params.user_id
    }
  },
  methods: {
    ...mapActions([
      'setAlertMessage',
      'setAcceptAlert'
    ]),
    async resendEmail () {
      const response = await this.axios.post(`../email/resend/${this.user_id}`)
      const checkErrors = checkResponse(response)
      if (checkErrors) {
        this.setAlertMessage({ color: 'danger', title: 'errors.connection_error', text: checkErrors.message })
        return
      }
      this.setAcceptAlert({ color: 'success', title: 'strings.register', text: 'verification.resend_succesfully', icon: 'checkmark-circle-outline' })
    }
  }
}
</script>

<style lang="scss" scoped>
.msg {
  text-align: center;
  margin-top: 10px;
}
.social {
  display: flex;
  justify-content: space-around;
}
#loginButton {
  width: 100%;
}
.accept-message {
  color: rgb(94, 108, 132);
  font-size: 11.5px;
}
.back{
  color: rgb(107, 119, 140);
  padding-top: 24px;
  margin-top: 10px;
  font-size: 13px;
  text-align: center;
  line-height: 20px;
  border-top: 1px solid rgb(213, 216, 222);
  a {
    cursor: pointer;
  }
}
</style>
