From dd97a23ce70fc564d3142eb9d218ff1a929107b1 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sun, 22 Jan 2023 11:15:52 -0500
Subject: Add birthday to registration form

---
 src/components/registration/registration.js | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

(limited to 'src/components/registration/registration.js')

diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index 6eb316d0..3139bdd2 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -3,6 +3,7 @@ import { required, requiredIf, sameAs } from '@vuelidate/validators'
 import { mapActions, mapState } from 'vuex'
 import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
 import localeService from '../../services/locale/locale.service.js'
+import { DAY } from 'src/services/date_utils/date_utils.js'
 
 const registration = {
   setup () { return { v$: useVuelidate() } },
@@ -13,6 +14,7 @@ const registration = {
       username: '',
       password: '',
       confirm: '',
+      birthday: '',
       reason: '',
       language: ''
     },
@@ -32,6 +34,12 @@ const registration = {
           required,
           sameAs: sameAs(this.user.password)
         },
+        birthday: {
+          required: requiredIf(() => this.birthdayRequired),
+          maxValue: value => {
+            return !this.birthdayRequired || new Date(value).getTime() <= this.birthdayMin.getTime()
+          }
+        },
         reason: { required: requiredIf(() => this.accountApprovalRequired) },
         language: {}
       }
@@ -52,6 +60,21 @@ const registration = {
     reasonPlaceholder () {
       return this.replaceNewlines(this.$t('registration.reason_placeholder'))
     },
+    birthdayMin () {
+      const minAge = this.birthdayMinAge
+      const today = new Date()
+      today.setUTCMilliseconds(0)
+      today.setUTCSeconds(0)
+      today.setUTCMinutes(0)
+      today.setUTCHours(0)
+      const minDate = new Date()
+      minDate.setTime(today.getTime() - minAge * DAY)
+      return minDate
+    },
+    birthdayMinFormatted () {
+      const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
+      return this.user.birthday && new Date(Date.parse(this.birthdayMin)).toLocaleDateString(browserLocale, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' })
+    },
     ...mapState({
       registrationOpen: (state) => state.instance.registrationOpen,
       signedIn: (state) => !!state.users.currentUser,
@@ -59,7 +82,9 @@ const registration = {
       serverValidationErrors: (state) => state.users.signUpErrors,
       termsOfService: (state) => state.instance.tos,
       accountActivationRequired: (state) => state.instance.accountActivationRequired,
-      accountApprovalRequired: (state) => state.instance.accountApprovalRequired
+      accountApprovalRequired: (state) => state.instance.accountApprovalRequired,
+      birthdayRequired: (state) => state.instance.birthdayRequired,
+      birthdayMinAge: (state) => state.instance.birthdayMinAge
     })
   },
   methods: {
-- 
cgit v1.2.3-70-g09d2


From 03d5c2e140fc70937d3533665fa88d055ab486f1 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sun, 22 Jan 2023 11:22:24 -0500
Subject: Make date picker aware of the birthday max value

---
 src/components/registration/registration.js  | 3 +++
 src/components/registration/registration.vue | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

(limited to 'src/components/registration/registration.js')

diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index 3139bdd2..22ca6ad6 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -71,6 +71,9 @@ const registration = {
       minDate.setTime(today.getTime() - minAge * DAY)
       return minDate
     },
+    birthdayMinAttr () {
+      return this.birthdayMin.toJSON().replace(/T.+$/, '')
+    },
     birthdayMinFormatted () {
       const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
       return this.user.birthday && new Date(Date.parse(this.birthdayMin)).toLocaleDateString(browserLocale, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' })
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 6d7fe76e..5701b05e 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -183,7 +183,7 @@
                 :disabled="isPending"
                 class="form-control"
                 type="date"
-                max="birthdayMin"
+                :max="birthdayRequired ? birthdayMinAttr : undefined"
                 :aria-required="birthdayRequired"
               >
             </div>
-- 
cgit v1.2.3-70-g09d2