Refactor form submit JS (#3502)

* Improve notification copy

* Refactor form submit JS

* Refactor "enable disabled inputs on form submit"

func/upgrade.sh

@@ -183,13 +183,13 @@ upgrade_send_notification_to_panel() {
 	# Add notification to panel if variable is set to true or is not set
 	if [[ "$new_version" =~ "alpha" ]]; then
 		# Send notifications for development releases
-		$BIN/v-add-user-notification admin 'Development snapshot installed' '<b>Version:</b> '$new_version'<br><b>Code Branch:</b> '$RELEASE_BRANCH'<br><br>Please tell us about any bugs or issues by opening an issue report on <a href="https://github.com/hestiacp/hestiacp/issues" target="_blank"><i class="fab fa-github"></i> GitHub</a> and feel free to share your feedback on our <a href="https://forum.hestiacp.com" target="_blank">discussion forum</a>.<br><br><i class="fas fa-heart icon-red"></i> The Hestia Control Panel development team'
+		$BIN/v-add-user-notification admin 'Development snapshot installed' '<b>Version:</b> '$new_version'<br><b>Code Branch:</b> '$RELEASE_BRANCH'<br><br>Please report any bugs by <a href="https://github.com/hestiacp/hestiacp/issues" target="_blank">opening an issue on GitHub</a>, and feel free to share your feedback on our <a href="https://forum.hestiacp.com" target="_blank">discussion forum</a>.<br><br><i class="fas fa-heart icon-red"></i> The Hestia Control Panel development team'
 	elif [[ "$new_version" =~ "beta" ]]; then
 		# Send feedback notification for beta releases
-		$BIN/v-add-user-notification admin 'Thank you for testing Hestia Control Panel '$new_version'.' '<b>Please share your feedback with our development team through our <a href="https://forum.hestiacp.com" target="_blank">discussion forum</a>.<br><br>Found a bug? Report it on <a href="https://github.com/hestiacp/hestiacp/issues" target="_blank"><i class="fab fa-github"></i> GitHub</a>!</b><br><br><i class="fas fa-heart icon-red"></i> The Hestia Control Panel development team'
+		$BIN/v-add-user-notification admin 'Thank you for testing Hestia Control Panel '$new_version'.' '<b>Please share your feedback with our development team through our <a href="https://forum.hestiacp.com" target="_blank">discussion forum</a>.<br><br>Found a bug? <a href="https://github.com/hestiacp/hestiacp/issues" target="_blank">Open an issue on GitHub</a>!</b><br><br><i class="fas fa-heart icon-red"></i> The Hestia Control Panel development team'
 	else
 		# Send normal upgrade complete notification for stable releases
-		$BIN/v-add-user-notification admin 'Upgrade complete' 'Hestia Control Panel has been updated to <b>v'$new_version'</b>.<br><a href="https://github.com/hestiacp/hestiacp/blob/release/CHANGELOG.md" target="_blank">View release notes</a><br><br>Please tell us about any bugs or issues by opening a new issue report on <a href="https://github.com/hestiacp/hestiacp/issues" target="_blank"><i class="fab fa-github"></i> GitHub</a>.<br><br><b>Have a wonderful day!</b><br><br><i class="fas fa-heart icon-red"></i> The Hestia Control Panel development team'
+		$BIN/v-add-user-notification admin 'Upgrade complete' 'Hestia Control Panel has been updated to <b>v'$new_version'</b>.<br><a href="https://github.com/hestiacp/hestiacp/blob/release/CHANGELOG.md" target="_blank">View release notes</a><br><br>Please report any bugs or issues by <a href="https://github.com/hestiacp/hestiacp/issues" target="_blank">opening an issue on GitHub</a>.<br><br><b>Have a wonderful day!</b><br><br><i class="fas fa-heart icon-red"></i> The Hestia Control Panel development team'
 	fi
 }
 

web/js/pages/add_web.js

@@ -92,9 +92,3 @@ $(function () {
 		}
 	});
 });
-
-document.querySelector('#vstobjects').addEventListener('submit', () => {
-	$('input[disabled]').each(function (i, elm) {
-		$(elm).removeAttr('disabled');
-	});
-});

web/js/pages/edit_mail.js

