Login.vue

<template>
  <v-container fill-height>
    <v-layout
      align-center
      justify-center
    >
      <v-dialog
        v-model="registerDialog"
        class="pa-4"
        max-width="30%"
      >
        <register-dialog @registered="registered($event)" />
      </v-dialog>
      <v-flex
        xs12
        sm12
        md10
        lg7
      >
        <img
          src="https://grady.informatik.uni-goettingen.de/static/img/brand.svg"
          class="grady-logo"
        >
      </v-flex>
      <v-divider
        vertical
        inset
        class="ma-4"
      />
      <v-flex
        text-xs-center
        xs8
        sm6
        md4
        lg2
      >
        <h2 class="pt-3">
          Log in
        </h2>
        <v-alert
          v-if="msg"
          outline
          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
            v-model="credentials.username"
            label="Username"
            required
            autofocus
          />
          <v-text-field
            v-model="credentials.password"
            label="Password"
            type="password"
            required
          />
          <v-layout class="btn-container">
            <v-btn
              id="register"
              @click="registerDialog = true"
            >
              Register
            </v-btn>
            <v-btn
              :loading="loading"
              type="submit"
              color="primary"
            >
              Access
            </v-btn>
          </v-layout>
        </v-form>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import RegisterDialog from '@/components/RegisterDialog'
import { Authentication as Auth } from '@/store/modules/authentication'

export default {
  name: 'GradyLogin',
  components: { RegisterDialog },
  data () {
    return {
      credentials: {
        username: '',
        password: ''
      },
      registerDialog: false,
      loading: false
    }
  },
  computed: {
    msg () { return Auth.state.message },
    userRole () { return Auth.state.user.role },
  },
  methods: {
    submit () {
      this.loading = true
      Auth.getJWT(this.credentials).then(() => {
        return Promise.all([
          Auth.getUser(),
          Auth.getJWTTimeDelta()
        ])
      }).then(() => {
        this.$router.push({ name: 'home' })
        this.loading = false
      }).catch((err) => {
        let msg = 'Login failed. Please try again.'
        if (typeof err === 'string') {
          msg = err
        }

        Auth.SET_MESSAGE(msg)
        this.loading = false
      })
    },
    registered (credentials) {
      this.registerDialog = false
      this.credentials.username = credentials.username
      this.credentials.password = credentials.password
      Auth.SET_MESSAGE('Your account is being activated. Please wait.')
    }
  }
}
</script>

<style scoped>
  .v-btn {
    margin: 0px;
  }

  .btn-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
  }

  .grady-logo {
    width: 100%;
  }
</style>