unicorn-signup-component/signup.js

Unicorn SignUp Component

// JS part of our component: data and all JS related properties
// must be reside in here

import watch from './signup_watchers'
import methods from './signup_methods'
import Datepicker from 'vuejs-datepicker'

/*
 * We could add a watcher to each field and on that watcher
 * we could trigger a validation method. But I will use
 * an vuejs model-based validation library instead.
 */
import { validationMixin } from 'vuelidate'
import { required, minLength, sameAs, email } from 'vuelidate/lib/validators'

const errorMessages = {
  firstName: 'First Name is required.',
  lastName: 'Last Name is required.',
  selected: 'You must select a gender.',
  email: 'Email must be a valid address',
  password1: 'Your password should have at least four characters',
  password2: 'Your passwords do not match'
}

const SignupComponent = {
  mixins: [validationMixin],
  data: () => ({
    signup_success: null,
    signup_error: null,
    errorMessages,
    signUpButton: 'Sign Up',
    firstName: '',
    lastName: '',
    selected: null,
    genders: [
      'Male',
      'Female',
      'Other'
    ],
    date: new Date(),
    email: '',
    password1: '',
    password2: ''
  }),
  components: {
    'datepicker': Datepicker
  },
  watch,
  methods,
  validations: {
    firstName: {
      required
    },
    lastName: {
      required
    },
    email: {
      required,
      email
    },
    selected: {
      required
    },
    password1: {
      required,
      minLength: minLength(4)
    },
    password2: {
      sameAsPassword: sameAs('password1')
    }
  }
}

export default SignupComponent