<style scoped lang="stylus">
  .logo {
    width: 80%;
    margin: 0 auto;
  }

  a {
    text-decoration: none;
    font-size: 14px;
  }

  .loginContainer
    margin: 0 auto
</style>

<template>
  <div>
    <v-container>
      <v-layout row>
        <v-flex xs12
                md6
                lg4
                xl3
                class="loginContainer">
          <div class="text-xs-center mt-5 mb-5">
            <img class="logo"
                 src="/images/pg-logo.png">
          </div>
          <form v-on:submit.prevent="login()">
            <v-text-field name="username"
                          label="Username"
                          v-model="username"
                          id="username"
                          v-validate="'required|email'"
                          :data-vv-delay="vRules.delayFor('username')"
                          :errors="vErrors.errorsFor('username')">
            </v-text-field>
            <v-text-field name="password"
                          label="Password"
                          v-model="password"
                          id="password"
                          :append-icon="hidden ? 'visibility' : 'visibility_off'"
                          :append-icon-cb="() => (hidden = !hidden)"
                          :type="hidden ? 'password' : 'text'"
                          v-validate="'required'">
            </v-text-field>
            <v-btn default
                   block
                   type="submit"
                   class="primary ma-0 mb-4">Sign In
            </v-btn>
            <div class="text-xs-center">
              <a href=""> Forgot Password?</a>
            </div>
          </form>
        </v-flex>
      </v-layout>

    </v-container>
  </div>
</template>

<script>
  import Vue from 'vue'
  import VeeValidate from 'vee-validate'

  const config = {
    errorBagName: 'vvErrors'
  }

  Vue.use(VeeValidate, config)

  export default {
    computed: {
      vRules() {
        const rules = {
          fields: this.fields,
          delayFor(field) {
            const f = this.fields[field]
            return f && f.validated ? 0 : 2000
          },
          validateOnFor(field) {
            const f = this.fields[field]
            return f && f.validated ? 'blur|keyup' : 'blur'
          }
        }

        return rules
      },
      vErrors() {
        this.vvErrors.errorsFor = function (field) { // eslint-disable-line
          return this.collect(field).length ? this.collect(field) : ''
        }
        return this.vvErrors
      }
    },
    data() {
      return {
        hidden: true,
        password: '',
        username: '',
        login() {
          if (this.username === 'admin' && this.password === 'admin') {
            this.$nuxt.$router.replace({ path: '/users' })
          }
        }
      }
    }
  }
</script>