@@ -1,8 +0,0 @@
-document.querySelector('#vstobjects').addEventListener('submit', () => {
-	$('input[disabled]').each(function (i, elm) {
-		var copy_elm = $(elm).clone(true);
-		$(copy_elm).attr('type', 'hidden');
-		$(copy_elm).removeAttr('disabled');
-		$(elm).after(copy_elm);
-	});
-});

web/js/pages/edit_server_mysql.js

@@ -1,9 +0,0 @@
-// Listen to form submit and update textarea if basic options are visible
-document.querySelector('#vstobjects').addEventListener('submit', () => {
-	const basicOptionsWrapper = document.querySelector('.js-basic-options');
-	if (!basicOptionsWrapper.classList.contains('u-hidden')) {
-		const advancedTextarea = document.querySelector('.js-advanced-textarea');
-		const textInputs = document.querySelectorAll('#vstobjects input[type=text]');
-		Hestia.helpers.updateTextareaWithInputValues(textInputs, advancedTextarea);
-	}
-});

web/js/pages/edit_server_nginx.js

@@ -1,9 +0,0 @@
-// Listen to form submit and update textarea if basic options are visible
-document.querySelector('#vstobjects').addEventListener('submit', () => {
-	const basicOptionsWrapper = document.querySelector('.js-basic-options');
-	if (!basicOptionsWrapper.classList.contains('u-hidden')) {
-		const advancedTextarea = document.querySelector('.js-advanced-textarea');
-		const textInputs = document.querySelectorAll('#vstobjects input[type=text]');
-		Hestia.helpers.updateTextareaWithInputValues(textInputs, advancedTextarea);
-	}
-});

web/js/pages/edit_server_php.js

@@ -1,9 +0,0 @@
-// Listen to form submit and update textarea if basic options are visible
-document.querySelector('#vstobjects').addEventListener('submit', () => {
-	const basicOptionsWrapper = document.querySelector('.js-basic-options');
-	if (!basicOptionsWrapper.classList.contains('u-hidden')) {
-		const advancedTextarea = document.querySelector('.js-advanced-textarea');
-		const textInputs = document.querySelectorAll('#vstobjects input[type=text]');
-		Hestia.helpers.updateTextareaWithInputValues(textInputs, advancedTextarea);
-	}
-});

web/js/pages/edit_web.js

@@ -260,15 +260,6 @@ $(function () {
 			$('#v-clear-cache').show();
 		}
 	});
-
-	document.querySelector('#vstobjects').addEventListener('submit', () => {
-		$('input[disabled]').each(function (i, elm) {
-			var copy_elm = $(elm).clone(true);
-			$(copy_elm).attr('type', 'hidden');
-			$(copy_elm).removeAttr('disabled');
-			$(elm).after(copy_elm);
-		});
-	});
 });
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

web/js/src/confirmationDialog.js

