Refactor Add/Edit Database JS (hestiacp#3511)

* Remove dead Add Web Domain JS

* Simplify globals

* Refactor Add/Edit Database JS

Author: AlecRust

web/js/dist/main.min.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/dist/main.min.js.map

@@ -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/pages/add_db.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/pages/add_web.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/pages/edit_db.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);