<template lang='pug'>
  v-container
    v-row.mt-5(align='center' justify='center')
      v-col(cols='12' md="6" lg="5" xl="4")
        v-form(v-model='valid' ref='form' lazy-validation @submit.prevent='submit')
          v-card
            v-card-title {{$t('common.login')}}
            v-card-subtitle(v-text="$t('login.description')")

            v-card-text
                v-text-field(v-model='email' type='email'
                  validate-on-blur
                  :rules='$validators.email' autofocus
                  :placeholder='$t("common.email")'
                  ref='email')

                v-text-field(v-model='password'
                  :rules='$validators.password'
                  type='password'
                  :placeholder='$t("common.password")')

            v-card-actions
              v-btn(text
                tabindex="1"
                @click='forgot' small) {{$t('login.forgot_password')}}

            v-card-actions
              v-spacer

              v-btn(v-if='settings.allow_registration'
                to='/register'
                text
                color='orange') {{$t('login.not_registered')}}

              v-btn(color='success'
                type='submit'
                :disabled='!valid || loading' :loading='loading') {{$t('common.login')}}

</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Login',
  data () {
    return {
      password: '',
      email: '',
      loading: false,
      valid: false
    }
  },
  computed: {
    ...mapState(['settings'])
  },
  methods: {
    async forgot () {
      if (!this.email) {
      //   this.$root.$message({ message: this.$t('login.insert_email'), color: 'error' })
        this.$refs.email.focus()
        return
      }
      this.loading = true
      await this.$axios.$post('/user/recover', { email: this.email })
      this.loading = false
      this.$root.$message('login.check_email', { color: 'success' })
    },
    async submit (e) {
      if (!this.$refs.form.validate()) return
      try {
        this.loading = true
        const data = new URLSearchParams()
        data.append('username', this.email)
        data.append('password', this.password)
        data.append('grant_type', 'password')
        data.append('client_id', 'self')
        await this.$auth.loginWith('local', { data })
        this.loading = false
        this.$root.$message('login.ok',{ color: 'success' })
      } catch (e) {
        this.$root.$message('login.error',{ color: 'error' })
        this.loading = false
        return
      }
      this.email = this.password = ''
    }
  },
  head () {
    return {
      title: this.settings.title + ' - ' + this.$t('common.login')
    }
  }
}
</script>
