<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 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 @click="registerDialog = true" id="register">register</v-btn>
          <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'
import RegisterDialog from '@/components/RegisterDialog'
import { Authentication as Auth } from '@/store/modules/authentication'

export default {
  components: { RegisterDialog },
  name: 'grady-login',
  data () {
    return {
      credentials: {
        username: '',
        password: ''
      },
      registerDialog: false,
      loading: false
    }
  },
  computed: {
    msg () { return Auth.state.message },
    userRole () { return Auth.state.user.role },
    production () {
      return process.env.NODE_ENV === 'production'
    },
    productionBrandUrl () {
      return `https://${window.location.host}/static/img/brand.png`
    }
  },
  methods: {
    submit () {
      this.loading = true
      Auth.getJWT(this.credentials).then(() => {
        Auth.getUser().then(() => {
          this.$router.push({ name: 'home' })
        })
        Auth.getJWTTimeDelta()
        this.loading = false
      }).catch(() => { 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>
</style>