From eed3e2f43b6cb532d8869d749052daaa24447231 Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Thu, 15 Jun 2023 21:42:31 -0700
Subject: [PATCH] Mobile input assist for age gate page

---
 web/templates/account/age_gate.html | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/web/templates/account/age_gate.html b/web/templates/account/age_gate.html
index e7352a5..124786a 100644
--- a/web/templates/account/age_gate.html
+++ b/web/templates/account/age_gate.html
@@ -48,6 +48,10 @@
                                     name="dob"
                                     id="dob"
                                     required>
+                                <p class="help">
+                                    On mobile and scrolling for your year is tedious?
+                                    <a href="#" id="manualEntry">Click to type your birthdate instead.</a>
+                                </p>
                             </div>
 
                             <div class="field has-text-centered">
@@ -68,12 +72,22 @@
 
 <script type="text/javascript">
     window.addEventListener("DOMContentLoaded", (event) => {
-        let $file = document.querySelector("#file"),
-            $fileName = document.querySelector("#fileName");
+        let $manualEntry = document.querySelector("#manualEntry"),
+            $dob = document.querySelector("#dob");
 
-        $file.addEventListener("change", function() {
-            let file = this.files[0];
-            $fileName.innerHTML = file.name;
+        $manualEntry.addEventListener("click", function(e) {
+            e.preventDefault();
+
+            let answer = window.prompt("Enter your birthdate in 'YYYY-MM-DD' format").trim().replace(/\//g, '-');
+            if (answer.match(/^(\d{2})-(\d{2})-(\d{4})/)) {
+                let group = answer.match(/^(\d{2})-(\d{2})-(\d{4})/);
+                answer = `${group[3]}-${group[1]}-${group[2]}`;
+                window.alert(`NOTE: Your input was interpreted to be in MM/DD/YYYY order and has been read as: ${answer}`);
+            } else if (!answer.match(/^\d{4}-\d{2}-\d{2}/)) {
+                window.alert(`Please enter the date in YYYY-MM-DD format.`);
+            }
+
+            $dob.value = answer;
         });
     });
 </script>