@@ -1,4 +1,4 @@
-import { createConfirmationDialog } from './helpers.js';
+import { createConfirmationDialog } from './helpers';
 
 // Adds listeners to .js-confirm-action links and intercepts them with a confirmation dialog
 export default function handleConfirmationDialogs() {

web/js/src/errorHandler.js

@@ -1,4 +1,4 @@
-import { createConfirmationDialog } from './helpers.js';
+import { createConfirmationDialog } from './helpers';
 
 // Displays page error message/notice in a confirmation dialog
 export default function handleErrorMessage() {

web/js/src/formSubmit.js

@@ -0,0 +1,37 @@
+import { enableUnlimitedInputs } from './unlimitedInput';
+import { updateAdvancedTextarea } from './toggleAdvanced';
+import { showSpinner } from './helpers';
+
+export default function handleFormSubmit() {
+	const pageForm = document.querySelector('#vstobjects');
+	if (pageForm) {
+		pageForm.addEventListener('submit', () => {
+			// Show loading spinner
+			showSpinner();
+
+			// Enable any disabled inputs to ensure all fields are submitted
+			if (pageForm.classList.contains('js-enable-inputs-on-submit')) {
+				document.querySelectorAll('input[disabled]').forEach((input) => {
+					input.disabled = false;
+				});
+			}
+
+			// Enable any disabled unlimited inputs and set their value to "unlimited"
+			enableUnlimitedInputs();
+
+			// Update the "advanced options" textarea with "basic options" input values
+			const basicOptionsWrapper = document.querySelector('.js-basic-options');
+			if (basicOptionsWrapper && !basicOptionsWrapper.classList.contains('u-hidden')) {
+				updateAdvancedTextarea();
+			}
+		});
+	}
+
+	const bulkEditForm = document.querySelector('[x-bind="BulkEdit"]');
+	if (bulkEditForm) {
+		bulkEditForm.addEventListener('submit', () => {
+			// Show loading spinner
+			showSpinner();
+		});
+	}
+}

web/js/src/helpers.js

@@ -23,6 +23,11 @@ export function getCssVariable(variableName) {
 	return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
 }
 
+// Shows the loading spinner overlay
+export function showSpinner() {
+	document.querySelector('.js-fullscreen-loader').classList.add('active');
+}
+
 // Creates a confirmation <dialog> on the fly
 export function createConfirmationDialog({ title, message = 'Are you sure?', targetUrl }) {
 	// Create the dialog
@@ -87,14 +92,3 @@ export function createConfirmationDialog({ title, message = 'Are you sure?', tar
 	document.body.append(dialog);
 	dialog.showModal();
 }
-
-// Updates textarea with values from text inputs
-export function updateTextareaWithInputValues(textInputs, textarea) {
-	textInputs.forEach((textInput) => {
-		const search = textInput.dataset.regexp;
-		const prevValue = textInput.dataset.prevValue;
-		textInput.setAttribute('data-prev-value', textInput.value);
-		const regexp = new RegExp(`(${search})(.+)(${prevValue})`);
-		textarea.value = textarea.value.replace(regexp, `$1$2${textInput.value}`);
-	});
-}

web/js/src/loadingSpinner.js

@@ -1,16 +0,0 @@
-// Attaches listeners to various events and shows loading spinner overlay
-export default function handleLoadingSpinner() {
-	const pageForm = document.querySelector('#vstobjects');
-	if (pageForm) {
-		pageForm.addEventListener('submit', showLoader);
-	}
-
-	const bulkEditForm = document.querySelector('[x-bind="BulkEdit"]');
-	if (bulkEditForm) {
-		bulkEditForm.addEventListener('submit', showLoader);
-	}
-}
-
-function showLoader() {
-	document.querySelector('.js-fullscreen-loader').classList.add('active');
-}

web/js/src/main.js

@@ -1,21 +1,21 @@
-import alpineInit from './alpineInit.js';
-import focusFirstInput from './focusFirstInput.js';
-import handleConfirmationDialogs from './confirmationDialog.js';
-import handleCopyCreds from './copyCreds.js';
-import handleCronGenerator from './cronGenerator.js';
-import handleDiscardAllMail from './discardAllMail.js';
-import handleErrorMessage from './errorHandler.js';
-import handleListSelectAll from './listSelectAll.js';
-import handleListSorting from './listSorting.js';
-import handleLoadingSpinner from './loadingSpinner.js';
-import handleNameServerInput from './nameServerInput.js';
-import handlePasswordInput from './passwordInput.js';
-import handleShortcuts from './shortcuts.js';
-import handleStickyToolbar from './stickyToolbar.js';
-import handleTabPanels from './tabPanels.js';
-import handleToggleAdvanced from './toggleAdvanced.js';
-import handleUnlimitedInput from './unlimitedInput.js';
-import * as helpers from './helpers.js';
+import alpineInit from './alpineInit';
+import focusFirstInput from './focusFirstInput';
+import handleConfirmationDialogs from './confirmationDialog';
+import handleCopyCreds from './copyCreds';
+import handleCronGenerator from './cronGenerator';
+import handleDiscardAllMail from './discardAllMail';
+import handleErrorMessage from './errorHandler';
+import handleFormSubmit from './formSubmit';
+import handleListSelectAll from './listSelectAll';
+import handleListSorting from './listSorting';
+import handleNameServerInput from './nameServerInput';
+import handlePasswordInput from './passwordInput';
+import handleShortcuts from './shortcuts';
+import handleStickyToolbar from './stickyToolbar';
+import handleTabPanels from './tabPanels';
+import handleToggleAdvanced from './toggleAdvanced';
+import handleUnlimitedInput from './unlimitedInput';
+import * as helpers from './helpers';
 
 window.Hestia = { helpers };
 
@@ -27,9 +27,9 @@ function initListeners() {
 	handleCopyCreds();
 	handleCronGenerator();
 	handleDiscardAllMail();
+	handleFormSubmit();
 	handleListSelectAll();
 	handleListSorting();
-	handleLoadingSpinner();
 	handleNameServerInput();
 	handlePasswordInput();
 	handleStickyToolbar();

web/js/src/passwordInput.js

@@ -1,5 +1,5 @@
 import { passwordStrength } from 'check-password-strength';
-import { randomPassword } from './helpers.js';
+import { randomPassword } from './helpers';
 
 // Adds listeners to password inputs (to monitor strength) and generate password buttons
 export default function handlePasswordInput() {

web/js/src/shortcuts.js

@@ -5,8 +5,8 @@ import {
 	moveFocusUp,
 	enterFocused,
 	executeShortcut,
-} from './navigation.js';
-import { createConfirmationDialog } from './helpers.js';
+} from './navigation';
+import { createConfirmationDialog } from './helpers';
 
 /**
  * Shortcuts

web/js/src/toggleAdvanced.js

@@ -1,5 +1,3 @@
-import { updateTextareaWithInputValues } from './helpers.js';
-
 // Add listeners to .js-toggle-options buttons
 export default function handleToggleAdvanced() {
 	document.querySelectorAll('.js-toggle-options').forEach((toggleOptionsButton) => {
@@ -23,9 +21,16 @@ function toggleAdvancedOptions() {
 	}
 }
 
-// Update the advanced textarea with input values
-function updateAdvancedTextarea() {
+// Update the "advanced options" textarea with "basic options" input values
+export function updateAdvancedTextarea() {
 	const advancedTextarea = document.querySelector('.js-advanced-textarea');
 	const textInputs = document.querySelectorAll('#vstobjects input[type=text]');
-	updateTextareaWithInputValues(textInputs, advancedTextarea);
+
+	textInputs.forEach((textInput) => {
+		const search = textInput.dataset.regexp;
+		const prevValue = textInput.dataset.prevValue;
+		textInput.setAttribute('data-prev-value', textInput.value);
+		const regexp = new RegExp(`(${search})(.+)(${prevValue})`);
+		advancedTextarea.value = advancedTextarea.value.replace(regexp, `$1$2${textInput.value}`);
+	});
 }

web/js/src/unlimitedInput.js

@@ -13,20 +13,16 @@ export default function handleUnlimitedInput() {
 			toggleInput(input, toggleButton);
 		});
 	});
+}
 
-	// Enable any disabled unlimited inputs before submitting
-	// the page form, and set their value to "unlimited"
-	const pageForm = document.querySelector('#vstobjects');
-	if (pageForm) {
-		pageForm.addEventListener('submit', () => {
-			document.querySelectorAll('input:disabled').forEach((input) => {
-				if (isUnlimitedValue(input.value)) {
-					input.disabled = false;
-					input.value = Alpine.store('globals').UNLIM_VALUE;
-				}
-			});
-		});
-	}
+// Called on form submit to enable any disabled unlimited inputs
+export function enableUnlimitedInputs() {
+	document.querySelectorAll('input:disabled').forEach((input) => {
+		if (isUnlimitedValue(input.value)) {
+			input.disabled = false;
+			input.value = Alpine.store('globals').UNLIM_VALUE;
+		}
+	});
 }
 
 function isUnlimitedValue(value) {

web/templates/pages/add_web.php

@@ -19,7 +19,7 @@
 
 <div class="container animate__animated animate__fadeIn">
 
-	<form id="vstobjects" name="v_add_web" method="post">
+	<form id="vstobjects" name="v_add_web" method="post" class="js-enable-inputs-on-submit">
 		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<input type="hidden" name="ok" value="Add">
 

web/templates/pages/edit_mail.php

@@ -26,7 +26,7 @@
 		id="vstobjects"
 		name="v_edit_mail"
 		method="post"
-		class="<?= $v_status ?>"
+		class="<?= $v_status ?> js-enable-inputs-on-submit"
 	>
 		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<input type="hidden" name="save" value="save">

web/templates/pages/edit_web.php

@@ -40,7 +40,7 @@
 		id="vstobjects"
 		name="v_edit_web"
 		method="post"
-		class="<?= $v_status ?>"
+		class="<?= $v_status ?> js-enable-inputs-on-submit"
 	>
 		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<input type="hidden" name="save" value="save">