nonshy/website
nonshy/website
1
0
Fork 0
Code Issues 20 Pull Requests 1 Packages Projects Releases Wiki Activity

Mobile input assist for age gate page

Browse Source
This commit is contained in:
Noah Petherbridge 2023-06-15 21:42:31 -07:00
parent d36e71549a
commit eed3e2f43b
1 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/templates/account/age_gate.html
View File

@ -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>