Registration Form Component used for testing - short version

RegistrationForm.vue

<script>
import { validateEmail } from './validateEmail.js'

export default {
  name: 'RegistrationForm',
  props: {
    termsAndConditions: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: { email: '', termsAccepted: false }
    }
  },
  methods: {
    async handleFormSubmit() {
      this.assertEmailIsValidAndTermsAccepted()
      const { email } = this.formData
      const response = await this.$auth.registerUser({ email })
      this.$emit('register-update', response)
    }
  }
}
</script>

<template>
  <form @submit.prevent="handleFormSubmit" data-test-id="registration-form">
    <div class="registration-form__field">
      <label data-test-id="registration-email-label" for="email-input">Email</label>
      <input v-model="formData.email" data-test-id="registration-email-input" />
    </div>
    <div class="registration-form__field" v-if="termsAndConditions">
      <input
        v-model="formData.termsAccepted"
        type="checkbox"
        data-test-id="registration-terms-input"
      />
      <label data-test-id="registration-terms-label" for="terms-input">
        I agree to the Terms
      </label>
    </div>
    <div class="registration-form__field">
      <button type="submit" data-test-id="registration-submit-button">Submit</button>
      <span data-test-id="registration-error" v-if="errorMsg">{{ errorMsg }}</span>
    </div>
  </form>
</template>