<template>
  <div>
    <form novalidate @submit.prevent="performLogin">
      <md-card-content>
        <md-field>
          <label>Username</label>
          <md-input :disabled="processing"></md-input>
        </md-field>

        <md-field>
          <label>Password</label>
          <md-input :disabled="processing" type="password"></md-input>
        </md-field>

      </md-card-content>

      <md-card-actions>
        <md-progress-spinner :md-diameter="30" :md-stroke="3" md-mode="indeterminate" v-if="processing"
                             class="md-accent"></md-progress-spinner>
        <md-button type="submit" class="md-primary" :disabled="processing">Login</md-button>
      </md-card-actions>
    </form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      processing: false
    }
  },
  methods: {
    performLogin() {
      this.processing = true;
    }
  }
}
</script>

<style scoped>

</style>