unicorn-signup-component/signup.html

Unicorn SignUp Component

<div class="container">
  <form v-show="!signup_success">
    <div class="form-group">
      <label for="firstName" class="control-label">First Name</label>
      <input type="text" v-model="firstName" class="form-control" placeholder="Your first name here" @input="$v.firstName.$touch"/>
      <span v-if="$v.firstName.$error" class="alert-danger">{{ errorMessages.firstName }}</span>
    </div>
    <div class="form-group">
      <label for="lastName">Last Name</label>
      <input type="text" v-model="lastName" class="form-control" placeholder="Your last name here" @input="$v.lastName.$touch"/>
      <span v-if="$v.lastName.$error" class="alert-danger">{{ errorMessages.last }}</span>
    </div>
    <div class="form-group">
      <label for="email">Gender</label>
      <select v-model="selected" @blur="$v.selected.$touch">
          <option disabled selected value>Select your gender</option>
          <option v-for="gender in genders" v-bind:value="gender">{{ gender }}</option>
      </select>
      <span class v-if="$v.selected.$error" class="alert-danger">{{ errorMessages.selected }}</span>
    </div>
    <div class="form-group">
      <label for="email">Date of birth</label>
      <datepicker v-model="date" name="birthDate"></datepicker>
    </div>
    <div class="form-group">
      <label for="email">Email</label>
      <input type="text" v-model="email" class="form-control" placeholder="user@example.com" @input="$v.email.$touch"/>
      <span v-if="$v.email.$error" class="alert-danger">{{  errorMessages.email }}</span>
    </div>
    <div class="form-group">
      <label for="psw1">Password</label>
      <input type="password" v-model="password1" class="form-control" placeholder="At least 4 characters" @input="$v.password1.$touch()"/>
      <span v-show="$v.password1.$error" class="alert-danger">{{ errorMessages.password1 }}</span>
    </div>
    <div class="form-group">
      <label for="psw2">Repeat your password</label>
      <input type="password" v-model="password2" class="form-control" placeholder="At least 4 characters" @input="$v.password2.$touch()"/>
      <span v-show="!$v.password2.sameAsPassword" class="alert-danger">{{ errorMessages.password2 }}</span>
    </div>
    <div class="form-group">
      <button @click="signUpUser" class="btn btn-primary" v-bind:class="{disabled: $v.firstName.$invalid || $v.lastName.$invalid || $v.selected.$invalid ||  $v.email.$invalid ||  $v.password1.$invalid ||  $v.password2.$invalid  }">
        {{ signUpButton }}
      </button>
    </div>
    <div v-show="signup_error" class="alert alert-danger"><h3>{{ signup_error }}</h3></div>
  </form>
  <div v-show="signup_success" class="alert alert-success"><h3>{{ signup_success }}</h3></div>
</div>