vuetify-end

<template>
  <v-container class="fill-height" fluid>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="4">
        <v-card class="elevation-12">
          <v-toolbar color="primary" dark flat>
            <v-toolbar-title class="center">Member Login</v-toolbar-title>
          </v-toolbar>
          <v-card-text>
            <v-form>
              <v-text-field
                label="email"
                name="email"
                prepend-icon="mdi-email"
                type="text"
                v-model="email"
                :error-messages="emailErrors"
                @input="$v.email.$touch()"
                @blur="$v.email.$touch()"
              />
              <v-text-field
                id="password"
                label="Password"
                name="password"
                prepend-icon="mdi-lock"
                type="password"
                v-model="password"
                :error-messages="passwordErrors"
                @input="$v.password.$touch()"
                @blur="$v.password.$touch()"
                maxlength="12"
              />
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-spacer />
            <v-btn color="primary" @click="login">Login</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { validationMixin } from 'vuelidate'
import { required, email } from 'vuelidate/lib/validators'
const passwordValidate = function (value) {
  const regrex = /^(?=.{8,12}$)(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])/g
  return regrex.test(value)
}

export default {
  mixins: [validationMixin],
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    login() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        console.log(this.email, this.password);
      }
    }
  },
  validations: {
    email: {
      required,
      email
    },
    password: {
      required,
      passwordValidate
    }
  },
  computed: {
    emailErrors() {
      const errors = []
      if (!this.$v.email.$dirty) return errors
      !this.$v.email.email && errors.push('Must be valid e-mail')
      !this.$v.email.required && errors.push('E-mail is required')
      return errors
    },
    passwordErrors() {
      const errors = []
      if (!this.$v.password.$dirty) return errors
      !this.$v.password.passwordValidate && errors.push("Your password must contain 1 uppercase,1 lowercase and a number")
      !this.$v.password.required && errors.push('Password is required')
      return errors
    }
  }
}
</script>

<style lang="scss" scope>
.container {
  background: url("~@/assets/bg3.jpg") no-repeat center;
}
</style>