Login.vue

<template>
      <v-container fill-height>
        <v-layout align-center justify-center>
          <v-flex text-xs-center xs8 sm6 md4 lg2>
            <img src="../assets/brand.png"/>
            <h3 class="pt-3">Log in</h3>
            <v-alert
              outline
              v-if="msg"
              color="error"
              :value="true"
              transition="fade-transition"
            >{{ msg }}</v-alert>
            <p v-else>But I corrected them, sir.</p>
            <v-form
              @submit.prevent="submit">
              <v-text-field
                label="Username"
                v-model="credentials.username"
                required
                autofocus
              />
              <v-text-field
                label="Password"
                v-model="credentials.password"
                type="password"
                required
                />
              <v-btn :loading="loading" type="submit" color="primary">Access</v-btn>
            </v-form>
          </v-flex>
        </v-layout>
      </v-container>
</template>


<script>
  import {mapActions, mapState} from 'vuex'

  export default {
    name: 'grady-login',
    data () {
      return {
        credentials: {
          username: '',
          password: ''
        },
        loading: false
      }
    },
    computed: {
      ...mapState({
        msg: state => state.authentication.message,
        userRole: state => state.authentication.userRole
      })
    },
    methods: {
      ...mapActions([
        'getJWT',
        'getUserRole',
        'getJWTTimeDelta'
      ]),
      submit () {
        this.loading = true
        this.getJWT(this.credentials).then(() => {
          this.getUserRole().then(() => {
            this.$router.push({name: 'home'})
          })
          this.getJWTTimeDelta()
          this.loading = false
        }).catch(() => { this.loading = false })
      }
    }
  }
</script>


<style scoped>
</style>