Login.vue

<template>
  <v-container fill-height>
    <v-layout align-center justify-center>
      <v-flex text-xs-center xs8 sm6 md4 lg2>
        <img v-if="production" :src="productionBrandUrl"/>
        <img v-else 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
      }),
      production () {
        return process.env.NODE_ENV === 'production'
      },
      productionBrandUrl () {
        return `https://${window.location.host}/static/img/brand.png`
      }
    },
    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>