adds label to birth field

Author: net8floz

src/views/Register/Step2.vue

@@ -1,132 +1,122 @@
 <template>
- <v-form @submit.prevent="validate" ref="form" v-model="isValid">
- <v-card-text>
- <v-row no-gutters>
- <v-col>
- <v-text-field
- v-bind="fields.firstName"
- v-model="fields.firstName.value"
- :disabled="isSubmitting"
- />
- </v-col>
- <v-col>
- <v-text-field
- v-bind="fields.lastName"
- v-model="fields.lastName.value"
- :disabled="isSubmitting"
- />
- </v-col>
- </v-row>
- <v-text-field
- v-bind="fields.studentEmail"
- v-model="fields.studentEmail.value"
- :disabled="isSubmitting"
- />
- <date-of-birth-field v-model="fields.dateOfBirth.value" />
- </v-card-text>
+<v-form @submit.prevent="validate" ref="form" v-model="isValid">
+<v-card-text>
+<v-row no-gutters>
+<v-col>
+<v-text-field
+v-bind="fields.firstName"
+v-model="fields.firstName.value"
+:disabled="isSubmitting"
+/>
+</v-col>
+<v-col>
+<v-text-field
+v-bind="fields.lastName"
+v-model="fields.lastName.value"
+:disabled="isSubmitting"
+/>
+</v-col>
+</v-row>
+<v-text-field
+v-bind="fields.studentEmail"
+v-model="fields.studentEmail.value"
+:disabled="isSubmitting"
+/>
+<date-of-birth-field :label="fields.dateOfBirth.label" v-model="fields.dateOfBirth.value" />
+</v-card-text>
 
- <v-card-text v-if="showParentConsentAlert">
- <v-alert colored-border icon="mdi-firework">
- You are not 13 years of age.
- <p>
- In order to continue with the code challenge you must have your
- parent's permission. Have your parent or guardian complete the rest of
- this page.
- </p>
- <v-switch
- v-model="hasParentConsent"
- class="mx-2"
- :rules="[
+<v-card-text v-if="showParentConsentAlert">
+<v-alert colored-border icon="mdi-firework">
+You are not 13 years of age.
+<p>
+In order to continue with the code challenge you must have your
+parent's permission. Have your parent or guardian complete the rest of
+this page.
+</p>
+<v-switch
+v-model="hasParentConsent"
+class="mx-2"
+:rules="[
  v =>
  !!v ||
  'Please have your parent or guardian review this form before continuing'
  ]"
- :label="
+:label="
  'I, the parent or guardian of ' +
  this.fields.firstName.value +
  ' ' +
  this.fields.lastName.value +
  ', give my consent to participate in the CodeWizardsHQ Code Challenge.'
  "
- ></v-switch>
- </v-alert>
- </v-card-text>
+></v-switch>
+</v-alert>
+</v-card-text>
 
- <v-card-actions>
- <v-btn
- color="secondary darken-2"
- @click="() => $emit('back')"
- :disabled="isSubmitting"
- >Back</v-btn
- >
- <v-spacer />
- <v-btn color="secondary darken-2" type="submit" :disabled="isSubmitting">
- Next
- <v-progress-circular
- size="14"
- class="ml-3"
- indeterminate
- v-if="isSubmitting"
- />
- </v-btn>
- </v-card-actions>
- </v-form>
+<v-card-actions>
+<v-btn color="secondary darken-2" @click="() => $emit('back')" :disabled="isSubmitting">Back</v-btn>
+<v-spacer />
+<v-btn color="secondary darken-2" type="submit" :disabled="isSubmitting">
+Next
+<v-progress-circular size="14" class="ml-3" indeterminate v-if="isSubmitting" />
+</v-btn>
+</v-card-actions>
+</v-form>
 </template>
 
 <script>
 import DateOfBirthField from "./DateOfBirthField";
 import moment from "moment";
 
 export default {
- name: "register-step-2",
- props: ["fields"],
- components: {
- DateOfBirthField
- },
- watch: {
- "fields.dateOfBirth.value"() {
- if (!this.needsParentConsent) {
- this.showParentConsentAlert = false;
- }
- }
- },
- computed: {
- age() {
- return moment().diff(this.fields.dateOfBirth.value, "years", false);
- },
- needsParentConsent() {
- return this.age < 13;
- }
- },
- methods: {
- async submit() {
- if (this.isSubmitting) {
- return;
- }
- this.isSubmitting = true;
- const cb = () => {
- this.isSubmitting = false;
- };
- this.$emit("submit", cb);
- },
- validate() {
- if (this.$refs.form.validate()) {
- if (this.needsParentConsent && !this.hasParentConsent) {
- this.showParentConsentAlert = true;
- } else {
- this.submit();
- }
- }
- }
- },
- data() {
- return {
- showParentConsentAlert: false,
- hasParentConsent: false,
- isValid: false,
- isSubmitting: false,
- showCalendar: false
- };
- }
+name: "register-step-2",
+props: ["fields"],
+components: {
+DateOfBirthField
+},
+watch: {
+"fields.dateOfBirth.value"() {
+if (!this.needsParentConsent) {
+this.showParentConsentAlert = false;
+}
+}
+},
+computed: {
+age() {
+return moment().diff(this.fields.dateOfBirth.value, "years", false);
+},
+needsParentConsent() {
+return this.age < 13;
+}
+},
+methods: {
+async submit() {
+if (this.isSubmitting) {
+return;
+}
+this.isSubmitting = true;
+const cb = () => {
+this.isSubmitting = false;
+};
+this.$emit("submit", cb);
+},
+validate() {
+if (this.$refs.form.validate()) {
+if (this.needsParentConsent && !this.hasParentConsent) {
+this.showParentConsentAlert = true;
+} else {
+this.submit();
+}
+}
+}
+},
+data() {
+return {
+showParentConsentAlert: false,
+hasParentConsent: false,
+isValid: false,
+isSubmitting: false,
+showCalendar: false
+};
+}
 };
 </script>