Refactor "delay submit in Safari" (hestiacp#4206)

* Consistent Node.js

* More consistent output

* Remove shortcut listeners around "Enter" key

Causing way more problems than benefits.

* Refactor "delay submit in Safari"

Author: AlecRust

bin/v-add-sys-web-terminal

@@ -36,12 +36,12 @@ check_hestia_demo_mode
 # Updating WEB_TERMINAL value
 $BIN/v-change-sys-config-value "WEB_TERMINAL" "true"
 
-# Check if nodejs is installed if not install repo
+# Check if Node.js is installed if not install repo
 apt="/etc/apt/sources.list.d"
 codename="$(lsb_release -s -c)"
 
 if [ ! -z $(which "node") ]; then
-	echo "Adding NodeJS 20.x repo..."
+	echo "Adding Node.js 20.x repo..."
 	echo "deb [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x $codename main" > $apt/nodesource.list
 	echo "deb-src [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x $codename main" >> $apt/nodesource.list
 	curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | gpg --dearmor | tee /usr/share/keyrings/nodesource.gpg > /dev/null 2>&1

bin/v-update-sys-hestia-git

@@ -20,15 +20,15 @@ source /etc/hestiacp/hestia.conf
 source $HESTIA/func/main.sh
 # load config file
 source_conf "$HESTIA/conf/hestia.conf"
-# define NodeJS version for download (required for building JS/CSS)
+# define Node.js version for download (required for building JS/CSS)
 NODE_MAJOR=20
 
 # Perform verification if read-only mode is enabled
 check_hestia_demo_mode
 
-# Detect and install NodeJS if necessary
+# Detect and install Node.js if necessary
 if [ -z $(which "node") ]; then
-	read -p "NodeJS not found. Install now to proceed? [Y/n] " answer
+	read -p "Node.js not found. Install now to proceed? [Y/n] " answer
 	if [ "$answer" = 'y' ] || [ "$answer" = 'Y' ]; then
 		sudo mkdir -p /etc/apt/keyrings
 		curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

install/hst-install-debian.sh

@@ -862,8 +862,8 @@ echo "[ * ] Hestia Control Panel"
 echo "deb [arch=$ARCH signed-by=/usr/share/keyrings/hestia-keyring.gpg] https://$RHOST/ $codename main" > $apt/hestia.list
 gpg --no-default-keyring --keyring /usr/share/keyrings/hestia-keyring.gpg --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys A189E93654F0B0E5 > /dev/null 2>&1
 
-# Installing NodeJS 20.x repo
-echo "[ * ] NodeJS 20.x"
+# Installing Node.js 20.x repo
+echo "[ * ] Node.js 20.x"
 echo "deb [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x $codename main" > $apt/nodesource.list
 echo "deb-src [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x $codename main" >> $apt/nodesource.list
 curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | gpg --dearmor | tee /usr/share/keyrings/nodesource.gpg > /dev/null 2>&1

install/hst-install-ubuntu.sh

@@ -827,8 +827,8 @@ echo "[ * ] Hestia Control Panel"
 echo "deb [arch=$ARCH signed-by=/usr/share/keyrings/hestia-keyring.gpg] https://$RHOST/ $codename main" > $apt/hestia.list
 gpg --no-default-keyring --keyring /usr/share/keyrings/hestia-keyring.gpg --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys A189E93654F0B0E5 > /dev/null 2>&1
 
-# Installing NodeJS 20.x repo
-echo "[ * ] NodeJS 20.x"
+# Installing Node.js 20.x repo
+echo "[ * ] Node.js 20.x"
 echo "deb [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x $codename main" > $apt/nodesource.list
 echo "deb-src [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x $codename main" >> $apt/nodesource.list
 curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | gpg --dearmor | tee /usr/share/keyrings/nodesource.gpg > /dev/null 2>&1

install/upgrade/versions/1.9.0.sh

@@ -30,9 +30,9 @@ $BIN/v-add-sys-sftp-jail
 codename="$(lsb_release -s -c)"
 apt=/etc/apt/sources.list.d
 
-# Installing NodeJS 20.x repo
+# Installing Node.js 20.x repo
 if [ ! -f $apt/nodesource.list ] && [ ! -z $(which "node") ]; then
-	echo "[ * ] Adding NodeJS 20.x repo"
+	echo "[ * ] Adding Node.js 20.x repo"
 	echo "deb [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x $codename main" > $apt/nodesource.list
 	echo "deb-src [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x $codename main" >> $apt/nodesource.list
 	curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | gpg --dearmor | tee /usr/share/keyrings/nodesource.gpg > /dev/null 2>&1

src/hst_autocompile.sh

@@ -277,25 +277,25 @@ if [ "$dontinstalldeps" != 'true' ]; then
 		echo "Installing dependencies for compilation..."
 		apt-get -qq install -y $SOFTWARE > /dev/null 2>&1
 
-		# Installing NodeJS 20.x repo
+		# Installing Node.js 20.x repo
 		apt="/etc/apt/sources.list.d"
 		codename="$(lsb_release -s -c)"
 
 		if [ -z $(which "node") ]; then
-			echo "Adding NodeJS 20.x repo..."
+			echo "Adding Node.js 20.x repo..."
 			echo "deb [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x $codename main" > $apt/nodesource.list
 			echo "deb-src [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x $codename main" >> $apt/nodesource.list
 			curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | gpg --dearmor | tee /usr/share/keyrings/nodesource.gpg > /dev/null 2>&1
 		fi
 
-		echo "Install NodeJS...."
+		echo "Installing Node.js..."
 		apt-get -qq update > /dev/null 2>&1
 		apt -qq install -y nodejs > /dev/null 2>&1
 
 		nodejs_version=$(/usr/bin/node -v | cut -f1 -d'.' | sed 's/v//g')
 
 		if [ "$nodejs_version" -lt 18 ]; then
-			echo "Requires NodeJS 18.x or higher"
+			echo "Requires Node.js 18.x or higher"
 			exit 1
 		fi
 

web/js/src/formSubmit.js

@@ -1,24 +1,17 @@
 import { enableUnlimitedInputs } from './unlimitedInput';
 import { updateAdvancedTextarea } from './toggleAdvanced';
-import { isDesktopSafari, showSpinner } from './helpers';
+import { isDesktopSafari, showSpinner, delay } from './helpers';
 
 export default function handleFormSubmit() {
 	const mainForm = document.querySelector('#main-form');
 	if (mainForm) {
-		mainForm.addEventListener('submit', (event) => {
-			// Show loading spinner
+		mainForm.addEventListener('submit', async (event) => {
+			event.preventDefault();
 			showSpinner();
 
-			// Wait a bit if Desktop Safari to ensure spinner is shown
+			// Wait if Desktop Safari to ensure spinner is shown
 			if (isDesktopSafari()) {
-				const submitButton = document.querySelector('button[type="submit"]');
-				if (!submitButton.dataset.clicked) {
-					event.preventDefault();
-					submitButton.dataset.clicked = 'true';
-					setTimeout(() => {
-						mainForm.submit();
-					}, 500);
-				}
+				await delay(500);
 			}
 
 			// Enable any disabled inputs to ensure all fields are submitted
@@ -36,13 +29,14 @@ export default function handleFormSubmit() {
 			if (basicOptionsWrapper && !basicOptionsWrapper.classList.contains('u-hidden')) {
 				updateAdvancedTextarea();
 			}
+
+			mainForm.submit();
 		});
 	}
 
 	const bulkEditForm = document.querySelector('[x-bind="BulkEdit"]');
 	if (bulkEditForm) {
 		bulkEditForm.addEventListener('submit', () => {
-			// Show loading spinner
 			showSpinner();
 		});
 	}

web/js/src/helpers.js

@@ -47,8 +47,13 @@ export function parseAndSortIpLists(ipListsData) {
 export function isDesktopSafari() {
 	const userAgent = window.navigator.userAgent;
 	const isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
-	const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent);
-	return isSafari && !isMobile;
+	const isMac = /Macintosh|MacIntel/i.test(window.navigator.platform);
+	return isSafari && isMac;
+}
+
+// Waits for the given number of milliseconds
+export function delay(milliseconds) {
+	return new Promise((resolve) => setTimeout(resolve, milliseconds));
 }
 
 // Posts data to the given URL and returns the response

web/js/src/shortcuts.js

@@ -136,9 +136,6 @@ export default function handleShortcuts() {
 			},
 			{ disabledInInput: true },
 		)
-		.register({ code: 'Enter', ctrlKey: true }, (_evt) => {
-			document.querySelector('#main-form').submit();
-		})
 		.register({ code: 'Backspace', ctrlKey: true }, (_evt) => {
 			const redirect = document.querySelector('a.js-button-back').href;
 			if (!redirect) {
@@ -428,11 +425,7 @@ export default function handleShortcuts() {
 		)
 		.register(
 			{ code: 'Enter' },
-			(evt) => {
-				if (evt.target.tagName === 'INPUT' && evt.target.form.id === 'main-form') {
-					evt.target.form.submit();
-				}
-
+			() => {
 				if (Alpine.store('form').dirty) {
 					if (document.querySelector('dialog[open]')) {
 						const dialog = document.querySelector('dialog[open]');