Refactor Add/Edit Database JS (#3511)

* Remove dead Add Web Domain JS

* Simplify globals

* Refactor Add/Edit Database JS

web/js/pages/add_db.js

@@ -1,59 +0,0 @@
-// Updates database username dynamically, showing its prefix
-App.Actions.DB.update_db_username_hint = function (input) {
-	const hintElement = input.parentElement.querySelector('.hint');
-
-	if (input.value.trim() === '') {
-		hintElement.textContent = '';
-	}
-
-	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 (input) {
-	const hintElement = input.parentElement.querySelector('.hint');
-
-	if (input.value.trim() === '') {
-		hintElement.textContent = '';
-	}
-
-	hintElement.textContent = Alpine.store('globals').DB_DBNAME_PREFIX + input.value;
-};
-
-// 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);
-	}
-
-	input.addEventListener(
-		'input',
-		Hestia.helpers.debounce((evt) => {
-			App.Actions.DB.update_db_username_hint(evt.target);
-		}, 100)
-	);
-};
-
-// 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);
-	}
-
-	input.addEventListener(
-		'input',
-		Hestia.helpers.debounce((evt) => {
-			App.Actions.DB.update_db_databasename_hint(evt.target);
-		}, 100)
-	);
-};
-
-//
-// Page entry point
-// Trigger listeners
-App.Listeners.DB.keypress_db_username();
-App.Listeners.DB.keypress_db_databasename();

web/js/pages/add_web.js

@@ -1,26 +0,0 @@
-App.Listeners.WEB.keypress_domain_name = function () {
-	$('#v_domain').bind('keypress input', function () {
-		clearTimeout(window.frpUserTimeout);
-		window.frpUserTimeout = setTimeout(function () {
-			$('#v-custom-doc-domain-main').text($('#v_domain').val());
-			$('#v-custom-doc-domain-main').val($('#v_domain').val());
-			App.Actions.WEB.update_custom_doc_root(13, 12);
-		}, 100);
-	});
-};
-
-//
-// Page entry point
-App.Listeners.WEB.keypress_domain_name();
-
-$(function () {
-	$('#v_domain').change(function () {
-		var prefix = 'www.';
-		if (document.getElementById('v_domain').value.split('.').length > 2) {
-			document.getElementById('v_aliases').value = '';
-		} else {
-			document.getElementById('v_aliases').value =
-				prefix + document.getElementById('v_domain').value;
-		}
-	});
-});

web/js/pages/edit_db.js

@@ -1,64 +0,0 @@
-// Updates database username dynamically, showing its prefix
-App.Actions.DB.update_db_username_hint = function (input) {
-	const hintElement = input.parentElement.querySelector('.hint');
-
-	if (input.value.trim() === '') {
-		hintElement.textContent = '';
-	}
-
-	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 (input) {
-	const hintElement = input.parentElement.querySelector('.hint');
-
-	if (input.value.trim() === '') {
-		hintElement.textContent = '';
-	}
-
-	hintElement.textContent = Alpine.store('globals').DB_DBNAME_PREFIX + input.value;
-};
-
-// 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);
-	}
-
-	input.addEventListener(
-		'input',
-		Hestia.helpers.debounce((evt) => {
-			App.Actions.DB.update_db_username_hint(evt.target);
-		}, 100)
-	);
-};
-
-// 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 (input.value.trim() != '') {
-		App.Actions.DB.update_db_databasename_hint(input);
-	}
-
-	input.addEventListener(
-		'input',
-		Hestia.helpers.debounce((evt) => {
-			App.Actions.DB.update_db_databasename_hint(evt.target);
-		}, 100)
-	);
-};
-
-//
-// Page entry point
-// Trigger listeners
-App.Listeners.DB.keypress_db_username();
-App.Listeners.DB.keypress_db_databasename();

web/js/pages/edit_web.js

