<template>
  <div class="login">
      <div class="uk-card uk-card-default uk-card-body">

        <fieldset class="uk-fieldset">

            <legend class="uk-legend">Login to dashboard</legend>

            <div class="uk-margin">
                <input class="uk-input" type="Yport" placeholder="Your login" v-model="login">
            </div>

            <div class="uk-margin">
                <input class="uk-input" type="password" placeholder="Password" v-model="password">
            </div>

            <div class="uk-margin">
                <button class="uk-button uk-button-secondary uk-width-1-1" @click="signIn">
                  <i :class="loginButtonClasses"></i> {{ loginButtonText }}
                </button>
            </div>

        </fieldset>

      </div>
  </div>
</template>

<script>

export default {
  name: 'Login',
  data: function() {
    return {

      // user enter data
      login: '',
      password: '',

      wait: false,

      // data for button
      loginButtonClasses: 'fas fa-sign-in-alt',
      loginButtonText: '',

      // default button data
      defaultButtonClasses: 'fas fa-sign-in-alt',
      waitButtonClasses: 'fas fa-circle-notch fa-spin',

    };
  },
  methods: {

    // klick to login
    signIn () {

      // change button data
      this.loginButtonClasses = this.waitButtonClasses;
      this.loginButtonText = 'Wait...';

      // request to api emulation :D ...
      setTimeout (() => {

        // change button data
        this.loginButtonClasses = this.defaultButtonClasses;
        this.loginButtonText = '';

      }, 2000);

    }
  }

}

</script>