oD Petition template

PetitionForm.vue

<div class="remote-petition" ref="petition">
  <div class="remote-petition__totaliser">
    <div class="remote-petition__bar-domain">
      <div class="remote-petition__bar" :style="barStyles"></div>
    </div>
    <p class="remote-petition__count-text">This petition has been signed <span class="remote-petition__count-number">{{ supporterCountDisplay }}</span> times.</p>
  </div>
  <div v-if="stage === 'form'" class="remote-petition__form-view">
    <div class="remote-petition__text-input-wrapper remote-petition__first_name" :class=""><label for="remote-petition__first_name" >First name</label><input required type="text" id="remote-petition__first_name" v-model="first_name"/></div>
    <div class="remote-petition__text-input-wrapper remote-petition__last_name"><label for="remote-petition__last_name" >Last name</label><input required type="text" id="remote-petition__last_name" v-model="last_name"/></div>
    <div class="remote-petition__text-input-wrapper remote-petition__email"><label for="remote-petition__email" >Email</label><input required type="email" id="remote-petition__email" v-model="email"/></div>

    <div class="remote-petition__consent">
        <label class="remote-petition__option">
          <input type="radio" name="remote-petition-consent" v-model="consent" value="yes" required>
          Yes, I'd like the newsletter</label>
        <label class="remote-petition__option">
          <input type="radio" name="remote-petition-consent" v-model="consent" value="no" required>
          I already get it or I don't want it</label>
    </div>
    <div v-if="user_error" class="remote-petition__errors">
      {{ user_error }}
      <ul>
        <li v-if="errors.first_name">First name is {{errors.first_name}}</li>
        <li v-if="errors.last_name">Last name is {{errors.last_name}}</li>
        <li v-if="errors.email">Email name is {{errors.email}}</li>
        <li v-if="errors.consent">Please specify whether you would like to be signed up to the newsletter.</li>
      </ul>
    </div>
    <button class="btn btn-primary remote-petition__submit" @click.prevent="handleSubmit()" :disabled="stage !== 'form'" >Submit</button>
  </div>
  <div v-if="stage === 'busy'" class="remote-petition__busy">
    <p>Please wait...</p>
  </div>
  <div v-if="stage === 'thanks'" class="remote-petition__thanks">
    <h2>Thanks, {{ first_name}}!</h2>
    <p v-if="doneBefore" class="remote-petition__done-before" >Looks like you've signed this already, that's OK, we'll only count you once.</p>
    <p class="remote-petition__reset"><a href @click.prevent="reset()">Reset form</a></p>
  </div>
</div>