Migrate List Mail Accounts to .units-table (#3672)

* Bump npm deps

* Migrate List Mail Accounts to .units-table

* Apply some Prettier formatting

package.json

@@ -27,18 +27,18 @@
 		"normalize.css": "^8.0.1"
 	},
 	"devDependencies": {
-		"@prettier/plugin-php": "^0.19.5",
-		"@typescript-eslint/eslint-plugin": "^5.59.8",
-		"@typescript-eslint/parser": "^5.59.7",
+		"@prettier/plugin-php": "^0.19.6",
+		"@typescript-eslint/eslint-plugin": "^5.59.9",
+		"@typescript-eslint/parser": "^5.59.9",
 		"cssnano": "^6.0.1",
-		"esbuild": "^0.17.19",
+		"esbuild": "^0.18.0",
 		"eslint": "^8.42.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-editorconfig": "^4.0.3",
 		"eslint-plugin-import": "^2.27.5",
 		"husky": "^8.0.3",
 		"lint-staged": "^13.2.2",
-		"markdownlint-cli2": "^0.7.1",
+		"markdownlint-cli2": "^0.8.0",
 		"postcss": "^8.4.24",
 		"postcss-import": "^15.1.0",
 		"postcss-path-replace": "^1.0.4",
@@ -48,10 +48,10 @@
 		"prettier-plugin-nginx": "^1.0.3",
 		"prettier-plugin-sh": "^0.12.8",
 		"prettier-plugin-sql": "^0.14.0",
-		"stylelint": "^15.6.3",
+		"stylelint": "^15.7.0",
 		"stylelint-config-standard": "^33.0.0",
-		"typescript": "^5.0.4",
-		"vitepress": "1.0.0-beta.1",
+		"typescript": "^5.1.3",
+		"vitepress": "1.0.0-beta.2",
 		"vue": "^3.3.4"
 	},
 	"browserslist": [

web/templates/includes/panel.php

@@ -9,8 +9,8 @@
 			<div class="top-bar-left">
 
 				<!-- Logo / Home Button -->
-				<a href="/" class="top-bar-logo" title="<?= htmlentities($_SESSION['APP_NAME']);?>">
-					<img src="/images/logo-header.svg" alt="<?= htmlentities($_SESSION['APP_NAME']);?>" width="54" height="29">
+				<a href="/" class="top-bar-logo" title="<?= htmlentities($_SESSION["APP_NAME"]) ?>">
+					<img src="/images/logo-header.svg" alt="<?= htmlentities($_SESSION["APP_NAME"]) ?>" width="54" height="29">
 				</a>
 
 				<!-- Usage Statistics -->

web/templates/pages/add_firewall_ipset.php

@@ -80,8 +80,8 @@
 						class="form-select js-datasource-select"
 						tabindex="-1"
 						onchange="this.nextElementSibling.value=this.value"
-						data-country-iplists="<?= htmlspecialchars(json_encode($country_iplists), ENT_QUOTES, 'UTF-8') ?>"
-						data-blacklist-iplists="<?= htmlspecialchars(json_encode($blacklist_iplists), ENT_QUOTES, 'UTF-8') ?>"
+						data-country-iplists="<?= htmlspecialchars(json_encode($country_iplists), ENT_QUOTES, "UTF-8") ?>"
+						data-blacklist-iplists="<?= htmlspecialchars(json_encode($blacklist_iplists), ENT_QUOTES, "UTF-8") ?>"
 					>
 						<option value=""><?= _("Clear") ?></option>
 					</select>

web/templates/pages/edit_firewall.php

@@ -54,7 +54,7 @@
 						class="form-select js-ip-list-select"
 						tabindex="-1"
 						onchange="this.nextElementSibling.value=this.value"
-						data-ipset-lists="<?= htmlspecialchars($ipset_lists_json, ENT_QUOTES, 'UTF-8') ?>"
+						data-ipset-lists="<?= htmlspecialchars($ipset_lists_json, ENT_QUOTES, "UTF-8") ?>"
 					>
 						<option value=""><?= _("Clear") ?></option>
 					</select>

web/templates/pages/list_backup.php

@@ -90,18 +90,18 @@
 							<li class="units-table-row-action shortcut-d" data-key-action="href">
 								<a
 									class="units-table-row-action-link"
-									href="/download/backup/?backup=<?=$key?>&token=<?=$_SESSION['token']?>"
+									href="/download/backup/?backup=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
 									title="<?= _("Download") ?>"
 								>
 									<i class="fas fa-file-arrow-down icon-lightblue"></i>
 									<span class="u-hide-desktop"><?= _("Download") ?></span>
 								</a>
 							</li>
-							<?php if ($read_only !== 'true') { ?>
+							<?php if ($read_only !== "true") { ?>
 								<li class="units-table-row-action shortcut-enter" data-key-action="href">
 									<a
 										class="units-table-row-action-link data-controls"
-										href="/list/backup/?backup=<?=$key?>&token=<?=$_SESSION['token']?>"
+										href="/list/backup/?backup=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
 										title="<?= _("Restore") ?>"
 									>
 										<i class="fas fa-arrow-rotate-left icon-green"></i>

web/templates/pages/list_ip.php

@@ -80,12 +80,12 @@
 				++$i;
 			?>
 			<div class="l-unit animate__animated animate__fadeIn js-unit"
-				data-sort-ip="<?=str_replace('.', '', $key)?>"
-				data-sort-date="<?=strtotime($data[$key]['DATE'] .' '. $data[$key]['TIME'] )?>"
-				data-sort-netmask="<?=str_replace('.', '', $data[$key]['NETMASK'])?>"
-				data-sort-interface="<?=$data[$key]['INTERFACE']?>"
-				data-sort-domains="<?=$data[$key]['U_WEB_DOMAINS']?>"
-				data-sort-owner="<?=$data[$key]['OWNER']?>">
+				data-sort-ip="<?= str_replace(".", "", $key) ?>"
+				data-sort-date="<?= strtotime($data[$key]["DATE"] . " " . $data[$key]["TIME"]) ?>"
+				data-sort-netmask="<?= str_replace(".", "", $data[$key]["NETMASK"]) ?>"
+				data-sort-interface="<?= $data[$key]["INTERFACE"] ?>"
+				data-sort-domains="<?= $data[$key]["U_WEB_DOMAINS"] ?>"
+				data-sort-owner="<?= $data[$key]["OWNER"] ?>">
 
 				<div class="l-unit__col l-unit__col--right">
 					<div class="clearfix l-unit__stat-col--left super-compact">
@@ -101,9 +101,9 @@
 								<div class="actions-panel__col actions-panel__delete shortcut-delete" data-key-action="js">
 									<a
 										class="data-controls js-confirm-action"
-										href="/delete/ip/?ip=<?=$key?>&token=<?=$_SESSION['token']?>"
+										href="/delete/ip/?ip=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
 										data-confirm-title="<?= _("Delete") ?>"
-										data-confirm-message="<?= sprintf(_('Are you sure you want to delete IP address %s?'), $key) ?>"
+										data-confirm-message="<?= sprintf(_("Are you sure you want to delete IP address %s?"), $key) ?>"
 									>
 										<i class="fas fa-trash icon-red icon-dim"></i>
 									</a>

web/templates/pages/list_mail_acc.php

@@ -75,22 +75,18 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 
 <div class="container">
 
-	<div class="units js-units-container">
-		<div class="header units-header">
-			<div class="l-unit__col l-unit__col--right">
-				<div>
-					<div class="clearfix l-unit__stat-col--left super-compact">
-						<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>" <?= $display_mode ?>>
-					</div>
-					<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Name") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-right compact-4"><b>&nbsp;</b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center compact"><b><?= _("Disk") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Quota") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Aliases") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Forwarding") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Auto Reply") ?></b></div>
-				</div>
+	<div class="units-table js-units-container">
+		<div class="units-table-header">
+			<div class="units-table-cell">
+				<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>" <?= $display_mode ?>>
 			</div>
+			<div class="units-table-cell"><?= _("Name") ?></div>
+			<div class="units-table-cell"></div>
+			<div class="units-table-cell u-text-center"><?= _("Disk") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Quota") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Aliases") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Forwarding") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Auto Reply") ?></div>
 		</div>
 
 		<!-- Begin mail account list item loop -->
