Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Registration Form Component used for testing
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment