Minor UI updates (#3485)

* Refactor to fix duplicate IDs in page HTML

* Add "click outside to close" behaviour to sorting dropdown

web/css/src/themes/vestia.css

@@ -181,7 +181,7 @@ strong {
 		text-shadow: none;
 	}
 
-	& #btn-back {
+	& .button-back {
 		color: #326b9b;
 		background: none;
 		text-shadow: none;

web/js/src/listSorting.js

@@ -1,5 +1,6 @@
 // List view sorting dropdown
 export default function initSorting() {
+	// Toggle dropdown button
 	document.querySelectorAll('.toolbar-sorting-toggle').forEach((toggle) => {
 		toggle.addEventListener('click', (evt) => {
 			evt.preventDefault();
@@ -7,6 +8,19 @@ export default function initSorting() {
 		});
 	});
 
+	// "Click outside" to close dropdown
+	document.addEventListener('click', (event) => {
+		const toggleButton = document.querySelector('.toolbar-sorting-toggle');
+		const dropdown = document.querySelector('.toolbar-sorting-menu');
+
+		if (!dropdown || !toggleButton) return;
+
+		if (!dropdown.contains(event.target) && !toggleButton.contains(event.target)) {
+			dropdown.classList.add('u-hidden');
+		}
+	});
+
+	// Inner dropdown sorting behavior
 	document.querySelectorAll('.toolbar-sorting-menu span').forEach((span) => {
 		span.addEventListener('click', function () {
 			const menu = document.querySelector('.toolbar-sorting-menu');

web/js/src/shortcuts.js

@@ -106,7 +106,7 @@ export default function initShortcuts() {
 		.register(
 			{ key: 'A' },
 			(_evt) => {
-				const createButton = document.querySelector('.button#btn-create');
+				const createButton = document.querySelector('a.js-button-create');
 				if (!createButton) {
 					return;
 				}
@@ -129,7 +129,7 @@ export default function initShortcuts() {
 			document.querySelector('form#vstobjects').submit();
 		})
 		.register({ code: 'Backspace', ctrlKey: true }, (_evt) => {
-			const redirect = document.querySelector('a.button#btn-back').href;
+			const redirect = document.querySelector('a.js-button-back').href;
 			if (!redirect) {
 				return;
 			}

web/templates/pages/add_access_key.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/access-key/">
+			<a class="button button-secondary button-back js-button-back" href="/list/access-key/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/add_cron.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/cron/">
+			<a class="button button-secondary button-back js-button-back" href="/list/cron/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/add_db.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/db/">
+			<a class="button button-secondary button-back js-button-back" href="/list/db/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/add_dns.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/dns/">
+			<a class="button button-secondary button-back js-button-back" href="/list/dns/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/add_dns_rec.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/dns/?domain=<?= htmlentities(trim($v_domain, "'")) ?>&token=<?= $_SESSION["token"] ?>">
+			<a class="button button-secondary button-back js-button-back" href="/list/dns/?domain=<?= htmlentities(trim($v_domain, "'")) ?>&token=<?= $_SESSION["token"] ?>">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/add_firewall.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/firewall/">
+			<a class="button button-secondary button-back js-button-back" href="/list/firewall/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/add_firewall_banlist.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/firewall/banlist/">
+			<a class="button button-secondary button-back js-button-back" href="/list/firewall/banlist/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/add_firewall_ipset.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/firewall/ipset/">
+			<a class="button button-secondary button-back js-button-back" href="/list/firewall/ipset/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/add_ip.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/ip/">
+			<a class="button button-secondary button-back js-button-back" href="/list/ip/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/add_key.php

@@ -3,11 +3,11 @@
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
 			<?php if ($_SESSION["userContext"] === "admin" && isset($_GET["user"]) && $_GET["user"] !== "admin") { ?>
-				<a class="button button-secondary" id="btn-back" href="/list/key/?user=<?= htmlentities($_GET["user"]) ?>">
+				<a class="button button-secondary button-back js-button-back" href="/list/key/?user=<?= htmlentities($_GET["user"]) ?>">
 					<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 				</a>
 			<?php } else { ?>
-				<a class="button button-secondary" id="btn-back" href="/list/key/">
+				<a class="button button-secondary button-back js-button-back" href="/list/key/">
 					<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 				</a>
 			<?php } ?>

web/templates/pages/add_mail.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/mail/">
+			<a class="button button-secondary button-back js-button-back" href="/list/mail/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/add_mail_acc.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/mail/?domain=<?= htmlentities(trim($v_domain, "'")) ?>&token=<?= $_SESSION["token"] ?>">
+			<a class="button button-secondary button-back js-button-back" href="/list/mail/?domain=<?= htmlentities(trim($v_domain, "'")) ?>&token=<?= $_SESSION["token"] ?>">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/add_package.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/package/">
+			<a class="button button-secondary button-back js-button-back" href="/list/package/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/add_user.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/user/">
+			<a class="button button-secondary button-back js-button-back" href="/list/user/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/add_web.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/web/">
+			<a class="button button-secondary button-back js-button-back" href="/list/web/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/edit_backup_exclusions.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/backup/exclusions/">
+			<a class="button button-secondary button-back js-button-back" href="/list/backup/exclusions/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/edit_cron.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/cron/">
+			<a class="button button-secondary button-back js-button-back" href="/list/cron/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/edit_db.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/db/">
+			<a class="button button-secondary button-back js-button-back" href="/list/db/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/edit_dns.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/dns/">
+			<a class="button button-secondary button-back js-button-back" href="/list/dns/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/edit_dns_rec.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/dns/?domain=<?= htmlentities(trim($v_domain, "'")) ?>&token=<?= $_SESSION["token"] ?>">
+			<a class="button button-secondary button-back js-button-back" href="/list/dns/?domain=<?= htmlentities(trim($v_domain, "'")) ?>&token=<?= $_SESSION["token"] ?>">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/edit_firewall.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/firewall/">
+			<a class="button button-secondary button-back js-button-back" href="/list/firewall/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/edit_ip.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/ip/">
+			<a class="button button-secondary button-back js-button-back" href="/list/ip/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/edit_mail.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/mail/">
+			<a class="button button-secondary button-back js-button-back" href="/list/mail/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/edit_mail_acc.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/mail/?domain=<?= htmlentities(trim($v_domain, "'")) ?>&token=<?= $_SESSION["token"] ?>">
+			<a class="button button-secondary button-back js-button-back" href="/list/mail/?domain=<?= htmlentities(trim($v_domain, "'")) ?>&token=<?= $_SESSION["token"] ?>">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/edit_package.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/package/">
+			<a class="button button-secondary button-back js-button-back" href="/list/package/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/edit_server.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a href="/list/server/" class="button button-secondary" id="btn-back">
+			<a href="/list/server/" class="button button-secondary button-back js-button-back">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 			<a href="/list/ip/" class="button button-secondary">

web/templates/pages/edit_server_bind9.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/server/">
+			<a class="button button-secondary button-back js-button-back" href="/list/server/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/edit_server_dovecot.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/server/">
+			<a class="button button-secondary button-back js-button-back" href="/list/server/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/edit_server_httpd.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/server/">
+			<a class="button button-secondary button-back js-button-back" href="/list/server/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 			<a href="/edit/server/php/" class="button button-secondary">

web/templates/pages/edit_server_mysql.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/server/">
+			<a class="button button-secondary button-back js-button-back" href="/list/server/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/edit_server_nginx.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/server/">
+			<a class="button button-secondary button-back js-button-back" href="/list/server/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 			<a href="/edit/server/php/" class="button button-secondary">

web/templates/pages/edit_server_pgsql.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/server/">
+			<a class="button button-secondary button-back js-button-back" href="/list/server/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/edit_server_php.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/server/">
+			<a class="button button-secondary button-back js-button-back" href="/list/server/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/edit_server_service.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/server/">
+			<a class="button button-secondary button-back js-button-back" href="/list/server/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/edit_user.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/user/">
+			<a class="button button-secondary button-back js-button-back" href="/list/user/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 			<?php
@@ -16,18 +16,18 @@
 					$keys_url = "/list/access-key/";
 				}
 			?>
-			<a href="<?=$ssh_key_url; ?>" class="button button-secondary" id="btn-create" title="<?= _("Manage SSH keys") ?>">
+			<a href="<?=$ssh_key_url; ?>" class="button button-secondary js-button-create" title="<?= _("Manage SSH keys") ?>">
 				<i class="fas fa-key icon-orange"></i><?= _("Manage SSH keys") ?>
 			</a>
 			<?php if ($_SESSION["userContext"] == "admin" || ($_SESSION["userContext"] !== "admin" && $_SESSION["POLICY_USER_VIEW_LOGS"] !== "no")) { ?>
-				<a href="<?= $log_url ?>" class="button button-secondary" id="btn-create" title="<?= _("Logs") ?>">
+				<a href="<?= $log_url ?>" class="button button-secondary js-button-create" title="<?= _("Logs") ?>">
 					<i class="fas fa-clock-rotate-left icon-maroon"></i><?= _("Logs") ?>
 				</a>
 			<?php } ?>
 			<?php
 				$api_status = (!empty($_SESSION['API_SYSTEM']) && is_numeric($_SESSION['API_SYSTEM'])) ? $_SESSION['API_SYSTEM'] : 0;
 				if (($user_plain == 'admin' && $api_status > 0) || ($user_plain != 'admin' && $api_status > 1)) { ?>
-				<a href="<?=$keys_url; ?>" class="button button-secondary" id="btn-create" title="<?= _("Access Keys") ?>">
+				<a href="<?=$keys_url; ?>" class="button button-secondary js-button-create" title="<?= _("Access Keys") ?>">
 					<i class="fas fa-key icon-purple"></i><?= _("Access Keys") ?>
 				</a>
 			<?php } ?>

web/templates/pages/edit_web.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/web/">
+			<a class="button button-secondary button-back js-button-back" href="/list/web/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/list_access_key.php

@@ -12,7 +12,7 @@ if (!empty($_POST["ok"])) { ?>
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/access-key/">
+			<a class="button button-secondary button-back js-button-back" href="/list/access-key/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/list_access_keys.php

@@ -2,10 +2,10 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/edit/user/">
+			<a class="button button-secondary button-back js-button-back" href="/edit/user/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
-			<a href="/add/access-key/" class="button button-secondary" id="btn-create">
+			<a href="/add/access-key/" class="button button-secondary js-button-create">
 				<i class="fas fa-circle-plus icon-green"></i><?= _("Add Access Key") ?>
 			</a>
 		</div>

web/templates/pages/list_backup_detail.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/backup/"><i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?></a>
+			<a class="button button-secondary button-back js-button-back" href="/list/backup/"><i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?></a>
 			<a href="/schedule/restore/?token=<?= $_SESSION["token"] ?>&backup=<?= htmlentities($_GET["backup"]) ?>" class="button button-secondary"><i class="fas fa-arrow-rotate-left icon-green"></i><?= _("Restore All") ?></a>
 		</div>
 		<div class="toolbar-right">

web/templates/pages/list_backup_exclusions.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/backup/">
+			<a class="button button-secondary button-back js-button-back" href="/list/backup/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 			<a href="/edit/backup/exclusions/" class="button button-secondary">

web/templates/pages/list_cron.php

@@ -3,11 +3,17 @@
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
 			<?php if ($read_only !== "true") { ?>
-				<a href="/add/cron/" class="button button-secondary" id="btn-create"><i class="fas fa-circle-plus icon-green"></i><?= _("Add Cron Job") ?></a>
+				<a href="/add/cron/" class="button button-secondary js-button-create">
+					<i class="fas fa-circle-plus icon-green"></i><?= _("Add Cron Job") ?>
+				</a>
 				<?php if ($panel[$user_plain]["CRON_REPORTS"] == "yes") { ?>
-					<a class="button button-secondary" href="/delete/cron/reports/?token=<?= $_SESSION["token"] ?>"><i class="fas fa-toggle-off icon-green"></i><?= _("turn off notifications") ?></a>
+					<a class="button button-secondary" href="/delete/cron/reports/?token=<?= $_SESSION["token"] ?>">
+						<i class="fas fa-toggle-off icon-green"></i><?= _("turn off notifications") ?>
+					</a>
 				<?php } else { ?>
-					<a class="button button-secondary" href="/add/cron/reports/?token=<?= $_SESSION["token"] ?>"><i class="fas fa-toggle-off"></i><?= _("turn on notifications") ?></a>
+					<a class="button button-secondary" href="/add/cron/reports/?token=<?= $_SESSION["token"] ?>">
+						<i class="fas fa-toggle-off"></i><?= _("turn on notifications") ?>
+					</a>
 				<?php } ?>
 			<?php } ?>
 		</div>

web/templates/pages/list_db.php

@@ -16,7 +16,7 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
 			<?php if ($read_only !== "true") { ?>
-				<a href="/add/db/" class="button button-secondary" id="btn-create">
+				<a href="/add/db/" class="button button-secondary js-button-create">
 					<i class="fas fa-circle-plus icon-green"></i><?= _("Add Database") ?>
 				</a>
 				<?php if ($_SESSION["DB_SYSTEM"] === "mysql" || $_SESSION["DB_SYSTEM"] === "mysql,pgsql" || $_SESSION["DB_SYSTEM"] === "pgsql,mysql") { ?>

web/templates/pages/list_dns.php

@@ -3,7 +3,9 @@
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
 			<?php if ($read_only !== "true") { ?>
-				<a href="/add/dns/" class="button button-secondary" id="btn-create"><i class="fas fa-circle-plus icon-green"></i><?= _("Add DNS Domain") ?></a>
+				<a href="/add/dns/" class="button button-secondary js-button-create">
+					<i class="fas fa-circle-plus icon-green"></i><?= _("Add DNS Domain") ?>
+				</a>
 			<?php } ?>
 		</div>
 		<div class="toolbar-right">

web/templates/pages/list_dns_public.php

@@ -3,7 +3,7 @@
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
 			<?php if ($read_only !== "true") { ?>
-				<a href="/add/dns/" class="button button-secondary" id="btn-create">
+				<a href="/add/dns/" class="button button-secondary js-button-create">
 					<i class="fas fa-circle-plus icon-green"></i><?= _("Add DNS Domain") ?>
 				</a>
 			<?php } ?>

web/templates/pages/list_dns_rec.php

@@ -2,14 +2,14 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/dns/">
+			<a class="button button-secondary button-back js-button-back" href="/list/dns/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 			<?php if ($read_only !== "true") { ?>
-				<a href="/add/dns/?domain=<?= htmlentities($_GET["domain"]) ?>" class="button button-secondary" id="btn-create">
+				<a href="/add/dns/?domain=<?= htmlentities($_GET["domain"]) ?>" class="button button-secondary js-button-create">
 					<i class="fas fa-circle-plus icon-green"></i><?= _("Add Record") ?>
 				</a>
-				<a href="/edit/dns/?domain=<?= htmlentities($_GET["domain"]) ?>" class="button button-secondary" id="btn-create">
+				<a href="/edit/dns/?domain=<?= htmlentities($_GET["domain"]) ?>" class="button button-secondary js-button-create">
 					<i class="fas fa-pencil icon-blue"></i><?= _("Editing DNS Domain") ?>
 				</a>
 			<?php } ?>

web/templates/pages/list_firewall.php

@@ -2,10 +2,10 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/edit/server/">
+			<a class="button button-secondary button-back js-button-back" href="/edit/server/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
-			<a href="/add/firewall/" class="button button-secondary" id="btn-create">
+			<a href="/add/firewall/" class="button button-secondary js-button-create">
 				<i class="fas fa-circle-plus icon-green"></i><?= _("Add Rule") ?>
 			</a>
 			<?php if (!empty($_SESSION["FIREWALL_EXTENSION"])): ?>

web/templates/pages/list_firewall_banlist.php

@@ -2,10 +2,10 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/firewall/">
+			<a class="button button-secondary button-back js-button-back" href="/list/firewall/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
-			<a href="/add/firewall/banlist/" class="button button-secondary" id="btn-create">
+			<a href="/add/firewall/banlist/" class="button button-secondary js-button-create">
 				<i class="fas fa-circle-plus icon-green"></i><?= _("Ban IP Address") ?>
 			</a>
 		</div>

web/templates/pages/list_firewall_ipset.php

@@ -2,10 +2,10 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/firewall/">
+			<a class="button button-secondary button-back js-button-back" href="/list/firewall/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
-			<a href="/add/firewall/ipset/" class="button button-secondary" id="btn-create">
+			<a href="/add/firewall/ipset/" class="button button-secondary js-button-create">
 				<i class="fas fa-circle-plus icon-green"></i><?= _("Add IP list") ?>
 			</a>
 		</div>

web/templates/pages/list_ip.php

@@ -2,10 +2,10 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/edit/server/">
+			<a class="button button-secondary button-back js-button-back" href="/edit/server/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
-			<a href="/add/ip/" class="button button-secondary" id="btn-create">
+			<a href="/add/ip/" class="button button-secondary js-button-create">
 				<i class="fas fa-circle-plus icon-green"></i><?= _("Add IP") ?>
 			</a>
 		</div>

web/templates/pages/list_key.php

@@ -2,15 +2,15 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/edit/user/?token=<?= $_SESSION["token"] ?>">
+			<a class="button button-secondary button-back js-button-back" href="/edit/user/?token=<?= $_SESSION["token"] ?>">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 			<?php if ($_SESSION["userContext"] === "admin" && isset($_GET["user"]) && $_GET["user"] !== "admin") { ?>
-				<a href="/add/key/?user=<?= htmlentities($_GET["user"]) ?>" class="button button-secondary" id="btn-create">
+				<a href="/add/key/?user=<?= htmlentities($_GET["user"]) ?>" class="button button-secondary js-button-create">
 					<i class="fas fa-circle-plus icon-green"></i><?= _("Add SSH Key") ?>
 				</a>
 			<?php } else { ?>
-				<a href="/add/key/" class="button button-secondary" id="btn-create">
+				<a href="/add/key/" class="button button-secondary js-button-create">
 					<i class="fas fa-circle-plus icon-green"></i><?= _("Add SSH Key") ?>
 				</a>
 			<?php } ?>

web/templates/pages/list_log.php

@@ -3,20 +3,20 @@
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
 			<?php if ($_SESSION["userContext"] === "admin" && $_SESSION["look"] === "admin") { ?>
-				<a href="/list/user/" class="button button-secondary" id="btn-back">
+				<a href="/list/user/" class="button button-secondary button-back js-button-back">
 					<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 				</a>
 			<?php } elseif ($_SESSION["userContext"] === "admin" && htmlentities($_GET["user"]) === "system") { ?>
-				<a href="/list/server/" class="button button-secondary" id="btn-back">
+				<a href="/list/server/" class="button button-secondary button-back js-button-back">
 					<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 				</a>
 			<?php } else { ?>
 				<?php if (($_SESSION['userContext'] === 'admin') && (isset($_GET['user'])) && ($_GET['user'] !== 'admin')) { ?>
-					<a href="/edit/user/?user=<?=htmlentities($_GET['user']); ?>&token=<?=$_SESSION['token']?>" class="button button-secondary" id="btn-back">
+					<a href="/edit/user/?user=<?=htmlentities($_GET['user']); ?>&token=<?=$_SESSION['token']?>" class="button button-secondary button-back js-button-back">
 						<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 					</a>
 				<?php } else { ?>
-					<a href="/edit/user/?token=<?= $_SESSION["token"] ?>" class="button button-secondary" id="btn-back">
+					<a href="/edit/user/?token=<?= $_SESSION["token"] ?>" class="button button-secondary button-back js-button-back">
 						<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 					</a>
 				<?php } ?>
@@ -25,18 +25,18 @@
 			if (($_SESSION['userContext'] === 'admin') && (htmlentities($_GET['user']) !== 'admin')) { ?>
 				<?php if (($_SESSION['userContext'] === 'admin') && ($_GET['user'] != '') && (htmlentities($_GET['user']) !== 'admin')) { ?>
 					<?php if (htmlentities($_GET['user']) !== 'system') {?>
-						<a href="/list/log/auth/?user=<?=htmlentities($_GET['user']); ?>&token=<?=$_SESSION['token']?>" class="button button-secondary" id="btn-back" title="<?= _("Login history") ?>">
+						<a href="/list/log/auth/?user=<?=htmlentities($_GET['user']); ?>&token=<?=$_SESSION['token']?>" class="button button-secondary button-back js-button-back" title="<?= _("Login history") ?>">
 							<i class="fas fa-binoculars icon-green"></i><?= _("Login history") ?>
 						</a>
 					<?php } ?>
 				<?php } else { ?>
-					<a href="/list/log/auth/" class="button button-secondary" id="btn-back" title="<?= _("Login history") ?>">
+					<a href="/list/log/auth/" class="button button-secondary button-back js-button-back" title="<?= _("Login history") ?>">
 						<i class="fas fa-binoculars icon-green"></i><?= _("Login history") ?>
 					</a>
 				<?php } ?>
 			<?php } ?>
 			<?php if ($_SESSION["userContext"] === "user") { ?>
-				<a href="/list/log/auth/" class="button button-secondary" id="btn-back" title="<?= _("Login history") ?>">
+				<a href="/list/log/auth/" class="button button-secondary button-back js-button-back" title="<?= _("Login history") ?>">
 					<i class="fas fa-binoculars icon-green"></i><?= _("Login history") ?>
 				</a>
 			<?php }

web/templates/pages/list_log_auth.php

@@ -3,11 +3,11 @@
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
 			<?php if ($_SESSION["userContext"] === "admin" && isset($_GET["user"]) && htmlentities($_GET["user"]) !== "admin") { ?>
-				<a href="/list/log/?user=<?= htmlentities($_GET["user"]) ?>&token=<?= $_SESSION["token"] ?>" class="button button-secondary" id="btn-back">
+				<a href="/list/log/?user=<?= htmlentities($_GET["user"]) ?>&token=<?= $_SESSION["token"] ?>" class="button button-secondary button-back js-button-back">
 					<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 				</a>
 			<?php } else { ?>
-				<a href="/list/log/" class="button button-secondary" id="btn-back">
+				<a href="/list/log/" class="button button-secondary button-back js-button-back">
 					<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 				</a>
 			<?php } ?>

web/templates/pages/list_mail.php

@@ -3,7 +3,9 @@
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
 			<?php if ($read_only !== "true") { ?>
-				<a href="/add/mail/" class="button button-secondary" id="btn-create"><i class="fas fa-circle-plus icon-green"></i><?= _("Add Mail Domain") ?></a>
+				<a href="/add/mail/" class="button button-secondary js-button-create">
+					<i class="fas fa-circle-plus icon-green"></i><?= _("Add Mail Domain") ?>
+				</a>
 			<?php } ?>
 		</div>
 		<div class="toolbar-right">

web/templates/pages/list_mail_acc.php

@@ -8,14 +8,14 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/mail/">
+			<a class="button button-secondary button-back js-button-back" href="/list/mail/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 			<?php if ($read_only !== "true") { ?>
-				<a href="/add/mail/?domain=<?= htmlentities($_GET["domain"]) ?>" class="button button-secondary" id="btn-create">
+				<a href="/add/mail/?domain=<?= htmlentities($_GET["domain"]) ?>" class="button button-secondary js-button-create">
 					<i class="fas fa-circle-plus icon-green"></i><?= _("Add Mail Account") ?>
 				</a>
-				<a href="/edit/mail/?domain=<?= htmlentities($_GET["domain"]) ?>" class="button button-secondary" id="btn-create">
+				<a href="/edit/mail/?domain=<?= htmlentities($_GET["domain"]) ?>" class="button button-secondary js-button-create">
 					<i class="fas fa-pencil icon-blue"></i><?= _("Editing Mail Domain") ?>
 				</a>
 			<?php } ?>

web/templates/pages/list_mail_dns.php

@@ -7,7 +7,7 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/mail/">
+			<a class="button button-secondary button-back js-button-back" href="/list/mail/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/list_packages.php

@@ -2,10 +2,10 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/user/">
+			<a class="button button-secondary button-back js-button-back" href="/list/user/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
-			<a href="/add/package/" class="button button-secondary" id="btn-create">
+			<a href="/add/package/" class="button button-secondary js-button-create">
 				<i class="fas fa-circle-plus icon-green"></i><?= _("Add Package") ?>
 			</a>
 		</div>

web/templates/pages/list_rrd.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/server/">
+			<a class="button button-secondary button-back js-button-back" href="/list/server/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 			<a href="/list/server/?cpu" class="button button-secondary">

web/templates/pages/list_search.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a href="javascript:window.history.back();" class="button button-secondary" id="btn-back">
+			<a href="javascript:window.history.back();" class="button button-secondary button-back js-button-back">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 			<a href="javascript:location.reload();" class="button button-secondary">

web/templates/pages/list_server_preview.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a href="/edit/server/" class="button button-secondary" id="btn-back">
+			<a href="/edit/server/" class="button button-secondary button-back js-button-back">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/list_updates.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/server/">
+			<a class="button button-secondary button-back js-button-back" href="/list/server/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 			<?php

web/templates/pages/list_user.php

@@ -2,8 +2,12 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a href="/add/user/" class="button button-secondary" id="btn-create"><i class="fas fa-circle-plus icon-green"></i><?= _("Add User") ?></a>
-			<a href="/list/package/" class="button button-secondary"><i class="fas fa-box-open icon-orange"></i><?= _("Packages") ?></a>
+			<a href="/add/user/" class="button button-secondary js-button-create">
+				<i class="fas fa-circle-plus icon-green"></i><?= _("Add User") ?>
+			</a>
+			<a href="/list/package/" class="button button-secondary">
+				<i class="fas fa-box-open icon-orange"></i><?= _("Packages") ?>
+			</a>
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">

web/templates/pages/list_web.php

@@ -3,7 +3,7 @@
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
 			<?php if ($read_only !== "true") { ?>
-				<a href="/add/web/" class="button button-secondary" id="btn-create">
+				<a href="/add/web/" class="button button-secondary js-button-create">
 					<i class="fas fa-circle-plus icon-green"></i><?= _("Add Web Domain") ?>
 				</a>
 			<?php } ?>

web/templates/pages/list_webapps.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/edit/web/?domain=<?= htmlentities($v_domain) ?>">
+			<a class="button button-secondary button-back js-button-back" href="/edit/web/?domain=<?= htmlentities($v_domain) ?>">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/setup_webapp.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/add/webapp/?domain=<?= htmlentities($v_domain) ?>">
+			<a class="button button-secondary button-back js-button-back" href="/add/webapp/?domain=<?= htmlentities($v_domain) ?>">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>