@@ -102,118 +98,181 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 					$spnd_action = 'unsuspend';
 					$spnd_action_title = _('Unsuspend');
 					$spnd_icon = 'fa-play';
+					$spnd_icon_class = 'icon-green';
 					$spnd_confirmation = _('Are you sure you want to unsuspend %s?');
 					if ($data[$key]['ALIAS'] == '') {
 						$alias_icon = 'fa-circle-minus';
+						$alias_title = _('No aliases');
 					} else {
 						$alias_icon = 'fa-circle-check';
+						$alias_title = _('Aliases used');
 					}
 					if ($data[$key]['FWD'] == '') {
 						$fwd_icon = 'fa-circle-minus';
+						$fwd_title = _('Disabled');
 					} else {
 						$fwd_icon = 'fa-circle-check';
+						$fwd_title = _('Enabled');
 					}
 					if ($data[$key]['AUTOREPLY'] == 'no') {
 						$autoreply_icon = 'fa-circle-minus';
+						$autoreply_title = _('Disabled');
 					} else {
 						$autoreply_icon = 'fa-circle-check';
+						$autoreply_title = _('Enabled');
 					}
 				} else {
 					$status = 'active';
 					$spnd_action = 'suspend';
 					$spnd_action_title = _('Suspend');
 					$spnd_icon = 'fa-pause';
+					$spnd_icon_class = 'icon-highlight';
 					$spnd_confirmation = _('Are you sure you want to suspend %s?');
 					if ($data[$key]['ALIAS'] == '') {
 						$alias_icon = 'fa-circle-minus';
+						$alias_title = _('No aliases');
 					} else {
 						$alias_icon = 'fa-circle-check icon-green';
+						$alias_title = _('Aliases used');
 					}
 					if ($data[$key]['FWD'] == '') {
 						$fwd_icon = 'fa-circle-minus';
+						$fwd_title = _('Disabled');
 					} else {
 						$fwd_icon = 'fa-circle-check icon-green';
+						$fwd_title = _('Enabled');
 					}
 					if ($data[$key]['AUTOREPLY'] == 'no') {
 						$autoreply_icon = 'fa-circle-minus';
+						$autoreply_title = _('Disabled');
 					} else {
 						$autoreply_icon = 'fa-circle-check icon-green';
+						$autoreply_title = _('Enabled');
 					}
 				}
 			?>
