<template>
      <v-container fill-height>
        <v-layout align-center justify-center>
          <v-flex text-xs-center md4 lg2>
            <img src="../assets/brand.png"/>
            <h3 class="pt-3">Log in</h3>
            <v-alert
              outline
              v-if="error"
              color="error"
              :value="true"
              transition="fade-transition"
            >{{ error }}</v-alert>
            <p v-else>But I corrected them, sir.</p>
            <v-form
              @submit="submit">
              <v-text-field
                label="Username"
                v-model="credentials.username"
                required
                autofocus
                ></v-text-field>
              <v-text-field
                label="Password"
                v-model="credentials.password"
                type="password"
                required
                ></v-text-field>
              <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([
        'error'
      ])
    },
    methods: {
      ...mapActions([
        'getJWTToken',
        'getExamModule',
        'getUserRole',
        'getJWTTimeDelta'
      ]),
      submit () {
        this.loading = true
        this.getJWTToken(this.credentials).then(() => {
          this.getUserRole()
          this.getJWTTimeDelta()
          this.loading = false
          this.$router.push('/student/')
        }).catch(() => { this.loading = false })
      }
    }
  }
</script>


<style scoped>
</style>