Refactor unlimited input JS (#3495)

- Refactor some input "hint" code

.eslintrc.cjs

@@ -39,6 +39,7 @@ module.exports = {
 				groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type'],
 			},
 		],
+		'no-console': 'error',
 		'import/no-unresolved': 'off',
 	},
 };

build.js

@@ -1,4 +1,5 @@
 /* eslint-env node */
+/* eslint-disable no-console */
 
 // Build JS and CSS using esbuild and PostCSS
 import { promises as fs } from 'node:fs';

web/js/pages/add_db.js

@@ -1,63 +1,61 @@
-//
-//
 // Updates database username dynamically, showing its prefix
-App.Actions.DB.update_db_username_hint = function (elm, hint) {
-	if (hint.trim() == '') {
-		$(elm).parent().find('.hint').text('');
+App.Actions.DB.update_db_username_hint = function (input) {
+	const hintElement = input.parentElement.querySelector('.hint');
+
+	if (input.value.trim() === '') {
+		hintElement.textContent = '';
 	}
-	$(elm)
-		.parent()
-		.find('.hint')
-		.text(Alpine.store('globals').DB_USER_PREFIX + hint);
+
+	hintElement.textContent = Alpine.store('globals').DB_USER_PREFIX + input.value;
 };
 
-//
-//
 // Updates database name dynamically, showing its prefix
-App.Actions.DB.update_db_databasename_hint = function (elm, hint) {
-	if (hint.trim() == '') {
-		$(elm).parent().find('.hint').text('');
+App.Actions.DB.update_db_databasename_hint = function (input) {
+	const hintElement = input.parentElement.querySelector('.hint');
+
+	if (input.value.trim() === '') {
+		hintElement.textContent = '';
 	}
-	$(elm)
-		.parent()
-		.find('.hint')
-		.text(Alpine.store('globals').DB_DBNAME_PREFIX + hint);
+
+	hintElement.textContent = Alpine.store('globals').DB_DBNAME_PREFIX + input.value;
 };
 
-//
-// listener that triggers database user hint updating
-App.Listeners.DB.keypress_db_username = function () {
-	var ref = $('input[name="v_dbuser"]');
-	var current_val = ref.val();
-	if (current_val.trim() != '') {
-		App.Actions.DB.update_db_username_hint(ref, current_val);
+// Listener that triggers database user hint updating
+App.Listeners.DB.keypress_db_username = () => {
+	const input = document.querySelector('input[name="v_dbuser"]');
+
+	if (input.value.trim() != '') {
+		App.Actions.DB.update_db_username_hint(input);
 	}
 
-	ref.bind('keypress input', function (evt) {
+	const updateTimeout = (evt) => {
 		clearTimeout(window.frp_usr_tmt);
-		window.frp_usr_tmt = setTimeout(function () {
-			var elm = $(evt.target);
-			App.Actions.DB.update_db_username_hint(elm, $(elm).val());
+		window.frp_usr_tmt = setTimeout(() => {
+			App.Actions.DB.update_db_username_hint(evt.target);
 		}, 100);
-	});
+	};
+
+	input.addEventListener('keypress', updateTimeout);
+	input.addEventListener('input', updateTimeout);
 };
 
-//
-// listener that triggers database name hint updating
-App.Listeners.DB.keypress_db_databasename = function () {
-	var ref = $('input[name="v_database"]');
-	var current_val = ref.val();
-	if (current_val.trim() != '') {
-		App.Actions.DB.update_db_databasename_hint(ref, current_val);
+// Listener that triggers database user hint updating
+App.Listeners.DB.keypress_db_databasename = () => {
+	const input = document.querySelector('input[name="v_database"]');
+
+	if (input.value.trim() != '') {
+		App.Actions.DB.update_db_databasename_hint(input);
 	}
 
-	ref.bind('keypress input', function (evt) {
+	const updateTimeout = (evt) => {
 		clearTimeout(window.frp_dbn_tmt);
-		window.frp_dbn_tmt = setTimeout(function () {
-			var elm = $(evt.target);
-			App.Actions.DB.update_db_databasename_hint(elm, $(elm).val());
+		window.frp_dbn_tmt = setTimeout(() => {
+			App.Actions.DB.update_db_databasename_hint(evt.target);
 		}, 100);
-	});
+	};
+
+	input.addEventListener('keypress', updateTimeout);
+	input.addEventListener('input', updateTimeout);
 };
 
 //

web/js/pages/add_dns_rec.js

@@ -1,50 +1,50 @@
-//
-//
-// Updates database dns record dynamically, showing its full domain path
-App.Actions.DB.update_dns_record_hint = function (elm, hint) {
-	const domain = $('input[name="v_domain"]').val();
-	// clean hint
-	if (hint.trim() == '') {
-		$(elm).parent().find('.hint').text('');
+// Updates database DNS record dynamically, showing its full domain path
+App.Actions.DB.update_dns_record_hint = (input) => {
+	const domainInput = document.querySelector('input[name="v_domain"]');
+	const hintElement = input.parentElement.querySelector('.hint');
+
+	// Clean hint
+	let hint = input.value.trim();
+
+	if (hint === '') {
+		hintElement.textContent = '';
 	}
 
-	// set domain name without rec in case of @ entries
-	if (hint == '@') {
+	// Set domain name without rec in case of @ entries
+	if (hint === '@') {
 		hint = '';
 	}
 
-	// dont show pregix if domain name = rec value
-	if (hint == domain) {
+	// Don't show prefix if domain name equals rec value
+	if (hint === domainInput.value) {
 		hint = '';
 	}
 
-	// add dot at the end if needed
-	if (hint != '' && hint.slice(-1) != '.') {
+	// Add dot at the end if needed
+	if (hint !== '' && hint.slice(-1) !== '.') {
 		hint += '.';
 	}
 
-	$(elm)
-		.parent()
-		.find('.hint')
-		.text(hint + domain);
+	hintElement.textContent = hint + domainInput.value;
 };
 
-//
-// listener that triggers dns record name hint updating
-App.Listeners.DB.keypress_dns_rec_entry = function () {
-	var ref = $('input[name="v_rec"]');
-	var current_rec = ref.val();
-	if (current_rec.trim() != '') {
-		App.Actions.DB.update_dns_record_hint(ref, current_rec);
+// Listener that triggers dns record name hint updating
+App.Listeners.DB.keypress_dns_rec_entry = () => {
+	const input = document.querySelector('input[name="v_rec"]');
+
+	if (input.value.trim() != '') {
+		App.Actions.DB.update_dns_record_hint(input);
 	}
 
-	ref.bind('keypress input', function (evt) {
+	const updateTimeout = (evt) => {
 		clearTimeout(window.frp_usr_tmt);
-		window.frp_usr_tmt = setTimeout(function () {
-			var elm = $(evt.target);
-			App.Actions.DB.update_dns_record_hint(elm, $(elm).val());
+		window.frp_usr_tmt = setTimeout(() => {
+			App.Actions.DB.update_dns_record_hint(evt.target);
 		}, 100);
-	});
+	};
+
+	input.addEventListener('keypress', updateTimeout);
+	input.addEventListener('input', updateTimeout);
 };
 
 //

web/js/pages/add_package.js

@@ -1,8 +0,0 @@
-$('form[name="v_add_package"]').on('submit', function () {
-	$('input:disabled').each(function (i, elm) {
-		$(elm).attr('disabled', false);
-		if (Alpine.store('globals').isUnlimitedValue($(elm).val())) {
-			$(elm).val(Alpine.store('globals').UNLIM_VALUE);
-		}
-	});
-});

web/js/pages/edit_db.js

@@ -1,70 +1,66 @@
-//
-//
 // Updates database username dynamically, showing its prefix
-App.Actions.DB.update_db_username_hint = function (elm, hint) {
-	if (hint.trim() == '') {
-		$(elm).parent().find('.hint').text('');
+App.Actions.DB.update_db_username_hint = function (input) {
+	const hintElement = input.parentElement.querySelector('.hint');
+
+	if (input.value.trim() === '') {
+		hintElement.textContent = '';
 	}
-	$(elm)
-		.parent()
-		.find('.hint')
-		.text(Alpine.store('globals').DB_USER_PREFIX + hint);
+
+	hintElement.textContent = Alpine.store('globals').DB_USER_PREFIX + input.value;
 };
 
-//
-//
 // Updates database name dynamically, showing its prefix
-App.Actions.DB.update_db_databasename_hint = function (elm, hint) {
-	if (hint.trim() == '') {
-		$(elm).parent().find('.hint').text('');
+App.Actions.DB.update_db_databasename_hint = function (input) {
+	const hintElement = input.parentElement.querySelector('.hint');
+
+	if (input.value.trim() === '') {
+		hintElement.textContent = '';
 	}
-	$(elm)
-		.parent()
-		.find('.hint')
-		.text(Alpine.store('globals').DB_DBNAME_PREFIX + hint);
+
+	hintElement.textContent = Alpine.store('globals').DB_DBNAME_PREFIX + input.value;
 };
 
-//
-// listener that triggers database user hint updating
-App.Listeners.DB.keypress_db_username = function () {
-	var ref = $('input[name="v_dbuser"]');
-	var current_val = ref.val();
-	if (current_val.trim() != '') {
-		App.Actions.DB.update_db_username_hint(ref, current_val);
+// Listener that triggers database user hint updating
+App.Listeners.DB.keypress_db_username = () => {
+	const input = document.querySelector('input[name="v_dbuser"]');
+
+	if (input.value.trim() != '') {
+		App.Actions.DB.update_db_username_hint(input);
 	}
 
-	ref.bind('keypress input', function (evt) {
+	const updateTimeout = (evt) => {
 		clearTimeout(window.frp_usr_tmt);
-		window.frp_usr_tmt = setTimeout(function () {
-			var elm = $(evt.target);
-			App.Actions.DB.update_db_username_hint(elm, $(elm).val());
+		window.frp_usr_tmt = setTimeout(() => {
+			App.Actions.DB.update_db_username_hint(evt.target);
 		}, 100);
-	});
+	};
+
+	input.addEventListener('keypress', updateTimeout);
+	input.addEventListener('input', updateTimeout);
 };
 
-//
-// listener that triggers database name hint updating
-App.Listeners.DB.keypress_db_databasename = function () {
-	var ref = $('input[name="v_database"]');
-	var current_val = ref.val();
-	if (current_val.indexOf(Alpine.store('globals').DB_DBNAME_PREFIX) == 0) {
-		current_val = current_val.slice(
-			Alpine.store('globals').DB_DBNAME_PREFIX.length,
-			current_val.length
-		);
-		ref.val(current_val);
+// Listener that triggers database user hint updating
+App.Listeners.DB.keypress_db_databasename = () => {
+	const input = document.querySelector('input[name="v_database"]');
+	const prefixIndex = input.value.indexOf(Alpine.store('globals').DB_DBNAME_PREFIX);
+
+	if (prefixIndex === 0) {
+		input.value = input.value.slice(Alpine.store('globals').DB_DBNAME_PREFIX.length);
 	}
-	if (current_val.trim() != '') {
-		App.Actions.DB.update_db_username_hint(ref, current_val);
+
+	if (input.value.trim() != '') {
+		App.Actions.DB.update_db_databasename_hint(input);
 	}
 
-	ref.bind('keypress input', function (evt) {
+	const updateTimeout = (evt) => {
 		clearTimeout(window.frp_dbn_tmt);
-		window.frp_dbn_tmt = setTimeout(function () {
-			var elm = $(evt.target);
-			App.Actions.DB.update_db_databasename_hint(elm, $(elm).val());
+		window.frp_dbn_tmt = setTimeout(() => {
+			App.Actions.DB.update_db_databasename_hint(evt.target);
 		}, 100);
-	});
+	};
+
+	input.addEventListener('keypress', updateTimeout);
+	input.addEventListener('input', updateTimeout);
 };
 
 //

web/js/pages/edit_dns_rec.js

@@ -1,50 +1,50 @@
-//
-//
-// Updates database dns record dynamically, showing its full domain path
-App.Actions.DB.update_dns_record_hint = function (elm, hint) {
-	// clean hint
-	const domain = $('input[name="v_domain"]').val();
-	if (hint.trim() == '') {
-		$(elm).parent().find('.hint').text('');
+// Updates database DNS record dynamically, showing its full domain path
+App.Actions.DB.update_dns_record_hint = (input) => {
+	const domainInput = document.querySelector('input[name="v_domain"]');
+	const hintElement = input.parentElement.querySelector('.hint');
+
+	// Clean hint
+	let hint = input.value.trim();
+
+	if (hint === '') {
+		hintElement.textContent = '';
 	}
 
-	// set domain name without rec in case of @ entries
-	if (hint == '@') {
+	// Set domain name without rec in case of @ entries
+	if (hint === '@') {
 		hint = '';
 	}
 
-	// dont show prefix if domain name = rec value
-	if (hint == domain) {
+	// Don't show prefix if domain name equals rec value
+	if (hint === domainInput.value) {
 		hint = '';
 	}
 
-	// add dot at the end if needed
-	if (hint != '' && hint.slice(-1) != '.') {
+	// Add dot at the end if needed
+	if (hint !== '' && hint.slice(-1) !== '.') {
 		hint += '.';
 	}
 
-	$(elm)
-		.parent()
-		.find('.hint')
-		.text(hint + domain);
+	hintElement.textContent = hint + domainInput.value;
 };
 
-//
-// listener that triggers dns record name hint updating
-App.Listeners.DB.keypress_dns_rec_entry = function () {
-	var ref = $('input[name="v_rec"]');
-	var current_rec = ref.val();
-	if (current_rec.trim() != '') {
-		App.Actions.DB.update_dns_record_hint(ref, current_rec);
+// Listener that triggers dns record name hint updating
+App.Listeners.DB.keypress_dns_rec_entry = () => {
+	const input = document.querySelector('input[name="v_rec"]');
+
+	if (input.value.trim() != '') {
+		App.Actions.DB.update_dns_record_hint(input);
 	}
 
-	ref.bind('keypress input', function (evt) {
+	const updateTimeout = (evt) => {
 		clearTimeout(window.frp_usr_tmt);
-		window.frp_usr_tmt = setTimeout(function () {
-			var elm = $(evt.target);
-			App.Actions.DB.update_dns_record_hint(elm, $(elm).val());
+		window.frp_usr_tmt = setTimeout(() => {
+			App.Actions.DB.update_dns_record_hint(evt.target);
 		}, 100);
-	});
+	};
+
+	input.addEventListener('keypress', updateTimeout);
+	input.addEventListener('input', updateTimeout);
 };
 
 //

web/js/pages/edit_package.js

@@ -1,8 +0,0 @@
-App.Listeners.PACKAGE.submit = function () {
-	$('input:disabled').each(function (i, elm) {
-		$(elm).attr('disabled', false);
-		if (Alpine.store('globals').isUnlimitedValue($(elm).val())) {
-			$(elm).val(Alpine.store('globals').UNLIM_VALUE);
-		}
-	});
-};

web/js/src/unlimitedInput.js

@@ -1,9 +1,9 @@
-// Adds listeners for "unlimited" input toggles
 export default function handleUnlimitedInput() {
+	// Add listeners to "unlimited" input toggles
 	document.querySelectorAll('.js-unlimited-toggle').forEach((toggleButton) => {
 		const input = toggleButton.parentElement.querySelector('input');
 
-		if (Alpine.store('globals').isUnlimitedValue(input.value)) {
+		if (isUnlimitedValue(input.value)) {
 			enableInput(input, toggleButton);
 		} else {
 			disableInput(input, toggleButton);
@@ -13,6 +13,23 @@ export default function handleUnlimitedInput() {
 			toggleInput(input, toggleButton);
 		});
 	});
+
+	// Enable any disabled unlimited inputs before submitting
+	// the page form, and set their value to "unlimited"
+	document.querySelector('form').addEventListener('submit', () => {
+		document.querySelectorAll('input:disabled').forEach((input) => {
+			if (isUnlimitedValue(input.value)) {
+				input.disabled = false;
+				input.value = Alpine.store('globals').UNLIM_VALUE;
+			}
+		});
+	});
+}
+
+function isUnlimitedValue(value) {
+	const { UNLIM_VALUE, UNLIM_TRANSLATED_VALUE } = Alpine.store('globals');
+	const trimmedValue = value.trim();
+	return trimmedValue === UNLIM_VALUE || trimmedValue === UNLIM_TRANSLATED_VALUE;
 }
 
 function enableInput(input, toggleButton) {
@@ -28,7 +45,7 @@ function disableInput(input, toggleButton) {
 	if (previousValue) {
 		input.value = previousValue;
 	}
-	if (Alpine.store('globals').isUnlimitedValue(input.value)) {
+	if (isUnlimitedValue(input.value)) {
 		input.value = '0';
 	}
 	input.disabled = false;

web/templates/includes/js.php

@@ -30,10 +30,7 @@
 			NOTIFICATIONS_EMPTY: '<?= _("no notifications") ?>',
 			NOTIFICATIONS_DELETE_ALL: '<?= _("Delete all notifications") ?>',
 			CONFIRM_LEAVE_PAGE: '<?= _("LEAVE_PAGE_CONFIRMATION") ?>',
-			ERROR_MESSAGE: '<?= !empty($_SESSION['error_msg']) ? htmlentities($_SESSION['error_msg']) : '' ?>',
-			isUnlimitedValue(value) {
-				return value.trim() == this.UNLIM_VALUE || value.trim() == this.UNLIM_TRANSLATED_VALUE;
-			}
+			ERROR_MESSAGE: '<?= !empty($_SESSION['error_msg']) ? htmlentities($_SESSION['error_msg']) : '' ?>'
 		});
 	})
 </script>

web/templates/pages/edit_package.php

@@ -25,7 +25,6 @@
 			showDatabaseOptions: false,
 			showSystemOptions: false,
 		}"
-		x-on:submit="App.Listeners.PACKAGE.submit()"
 		id="vstobjects"
 		name="v_edit_package"
 		method="post"