-			<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-unit"
-				data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
-				data-sort-name="<?=$key?>"
-				data-sort-disk="<?=$data[$key]['U_DISK']?>"
-				data-sort-quota="<?=$data[$key]['QUOTA']?>">
-				<div class="l-unit__col l-unit__col--right">
-					<div class="clearfix l-unit__stat-col--left super-compact">
-						<input id="check<?=$i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="account[]" value="<?=$key?>" <?=$display_mode;?>>
+			<div class="units-table-row <?php if ($status == 'suspended') echo 'disabled'; ?> animate__animated animate__fadeIn js-unit"
+				data-sort-date="<?= strtotime($data[$key]['DATE'].' '.$data[$key]['TIME']) ?>"
+				data-sort-name="<?= $key ?>"
+				data-sort-disk="<?= $data[$key]['U_DISK'] ?>"
+				data-sort-quota="<?= $data[$key]['QUOTA'] ?>">
+				<div class="units-table-cell">
+					<div>
+						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="account[]" value="<?= $key ?>" <?= $display_mode ?>>
+						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
-					<div class="clearfix l-unit__stat-col--left wide-3 truncate">
-						<?php if (($read_only === 'true') || ($data[$key]['SUSPENDED'] == 'yes')) { ?>
-							<b><?=$key."@".htmlentities($_GET['domain']);?></b>
+				</div>
+				<div class="units-table-cell units-table-heading-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Name") ?>:</span>
+					<?php if ($read_only === "true" || $data[$key]["SUSPENDED"] == "yes") { ?>
+						<?= $key . "@" . htmlentities($_GET["domain"]) ?>
+					<?php } else { ?>
+						<a href="/edit/mail/?domain=<?=htmlspecialchars($_GET['domain'])?>&account=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit Mail Account") ?>: <?=$key?>@<?=htmlspecialchars($_GET['domain'])?>">
+							<?= $key."@".htmlentities($_GET['domain']); ?>
+						</a>
+					<?php } ?>
+				</div>
+				<div class="units-table-cell">
+					<ul class="units-table-row-actions">
+						<?php if ($read_only === "true") { ?>
+							<!-- Restrict the ability to edit, delete, or suspend domain items when impersonating 'admin' account -->
+							<?php if ($data[$key]["SUSPENDED"] != "yes") { ?>
+								<li class="units-table-row-action" data-key-action="href">
+									<a
+										class="units-table-row-action-link"
+										href="http://<?= $v_webmail_alias ?>.<?= htmlspecialchars($_GET["domain"]) ?>/?_user=<?= $key ?>@<?= htmlspecialchars($_GET["domain"]) ?>"
+										target="_blank"
+										title="<?= _("Open Webmail") ?>"
+									>
+										<i class="fas fa-envelope-open-text icon-maroon"></i>
+										<span class="u-hide-desktop"><?= _("Open Webmail") ?></span>
+									</a>
+								</li>
+							<?php } ?>
 						<?php } else { ?>
-							<b><a href="/edit/mail/?domain=<?=htmlspecialchars($_GET['domain'])?>&account=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit Mail Account") ?>: <?=$key?>@<?=htmlspecialchars($_GET['domain'])?>"><?=$key."@".htmlentities($_GET['domain']);?></a></b>
-						<?php } ?>
-					</div>
-					<!-- START QUICK ACTION TOOLBAR AREA -->
-					<div class="clearfix l-unit__stat-col--left u-text-right compact-4">
-						<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
-							<div class="actions-panel clearfix">
-								<?php if ($read_only === 'true') { ?>
-									<!-- Restrict the ability to edit, delete, or suspend domain items when impersonating 'admin' account -->
-									<?php if ($data[$key]['SUSPENDED'] == 'yes') { ?>
-										&nbsp;
-									<?php } else { ?>
-										<div class="actions-panel__col actions-panel__edit" data-key-action="href"><a href="http://<?=$v_webmail_alias;?>.<?=htmlspecialchars($_GET['domain'])?>/?_user=<?=$key?>@<?=htmlspecialchars($_GET['domain'])?>" target="_blank" title="<?= _("Open Webmail") ?>"><i class="fas fa-envelope-open-text icon-maroon icon-dim"></i></a></div>
+							<?php if ($data[$key]["SUSPENDED"] == "no") { ?>
+								<?php if ($_SESSION["WEBMAIL_SYSTEM"]) { ?>
+									<?php if (!empty($data[$key]["WEBMAIL"])) { ?>
+										<li class="units-table-row-action" data-key-action="href">
+											<a
+												class="units-table-row-action-link"
+												href="http://<?= $v_webmail_alias ?>.<?= htmlspecialchars($_GET["domain"]) ?>/?_user=<?= $key ?>@<?= htmlspecialchars($_GET["domain"]) ?>"
+												target="_blank"
+												title="<?= _("Open Webmail") ?>"
+											>
+												<i class="fas fa-envelope-open-text icon-maroon"></i>
+												<span class="u-hide-desktop"><?= _("Open Webmail") ?></span>
+											</a>
+										</li>
 									<?php } ?>
-								<?php } else { ?>
-									<?php if ($data[$key]['SUSPENDED'] == 'no') { ?>
-										<?php if($_SESSION['WEBMAIL_SYSTEM']){?>
-											<?php if (!empty($data[$key]['WEBMAIL'])) { ?>
-												<div class="actions-panel__col actions-panel__edit" data-key-action="href"><a href="http://<?=$v_webmail_alias;?>.<?=htmlspecialchars($_GET['domain'])?>/?_user=<?=$key?>@<?=htmlspecialchars($_GET['domain'])?>" target="_blank" title="<?= _("Open Webmail") ?>"><i class="fas fa-envelope-open-text icon-maroon icon-dim"></i></a></div>
-											<?php } ?>
-										<?php } ?>
-									<div class="actions-panel__col actions-panel__logs shortcut-enter" data-key-action="href"><a href="/edit/mail/?domain=<?=htmlspecialchars($_GET['domain'])?>&account=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit Mail Account") ?>"><i class="fas fa-pencil icon-orange icon-dim"></i></a></div>
-									<?php } ?>
-									<div class="actions-panel__col actions-panel__suspend shortcut-s" data-key-action="js">
-										<a
-											class="data-controls js-confirm-action"
-											href="/<?= $spnd_action ?>/mail/?domain=<?=htmlspecialchars($_GET['domain'])?>&account=<?=$key?>&token=<?=$_SESSION['token']?>"
-											data-confirm-title="<?= $spnd_action_title ?>"
-											data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"
-										>
-											<i class="fas <?= $spnd_icon ?> icon-highlight icon-dim"></i>
-										</a>
-									</div>
-									<div class="actions-panel__col actions-panel__delete shortcut-delete" data-key-action="js">
-										<a
-											class="data-controls js-confirm-action"
-											href="/delete/mail/?domain=<?=htmlspecialchars($_GET['domain'])?>&account=<?=$key?>&token=<?=$_SESSION['token']?>"
-											data-confirm-title="<?= _("Delete") ?>"
-											data-confirm-message="<?= sprintf(_('Are you sure you want to delete %s?'), $key) ?>"
-										>
-											<i class="fas fa-trash icon-red icon-dim"></i>
-										</a>
-									</div>
 								<?php } ?>
-							</div>
-						</div>
-						<!-- END QUICK ACTION TOOLBAR AREA -->
-					</div>
-
-					<div class="clearfix l-unit__stat-col--left u-text-center compact"><b><?= humanize_usage_size($data[$key]["U_DISK"]) ?></b> <span class="u-text-small"><?= humanize_usage_measure($data[$key]["U_DISK"]) ?></span></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?=humanize_usage_size($data[$key]["QUOTA"]) ?></b> <span class="u-text-small"><?= humanize_usage_measure($data[$key]["QUOTA"]) ?></span></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center">
-						<i class="fas <?= $alias_icon ?>"></i>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center">
-						<i class="fas <?= $fwd_icon ?>"></i>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center">
-						<i class="fas <?= $autoreply_icon ?>"></i>
-					</div>
+								<li class="units-table-row-action shortcut-enter" data-key-action="href">
+									<a
+										class="units-table-row-action-link"
+										href="/edit/mail/?domain=<?= htmlspecialchars($_GET["domain"]) ?>&account=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
+										title="<?= _("Edit Mail Account") ?>"
+									>
+										<i class="fas fa-pencil icon-orange"></i>
+										<span class="u-hide-desktop"><?= _("Edit Mail Account") ?></span>
+									</a>
+								</li>
+							<?php } ?>
+							<li class="units-table-row-action shortcut-s" data-key-action="js">
+								<a
+									class="units-table-row-action-link data-controls js-confirm-action"
+									href="/<?= $spnd_action ?>/mail/?domain=<?= htmlspecialchars($_GET["domain"]) ?>&account=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
+									title="<?= $spnd_action_title ?>"
+									data-confirm-title="<?= $spnd_action_title ?>"
+									data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"
+								>
+									<i class="fas <?= $spnd_icon ?> <?= $spnd_icon_class ?>"></i>
+									<span class="u-hide-desktop"><?= $spnd_action_title ?></span>
+								</a>
+							</li>
+							<li class="units-table-row-action shortcut-delete" data-key-action="js">
+								<a
+									class="units-table-row-action-link data-controls js-confirm-action"
+									href="/delete/mail/?domain=<?= htmlspecialchars($_GET["domain"]) ?>&account=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
+									title="<?= _("Delete") ?>"
+									data-confirm-title="<?= _("Delete") ?>"
+									data-confirm-message="<?= sprintf(_("Are you sure you want to delete %s?"), $key) ?>"
+								>
+									<i class="fas fa-trash icon-red"></i>
+									<span class="u-hide-desktop"><?= _("Delete") ?></span>
+								</a>
+							</li>
+						<?php } ?>
+					</ul>
+				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<span class="u-hide-desktop u-text-bold"><?= _("Disk") ?>:</span>
+					<span class="u-text-bold">
+						<?= humanize_usage_size($data[$key]["U_DISK"]) ?>
+					</span>
+					<span class="u-text-small">
+						<?= humanize_usage_measure($data[$key]["U_DISK"]) ?>
+					</span>
+				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<span class="u-hide-desktop u-text-bold"><?= _("Quota") ?>:</span>
+					<span class="u-text-bold">
+						<?= humanize_usage_size($data[$key]["QUOTA"]) ?>
+					</span>
+					<span class="u-text-small">
+						<?= humanize_usage_measure($data[$key]["QUOTA"]) ?>
+					</span>
+				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<span class="u-hide-desktop u-text-bold"><?= _("Aliases") ?>:</span>
+					<i class="fas <?= $alias_icon ?>" title="<?= $alias_title ?>"></i>
+				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<span class="u-hide-desktop u-text-bold"><?= _("Forwarding") ?>:</span>
+					<i class="fas <?= $fwd_icon ?>" title="<?= $fwd_title ?>"></i>
+				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<span class="u-hide-desktop u-text-bold"><?= _("Auto Reply") ?>:</span>
+					<i class="fas <?= $autoreply_icon ?>" title="<?= $autoreply_title ?>"></i>
 				</div>
 			</div>
 		<?php } ?>

