<template lang='pug'>
.align
  form#login(autocomplete="off", @submit.prevent="login" method="post")
    b-form-group
      h1 \{{ $t('login.login') }}
      span Ingresa tus datos y comienza la aventura.

    b-form-group
      vm-input(icon='email-outline', :placeholder='$t("login.email")' v-model="form.email" required autofocus type="email")
      span.help-block(v-if='authError')
        strong \{{ $t('auth.failed') }}

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

    b-form-group#boxes
      .d-flex.justify-content-between
        vm-checkbox(v-model='form.rememberMe') \{{ $t('login.keep_connected') }}

        router-link.content-vertical.text-secondary(to='/password/reset') \{{ $t('login.forgot_password') }}

    b-form-group
      vm-button#loginButton.vm-con-loading__container(color="primary", type="filled" width="100%") \{{ $t('login.login') }}

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

    b-form-group
      .msg
        span No tienes una cuenta?&nbsp;
          router-link.content-vertical.text-secondary(to='/register') Crear cuenta.
</template>

<script>
import vmFacebook from '@/components/buttons/vm-facebook'
import vmGoogle from '@/components/buttons/vm-google'
import formValidation from '@/utils/formValidations'
import { mapActions } from 'vuex'

export default {
  name: 'Login',
  components: {
    vmFacebook,
    vmGoogle
  },
  data () {
    return {
      form: {
        email: null,
        password: null,
        rememberMe: false
      },
      authError: false
    }
  },
  methods: {
    ...mapActions({
      loadData: 'loadData',
      setAlertMessage: 'setAlertMessage'
    }),
    async doLogin () {
      await this.$auth.login({
        data: this.form,
        success (response) {
          const { status } = response
          if (status === 401) {
            this.authError = true
          } else if (status === 403) {
            this.$router.push({ name: 'verification.notice', params: { user_id: response.data.id, email: this.form.email } })
          } else {
            this.loadData()
          }
        },
        rememberMe: this.form.rememberMe,
        redirect: '/'
      }).catch(error => {
        this.setAlertMessage({ color: 'danger', title: 'errors.connection_error', text: error.response.data.original.message })
      })
    },
    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 login (evt) {
      if (!formValidation(evt)) return
      this.$vm.loading({
        background: 'primary',
        color: '#fff',
        container: '#loginButton',
        scale: 0.45
      })
      try {
        await this.doLogin()
      } 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>
.align {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  justify-content: center;
  align-items: center;
}

#loginButton {
  width: 100%;
}
.msg {
  text-align: center;
  margin-top: 10px;
}
.social {
  display: flex;
  justify-content: space-around;
}
.vm-input {
  color: #5b5777;
  .vm-input--icon {
    color: rgba(0,0,0,.4) !important;
  }
}
@media only screen and (max-width: 768px) {
  #loginButton {
    width: 100%;
  }
  .msg {
    text-align: center;
    margin-top: 10px;
  }
}
</style>
