LoginFormRevised.vue

<template>
  <div class="row">
    <div class="container">
      <div class="col-md-4 col-md-offset-4">
        <div class="col-md-12">
          <!-- <img src="http://spencercooley.com/static/app/public/images/logo.png" style="width:100%;"> -->

        </div>
        <div class="col-md-12 no-p no-m">
         <ul class="error-list " v-for="error in submitErrors">
          <li class="error">{{error}}</li>
         </ul>
        </div>
        <div v-if="loading" class="animated-loader">Loading...</div>
        <form v-else v-on:submit.prevent="attemptLogin" v-bind:class="{ invalid: invalid }" >
          <label>Username:</label>
          <input type="text" name="username" v-model="username" class="form-control" >
          <br>
          <label>Password:</label>
          <input  type="password" name="password" v-model="password" class="form-control">
          <br>
          <input type="submit" value="Login" class="btn btn-default submit-btn">
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import store from '../../../store.js'
import axios from 'axios'
import ContentApi from '../../../api.js'
const contentApi = new ContentApi();
import qs from 'qs'

export default {
 data () {
    return {
      username: '',
      password: '',
      loading:false,
      submitErrors: [],
      invalid: false,
    }
  },
  methods: {
   authSuccess(response){
    //contains all data changes on successful login
    this.loading = true;
    localStorage.setItem("authToken", response.data.access_token);
    this.invalid = false;
    store.state.authenticated = true;
   },

   authFailure(e){
    //contains all data changes on failed login
    this.invalid = true;
    this.loading = false;
    this.submitErrors.push(e.response.data.error_description);
    console.log(e);
   },

   attemptLogin(){
    if(this.username == '' || this.password == ''){
     this.submitErrors = [];
     this.submitErrors.push("You must provide both a username and password.");
     this.invalid = true;
     setTimeout(()=>{ this.invalid = false }, 300);
    }
    else{
     this.submitErrors = [];
     let data = {
      username:this.username,
      password:this.password,
      client_id:contentApi.clientID,//application client
      grant_type: 'password'
     }
     let headers = {
      'Content-Type': 'application/x-www-form-urlencoded',
     }
     axios.post(contentApi.authToken, qs.stringify(data), headers)
   			.then( response => {
        //simplified by giving this functionality it's own function.
        this.authSuccess(response);
   			})
   			.catch(e => {
        console.log(e);
        //simplified by giving this functionality it's own function. 
        this.authFailure(e);
   			});

    }
   },

  },
}
</script>

<style lang="scss">
//no styles for medium post
</style>