Refactor add/remove nameserver JS (#3468)

* Simplify confirmation dialog JS

* Refactor add/remove nameserver JS

To reduce duplication.

* Further refactor password input JS

* Tidy JS

web/js/main.js

@@ -228,17 +228,60 @@ document.addEventListener('alpine:init', () => {
 	}));
 });
 
+// Add new name server input
+const addNsButton = document.querySelector('.js-add-ns');
+if (addNsButton) {
+	addNsButton.addEventListener('click', () => {
+		const currentNsInputs = document.querySelectorAll('input[name^=v_ns]');
+		const inputCount = currentNsInputs.length;
+
+		if (inputCount < 8) {
+			const template = currentNsInputs[0].parentElement.cloneNode(true);
+			const templateNsInput = template.querySelector('input');
+
+			templateNsInput.removeAttribute('value');
+			templateNsInput.name = `v_ns${inputCount + 1}`;
+			addNsButton.insertAdjacentElement('beforebegin', template);
+		}
+
+		if (inputCount === 7) {
+			addNsButton.classList.add('u-hidden');
+		}
+	});
+}
+
+// Remove name server input
+document.querySelectorAll('.js-remove-ns').forEach((removeNsButton) => {
+	removeNsButton.addEventListener('click', () => {
+		removeNsButton.parentElement.remove();
+		const currentNsInputs = document.querySelectorAll('input[name^=v_ns]');
+		currentNsInputs.forEach((input, index) => (input.name = `v_ns${index + 1}`));
+		document.querySelector('.js-add-ns').classList.remove('u-hidden');
+	});
+});
+
 // Intercept clicks on .js-confirm-action links and display dialog
-document.addEventListener('click', (evt) => {
-	const triggerLink = evt.target.closest('.js-confirm-action');
-	if (!triggerLink) {
-		return;
-	}
-	evt.preventDefault();
+document.querySelectorAll('.js-confirm-action').forEach((triggerLink) => {
+	triggerLink.addEventListener('click', (evt) => {
+		evt.preventDefault();
+
+		const title = triggerLink.dataset.confirmTitle;
+		const message = triggerLink.dataset.confirmMessage;
+		const targetUrl = triggerLink.getAttribute('href');
 
-	const title = triggerLink.getAttribute('data-confirm-title');
-	const message = triggerLink.getAttribute('data-confirm-message');
-	const targetUrl = triggerLink.getAttribute('href');
+		VE.helpers.createConfirmationDialog({ title, message, targetUrl });
+	});
+});
+
+// Listen for changes to password inputs and update the password strength
+document.querySelectorAll('.js-password-input').forEach((passwordInput) => {
+	const updateTimeout = (evt) => {
+		clearTimeout(window.frp_usr_tmt);
+		window.frp_usr_tmt = setTimeout(() => {
+			VE.helpers.recalculatePasswordStrength(evt.target);
+		}, 100);
+	};
 
-	VE.helpers.createConfirmationDialog({ title, message, targetUrl });
+	passwordInput.addEventListener('keypress', updateTimeout);
+	passwordInput.addEventListener('input', updateTimeout);
 });

web/js/pages/add_cron.js

@@ -24,8 +24,7 @@ if (tabs) {
 	});
 }
 
