Registration Form Component used for testing

RegistrationForm.vue

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

export default {
  name: 'RegistrationForm',
  props: {
    termsAndConditions: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        email: '',
        termsAccepted: false
      }
    }
  },
  computed: {
    emailIsValid() {
      return validateEmail(this.formData.email)
    },
    termsAreNotAccepted() {
      return this.termsAndConditions && !this.formData.termsAccepted
    },
    errorMsg() {
      let messages = []
      if (!this.emailIsValid) {
        messages.push('Invalid Email.')
      }

      if (this.termsAreNotAccepted) {
        messages.push('Please accept terms and conditions.')
      }

      return messages.length > 0 ? messages.join(' ') : ''
    }
  },
  methods: {
    async handleFormSubmit() {
      if (this.errorMsg) {
        this.$logger.error(this.errorMsg)
        return
      }

      try {
        const { email } = this.formData
        const response = await this.$auth.registerUser({ email })
        this.$emit('register-update', response)
      } catch (err) {
        this.$logger.error(err)
      }
    }
  }
}
</script>

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