@@ -3,7 +3,7 @@ App.Actions.WEB.update_custom_doc_root = function () {
 	var domain = $('select[name="v-custom-doc-domain"]').val();
 	var folder = $('input[name="v-custom-doc-folder"]').val();
 
-	$('.custom_docroot_hint').html(prepath + domain + '/public_html/' + folder);
+	$('.js-custom-docroot-hint').html(prepath + domain + '/public_html/' + folder);
 };
 App.Listeners.DB.keypress_custom_folder = function () {
 	var ref = $('input[name="v-custom-doc-folder"]');
@@ -48,7 +48,7 @@ App.Actions.WEB.update_ftp_username_hint = function (elm, hint) {
 	$(elm)
 		.parent()
 		.find('.hint')
-		.text(Alpine.store('globals').FTP_USER_PREFIX + hint);
+		.text(Alpine.store('globals').USER_PREFIX + hint);
 };
 
 App.Listeners.WEB.keypress_ftp_username = function () {

web/js/src/copyCreds.js

@@ -22,9 +22,7 @@ function monitorAndUpdate(inputSelector, outputSelector) {
 
 	inputElement.addEventListener(
 		'input',
-		debounce((evt) => {
-			updateOutput(evt.target.value);
-		}, 100)
+		debounce((evt) => updateOutput(evt.target.value))
 	);
 	updateOutput(inputElement.value);
 }

web/js/src/databaseHints.js

@@ -0,0 +1,44 @@
+import { debounce } from './helpers';
+
+// Attach listener to database "Name" and "Username" fields to update their hints
+export default function handleDatabaseHints() {
+	const usernameInput = document.querySelector('.js-db-hint-username');
+	const databaseNameInput = document.querySelector('.js-db-hint-database-name');
+
+	if (!usernameInput || !databaseNameInput) {
+		return;
+	}
+
+	removeUserPrefix(databaseNameInput);
+	attachUpdateHintListener(usernameInput);
+	attachUpdateHintListener(databaseNameInput);
+}
+
+// Remove prefix from "Database" input if it exists during initial load (for editing)
+function removeUserPrefix(input) {
+	const prefixIndex = input.value.indexOf(Alpine.store('globals').USER_PREFIX);
+	if (prefixIndex === 0) {
+		input.value = input.value.slice(Alpine.store('globals').USER_PREFIX.length);
+	}
+}
+
+function attachUpdateHintListener(input) {
+	if (input.value.trim() !== '') {
+		updateHint(input);
+	}
+
+	input.addEventListener(
+		'input',
+		debounce((evt) => updateHint(evt.target))
+	);
+}
+
+function updateHint(input) {
+	const hintElement = input.parentElement.querySelector('.hint');
+
+	if (input.value.trim() === '') {
+		hintElement.textContent = '';
+	}
+
+	hintElement.textContent = Alpine.store('globals').USER_PREFIX + input.value;
+}

web/js/src/dnsRecordHint.js

@@ -14,15 +14,13 @@ export default function handleDnsRecordHint() {
 
 	recordInput.addEventListener(
 		'input',
-		debounce((evt) => {
-			updateHint(evt.target);
-		}, 100)
+		debounce((evt) => updateHint(evt.target))
 	);
 }
 
 // Update DNS "Record" field hint
 function updateHint(input) {
-	const domainInput = document.querySelector('input[name="v_domain"]');
+	const domainInput = document.querySelector('.js-dns-record-domain');
 	const hintElement = input.parentElement.querySelector('.hint');
 	let hint = input.value.trim();
 

web/js/src/helpers.js

@@ -19,7 +19,7 @@ export function randomPassword(length = 16) {
 }
 
 // Debounces a function to avoid excessive calls
-export function debounce(func, wait) {
+export function debounce(func, wait = 100) {
 	let timeout;
 	return function (...args) {
 		clearTimeout(timeout);

web/js/src/main.js

@@ -3,6 +3,7 @@ import focusFirstInput from './focusFirstInput';
 import handleConfirmationDialogs from './confirmationDialog';
 import handleCopyCreds from './copyCreds';
 import handleCronGenerator from './cronGenerator';
+import handleDatabaseHints from './databaseHints';
 import handleDiscardAllMail from './discardAllMail';
 import handleDnsRecordHint from './dnsRecordHint';
 import handleErrorMessage from './errorHandler';
@@ -44,6 +45,7 @@ function initListeners() {
 
 document.addEventListener('alpine:init', () => {
 	alpineInit();
+	handleDatabaseHints();
 	handleErrorMessage();
 	handleIpListDataSource();
 	handleShortcuts();

web/js/src/passwordInput.js

@@ -7,9 +7,7 @@ export default function handlePasswordInput() {
 	document.querySelectorAll('.js-password-input').forEach((passwordInput) => {
 		passwordInput.addEventListener(
 			'input',
-			debounce((evt) => {
-				recalculatePasswordStrength(evt.target);
-			}, 100)
+			debounce((evt) => recalculatePasswordStrength(evt.target))
 		);
 	});
 

web/js/src/syncEmailValues.js

@@ -21,9 +21,7 @@ export default function handleSyncEmailValues() {
 
 	emailInput.addEventListener(
 		'input',
-		debounce(() => {
-			syncEmailValues();
-		}, 100)
+		debounce(() => syncEmailValues())
 	);
 	sendWelcomeEmailCheckbox.addEventListener('change', syncEmailValues);
 }

web/js/src/unlimitedInput.js

@@ -20,21 +20,20 @@ export function enableUnlimitedInputs() {
 	document.querySelectorAll('input:disabled').forEach((input) => {
 		if (isUnlimitedValue(input.value)) {
 			input.disabled = false;
-			input.value = Alpine.store('globals').UNLIM_VALUE;
+			input.value = 'unlimited';
 		}
 	});
 }
 
 function isUnlimitedValue(value) {
-	const { UNLIM_VALUE, UNLIM_TRANSLATED_VALUE } = Alpine.store('globals');
 	const trimmedValue = value.trim();
-	return trimmedValue === UNLIM_VALUE || trimmedValue === UNLIM_TRANSLATED_VALUE;
+	return trimmedValue === 'unlimited' || trimmedValue === Alpine.store('globals').UNLIMITED;
 }
 
 function enableInput(input, toggleButton) {
 	toggleButton.classList.add('active');
 	input.dataset.prevValue = input.value;
-	input.value = Alpine.store('globals').UNLIM_TRANSLATED_VALUE;
+	input.value = Alpine.store('globals').UNLIMITED;
 	input.disabled = true;
 }
 

web/templates/includes/js.php

@@ -22,12 +22,9 @@
 	document.documentElement.classList.replace('no-js', 'js');
 	document.addEventListener('alpine:init', () => {
 		Alpine.store('globals', {
-			FTP_USER_PREFIX: '<?= $user_plain ?>_',
-			DB_USER_PREFIX: '<?= $user_plain ?>_',
-			DB_DBNAME_PREFIX: '<?= $user_plain ?>_',
-			UNLIM_VALUE: 'unlimited',
-			UNLIM_TRANSLATED_VALUE: '<?= _("unlimited") ?>',
-			NOTIFICATIONS_EMPTY: '<?= _("no notifications") ?>',
+			USER_PREFIX: '<?= $user_plain ?>_',
+			UNLIMITED: '<?= _("Unlimited") ?>',
+			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']) : '' ?>',

web/templates/includes/panel.php

@@ -75,7 +75,7 @@
 							<template x-if="initialized && notifications.length == 0">
 								<li class="top-bar-notification-item empty">
 									<i class="fas fa-bell-slash icon-dim"></i>
-									<p><?= _("no notifications") ?></p>
+									<p><?= _("No notifications") ?></p>
 								</li>
 							</template>
 							<template x-for="notification in notifications" :key="notification.ID">

web/templates/pages/add_db.php

@@ -49,7 +49,7 @@
 				</p>
 				<div class="u-mb10">
 					<label for="v_database" class="form-label"><?= _("Database") ?></label>
-					<input type="text" class="form-control" name="v_database" id="v_database" value="<?= htmlentities(trim($v_database, "'")) ?>">
+					<input type="text" class="form-control js-db-hint-database-name" name="v_database" id="v_database" value="<?= htmlentities(trim($v_database, "'")) ?>">
 					<small class="hint"></small>
 				</div>
 				<div class="u-mb10">
@@ -69,7 +69,7 @@
 						<?= _("Username") ?>
 						<em><small>(<?= sprintf(_("maximum characters length, including prefix"), 32) ?>)</small></em>
 					</label>
-					<input type="text" class="form-control" name="v_dbuser" id="v_dbuser" value="<?= htmlentities(trim($v_dbuser, "'")) ?>">
+					<input type="text" class="form-control js-db-hint-username" name="v_dbuser" id="v_dbuser" value="<?= htmlentities(trim($v_dbuser, "'")) ?>">
 					<small class="hint"></small>
 				</div>
 				<div class="u-mb10">

web/templates/pages/add_dns_rec.php

@@ -26,7 +26,7 @@
 			<?php show_alert_message($_SESSION); ?>
 			<div class="u-mb10">
 				<label for="v_domain" class="form-label"><?= _("Domain") ?></label>
-				<input type="text" class="form-control" name="v_domain" id="v_domain" value="<?= htmlentities(trim($v_domain, "'")) ?>" disabled>
+				<input type="text" class="form-control js-dns-record-domain" name="v_domain" id="v_domain" value="<?= htmlentities(trim($v_domain, "'")) ?>" disabled>
 				<input type="hidden" name="v_domain" value="<?= htmlentities(trim($v_domain, "'")) ?>">
 			</div>
 			<div class="u-mb10">

web/templates/pages/edit_db.php

@@ -26,7 +26,7 @@
 			<?php show_alert_message($_SESSION); ?>
 			<div class="u-mb10">
 				<label for="v_database" class="form-label"><?= _("Database") ?></label>
-				<input type="text" class="form-control" name="v_database" id="v_database" value="<?= htmlentities(trim($v_database, "'")) ?>" disabled>
+				<input type="text" class="form-control js-db-hint-database-name" name="v_database" id="v_database" value="<?= htmlentities(trim($v_database, "'")) ?>" disabled>
 				<small class="hint"></small>
 			</div>
 			<div class="u-mb10">
@@ -34,7 +34,7 @@
 					<?= _("Username") ?>
 					<em><small>(<?= sprintf(_("maximum characters length, including prefix"), 32) ?>)</small></em>
 				</label>
-				<input type="text" class="form-control" name="v_dbuser" id="v_dbuser" value="<?= htmlentities(trim($v_dbuser, "'")) ?>">
+				<input type="text" class="form-control js-db-hint-username" name="v_dbuser" id="v_dbuser" value="<?= htmlentities(trim($v_dbuser, "'")) ?>">
 				<small class="hint"></small>
 			</div>
 			<div class="u-mb10">

web/templates/pages/edit_dns_rec.php

@@ -26,7 +26,7 @@
 			<?php show_alert_message($_SESSION); ?>
 			<div class="u-mb10">
 				<label for="v_domain" class="form-label"><?= _("Domain") ?></label>
-				<input type="text" class="form-control" name="v_domain" id="v_domain" value="<?= htmlentities(trim($v_domain, "'")) ?>" disabled>
+				<input type="text" class="form-control js-dns-record-domain" name="v_domain" id="v_domain" value="<?= htmlentities(trim($v_domain, "'")) ?>" disabled>
 				<input type="hidden" name="v_domain" value="<?= htmlentities(trim($v_domain, "'")) ?>">
 			</div>
 			<div class="u-mb10">

web/templates/pages/edit_web.php

@@ -377,7 +377,7 @@
 							<?php print _("Directory"); ?> <span class="optional">(<?= _("optional") ?>)</span>
 						</label>
 						<input type="text" class="form-control" name="v-custom-doc-folder" id="v-custom-doc-folder" value="<?= htmlentities(trim($v_custom_doc_folder, "'")) ?>">
-						<small class="custom_docroot_hint"></small>
+						<small class="js-custom-docroot-hint"></small>
 					</div>
 				</div>
 				<?php if (in_array($_SESSION["FTP_SYSTEM"], ["vsftpd", "proftpd"])) { ?>