<template>
  <v-container grid-list-md text-xs-center class="auth-form">
    <v-layout row wrap justify-center class="auth-form">
      <v-flex md6 xs10>
        <v-form
          ref="form"
          lazy-validation>
          <div class="display-1 primary--text font-weight-thin mb-5">login</div>
          <v-text-field
            v-model="user.username"
            :rules="[rules.required]"
            label="Username"
            name="username"
            placeholder="isabl"
            autofocus
            required
            @keyup.enter="login"/>
          <v-text-field
            v-model="user.password"
            :append-icon="showPassword ? 'visibility_off' : 'visibility'"
            :rules="[rules.required]"
            :type="showPassword ? 'text' : 'password'"
            label="Password"
            name="password"
            placeholder="················"
            required
            @click:append="showPassword = !showPassword"
            @keyup.enter="login"/>

          <v-layout row wrap>
            <v-flex md6 xs12>
              <v-flex md12 xs12 pa-0>
                <span class="mr-3">
                  <span
                    class="active-link body-1 primary--text"
                    @click="goToResetPassword">
                    forgot your password?
                  </span>
                </span>
              </v-flex>
              <v-flex md12 xs12 pa-0>
                <span class="mr-3">
                  Not an user already...
                  <span
                    class="active-link body-1 primary--text"
                    @click="goToSignUp">
                    Sign up!
                  </span>
                </span>
              </v-flex>
            </v-flex>

            <v-flex md6 xs12 justify-end>
              <v-btn @click="clear">clear</v-btn>
              <v-btn
                color="primary"
                @click="login">
                login
              </v-btn>
            </v-flex>
          </v-layout>
        </v-form>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import { AUTH_REQUEST } from '@/store/actions/auth'
import { SHOW_ALERT } from '@/store/actions/alert'
import rules from '@/utils/rules'

export default {
  name: 'Login',
  data () {
    return {
      user: {
        username: '',
        password: ''
      },
      rules,
      showPassword: false
    }
  },
  methods: {
    login () {
      if (this.$refs.form.validate()) {
        this.$store
          .dispatch(AUTH_REQUEST, this.user)
          .then(() => {
            this.$router.push('/')
          })
          .catch(error => {
            const message = this.handleError(error)
            this.$store.dispatch(SHOW_ALERT, {
              error: message
            })
          })
      }
    },
    handleError (error) {
      if (error.response) {
        const errorMessages = Object.values(error.response.data).flat()
        return errorMessages.length
          ? errorMessages[0]
          : 'Login failed, please try again.'
      } else if (error.message) {
        return error.message
      }
    },
    clear () {
      this.$refs.form.reset()
    },
    goToSignUp () {
      this.$router.push({ name: 'signup' })
    },
    goToResetPassword () {
      this.$router.push({ name: 'password-reset' })
    }
  }
}
</script>

<style lang="scss">
.auth-form {
  margin-top: 120px !important;
}
</style>
