Add birthday to registration form

1 files changed, 34 insertions, 0 deletions

diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index a26162f0..6d7fe76e 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -169,6 +169,40 @@
 
             <div
               class="form-group"
+              :class="{ 'form-group--error': v$.user.birthday.$error }"
+            >
+              <label
+                class="form--label"
+                for="sign-up-birthday"
+              >
+                {{ birthdayRequired ? $t('registration.birthday') : $t('registration.birthday_optional') }}
+              </label>
+              <input
+                id="sign-up-birthday"
+                v-model="user.birthday"
+                :disabled="isPending"
+                class="form-control"
+                type="date"
+                max="birthdayMin"
+                :aria-required="birthdayRequired"
+              >
+            </div>
+            <div
+              v-if="v$.user.birthday.$dirty"
+              class="form-error"
+            >
+              <ul>
+                <li v-if="v$.user.birthday.required.$invalid">
+                  <span>{{ $t('registration.validations.birthday_required') }}</span>
+                </li>
+                <li v-if="v$.user.birthday.maxValue.$invalid">
+                  <span>{{ $tc('registration.validations.birthday_min_age', { date: birthdayMinFormatted }) }}</span>
+                </li>
+              </ul>
+            </div>
+
+            <div
+              class="form-group"
               :class="{ 'form-group--error': v$.user.language.$error }"
             >
               <interface-language-switcher