<template>
  <div>
    <v-container>
      <v-layout row>
        <v-flex xs12
                md6
                offset-md3
                lg4
                offset-lg4>
          {{vErrors}}
          <v-text-field name="username"
                        label="Username"
                        v-model="username"
                        id="username"
                        v-validate="'required|email'"
                        :error-messages="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|min:8'"
                        :error-messages="vErrors.errorsFor('password')">
          </v-text-field>
          <v-btn light
                 default
                 block
                 class="primary">Sign In
          </v-btn>
        </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,
          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
          // vuetify expects field with not errors messages to have empty array
          return this.collect(field).length ? this.collect(field) : []
        }
        return this.vvErrors
      }
    },
    data() {
      return {
        hidden: true,
        password: '',
        username: ''
      }
    }
  }
</script>

<style scoped>
</style>