web/templates/pages/list_packages.php

@@ -73,26 +73,26 @@
 				++$i;
 			?>
 			<div class="l-unit animate__animated animate__fadeIn js-unit"
-				data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
-				data-sort-name="<?=$key?>"
-				data-sort-bandwidth="<?=$data[$key]['BANDWIDTH']?>"
-				data-sort-disk="<?=$data[$key]['DISK_QUOTA']?>">
+				data-sort-date="<?= strtotime($data[$key]["DATE"] . " " . $data[$key]["TIME"]) ?>"
+				data-sort-name="<?= $key ?>"
+				data-sort-bandwidth="<?= $data[$key]["BANDWIDTH"] ?>"
+				data-sort-disk="<?= $data[$key]["DISK_QUOTA"] ?>">
 				<div class="l-unit__col l-unit__col--right">
 					<div class="clearfix l-unit__stat-col--left super-compact">
-						<input id="check<?=$i?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="package[]" value="<?=$key?>">
+						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="package[]" value="<?= $key ?>">
 					</div>
-					<?php if ($key == 'system'){ ?>
-						<div class="clearfix l-unit__stat-col--left wide truncate"><b><?=$key?></b></div>
+					<?php if ($key == "system") { ?>
+						<div class="clearfix l-unit__stat-col--left wide truncate"><b><?= $key ?></b></div>
 					<?php } else { ?>
 						<div class="clearfix l-unit__stat-col--left wide truncate">
-							<b><a href="/edit/package/?package=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit Package") ?>: <?=$key?>"><?=$key?></a></b>
+							<b><a href="/edit/package/?package=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Edit Package") ?>: <?= $key ?>"><?= $key ?></a></b>
 						</div>
 					<?php } ?>
 					<!-- START QUICK ACTION TOOLBAR AREA -->
 					<div class="clearfix l-unit__stat-col--left u-text-right compact-3">
 						<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
 							<div class="actions-panel clearfix">
