Disallow registering to people born after event takes place

We need to add complicated parsing since when `elem.validity.rangeUnderflow` is false (not invalid), the `Date`s will be compared manually.
Personally, I think this is unnecessary and should only be a fallback when `elem.validity` does not exist (ancient browsers) but this is what netteForms.js do.

Closes: #56

app/forms/TeamFormFactory.php

@@ -131,6 +131,7 @@ public function create(array $countries, string $locale, bool $editing = false,
 			$container->addRadioList('gender', 'messages.team.person.gender.label', ['female' => 'messages.team.person.gender.female', 'male' => 'messages.team.person.gender.male'])->setDefaultValue('male')->setRequired();
 
 			$container['birth'] = (new DateControl('messages.team.person.birth.label'))->setRequired();
+			$container['birth']->addRule($form::MAX, 'messages.team.person.birth.error.born_too_late', $this->parameters['eventDate']);
 
 			$form->addCustomFields($fields, $container);
 

app/lang/messages.cs.neon

@@ -21,6 +21,7 @@ team.list.entry.action.confirm: "Potvrdit platbu"
 team.person.country.label: "Země:"
 country.cze: "Česká republika"
 team.person.birth.label: "Datum narození:"
+team.person.birth.error.born_too_late: "Lidé narození po datu závodu se nemohou zúčastnit."
 team.person.email.label: "E-Mail:"
 team.list.entry.action.edit: "Upravit"
 team.action.edit: "Upravit"

app/lang/messages.en.neon

@@ -21,6 +21,7 @@ team.list.entry.action.confirm: "Confirm payment"
 team.person.country.label: "Country:"
 country.cze: "Czech Republic"
 team.person.birth.label: "Date of birth:"
+team.person.birth.error.born_too_late: "People born after the event date cannot participate."
 team.person.email.label: "E-Mail:"
 team.list.entry.action.edit: "Edit"
 team.action.edit: "Edit"

www/assets/index.js

@@ -5,9 +5,11 @@ import * as form from './js/form';
 import * as formWarnings from './js/form-warnings';
 import * as icons from './js/icons';
 import * as list from './js/list';
+import * as nextrasForms from './js/nextras-forms';
 import * as noscript from './js/noscript';
 
 netteForms.initOnLoad();
+nextrasForms.register(netteForms);
 changeFormSubmit.register();
 form.register();
 formWarnings.register();

www/assets/js/nextras-forms.js

@@ -0,0 +1,74 @@
+/**
+ * Converts a JSON object produced by calling json_encode
+ * on PHP’s DateTime object into a JavaScript’s Date object.
+ * For simplicity, it is assumed the DateTime’s timezone
+ * matches the local timezone of the user agent.
+ */
+function fromPhpDateTime(datetime, isDate = false) {
+	const parsed = datetime.date.match(/^(?<year>-?[0-9]+)-(?<month>[0-9]{2})-(?<day>[0-9]{2}) (?<hour>[0-9]{2}):(?<min>[0-9]{2}):(?<sec>[0-9]{2})\.(?<msec>[0-9]+)$/);
+
+	let yearString = parsed.groups.year;
+	const year = parseInt(yearString, 10);
+	if (!(0 <= year && year <= 9999)) {
+		// PHP uses four digits for negative years, whereas JavaScript
+		// requires six digits and explicit sign:
+		// https://tc39.es/ecma262/#sec-expanded-years
+		const sign = year < 0 ? '-' : '+';
+		yearString = sign + String(Math.abs(year)).padStart(6, '0');
+	}
+
+	if (isDate) {
+		// When PHP’s DateTime object is converted to JSON, it will contain
+		// a date field formatted like 2012-06-23 00:00:00.000000.
+		// That will be interpreted as a time in local timezone by JavaScript’s Date.
+		// But the value of the input[type="date"] will be something like 2012-06-23,
+		// which Date will interpret as UTC time.
+		// To make them comparable without having to handle timezones,
+		// let’s use just the date part of the datetime string.
+		return new Date(`${yearString}-${parsed.groups.month}-${parsed.groups.day}`);
+	} else {
+		return new Date(`${yearString}-${parsed.groups.month}-${parsed.groups.day} ${parsed.groups.hour}:${parsed.groups.min}:${parsed.groups.sec}.${parsed.groups.msec}`);
+	}
+}
+
+export function register(Nette) {
+	const originalMinValidator = Nette.validators.min;
+	Nette.validators.min = function(elem, arg, val) {
+		if (elem.type === 'date' || elem.type === 'datetime-local') {
+			if (elem.validity.rangeUnderflow) {
+				return false;
+			} else if (elem.validity.badInput) {
+				return null;
+			}
+			return arg === null || new Date(val) >= fromPhpDateTime(arg, elem.type === 'date');
+		}
+		return originalMinValidator(elem, arg, val);
+	};
+
+	const originalMaxValidator = Nette.validators.max;
+	Nette.validators.max = function(elem, arg, val) {
+		if (elem.type === 'date' || elem.type === 'datetime-local') {
+			if (elem.validity.rangeOverflow) {
+				return false;
+			} else if (elem.validity.badInput) {
+				return null;
+			}
+			return arg === null || new Date(val) <= fromPhpDateTime(arg, elem.type === 'date');
+		}
+		return originalMaxValidator(elem, arg, val);
+	};
+
+	const originalRangeValidator = Nette.validators.range;
+	Nette.validators.range = function(elem, arg, val) {
+		if (elem.type === 'date' || elem.type === 'datetime-local') {
+			if (elem.validity.rangeUnderflow || elem.validity.rangeOverflow) {
+				return false;
+			} else if (elem.validity.badInput) {
+				return null;
+			}
+			return Array.isArray(arg) ?
+				((arg[0] === null || new Date(val) >= fromPhpDateTime(arg[0], elem.type === 'date')) && (arg[1] === null || new Date(val) <= fromPhpDateTime(arg[1], elem.type === 'date'))) : null;
+		}
+		return originalRangeValidator(elem, arg, val);
+	};
+}