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

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

  b-form-group
    vm-input(icon='person-outline', :placeholder='$t("register.name")' v-model="form.name" required autofocus)

  b-form-group
    vm-input(type="password" icon='lock-outline', :placeholder='$t("register.password")' v-model="form.password" required show-strength-meter showPasswordLabel :passwordLabels="passwordLabels" pass)

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

  b-form-group
    .social
      vm-facebook(@social-login="socialAuth")
      vm-google(@social-login="socialAuth")

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

<script>
import Vue from 'vue'
import { VueReCaptcha } from 'vue-recaptcha-v3'
import { required, minLength, email } from 'vuelidate/lib/validators'
import vmFacebook from '@/components/buttons/vm-facebook'
import vmGoogle from '@/components/buttons/vm-google'
import checkResponse from '@/utils/checkResponse'
import { mapActions } from 'vuex'

Vue.use(VueReCaptcha, {
  siteKey: '',
  loaderOptions: {
    autoHideBadge: true
  }
})

export default {
  name: 'Register',
  components: {
    vmFacebook,
    vmGoogle
  },
  data () {
    return {
      form: {
      },
      passwordLabels: [
        this.$t('passwords.very_weak'),
        this.$t('passwords.weak'),
        this.$t('passwords.good'),
        this.$t('passwords.strong'),
        this.$t('passwords.very_strong')
      ]
    }
  },
  validations: {
    form: {
      password: {
        required,
        minLength: minLength(8)
      },
      email: {
        required,
        email
      },
      name: {
        required
      }
    }
  },
  methods: {
    ...mapActions([
      'setAlertMessage',
      'setAcceptAlert'
    ]),
    async doRegister () {
      await this.$auth.register({
        params: this.form,
        redirect: false,
        success (response) {
          const checkErrors = checkResponse(response)
          if (checkErrors) {
            this.setAlertMessage({ color: 'danger', title: 'errors.connection_error', text: checkErrors.message })
            return
          }
          this.$router.push({ name: 'verification.notice', params: { user_id: response.data.id, email: this.form.email } })
        }
      }).catch(error => {
        this.setAlertMessage({ color: 'danger', title: 'errors.connection_error', text: error.response.data.original.message })
      })
    },
    async register (evt) {
      this.$vm.loading({
        background: 'primary',
        color: '#fff',
        container: '#loginButton',
        scale: 0.45
      })
      try {
        await this.recaptcha()
        await this.doRegister()
      } catch (error) {
        this.setAlertMessage({ color: 'danger', title: 'errors.connection_error', text: 'errors.generic_error' })
      }
      this.$vm.loading.close('#loginButton > .con-vm-loading')
    },
    async socialAuth (payload) {
      await this.$auth.login({
        url: '/auth/' + payload.provider + '/callback',
        params: {
          token: payload.response.accessToken
        },
        success (response) {
          const { status } = response
          if (status === 401) {
            this.authError = true
          }
          this.loadData()
        },
        rememberMe: this.form.rememberMe,
        redirect: '/'
      }).catch(error => {
        this.setAlertMessage({ color: 'danger', title: 'errors.connection_error', text: error.response.data.original.message })
      })
    },
    async recaptcha () {
      await this.$recaptcha('login').then((token) => {
        this.form.g_recaptcha_response = token
      })
    }
  }
}
</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>