-								<?php if (($key == 'system')) { ?>
+								<?php if ($key == "system") { ?>
 									<!-- Restrict editing system package -->
 								<?php } else {?>
 									<div class="actions-panel__col actions-panel__edit shortcut-enter" data-key-action="href"><a href="/edit/package/?package=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit Package") ?>"><i class="fas fa-pencil icon-orange icon-dim"></i></a></div>
@@ -100,13 +100,13 @@
 								<div class="actions-panel__col actions-panel__edit" data-key-action="href"><a href="/copy/package/?package=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Duplicate") ?>"><i class="fas fa-clone icon-teal icon-dim"></i></a></div>
 								<?php if ($key == 'system') { ?>
 									<!-- Restrict deleting system package -->
-								<?php } else {?>
+								<?php } else { ?>
 									<div class="actions-panel__col actions-panel__delete shortcut-delete" data-key-action="js">
 										<a
 											class="data-controls js-confirm-action"
-											href="/delete/package/?package=<?=$key?>&token=<?=$_SESSION['token']?>"
+											href="/delete/package/?package=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
 											data-confirm-title="<?= _("Delete") ?>"
-											data-confirm-message="<?= sprintf(_('Are you sure you want to delete package %s?'), $key) ?>"
+											data-confirm-message="<?= sprintf(_("Are you sure you want to delete package %s?"), $key) ?>"
 										>
 											<i class="fas fa-trash icon-red icon-dim"></i>
 										</a>

web/templates/pages/list_services.php

@@ -133,9 +133,9 @@
 			?>
 			<div class="units-table-row <?php if ($status == 'suspended') echo 'disabled'; ?> animate__animated animate__fadeIn js-unit"
 				data-sort-name="<?= strtolower($key) ?>"
-				data-sort-memory="<?= $data[$key]['MEM'] ?>"
-				data-sort-cpu="<?= $cpu; ?>"
-				data-sort-uptime="<?= $data[$key]['RTIME'] ?>">
+				data-sort-memory="<?= $data[$key]["MEM"] ?>"
+				data-sort-cpu="<?= $cpu ?>"
+				data-sort-uptime="<?= $data[$key]["RTIME"] ?>">
 				<div class="units-table-cell">
 					<div>
 						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="service[]" value="<?= $key ?>">
@@ -167,7 +167,7 @@
 								href="/restart/service/?srv=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
 								title="<?= _("Restart") ?>"
 								data-confirm-title="<?= _("Restart") ?>"
-								data-confirm-message="<?= sprintf(_('Are you sure you want to restart %s?'), $key) ?>"
+								data-confirm-message="<?= sprintf(_("Are you sure you want to restart %s?"), $key) ?>"
 							>
 								<i class="fas fa-arrow-rotate-left icon-highlight"></i>
 								<span class="u-hide-desktop"><?= _("Restart") ?></span>
@@ -176,7 +176,7 @@
 						<li class="units-table-row-action shortcut-delete" data-key-action="js">
 							<a
 								class="units-table-row-action-link data-controls js-confirm-action"
-								href="/<?= $action ?>/service/?srv=<?=$key?>&token=<?=$_SESSION['token']?>"
+								href="/<?= $action ?>/service/?srv=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
 								title="<?= _($action) ?>"
 								data-confirm-message="<?php if ($action == 'stop'){ echo sprintf(_('Are you sure you want to stop service %s?'), $key); } else { echo sprintf(_('Are you sure you want to start service %s?'), $key); }?>"
 							>
@@ -188,11 +188,11 @@
 				</div>
 				<div class="units-table-cell">
 					<span class="u-hide-desktop u-text-bold"><?= _("Description") ?>:</span>
-					<?= _($data[$key]['SYSTEM']) ?>
+					<?= _($data[$key]["SYSTEM"]) ?>
 				</div>
 				<div class="units-table-cell u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("Uptime") ?>:</span>
-					<?= humanize_time($data[$key]['RTIME']) ?>
+					<?= humanize_time($data[$key]["RTIME"]) ?>
 				</div>
 				<div class="units-table-cell u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("CPU") ?>:</span>
@@ -200,7 +200,7 @@
 				</div>
 				<div class="units-table-cell u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("Memory") ?>:</span>
-					<?= $data[$key]['MEM'] ?> <?= _("MB") ?>
+					<?= $data[$key]["MEM"] ?> <?= _("MB") ?>
 				</div>
 			</div>
 		<?php } ?>

