<template>
  <section class="hero is-medium">
    <div class="hero-body">
      <div class="columns">
        <div class="column is-4 is-offset-4">
          <h1 class="is-size-1">Login</h1>
          <form @submit.prevent="user_login">
            <div class="field">
              <p class="control has-icons-left has-icons-right">
                <input v-model="username" class="input" placeholder="Username" type="text">
                <span class="icon is-small is-left">
                <i class="fas fa-user"></i>
              </span>
              </p>
            </div>
            <div class="field">
              <p class="control has-icons-left">
                <input v-model="password" class="input" placeholder="Password" type="password">
                <span class="icon is-small is-left">
                  <i class="fas fa-lock"></i>
                </span>
              </p>
            </div>
            <div class="field">
              <p class="control">
                <button class="button is-info is-rounded is-medium" type="submit">
                  Login
                </button>
              </p>
            </div>
          </form>
          <div v-if="msg" class="m-4">
            <div class="notification is-danger has-text-centered">
              <b>{{ msg }}</b>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="hero-foot">
      <div class="content has-text-centered">
        <p>
          <span class="tag is-primary">Tip:</span> You can also register here!
        </p>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import {Vue} from 'vue-class-component';

export default class Login extends Vue {
  private msg = '';
  private username = '';
  private password = '';

  mounted() {
    this.currentSession();
  }

  private currentSession() {
    this.$store.dispatch('user_currentSession')
        .then((res: any) => this.$router.push({name: 'DashboardHome', params: {username: res.data.username}}))
        .catch(() => {
        });
  }

  private user_login() {
    this.$store.dispatch('user_login', {username: this.username, password: this.password})
        .then(() => this.$router.push({name: 'DashboardHome', params: {username: this.username}}))
        .catch(() => {
          this.msg = this.$store.getters.user_err.response.data.errors.message || 'Something went wrong!'
        });
  }
}
</script>
