<template>
  <div id="login">
    <form class="pure-form pure-form-stacked" @submit.prevent="login">
      <fieldset class="pure-group">
        <input type="text" class="pure-input-1-2" v-model="username" :placeholder="$t('landing.invitePlaceholder')">
        <input type="password" class="pure-input-1-2" v-model="password" :placeholder="$t('landing.invitePlaceholder')">
      </fieldset>

      <button type="submit" class="pure-button pure-button-primary" :disabled="username.trim() == '' || password.trim() == '' || checking">{{ $t(checking ? 'landing.inviteButtonChecking' : 'landing.inviteButton') }} <span v-if="checking"><i class="fas fa-spinner fa-pulse"></i></span></button>
    </form>

  </div>
</template>

<script>
export default {
  data: () =>
  {
    return {
      username: '',
      password: '',
      checking: false
    };
  },

  methods: {
    login()
    {
      alert('TODO');
    }
  }
}
</script>