Show spinner when confirming dialog action (hestiacp#3517)

AlecRust · web-flow · commit 8df92ef720d4 · 2023-05-01T11:12:30.000+01:00
* Show spinner when confirming action

* Tidy

* Bump dependencies
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
 		"@prettier/plugin-php": "^0.19.4",
 		"@typescript-eslint/eslint-plugin": "^5.59.1",
 		"@typescript-eslint/parser": "^5.59.1",
-		"cssnano": "^6.0.0",
+		"cssnano": "^6.0.1",
 		"esbuild": "^0.17.18",
 		"eslint": "^8.39.0",
 		"eslint-config-prettier": "^8.8.0",
@@ -50,7 +50,7 @@
 		"stylelint": "^15.6.0",
 		"stylelint-config-standard": "^33.0.0",
 		"typescript": "^5.0.4",
-		"vitepress": "1.0.0-alpha.74",
+		"vitepress": "1.0.0-alpha.75",
 		"vue": "^3.2.47"
 	},
 	"browserslist": [
diff --git a/web/css/src/themes/dark.css b/web/css/src/themes/dark.css
@@ -735,7 +735,7 @@ strong {
 /* Spinner
    ========================================================================== */
 
-.fullscreen-loader {
+.spinner-overlay {
 	background-color: rgb(0 0 0 / 50%);
 }
 
diff --git a/web/css/src/themes/default.css b/web/css/src/themes/default.css
@@ -2200,7 +2200,7 @@
 /* Spinner
    ========================================================================== */
 
-.fullscreen-loader {
+.spinner-overlay {
 	position: fixed;
 	inset: 0;
 	display: flex;
@@ -2209,7 +2209,7 @@
 	padding: 50px;
 	background-color: rgb(0 0 0 / 10%);
 	font-size: 50px;
-	z-index: 9999;
+	z-index: 4;
 	visibility: hidden;
 	opacity: 0;
 	transition: opacity 0.2s ease, visibility 0s 0.2s;
diff --git a/web/css/themes/dark.min.css b/web/css/themes/dark.min.css
diff --git a/web/css/themes/default.min.css b/web/css/themes/default.min.css
diff --git a/web/js/dist/main.min.js b/web/js/dist/main.min.js
diff --git a/web/js/dist/main.min.js.map b/web/js/dist/main.min.js.map
diff --git a/web/js/src/confirmAction.js b/web/js/src/confirmAction.js
@@ -1,7 +1,7 @@
 import { createConfirmationDialog } from './helpers';
 
-// Adds listeners to .js-confirm-action links and intercepts them with a confirmation dialog
-export default function handleConfirmationDialogs() {
+// Listen to .js-confirm-action links and intercept clicks with a confirmation dialog
+export default function handleConfirmAction() {
 	document.querySelectorAll('.js-confirm-action').forEach((triggerLink) => {
 		triggerLink.addEventListener('click', (evt) => {
 			evt.preventDefault();
@@ -10,7 +10,7 @@ export default function handleConfirmationDialogs() {
 			const message = triggerLink.dataset.confirmMessage;
 			const targetUrl = triggerLink.getAttribute('href');
 
-			createConfirmationDialog({ title, message, targetUrl });
+			createConfirmationDialog({ title, message, targetUrl, spinner: true });
 		});
 	});
 }
diff --git a/web/js/src/discardAllMail.js b/web/js/src/discardAllMail.js
@@ -1,4 +1,4 @@
-// "Discard all mail" checkbox behavior
+// "Discard all mail" checkbox behavior on Add/Edit Mail Account pages
 export default function handleDiscardAllMail() {
 	const discardAllMailCheckbox = document.querySelector('.js-discard-all-mail');
 
@@ -7,9 +7,8 @@ export default function handleDiscardAllMail() {
 	}
 
 	discardAllMailCheckbox.addEventListener('click', () => {
-		// TODO: Use .js- class instead of #id
-		const forwardToTextarea = document.querySelector('#v_fwd');
-		const doNotStoreCheckbox = document.querySelector('#v_fwd_for');
+		const forwardToTextarea = document.querySelector('.js-forward-to-textarea');
+		const doNotStoreCheckbox = document.querySelector('.js-do-not-store-checkbox');
 
 		if (discardAllMailCheckbox.checked) {
 			// Disable "Forward to" textarea
diff --git a/web/js/src/helpers.js b/web/js/src/helpers.js
@@ -34,11 +34,16 @@ export function getCssVariable(variableName) {
 
 // Shows the loading spinner overlay
 export function showSpinner() {
-	document.querySelector('.js-fullscreen-loader').classList.add('active');
+	document.querySelector('.js-spinner').classList.add('active');
 }
 
 // Creates a confirmation <dialog> on the fly
-export function createConfirmationDialog({ title, message = 'Are you sure?', targetUrl }) {
+export function createConfirmationDialog({
+	title,
+	message = 'Are you sure?',
+	targetUrl,
+	spinner = false,
+}) {
 	// Create the dialog
 	const dialog = document.createElement('dialog');
 	dialog.classList.add('modal');
@@ -80,6 +85,9 @@ export function createConfirmationDialog({ title, message = 'Are you sure?', tar
 	// Define named functions to handle the event listeners
 	const handleConfirm = () => {
 		if (targetUrl) {
+			if (spinner) {
+				showSpinner();
+			}
 			window.location.href = targetUrl;
 		}
 
diff --git a/web/js/src/main.js b/web/js/src/main.js
@@ -1,6 +1,6 @@
 import alpineInit from './alpineInit';
 import focusFirstInput from './focusFirstInput';
-import handleConfirmationDialogs from './confirmationDialog';
+import handleConfirmAction from './confirmAction';
 import handleCopyCreds from './copyCreds';
 import handleCronGenerator from './cronGenerator';
 import handleDatabaseHints from './databaseHints';
@@ -31,7 +31,7 @@ initListeners();
 focusFirstInput();
 
 function initListeners() {
-	handleConfirmationDialogs();
+	handleConfirmAction();
 	handleCopyCreds();
 	handleCronGenerator();
 	handleDiscardAllMail();
diff --git a/web/templates/footer.php b/web/templates/footer.php
@@ -13,7 +13,7 @@
 		</button>)
 	</p>
 <?php } ?>
-	<div class="fullscreen-loader js-fullscreen-loader">
+	<div class="spinner-overlay js-spinner">
 		<i class="fas fa-circle-notch fa-spin"></i>
 	</div>
 
diff --git a/web/templates/includes/js.php b/web/templates/includes/js.php
@@ -1,23 +1,6 @@
 <script defer src="/js/dist/main.min.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script defer src="/js/vendor/alpine-3.12.0.min.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script>
-	// TODO: REMOVE
-	const App = {
-		Actions: {
-			DB: {},
-			WEB: {},
-			PACKAGE: {},
-			MAIL_ACC: {},
-			MAIL: {},
-		},
-		Listeners: {
-			DB: {},
-			WEB: {},
-			PACKAGE: {},
-			MAIL_ACC: {},
-		}
-	}
-
 	document.documentElement.classList.replace('no-js', 'js');
 	document.addEventListener('alpine:init', () => {
 		Alpine.store('globals', {
diff --git a/web/templates/pages/add_mail_acc.php b/web/templates/pages/add_mail_acc.php
@@ -89,7 +89,7 @@
 							<label for="v_fwd" class="form-label">
 								<?= _("Forward to") ?> <span class="optional">(<?= _("one or more email addresses") ?>)</span>
 							</label>
-							<textarea class="form-control" name="v_fwd" id="v_fwd" <?php if($v_blackhole == 'yes') echo "disabled";?>><?=htmlentities(trim($v_fwd, "'"))?></textarea>
+							<textarea class="form-control js-forward-to-textarea" name="v_fwd" id="v_fwd" <?php if($v_blackhole == 'yes') echo "disabled";?>><?=htmlentities(trim($v_fwd, "'"))?></textarea>
 						</div>
 						<div class="form-check">
 							<input class="form-check-input js-discard-all-mail" type="checkbox" name="v_blackhole" id="v_blackhole" <?php if ($v_blackhole == 'yes') echo 'checked' ?>>
@@ -98,7 +98,7 @@
 							</label>
 						</div>
 						<div class="form-check <?php if ($v_blackhole == 'yes') { echo 'u-hidden'; } ?>">
-							<input class="form-check-input" type="checkbox" name="v_fwd_only" id="v_fwd_for" <?php if ($v_fwd_only == 'yes') echo 'checked' ?>>
+							<input class="form-check-input js-do-not-store-checkbox" type="checkbox" name="v_fwd_only" id="v_fwd_for" <?php if ($v_fwd_only == 'yes') echo 'checked' ?>>
 							<label for="v_fwd_for">
 								<?= _("Do not store forwarded mail") ?>
 							</label>
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -735,7 +735,7 @@ strong {`
`735`	`735`	`/* Spinner`
`736`	`736`	`========================================================================== */`
`737`	`737`
`738`		`-.fullscreen-loader {`
	`738`	`+.spinner-overlay {`
`739`	`739`	`background-color: rgb(0 0 0 / 50%);`
`740`	`740`	`}`
`741`	`741`