web/templates/pages/list_user.php

@@ -142,18 +142,18 @@
 				<div class="units-table-cell units-table-heading-cell">
 					<span class="u-hide-desktop"><?= _("Name") ?>:</span>
 					<?php if ($key == $user_plain) { ?>
-						<a href="/edit/user/?user=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit User") ?>">
+						<a href="/edit/user/?user=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Edit User") ?>">
 							<span class="u-text-bold">
 								<?= $key ?>
 							</span>
-							(<?=$data[$key]['NAME'];?>)
+							(<?= $data[$key]["NAME"] ?>)
 						</a>
 					<?php } else { ?>
-						<a href="/login/?loginas=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Log in as") ?> <?=$key?>">
+						<a href="/login/?loginas=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Log in as") ?> <?= $key ?>">
 							<span class="u-text-bold">
 								<?= $key ?>
 							</span>
-							(<?=$data[$key]['NAME'];?>)
+							(<?= $data[$key]["NAME"] ?>)
 						</a>
 					<?php } ?>
 					<p>
@@ -184,7 +184,7 @@
 							<li class="units-table-row-action shortcut-enter" data-key-action="href">
 								<a
 									class="units-table-row-action-link"
-									href="/edit/user/?user=<?=$key?>&token=<?=$_SESSION['token']?>"
+									href="/edit/user/?user=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
 									title="<?= _("Edit User") ?>"
 								>
 									<i class="fas fa-pencil icon-orange"></i>
