<template>
  <transition name="fade" mode="out-in">
    <div>
      <div class="hero is-fullheight">
        <div class="hero-body">
          <div class="container">
            <h2 class="title is-2 has-text-white has-text-centered">Login</h2>
            <div class="columns">
              <div class="column is-one-third is-offset-one-third">
                <div class="box">
                  <form action="#" method="POST" name="login" id="login" @submit='submit'>
                    <b-field :type='errUser ? "is-danger" : ""' :message='errUser'>
                      <b-input
                        required
                        icon="user"
                        type="text"
                        placeholder="Username"
                        name="username"
                        v-model.lazy='username'
                      ></b-input>
                    </b-field>
                    <b-field>
                      <b-input
                        required
                        icon="lock"
                        type="password"
                        placeholder="Password"
                        name="password"
                        v-model.lazy='password'
                        password-reveal
                      ></b-input>
                    </b-field>
                    <b-field class="cb">
                      <b-checkbox v-model='rememberMe'>Remember Me</b-checkbox>
                      <b-tooltip
                        animated
                        :label='explanation'
                        position="is-right"
                        class="tooltip"
                        type="is-info"
                        multilined
                      >
                        <b-icon icon="question-circle" size="is-small"></b-icon>
                      </b-tooltip>
                    </b-field>
                    <button
                      class="button is-dark is-fullwidth"
                      type="submit"
                      form="login"
                      value="Submit"
                    >Login</button>
                    <div class="has-text-centered forgotPass">
                      <a
                        class="is-link is-size-7 is-centered"
                        @click='forgotPassword = true'
                      >Forgot Password?</a>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>

        <b-modal :active.sync='forgot_password' animation="zoom-out">
          <ForgotPasswordModal></ForgotPasswordModal>
        </b-modal>
      </div>
    </div>
  </transition>
</template>

<script>
import ForgotPasswordModal from "./subcomponents/ForgotPasswordModal"
import error from './..//Utilities/ErrorGenerator'
import { mapState, mapActions } from "vuex"

export default {
  components: {
    ForgotPasswordModal
  },

  data: function () {
    const explanation = 'Mencentang opsi ini akan membuat anda terautentikasi secara otomatis selama 24 jam pada komputer ini'
    return {
      explanation,
      forgot_password: false,
      username: ``,
      password: ``,
      rememberMe: false
    }
  },

  computed: mapState('current_user', ['user']),

  computed: {
    errUser: function () {
      const regex = /[^\w.]/i
      if (this.username.length > 0 && regex.test(this.username))
        return `Username hanya boleh berisi karakter huruf, angka, dan titik`
      else
        return ``
    }
  },

  methods: {
    ...mapActions('current_user', ['login']),

    submit: function (e) {
      e.preventDefault()

      console.log(this.user) // undefined, shouldn't it be null?

      if (this.errUser) {
        this.$refs.user.focus()
        return
      }

      this.login({ username: this.username, password: this.password }, this.rememberMe)
        .then(() => {
          console.log(this.user) // also undefined, should be some object, as vue-devtools shows the correct value
          this.$toast.open({
            message: `Berhasil login dengan username <samp>${this.username}</samp>`,
            type: 'is-black',
            duration: 3500
          })
          // this.$router.push({ name: 'Introduction' })
        }).catch(message => {
          error(message)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.hero {
  /* Using linear-gradient generator */
  background: #000000; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to bottom,
    #434343,
    #000000
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to bottom,
    #434343,
    #000000
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

form {
  .field:not(.cb) {
    min-height: 3.65em;
  }
}

.forgotPass {
  margin-top: 0em;
  margin-bottom: 0em;
}

.button {
  margin-bottom: 0em;
}

.tooltip {
  cursor: pointer;
  margin: auto;
  margin-left: 0.3em;
}
</style>