Mobile input assist for age gate page

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"),
+        let $manualEntry = document.querySelector("#manualEntry"),
-            $fileName = document.querySelector("#fileName");
+            $dob = document.querySelector("#dob");
 
-        $file.addEventListener("change", function() {
+        $manualEntry.addEventListener("click", function(e) {
-            let file = this.files[0];
+            e.preventDefault();
-            $fileName.innerHTML = file.name;
+
+            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>