@@ -211,7 +211,7 @@
 									href="/delete/user/?user=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
 									title="<?= _("Delete") ?>"
 									data-confirm-title="<?= _("Delete") ?>"
-									data-confirm-message="<?= sprintf(_('Are you sure you want to delete user %s?'), $key) ?>"
+									data-confirm-message="<?= sprintf(_("Are you sure you want to delete user %s?"), $key) ?>"
 								>
 									<i class="fas fa-trash icon-red"></i>
 									<span class="u-hide-desktop"><?= _("Delete") ?></span>

web/templates/pages/list_web.php

@@ -195,7 +195,7 @@
 				</div>
 				<div class="units-table-cell units-table-heading-cell u-text-bold">
 					<span class="u-hide-desktop"><?= _("Name") ?>:</span>
-					<?php if ($read_only === 'true') { ?>
+					<?php if ($read_only === "true") { ?>
 						<?= $key ?>
 					<?php } else {
 						$aliases = explode(',', $data[$key]['ALIAS']);
@@ -219,11 +219,11 @@
 				</div>
 				<div class="units-table-cell">
 					<ul class="units-table-row-actions">
-						<?php if (!empty($data[$key]['STATS'])) { ?>
+						<?php if (!empty($data[$key]["STATS"])) { ?>
 							<li class="units-table-row-action shortcut-w" data-key-action="href">
 								<a
 									class="units-table-row-action-link"
-									href="http://<?=$key?>/vstats/"
+									href="http://<?= $key ?>/vstats/"
 									target="_blank"
 									rel="noopener"
 									title="<?= _("Statistics") ?>"
@@ -236,7 +236,7 @@
 						<li class="units-table-row-action" data-key-action="href">
 							<a
 								class="units-table-row-action-link"
-								href="http://<?=$key?>/"
+								href="http://<?= $key ?>/"
 								target="_blank"
 								rel="noopener"
 								title="<?= _("Visit") ?>"
@@ -246,11 +246,11 @@
 							</a>
 						</li>
 						<?php if ($read_only !== "true") { ?>
-							<?php if ($data[$key]['SUSPENDED'] == 'no') { ?>
+							<?php if ($data[$key]["SUSPENDED"] == "no") { ?>
 								<li class="units-table-row-action shortcut-enter" data-key-action="href">
 									<a
 										class="units-table-row-action-link"
-										href="/edit/web/?domain=<?=$key?>&token=<?=$_SESSION['token']?>"
+										href="/edit/web/?domain=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
 										title="<?= _("Edit Domain") ?>"
 									>
 										<i class="fas fa-pencil icon-orange"></i>
@@ -261,7 +261,7 @@
 							<li class="units-table-row-action shortcut-l" data-key-action="href">
 								<a
 									class="units-table-row-action-link"
-									href="/list/web-log/?domain=<?=$key?>&type=access#"
+									href="/list/web-log/?domain=<?= $key ?>&type=access#"
 									title="<?= _("Access Log") ?>"
 								>
 									<i class="fas fa-binoculars icon-purple"></i>
@@ -271,7 +271,7 @@
 							<li class="units-table-row-action shortcut-s" data-key-action="js">
 								<a
 									class="units-table-row-action-link data-controls js-confirm-action"
-									href="/<?= $spnd_action ?>/web/?domain=<?=$key?>&token=<?=$_SESSION['token']?>"
+									href="/<?= $spnd_action ?>/web/?domain=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
 									title="<?= $spnd_action_title ?>"
 									data-confirm-title="<?= $spnd_action_title ?>"
 									data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"
@@ -283,10 +283,10 @@
 							<li class="units-table-row-action shortcut-delete" data-key-action="js">
 								<a
 									class="units-table-row-action-link data-controls js-confirm-action"
-									href="/delete/web/?domain=<?=$key?>&token=<?=$_SESSION['token']?>"
+									href="/delete/web/?domain=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
 									title="<?= _("Delete") ?>"
 									data-confirm-title="<?= _("Delete") ?>"
-									data-confirm-message="<?= sprintf(_('Are you sure you want to delete domain %s?'), $key) ?>"
+									data-confirm-message="<?= sprintf(_("Are you sure you want to delete domain %s?"), $key) ?>"
 								>
 									<i class="fas fa-trash icon-red"></i>
 									<span class="u-hide-desktop"><?= _("Delete") ?></span>
@@ -297,24 +297,24 @@
 				</div>
 				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("IP Address") ?>:</span>
-					<?= empty($ips[$data[$key]['IP']]['NAT']) ? $data[$key]['IP'] : "{$ips[$data[$key]['IP']]['NAT']}"; ?>
+					<?= empty($ips[$data[$key]["IP"]]["NAT"]) ? $data[$key]["IP"] : "{$ips[$data[$key]["IP"]]["NAT"]}" ?>
 				</div>
 				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Disk") ?>:</span>
 					<span class="u-text-bold">
-						<?= humanize_usage_size($data[$key]['U_DISK']) ?>
+						<?= humanize_usage_size($data[$key]["U_DISK"]) ?>
 					</span>
 					<span class="u-text-small">
-						<?= humanize_usage_measure($data[$key]['U_DISK']) ?>
+						<?= humanize_usage_measure($data[$key]["U_DISK"]) ?>
 					</span>
 				</div>
 				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Bandwidth") ?>:</span>
 					<span class="u-text-bold">
-						<?= humanize_usage_size($data[$key]['U_BANDWIDTH']) ?>
+						<?= humanize_usage_size($data[$key]["U_BANDWIDTH"]) ?>
 					</span>
 					<span class="u-text-small">
-						<?= humanize_usage_measure($data[$key]['U_BANDWIDTH']) ?>
+						<?= humanize_usage_measure($data[$key]["U_BANDWIDTH"]) ?>
 					</span>
 				</div>
 				<div class="units-table-cell u-text-center-desktop">