-const generateCronButtons = document.querySelectorAll('.js-generate-cron');
-generateCronButtons.forEach((button) => {
+document.querySelectorAll('.js-generate-cron').forEach((button) => {
 	button.addEventListener('click', () => {
 		const fieldset = button.closest('fieldset');
 		const inputNames = ['min', 'hour', 'day', 'month', 'wday'];

web/js/pages/add_db.js

@@ -60,18 +60,6 @@ App.Listeners.DB.keypress_db_databasename = function () {
 	});
 };
 
-App.Listeners.DB.keypress_v_password = function () {
-	var ref = $('input[name="v_password"]');
-	ref.bind('keypress input', function (evt) {
-		clearTimeout(window.frp_usr_tmt);
-		window.frp_usr_tmt = setTimeout(function () {
-			VE.helpers.recalculatePasswordStrength(evt.target);
-		}, 100);
-	});
-};
-
-App.Listeners.DB.keypress_v_password();
-
 //
 // Page entry point
 // Trigger listeners
@@ -79,7 +67,7 @@ App.Listeners.DB.keypress_db_username();
 App.Listeners.DB.keypress_db_databasename();
 
 applyRandomPassword = function (min_length = 16) {
-	const passwordInput = document.querySelector('input[name=v_password]');
+	const passwordInput = document.querySelector('.js-password-input');
 	if (passwordInput) {
 		passwordInput.value = randomString(min_length);
 		VE.helpers.recalculatePasswordStrength(passwordInput);

web/js/pages/add_dns.js

@@ -1,27 +0,0 @@
-$(document).ready(function () {
-	$('.js-add-ns').click(function () {
-		var n = $('input[name^=v_ns]').length;
-		if (n < 8) {
-			var t = $($('input[name=v_ns1]').parents('div')[0]).clone(true, true);
-			t.find('input').attr({ value: '', name: 'v_ns' + (n + 1) });
-			t.find('span').show();
-			$('.js-add-ns').before(t);
-		}
-		if (n == 7) {
-			$('.js-add-ns').addClass('u-hidden');
-		}
-	});
-
-	$('.js-remove-ns').click(function () {
-		$(this).parents('div')[0].remove();
-		$('input[name^=v_ns]').each(function (i, ns) {
-			$(ns).attr({ name: 'v_ns' + (i + 1) });
-			i < 2 ? $(ns).parent().find('span').hide() : $(ns).parent().find('span').show();
-		});
-		$('.js-add-ns').removeClass('u-hidden');
-	});
-
-	$('input[name^=v_ns]').each(function (i, ns) {
-		i < 2 ? $(ns).parent().find('span').hide() : $(ns).parent().find('span').show();
-	});
-});

web/js/pages/add_mail_acc.js

@@ -17,21 +17,9 @@ $('form[name="v_quota"]').on('submit', function () {
 	});
 });
 
-App.Listeners.MAIL_ACC.keypress_v_password = function () {
-	var ref = $('input[name="v_password"]');
-	ref.bind('keypress input', function (evt) {
-		clearTimeout(window.frp_usr_tmt);
-		window.frp_usr_tmt = setTimeout(function () {
-			VE.helpers.recalculatePasswordStrength(evt.target);
-		}, 100);
-	});
-};
-
-App.Listeners.MAIL_ACC.keypress_v_password();
-
 applyRandomPassword = function (min_length = 16) {
 	const randomPassword = randomString(min_length);
-	const passwordInput = document.querySelector('input[name=v_password]');
+	const passwordInput = document.querySelector('.js-password-input');
 	if (passwordInput) {
 		passwordInput.value = randomPassword;
 		VE.helpers.recalculatePasswordStrength(passwordInput);
@@ -66,7 +54,7 @@ generate_mail_credentials = function () {
 
 $(document).ready(function () {
 	$('.js-account-output').text($('input[name=v_account]').val());
-	$('.js-password-output').text($('input[name=v_password]').val());
+	$('.js-password-output').text($('.js-password-input').val());
 	generate_mail_credentials();
 
 	$('input[name=v_account]').change(function () {
@@ -74,15 +62,15 @@ $(document).ready(function () {
 		generate_mail_credentials();
 	});
 
-	$('input[name=v_password]').change(function () {
-		if ($('input[name=v_password]').attr('type') == 'text')
+	$('.js-password-input').change(function () {
+		if ($('.js-password-input').attr('type') == 'text')
 			$('.js-password-output').text($(this).val());
 		else $('.js-password-output').text(Array($(this).val().length + 1).join('*'));
 		generate_mail_credentials();
 	});
 
 	$('.toggle-psw-visibility-icon').click(function () {
-		$('.js-password-output').text($('input[name=v_password]').val());
+		$('.js-password-output').text($('.js-password-input').val());
 		generate_mail_credentials();
 	});
 

web/js/pages/add_package.js

@@ -6,31 +6,3 @@ $('form[name="v_add_package"]').on('submit', function () {
 		}
 	});
 });
-
-$(document).ready(function () {
-	$('.js-add-ns').click(function () {
-		var n = $('input[name^=v_ns]').length;
-		if (n < 8) {
-			var t = $($('input[name=v_ns1]').parents('div')[0]).clone(true, true);
-			t.find('input').attr({ value: '', name: 'v_ns' + (n + 1) });
-			t.find('span').show();
-			$('.js-add-ns').before(t);
-		}
-		if (n == 7) {
-			$('.js-add-ns').addClass('u-hidden');
-		}
-	});
-
-	$('.js-remove-ns').click(function () {
-		$(this).parents('div')[0].remove();
-		$('input[name^=v_ns]').each(function (i, ns) {
-			$(ns).attr({ name: 'v_ns' + (i + 1) });
-			i < 2 ? $(ns).parent().find('span').hide() : $(ns).parent().find('span').show();
-		});
-		$('.js-add-ns').removeClass('u-hidden');
-	});
-
-	$('input[name^=v_ns]').each(function (i, ns) {
-		i < 2 ? $(ns).parent().find('span').hide() : $(ns).parent().find('span').show();
-	});
-});

web/js/pages/add_user.js

@@ -14,21 +14,9 @@ $(function () {
 });
 
 applyRandomPassword = function (min_length = 16) {
-	const passwordInput = document.querySelector('input[name=v_password]');
+	const passwordInput = document.querySelector('.js-password-input');
 	if (passwordInput) {
 		passwordInput.value = randomString(min_length);
 		VE.helpers.recalculatePasswordStrength(passwordInput);
 	}
 };
-
-App.Listeners.WEB.keypress_v_password = function () {
-	var ref = $('input[name="v_password"]');
-	ref.bind('keypress input', function (evt) {
-		clearTimeout(window.frp_usr_tmt);
-		window.frp_usr_tmt = setTimeout(function () {
-			VE.helpers.recalculatePasswordStrength(evt.target);
-		}, 100);
-	});
-};
-
-App.Listeners.WEB.keypress_v_password();

web/js/pages/edit_cron.js

@@ -24,8 +24,7 @@ if (tabs) {
 	});
 }
 
-const generateCronButtons = document.querySelectorAll('.js-generate-cron');
-generateCronButtons.forEach((button) => {
+document.querySelectorAll('.js-generate-cron').forEach((button) => {
 	button.addEventListener('click', () => {
 		const fieldset = button.closest('fieldset');
 		const inputNames = ['min', 'hour', 'day', 'month', 'wday'];

web/js/pages/edit_db.js

@@ -67,18 +67,6 @@ App.Listeners.DB.keypress_db_databasename = function () {
 	});
 };
 
-App.Listeners.DB.keypress_v_password = function () {
-	var ref = $('input[name="v_password"]');
-	ref.bind('keypress input', function (evt) {
-		clearTimeout(window.frp_usr_tmt);
-		window.frp_usr_tmt = setTimeout(function () {
-			VE.helpers.recalculatePasswordStrength(evt.target);
-		}, 100);
-	});
-};
-
-App.Listeners.DB.keypress_v_password();
-
 //
 // Page entry point
 // Trigger listeners
@@ -86,7 +74,7 @@ App.Listeners.DB.keypress_db_username();
 App.Listeners.DB.keypress_db_databasename();
 
 applyRandomPassword = function (min_length = 16) {
-	const passwordInput = document.querySelector('input[name=v_password]');
+	const passwordInput = document.querySelector('.js-password-input');
 	if (passwordInput) {
 		passwordInput.value = randomString(min_length);
 		VE.helpers.recalculatePasswordStrength(passwordInput);

web/js/pages/edit_mail_acc.js

@@ -1,13 +1,3 @@
-App.Listeners.MAIL_ACC.keypress_v_password = function () {
-	var ref = $('input[name="v_password"]');
-	ref.bind('keypress input', function (evt) {
-		clearTimeout(window.frp_usr_tmt);
-		window.frp_usr_tmt = setTimeout(function () {
-			VE.helpers.recalculatePasswordStrength(evt.target);
-		}, 100);
-	});
-};
-
 $('#v_blackhole').on('click', function () {
 	if ($('#v_blackhole').is(':checked')) {
 		$('#v_fwd').prop('disabled', true);
@@ -19,11 +9,9 @@ $('#v_blackhole').on('click', function () {
 	}
 });
 
-App.Listeners.MAIL_ACC.keypress_v_password();
-
 applyRandomPassword = function (min_length = 16) {
 	const randomPassword = randomString(min_length);
-	const passwordInput = document.querySelector('input[name=v_password]');
+	const passwordInput = document.querySelector('.js-password-input');
 	if (passwordInput) {
 		passwordInput.value = randomPassword;
 		VE.helpers.recalculatePasswordStrength(passwordInput);
@@ -60,7 +48,7 @@ generate_mail_credentials = function () {
 
 $(document).ready(function () {
 	$('.js-account-output').text($('input[name=v_account]').val());
-	$('.js-password-output').text($('input[name=v_password]').val());
+	$('.js-password-output').text($('.js-password-input').val());
 	generate_mail_credentials();
 
 	$('input[name=v_account]').change(function () {
@@ -68,18 +56,17 @@ $(document).ready(function () {
 		generate_mail_credentials();
 	});
 
-	$('input[name=v_password]').change(function () {
-		if ($('input[name=v_password]').attr('type') == 'text')
+	$('.js-password-input').change(function () {
+		if ($('.js-password-input').attr('type') == 'text')
 			$('.js-password-output').text($(this).val());
 		else $('.js-password-output').text(Array($(this).val().length + 1).join('*'));
 		generate_mail_credentials();
 	});
 
 	$('.toggle-psw-visibility-icon').click(function () {
-		if ($('input[name=v_password]').attr('type') == 'text')
-			$('.js-password-output').text($('input[name=v_password]').val());
-		else
-			$('.js-password-output').text(Array($('input[name=v_password]').val().length + 1).join('*'));
+		if ($('.js-password-input').attr('type') == 'text')
+			$('.js-password-output').text($('.js-password-input').val());
+		else $('.js-password-output').text(Array($('.js-password-input').val().length + 1).join('*'));
 		generate_mail_credentials();
 	});
 

web/js/pages/edit_package.js

@@ -6,31 +6,3 @@ App.Listeners.PACKAGE.submit = function () {
 		}
 	});
 };
-
-$(document).ready(function () {
-	$('.js-add-ns').click(function () {
-		var n = $('input[name^=v_ns]').length;
-		if (n < 8) {
-			var t = $($('input[name=v_ns1]').parents('div')[0]).clone(true, true);
-			t.find('input').attr({ value: '', name: 'v_ns' + (n + 1) });
-			t.find('span').show();
-			$('.js-add-ns').before(t);
-		}
-		if (n == 7) {
-			$('.js-add-ns').addClass('u-hidden');
-		}
-	});
-
-	$('.js-remove-ns').click(function () {
-		$(this).parents('div')[0].remove();
-		$('input[name^=v_ns]').each(function (i, ns) {
-			$(ns).attr({ name: 'v_ns' + (i + 1) });
-			i < 2 ? $(ns).parent().find('span').hide() : $(ns).parent().find('span').show();
-		});
-		$('.js-add-ns').removeClass('u-hidden');
-	});
-
-	$('input[name^=v_ns]').each(function (i, ns) {
-		i < 2 ? $(ns).parent().find('span').hide() : $(ns).parent().find('span').show();
-	});
-});

web/js/pages/edit_user.js

@@ -1,49 +1,7 @@
 applyRandomPassword = function (min_length = 16) {
-	const passwordInput = document.querySelector('input[name=v_password]');
+	const passwordInput = document.querySelector('.js-password-input');
 	if (passwordInput) {
 		passwordInput.value = randomString(min_length);
 		VE.helpers.recalculatePasswordStrength(passwordInput);
 	}
 };
-
-App.Listeners.WEB.keypress_v_password = () => {
-	const updateTimeout = (evt) => {
-		clearTimeout(window.frp_usr_tmt);
-		window.frp_usr_tmt = setTimeout(() => {
-			VE.helpers.recalculatePasswordStrength(evt.target);
-		}, 100);
-	};
-
-	const passwordInput = document.querySelector('input[name="v_password"]');
-	passwordInput.addEventListener('keypress', updateTimeout);
-	passwordInput.addEventListener('input', updateTimeout);
-};
-App.Listeners.WEB.keypress_v_password();
-
-(function () {
-	$('.js-add-ns').click(function () {
-		var n = $('input[name^=v_ns]').length;
-		if (n < 8) {
-			var t = $($('input[name=v_ns1]').parents('div')[0]).clone(true, true);
-			t.find('input').attr({ value: '', name: 'v_ns' + (n + 1) });
-			t.find('span').show();
-			$('.js-add-ns').before(t);
-		}
-		if (n == 7) {
-			$('.js-add-ns').addClass('u-hidden');
-		}
-	});
-
-	$('.js-remove-ns').click(function () {
-		$(this).parents('div')[0].remove();
-		$('input[name^=v_ns]').each(function (i, ns) {
-			$(ns).attr({ name: 'v_ns' + (i + 1) });
-			i < 2 ? $(ns).parent().find('span').hide() : $(ns).parent().find('span').show();
-		});
-		$('.js-add-ns').removeClass('u-hidden');
-	});
-
-	$('input[name^=v_ns]').each(function (i, ns) {
-		i < 2 ? $(ns).parent().find('span').hide() : $(ns).parent().find('span').show();
-	});
-})();

web/js/pages/list_rrd.js

@@ -4,8 +4,8 @@ async function main() {
 	const chartCanvases = document.querySelectorAll('.js-rrd-chart');
 
 	for (const chartCanvas of chartCanvases) {
-		const service = chartCanvas.getAttribute('data-service');
-		const period = chartCanvas.getAttribute('data-period');
+		const service = chartCanvas.dataset.service;
+		const period = chartCanvas.dataset.period;
 		const rrdData = await fetchRrdData(service, period);
 		const chartData = prepareChartData(rrdData, period);
 		const chartOptions = getChartOptions(rrdData.unit);

web/js/shortcuts.js

@@ -134,7 +134,7 @@ document.addEventListener('alpine:init', () => {
 
 			if (Alpine.store('form').dirty && redirect) {
 				VE.helpers.createConfirmationDialog({
-					message: document.querySelector('body').getAttribute('data-confirm-leave-page'),
+					message: Alpine.store('globals').CONFIRM_LEAVE_PAGE,
 					targetUrl: redirect,
 				});
 			} else if (document.querySelector('form#vstobjects .button.cancel')) {
@@ -163,7 +163,7 @@ document.addEventListener('alpine:init', () => {
 				}
 				if (Alpine.store('form').dirty) {
 					VE.helpers.createConfirmationDialog({
-						message: document.querySelector('body').getAttribute('data-confirm-leave-page'),
+						message: Alpine.store('globals').CONFIRM_LEAVE_PAGE,
 						targetUrl: target.href,
 					});
 				} else {
@@ -181,7 +181,7 @@ document.addEventListener('alpine:init', () => {
 				}
 				if (Alpine.store('form').dirty) {
 					VE.helpers.createConfirmationDialog({
-						message: document.querySelector('body').getAttribute('data-confirm-leave-page'),
+						message: Alpine.store('globals').CONFIRM_LEAVE_PAGE,
 						targetUrl: target.href,
 					});
 				} else {
@@ -199,7 +199,7 @@ document.addEventListener('alpine:init', () => {
 				}
 				if (Alpine.store('form').dirty) {
 					VE.helpers.createConfirmationDialog({
-						message: document.querySelector('body').getAttribute('data-confirm-leave-page'),
+						message: Alpine.store('globals').CONFIRM_LEAVE_PAGE,
 						targetUrl: target.href,
 					});
 				} else {
@@ -217,7 +217,7 @@ document.addEventListener('alpine:init', () => {
 				}
 				if (Alpine.store('form').dirty) {
 					VE.helpers.createConfirmationDialog({
-						message: document.querySelector('body').getAttribute('data-confirm-leave-page'),
+						message: Alpine.store('globals').CONFIRM_LEAVE_PAGE,
 						targetUrl: target.href,
 					});
 				} else {
@@ -235,7 +235,7 @@ document.addEventListener('alpine:init', () => {
 				}
 				if (Alpine.store('form').dirty) {
 					VE.helpers.createConfirmationDialog({
-						message: document.querySelector('body').getAttribute('data-confirm-leave-page'),
+						message: Alpine.store('globals').CONFIRM_LEAVE_PAGE,
 						targetUrl: target.href,
 					});
 				} else {
@@ -253,7 +253,7 @@ document.addEventListener('alpine:init', () => {
 				}
 				if (Alpine.store('form').dirty) {
 					VE.helpers.createConfirmationDialog({
-						message: document.querySelector('body').getAttribute('data-confirm-leave-page'),
+						message: Alpine.store('globals').CONFIRM_LEAVE_PAGE,
 						targetUrl: target.href,
 					});
 				} else {
@@ -271,7 +271,7 @@ document.addEventListener('alpine:init', () => {
 				}
 				if (Alpine.store('form').dirty) {
 					VE.helpers.createConfirmationDialog({
-						message: document.querySelector('body').getAttribute('data-confirm-leave-page'),
+						message: Alpine.store('globals').CONFIRM_LEAVE_PAGE,
 						targetUrl: target.href,
 					});
 				} else {
@@ -420,7 +420,7 @@ document.addEventListener('alpine:init', () => {
 						dialog.querySelector('button[type="submit"]').click();
 					} else {
 						VE.helpers.createConfirmationDialog({
-							message: document.querySelector('body').getAttribute('data-confirm-leave-page'),
+							message: Alpine.store('globals').CONFIRM_LEAVE_PAGE,
 							targetUrl: document.querySelector(`${VE.navigation.state.menu_selector}.focus a`)
 								.href,
 						});

web/templates/header.php

@@ -9,7 +9,4 @@ require $_SERVER["HESTIA"] . "/web/templates/includes/js.php";
 ?>
 </head>
 
-<body
-	class="body-<?= strtolower($TAB) ?> lang-<?= $_SESSION["language"] ?>"
-	data-confirm-leave-page="<?= _("LEAVE_PAGE_CONFIRMATION") ?>"
->
+<body class="body-<?= strtolower($TAB) ?> lang-<?= $_SESSION["language"] ?>">

web/templates/includes/js.php

@@ -32,6 +32,7 @@
 			UNLIM_TRANSLATED_VALUE: '<?= _("unlimited") ?>',
 			NOTIFICATIONS_EMPTY: '<?= _("no notifications") ?>',
 			NOTIFICATIONS_DELETE_ALL: '<?= _("Delete all notifications") ?>',
+			CONFIRM_LEAVE_PAGE: '<?= _("LEAVE_PAGE_CONFIRMATION") ?>',
 			isUnlimitedValue(value) {
 				return value.trim() == this.UNLIM_VALUE || value.trim() == this.UNLIM_TRANSLATED_VALUE;
 			}