<template>
  <!-- Login form -->
  <form id="login-form" class="w-full">

    <!-- Error messages -->
    <t-alert v-if="form.globalError" variant="error" class="mb-8" show>
      <p class="text-error">{{ form.globalError }}</p>
    </t-alert>

    <!-- Email -->
    <Input
      v-model="emailValue"
      name="email"
      :variant="emailState ? 'primary' : 'error'"
      :state="emailState"
      :label="$h.capitalize($t('user.email'))"
      :placeholder="$h.capitalize($t('user.email'))"
      :error="getFieldErrorMessage('email')"
      fluid
    />

    <!-- Password -->
    <InputPassword
      v-model="passwordValue"
      name="password"
      :variant="passwordState ? 'primary' : 'error'"
      :state="passwordState"
      :placeholder="$h.capitalize($t('user.password'))"
      :label="$h.capitalize($t('user.password'))"
      fluid
    />

    <!-- Forgot password link -->
    <p class="mb-4">
      <Link to="/forgot-password" class="text-sm">{{ $t('user.forgotPassword') }}</Link>
    </p>

    <!-- Confirm button -->
    <Button
      variant="primary"
      :disabled="!isFormValid"
      @click.native="handleOk"
      fluid
    >
      {{ $t('user.login') | capitalize }}
    </Button>

  </form>
</template>

<script>
import { Core } from '@hperchec/scorpion-ui'
/**
 * Login component
 */
export default {
  name: 'Login',
  applyMixins () {
    return [
      Core.context.vue.components.commons.form.BaseForm
    ]
  },
  // 'form' option (see src/components/commons/form/BaseForm)
  form: {
    fields: {
      /**
       * email
       */
      email: {
        // Default: generate 'emailValue' & 'emailChanged'
        default: function () {
          return ''
        },
        // Generate: 'isEmailValid'
        isValid: function () {
          return this.emailValue.length > 0
        }
      },
      /**
       * password
       */
      password: {
        // Default: generate 'passwordValue' & 'passwordChanged'
        default: function () {
          return ''
        },
        // Generate: 'isPasswordValid'
        isValid: function () {
          return this.passwordValue.length > 0
        }
      }
    }
  },
  methods: {
    /**
     * Handle click on 'login' submit button.
     *
     * Call 'auth' module login method ([auth module](../modules/auth)).
     * @param {Object} evt - The event payload
     * @returns {void}
     */
    async handleOk (evt) {
      // Prevent click
      evt.preventDefault()
      // Reset errors before
      this.resetErrors()
      // Reset loginFailedMessage
      this.loginFailedMessage = false
      // Wait for login function
      const loginResponse = await this.$root.auth.login({
        data: {
          email: this.emailValue,
          password: this.passwordValue
        }
      })
      // If passed
      if (!(loginResponse instanceof Error)) {
        // Go to redirect or home
        const to = this.$route.query.redirect ? `/#${this.$route.query.redirect}` : '/'
        window.location = to
      // Else parse server error
      } else {
        this.setFormErrors(loginResponse) // Set form errors from response
      }
    }
  }
}
</script>
