Просмотр исходного кода

Migrate List Mail/DNS/Web to .units-table (#3628)

* Migrate List Mail to .units-table

And improve spacing on mobile.

* Remove some special chars from password generator

#3625

* Improve login form attributes for password managers

* Tidy formatting

* Fix error display in password reset form

Missing from #3553

* Bump npm deps

* Fix JS error on List Backup Detail page

* Add title attributes

* Refine list view spacing

* Migrate List DNS to .units-table

* Tidy formatting

* Remove incorrect link

* Migrate List Web to .units-table

* Tidy formatting

* Simplify

* Formatting
Alec Rust 2 лет назад
Родитель
Сommit
b4af81e6bd

+ 6 - 6
package.json

@@ -27,12 +27,12 @@
 		"normalize.css": "^8.0.1"
 	},
 	"devDependencies": {
-		"@prettier/plugin-php": "^0.19.4",
-		"@typescript-eslint/eslint-plugin": "^5.59.6",
-		"@typescript-eslint/parser": "^5.59.6",
+		"@prettier/plugin-php": "^0.19.5",
+		"@typescript-eslint/eslint-plugin": "^5.59.7",
+		"@typescript-eslint/parser": "^5.59.7",
 		"cssnano": "^6.0.1",
 		"esbuild": "^0.17.19",
-		"eslint": "^8.40.0",
+		"eslint": "^8.41.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-editorconfig": "^4.0.3",
 		"eslint-plugin-import": "^2.27.5",
@@ -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.1",
+		"stylelint": "^15.6.2",
 		"stylelint-config-standard": "^33.0.0",
 		"typescript": "^5.0.4",
-		"vitepress": "1.0.0-alpha.76",
+		"vitepress": "1.0.0-beta.1",
 		"vue": "^3.3.4"
 	},
 	"browserslist": [

+ 15 - 3
web/css/src/themes/default.css

@@ -883,6 +883,10 @@
 	border: 1px solid #ddd;
 	border-radius: 6px;
 
+	&:last-child {
+		margin-bottom: 10px;
+	}
+
 	&.selected {
 		background-color: #f8f8f8;
 		box-shadow: 0 2px 10px rgb(150 150 150 / 20%);
@@ -915,6 +919,7 @@
 
 		&:last-child {
 			border-bottom-color: transparent;
+			margin-bottom: 0;
 		}
 
 		&:hover {
@@ -951,8 +956,11 @@
 }
 
 .units-table-cell {
+	/* Row heading cell */
 	&:nth-child(2) {
 		font-size: 0.9rem;
+		padding-top: 5px;
+		padding-bottom: 5px;
 	}
 
 	& a {
@@ -975,6 +983,8 @@
 		/* Row heading cell */
 		&:nth-child(2) {
 			font-size: 0.8rem;
+			padding-top: 10px;
+			padding-bottom: 10px;
 		}
 
 		/* Metadata cells */
@@ -988,16 +998,16 @@
 	display: flex;
 	flex-wrap: wrap;
 	padding-top: 5px;
-	padding-bottom: 5px;
 
 	@media (--viewport-large) {
 		visibility: hidden;
-		padding: 0;
+		padding-top: 0;
 	}
 }
 
 .units-table-row-action {
-	margin-right: 10px;
+	margin-right: 5px;
+	margin-bottom: 5px;
 
 	&:last-child {
 		margin-right: 0;
@@ -1005,6 +1015,7 @@
 
 	@media (--viewport-large) {
 		margin-right: 0;
+		margin-bottom: 0;
 	}
 }
 
@@ -2142,6 +2153,7 @@
 	padding: 3px;
 
 	& .fas {
+		line-height: 1.1;
 		margin-right: 0;
 	}
 }

+ 1 - 1
web/js/src/helpers.js

@@ -5,7 +5,7 @@ export function randomPassword(length = 16) {
 	const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 	const lowercase = 'abcdefghijklmnopqrstuvwxyz';
 	const numbers = '0123456789';
-	const symbols = '!@#$%^&*()_+-=[]{}|;:,./<>?';
+	const symbols = '!@#$%^&*()_+-=[]{}|;:/?';
 	const allCharacters = uppercase + lowercase + numbers + symbols;
 	const generate = customAlphabet(allCharacters, length);
 

+ 2 - 4
web/templates/includes/js.php

@@ -9,15 +9,13 @@
 			NOTIFICATIONS_EMPTY: '<?= _("No notifications") ?>',
 			NOTIFICATIONS_DELETE_ALL: '<?= _("Delete all notifications") ?>',
 			CONFIRM_LEAVE_PAGE: '<?= _("Are you sure you want to leave the page?") ?>',
-			ERROR_MESSAGE: '<?= !empty($_SESSION['error_msg']) ? htmlentities($_SESSION['error_msg']) : '' ?>',
+			ERROR_MESSAGE: '<?= !empty($_SESSION["error_msg"]) ? htmlentities($_SESSION["error_msg"]) : "" ?>',
 			BLACKLIST: '<?= _("BLACKLIST") ?>',
 			IPVERSE: '<?= _("IPVERSE") ?>'
 		});
 	})
 </script>
-<?php
-$_SESSION['unset_alerts'] = true;
-?>
+<?php $_SESSION["unset_alerts"] = true; ?>
 
 <?php
 $customScriptDirectory = new DirectoryIterator($_SERVER["HESTIA"] . "/web/js/custom_scripts");

+ 1 - 1
web/templates/includes/title.php

@@ -1,3 +1,3 @@
 <meta charset="utf-8">
-<title><?= display_title($TAB); ?></title>
+<title><?= display_title($TAB) ?></title>
 <meta name="viewport" content="width=device-width, initial-scale=1">

+ 1 - 1
web/templates/pages/add_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>

+ 4 - 4
web/templates/pages/edit_whitelabel.php

@@ -80,7 +80,7 @@
 
 					<div class="u-mb10">
 						<label for="v_from_email" class="form-label">
-							<?= _("Sender Email Address") ?><span class="optional">(<?= _("Default") ?>: <?=sprintf('noreply@%s', htmlentities(trim(get_hostname(), "'")));?>)</span>
+							<?= _("Sender Email Address") ?><span class="optional">(<?= _("Default") ?>: <?= sprintf("noreply@%s", htmlentities(trim(get_hostname(), "'"))) ?>)</span>
 						</label>
 						<input
 							type="text"
@@ -107,8 +107,8 @@
 							<?= _("Hide link to Documentation") ?>
 						</label>
 						<select x-model="hide_docs" class="form-select" name="v_hide_docs" id="v_hide_docs">
-							<option value="yes"><?=_('Yes');?></option>
-							<option value="no"><?=_('No');?></option>
+							<option value="yes"><?= _("Yes") ?></option>
+							<option value="no"><?= _("No") ?></option>
 						</select>
 					</div>
 				</div>
@@ -126,7 +126,7 @@
 						</label>
 					</div>
 					<div class="u-mb10">
-						<p><?=sprintf(_("Upload the files to %s"), '/usr/local/hestia/web/images/custom/');?></p>
+						<p><?= sprintf(_("Upload the files to %s"), "/usr/local/hestia/web/images/custom/") ?></p>
 						<ul>
 							<li>logo.svg <small>(100px x 120px)</small></li>
 							<li>logo.png <small>(100px x 120px)</small></li>

+ 5 - 5
web/templates/pages/list_backup_detail.php

@@ -86,7 +86,7 @@
 			foreach ($mail as $key) {
 				if (!empty($key)) {
 			?>
-			<div class="l-unit">
+			<div class="l-unit animate__animated animate__fadeIn js-unit">
 				<div class="l-unit__col l-unit__col--right">
 					<div class="clearfix l-unit__stat-col--left super-compact">
 						<input id="check2<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="mail[]" value="<?= $key ?>">
@@ -118,7 +118,7 @@
 			foreach ($dns as $key) {
 				if (!empty($key)) {
 			?>
-			<div class="l-unit">
+			<div class="l-unit animate__animated animate__fadeIn js-unit">
 				<div class="l-unit__col l-unit__col--right">
 					<div class="clearfix l-unit__stat-col--left super-compact">
 						<input id="check3<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="dns[]" value="<?= $key ?>">
@@ -150,7 +150,7 @@
 			foreach ($db as $key) {
 				if (!empty($key)) {
 			?>
-			<div class="l-unit">
+			<div class="l-unit animate__animated animate__fadeIn js-unit">
 				<div class="l-unit__col l-unit__col--right">
 					<div class="clearfix l-unit__stat-col--left super-compact">
 						<input id="check4<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="db[]" value="<?= $key ?>">
@@ -179,7 +179,7 @@
 		<!-- List Cron Jobs -->
 		<?php if (!empty($data[$backup]["CRON"])) {
 		if (!empty($key)) { ?>
-			<div class="l-unit">
+			<div class="l-unit animate__animated animate__fadeIn js-unit">
 				<div class="l-unit__col l-unit__col--right">
 					<div class="clearfix l-unit__stat-col--left super-compact">
 						<input id="check5<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="check" value="<?= $key ?>">
@@ -211,7 +211,7 @@
 			foreach ($udir as $key) {
 				if (!empty($key)) {
 			?>
-			<div class="l-unit">
+			<div class="l-unit animate__animated animate__fadeIn js-unit">
 				<div class="l-unit__col l-unit__col--right">
 					<div class="clearfix l-unit__stat-col--left super-compact">
 						<input id="check6<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="udir[]" value="<?= $key ?>">

+ 4 - 2
web/templates/pages/list_backup_exclusions.php

@@ -44,9 +44,11 @@
 					<div class="clearfix l-unit__stat-col--left compact u-text-right"><b>&nbsp;</b></div>
 					<div class="clearfix l-unit__stat-col--left wide-3">
 						<?php
-							if (empty($value)) echo _('No exclusions');
+							if (empty($value)) {
+								echo _("No exclusions");
+							}
 							foreach ($value as $ex_key => $ex_value) {
-								echo '<b>'.$ex_key.' </b>'.$ex_value.'<br>';
+								echo "<b>" . $ex_key . " </b>" . $ex_value . "<br>";
 							}
 						?>
 					</div>

+ 1 - 1
web/templates/pages/list_cron.php

@@ -23,7 +23,7 @@
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Command'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">

+ 13 - 3
web/templates/pages/list_db.php

@@ -42,7 +42,7 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
@@ -98,6 +98,7 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 <!-- End toolbar -->
 
 <div class="container">
+
 	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
@@ -168,10 +169,18 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 										&nbsp;
 									<?php } else { ?>
 										<?php if ($data[$key]['SUSPENDED'] == 'no') {?>
-											<div class="actions-panel__col actions-panel__logs shortcut-enter" data-key-action="href"><a href="/edit/db/?database=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit Database") ?>"><i class="fas fa-pencil icon-orange icon-dim"></i></a></div>
+											<div class="actions-panel__col actions-panel__logs shortcut-enter" data-key-action="href">
+												<a href="/edit/db/?database=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit Database") ?>">
+													<i class="fas fa-pencil icon-orange icon-dim"></i>
+												</a>
+											</div>
 										<?php } ?>
 										<?php if ($data[$key]['TYPE'] == 'mysql' && isset($_SESSION['PHPMYADMIN_KEY']) && $_SESSION['PHPMYADMIN_KEY'] != '' && !ipUsed()) { $time = time(); ?>
-											<div class="actions-panel__col actions-panel__logs shortcut-enter" data-key-action="href"><a target="_blank" href="<?=$db_myadmin_link;?>hestia-sso.php?database=<?=$key;?>&user=<?=$user_plain;?>&exp=<?=$time;?>&hestia_token=<?=password_hash($key.$user_plain.$_SESSION['user_combined_ip'].$time.$_SESSION['PHPMYADMIN_KEY'], PASSWORD_DEFAULT)?>" title="phpMyAdmin"><i class="fas fa-right-to-bracket icon-orange icon-dim"></i></a></div>
+											<div class="actions-panel__col actions-panel__logs shortcut-enter" data-key-action="href">
+												<a target="_blank" href="<?=$db_myadmin_link?>hestia-sso.php?database=<?=$key?>&user=<?=$user_plain?>&exp=<?=$time?>&hestia_token=<?=password_hash($key.$user_plain.$_SESSION['user_combined_ip'].$time.$_SESSION['PHPMYADMIN_KEY'], PASSWORD_DEFAULT)?>" title="phpMyAdmin">
+													<i class="fas fa-right-to-bracket icon-orange icon-dim"></i>
+												</a>
+											</div>
 										<?php } ?>
 										<div class="actions-panel__col actions-panel__suspend shortcut-s" data-key-action="js">
 											<a
@@ -208,6 +217,7 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

+ 132 - 72
web/templates/pages/list_dns.php

@@ -14,7 +14,7 @@
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
@@ -67,21 +67,20 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units js-units-container">
-		<div class="header units-header">
-			<div class="l-unit__col l-unit__col--right">
-				<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"><b>&nbsp;</b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact"><b><?= _("Records") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Template") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact"><b><?= _("TTL") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("SOA") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact-3"><b><?= _("DNSSEC") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Expiration Date") ?></b></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"><?= _("Records") ?></div>
+			<div class="units-table-cell"><?= _("Template") ?></div>
+			<div class="units-table-cell"><?= _("TTL") ?></div>
+			<div class="units-table-cell"><?= _("SOA") ?></div>
+			<div class="units-table-cell"><?= _("DNSSEC") ?></div>
+			<div class="units-table-cell"><?= _("Expiration Date") ?></div>
 		</div>
 
 		<!-- Begin DNS zone list item loop -->
@@ -93,92 +92,153 @@
 					$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 domain %s?');
 				} 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 domain %s?');
 					if ($data[$key]['DNSSEC'] !== 'yes') {
 						$dnssec_icon = 'fa-circle-xmark';
+						$dnssec_title = _('Disabled');
 					} else {
 						$dnssec_icon = 'fa-circle-check';
+						$dnssec_title = _('Enabled');
 					}
 				}
 			?>
-			<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-unit"
+			<div class="units-table-row <?php if ($status == 'suspended') echo 'disabled'; ?> animate__animated animate__fadeIn js-unit"
 				data-sort-ip="<?=str_replace('.', '', $data[$key]['IP'])?>"
 				data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
 				data-sort-name="<?=htmlentities($key);?>"
 				data-sort-expire="<?=strtotime($data[$key]['EXP'])?>"
 				data-sort-records="<?=(int)$data[$key]['RECORDS']?>">
-				<div class="l-unit__col l-unit__col--right">
-					<div class="clearfix l-unit__stat-col--left super-compact">
+				<div class="units-table-cell">
+					<div>
 						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="domain[]" 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">
-						<b><a href="/list/dns/?domain=<?= htmlentities($key) ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("DNS Records") ?>: <?= htmlentities($key) ?>"><?= htmlentities($key) ?></a></b>
-						<?= empty($data[$key]["SRC"]) ? "" : '<br>⇢ <span style="font-size:11px;">' . htmlspecialchars($data[$key]["SRC"], ENT_QUOTES) . "</span>" ?>
-					</div>
-					<!-- START QUICK ACTION TOOLBAR AREA -->
-					<div class="clearfix l-unit__stat-col--left u-text-right">
-						<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
-							<div class="actions-panel clearfix">
-								<?php if ($read_only === "true") { ?>
-									<!-- Restrict administrators from editing domain items when impersonating the 'admin' user -->
-									&nbsp;
-								<?php } else { ?>
-									<?php if ($data[$key]['SUSPENDED'] == 'no') {?>
-										<div class="actions-panel__col actions-panel__logs shortcut-n" data-key-action="href"><a href="/add/dns/?domain=<?=htmlentities($key);?>&token=<?=$_SESSION['token']?>" title="<?= _("Add DNS Record") ?>"><i class="fas fa-circle-plus icon-green icon-dim"></i></a></div>
-										<div class="actions-panel__col actions-panel__logs shortcut-enter" data-key-action="href"><a href="/edit/dns/?domain=<?=htmlentities($key);?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit DNS Domain") ?>"><i class="fas fa-pencil icon-orange icon-dim"></i></a></div>
-										<?php if($data[$key]['DNSSEC'] == "yes"){?><div class="actions-panel__col actions-panel__logs shortcut-enter" data-key-action="href"><a href="/list/dns/?domain=<?=htmlentities($key);?>&action=dnssec&token=<?=$_SESSION['token']?>" title="<?= _("View Public DNSSEC Key") ?>"><i class="fas fa-key icon-orange icon-dim"></i></a></div>
-										<?php } ?>
-									<?php } ?>
-									<div class="actions-panel__col actions-panel__edit shortcut-l" data-key-action="href"><a href="/list/dns/?domain=<?=htmlentities($key);?>&token=<?=$_SESSION['token']?>" title="<?= _("DNS Records") ?>"><i class="fas fa-list icon-lightblue icon-dim"></i></a></div>
-									<div class="actions-panel__col actions-panel__suspend shortcut-s" data-key-action="js">
-										<a
-											class="data-controls js-confirm-action"
-											href="/<?=$spnd_action?>/dns/?domain=<?=htmlentities($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">
+				</div>
+				<div class="units-table-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Name") ?>:</span>
+					<a href="/list/dns/?domain=<?= htmlentities($key) ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("DNS Records") ?>: <?= htmlentities($key) ?>">
+						<?= htmlentities($key) ?>
+					</a>
+					<?= empty($data[$key]["SRC"]) ? "" : '<br>⇢ <span class="u-text-small">' . htmlspecialchars($data[$key]["SRC"], ENT_QUOTES) . "</span>" ?>
+				</div>
+				<div class="units-table-cell">
+					<?php if (!$read_only) { ?>
+						<ul class="units-table-row-actions">
+							<?php if ($data[$key]['SUSPENDED'] == 'no') {?>
+								<li class="units-table-row-action shortcut-n" data-key-action="href">
+									<a
+										class="units-table-row-action-link"
+										href="/add/dns/?domain=<?=htmlentities($key);?>&token=<?=$_SESSION['token']?>"
+										title="<?= _("Add DNS Record") ?>"
+									>
+										<i class="fas fa-circle-plus icon-green"></i>
+										<span class="u-hide-desktop"><?= _("Add DNS Record") ?></span>
+									</a>
+								</li>
+								<li class="units-table-row-action shortcut-enter" data-key-action="href">
+									<a
+										class="units-table-row-action-link"
+										href="/edit/dns/?domain=<?=htmlentities($key);?>&token=<?=$_SESSION['token']?>"
+										title="<?= _("Edit DNS Domain") ?>"
+									>
+										<i class="fas fa-pencil icon-orange"></i>
+										<span class="u-hide-desktop"><?= _("Edit DNS Domain") ?></span>
+									</a>
+								</li>
+								<?php if ($data[$key]['DNSSEC'] == "yes") { ?>
+									<li class="units-table-row-action shortcut-enter" data-key-action="href">
 										<a
-											class="data-controls js-confirm-action"
-											href="/delete/dns/?domain=<?= htmlentities($key) ?>&token=<?= $_SESSION["token"] ?>"
-											data-confirm-title="<?= _("Delete") ?>"
-											data-confirm-message="<?= sprintf(_("Are you sure you want to delete domain %s?"), $key) ?>"
+											class="units-table-row-action-link"
+											href="/list/dns/?domain=<?=htmlentities($key);?>&action=dnssec&token=<?=$_SESSION['token']?>"
+											title="<?= _("View Public DNSSEC Key") ?>"
 										>
-											<i class="fas fa-trash icon-red icon-dim"></i>
+											<i class="fas fa-key icon-orange"></i>
+											<span class="u-hide-desktop"><?= _("View Public DNSSEC Key") ?></span>
 										</a>
-									</div>
+									</li>
 								<?php } ?>
-							</div>
-						</div>
-					</div>
-					<!-- END QUICK ACTION TOOLBAR AREA -->
-					<div class="clearfix l-unit__stat-col--left u-text-center compact">
-						<?php if ($data[$key]['RECORDS']){
-							echo '<span>'.$data[$key]['RECORDS'].'</span>';
-						}else{
-							echo '<span>0</span>';
-						}?>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= $data[$key]["TPL"] ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center compact"><?= $data[$key]["TTL"] ?></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><?= $data[$key]["SOA"] ?></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center compact-3">
-						<i class="fas <?= $dnssec_icon ?>"></i>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= $data[$key]["EXP"] ?></b></div>
+							<?php } ?>
+							<li class="units-table-row-action shortcut-l" data-key-action="href">
+								<a
+									class="units-table-row-action-link"
+									href="/list/dns/?domain=<?=htmlentities($key);?>&token=<?=$_SESSION['token']?>"
+									title="<?= _("DNS Records") ?>"
+								>
+									<i class="fas fa-list icon-lightblue"></i>
+									<span class="u-hide-desktop"><?= _("DNS Records") ?></span>
+								</a>
+							</li>
+							<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?>/dns/?domain=<?=htmlentities($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/dns/?domain=<?= htmlentities($key) ?>&token=<?= $_SESSION["token"] ?>"
+									title="<?= _("Delete") ?>"
+									data-confirm-title="<?= _("Delete") ?>"
+									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>
+								</a>
+							</li>
+						</ul>
+					<?php } ?>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Records") ?>:</span>
+					<?php if ($data[$key]['RECORDS']) {
+						echo '<span>'.$data[$key]['RECORDS'].'</span>';
+					} else {
+						echo '<span>0</span>';
+					} ?>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Template") ?>:</span>
+					<span class="u-text-bold">
+						<?= $data[$key]["TPL"] ?>
+					</span>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("TTL") ?>:</span>
+					<?= $data[$key]["TTL"] ?>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("SOA") ?>:</span>
+					<?= $data[$key]["SOA"] ?>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("DNSSEC") ?>:</span>
+					<i class="fas <?= $dnssec_icon ?>" title="<?= $dnssec_title ?>"></i>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Expiration Date") ?>:</span>
+					<time class="u-text-bold" datetime="<?= $data[$key]["EXP"] ?>">
+						<?= $data[$key]["EXP"] ?>
+					</time>
 				</div>
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

+ 3 - 1
web/templates/pages/list_dns_public.php

@@ -14,7 +14,7 @@
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
@@ -67,6 +67,7 @@
 <!-- End toolbar -->
 
 <div class="container">
+
 	<div class="units js-units-container">
 		<div class="l-unit animate__animated animate__fadeIn js-unit">
 			<div class="l-unit__col l-unit__col--right">
@@ -99,4 +100,5 @@
 			</div>
 		</div>
 	</div>
+
 </div>

+ 3 - 1
web/templates/pages/list_dns_rec.php

@@ -20,7 +20,7 @@
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Record'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
@@ -71,6 +71,7 @@
 <!-- End toolbar -->
 
 <div class="container">
+
 	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
@@ -152,6 +153,7 @@
 		</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

+ 2 - 2
web/templates/pages/list_log.php

@@ -11,8 +11,8 @@
 					<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 button-back js-button-back">
+				<?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 button-back js-button-back">
 						<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 					</a>
 				<?php } else { ?>

+ 187 - 91
web/templates/pages/list_mail.php

@@ -14,7 +14,7 @@
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
@@ -64,21 +64,20 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units js-units-container">
-		<div class="header units-header">
-			<div class="l-unit__col l-unit__col--right">
-				<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-5"><b>&nbsp;</b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact-2"><b><?= _("Accounts") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact-2"><b><?= _("Disk") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact-3"><b><?= _("Anti-Virus") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact-3"><b><?= _("Spam Filter") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact-3"><b><?= _("DKIM") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact-3"><b><?= _("SSL") ?></b></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"><?= _("Accounts") ?></div>
+			<div class="units-table-cell"><?= _("Disk") ?></div>
+			<div class="units-table-cell"><?= _("Anti-Virus") ?></div>
+			<div class="units-table-cell"><?= _("Spam Filter") ?></div>
+			<div class="units-table-cell"><?= _("DKIM") ?></div>
+			<div class="units-table-cell"><?= _("SSL") ?></div>
 		</div>
 
 		<!-- Begin mail domain list item loop -->
@@ -93,147 +92,244 @@
 					$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 domain %s?');
 					if ($data[$key]['ANTIVIRUS'] == 'no') {
 						$antivirus_icon = 'fa-circle-xmark';
+						$antivirus_title = _('Disabled');
 					} else {
 						$antivirus_icon = 'fa-circle-check';
+						$antivirus_title = _('Enabled');
 					}
 					if ($data[$key]['ANTISPAM'] == 'no') {
 						$antispam_icon = 'fa-circle-xmark';
+						$antispam_title = _('Disabled');
 					} else {
 						$antispam_icon = 'fa-circle-check';
+						$antispam_title = _('Enabled');
 					}
 					if ($data[$key]['DKIM'] == 'no') {
 						$dkim_icon = 'fa-circle-xmark';
+						$dkim_title = _('Disabled');
 					} else {
 						$dkim_icon = 'fa-circle-check';
+						$dkim_title = _('Enabled');
 					}
 					if ($data[$key]['SSL'] == 'no') {
 						$ssl_icon = 'fa-circle-xmark';
+						$ssl_title = _('Disabled');
 					} else {
 						$ssl_icon = 'fa-circle-check';
+						$ssl_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 domain %s?');
 					if ($data[$key]['ANTIVIRUS'] == 'no') {
 						$antivirus_icon = 'fa-circle-xmark icon-red';
+						$antivirus_title = _('Disabled');
 					} else {
 						$antivirus_icon = 'fa-circle-check icon-green';
+						$antivirus_title = _('Enabled');
 					}
 					if ($data[$key]['ANTISPAM'] == 'no') {
 						$antispam_icon = 'fa-circle-xmark icon-red';
+						$antispam_title = _('Disabled');
 					} else {
 						$antispam_icon = 'fa-circle-check icon-green';
+						$antispam_title = _('Enabled');
 					}
 					if ($data[$key]['DKIM'] == 'no') {
 						$dkim_icon = 'fa-circle-xmark icon-red';
+						$dkim_title = _('Disabled');
 					} else {
 						$dkim_icon = 'fa-circle-check icon-green';
+						$dkim_title = _('Enabled');
 					}
 					if ($data[$key]['SSL'] == 'no') {
 						$ssl_icon = 'fa-circle-xmark icon-red';
+						$ssl_title = _('Disabled');
 					} else {
 						$ssl_icon = 'fa-circle-check icon-green';
+						$ssl_title = _('Enabled');
 					}
 				}
 				if (empty($data[$key]['CATCHALL'])) {
 					$data[$key]['CATCHALL'] = '/dev/null';
 				}
 			?>
-			<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-unit"
+			<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-accounts="<?=$data[$key]['ACCOUNTS']?>">
-				<div class="l-unit__col l-unit__col--right">
+				<div class="units-table-cell">
 					<div>
-						<div class="clearfix l-unit__stat-col--left super-compact">
-							<input id="check<?=$i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="domain[]" value="<?=$key?>" <?=$display_mode;?>>
-						</div>
-						<div class="clearfix l-unit__stat-col--left wide-3 truncate"><b><a href="?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Mail Accounts") ?>: <?=$key?>"><?=$key?></a></b></div>
-						<!-- START QUICK ACTION TOOLBAR AREA -->
-						<div class="clearfix l-unit__stat-col--left u-text-right compact-5">
-							<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
-								<div class="actions-panel clearfix">
-									<?php if ($read_only === 'true') {?>
-										<!-- Restrict ability to edit, delete, or suspend domain items when impersonating 'admin' account -->
-										<div class="actions-panel__col actions-panel__edit shortcut-l" data-key-action="href"><a href="?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Mail Accounts") ?>"><i class="fas fa-users icon-blue icon-dim"></i></a></div>
-										<div class="actions-panel__col actions-panel__edit shortcut-l" data-key-action="href"><a href="?domain=<?=$key?>&dns=1&token=<?=$_SESSION['token']?>" title="<?= _("DNS Records") ?>"><i class="fas fa-book-atlas icon-blue icon-dim"></i></a></div>
-										<?php if ($data[$key]['SUSPENDED'] == 'no') {?>
-											<div class="actions-panel__col actions-panel__edit" data-key-action="href"><a href="http://<?=$webmail;?>.<?=$key?>/" target="_blank" title="<?= _("Open Webmail") ?>"><i class="fas fa-paper-plane icon-lightblue icon-dim"></i></a></div>
-										<?php } ?>
-									<?php } else { ?>
-										<?php if ($data[$key]['SUSPENDED'] == 'no') {?>
-											<div class="actions-panel__col actions-panel__logs shortcut-n" data-key-action="href"><a href="/add/mail/?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Add Mail Account") ?>"><i class="fas fa-circle-plus icon-green icon-dim"></i></a></div>
-											<?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://<?=$webmail;?>.<?=$key?>/" target="_blank" title="<?= _("Open Webmail") ?>"><i class="fas fa-paper-plane icon-lightblue 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=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit Mail Domain") ?>"><i class="fas fa-pencil icon-orange icon-dim"></i></a></div>
-										<?php } ?>
-										<div class="actions-panel__col actions-panel__edit shortcut-l" data-key-action="href"><a href="?domain=<?=$key?>&dns=1&token=<?=$_SESSION['token']?>" title="<?= _("DNS Records") ?>"><i class="fas fa-book-atlas icon-blue icon-dim"></i></a></div>
-										<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=<?=$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">
+						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="domain[]" value="<?= $key ?>" <?= $display_mode ?>>
+						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
+					</div>
+				</div>
+				<div class="units-table-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Name") ?>:</span>
+					<a href="?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Mail Accounts") ?>: <?=$key?>">
+						<?= $key ?>
+					</a>
+				</div>
+				<div class="units-table-cell">
+					<ul class="units-table-row-actions">
+						<?php if ($read_only === 'true') { ?>
+							<li class="units-table-row-action shortcut-l" data-key-action="href">
+								<a
+									class="units-table-row-action-link"
+									href="?domain=<?=$key?>&token=<?=$_SESSION['token']?>"
+									title="<?= _("Mail Accounts") ?>"
+								>
+									<i class="fas fa-users icon-blue"></i>
+									<span class="u-hide-desktop"><?= _("Mail Accounts") ?></span>
+								</a>
+							</li>
+							<li class="units-table-row-action shortcut-l" data-key-action="href">
+								<a
+									class="units-table-row-action-link"
+									href="?domain=<?=$key?>&dns=1&token=<?=$_SESSION['token']?>"
+									title="<?= _("DNS Records") ?>"
+								>
+									<i class="fas fa-book-atlas icon-blue"></i>
+									<span class="u-hide-desktop"><?= _("DNS Records") ?></span>
+								</a>
+							</li>
+							<?php if ($data[$key]['SUSPENDED'] == 'no') { ?>
+								<li class="units-table-row-action" data-key-action="href">
+									<a
+										class="units-table-row-action-link"
+										href="http://<?=$webmail;?>.<?=$key?>/"
+										target="_blank"
+										title="<?= _("Open Webmail") ?>"
+									>
+										<i class="fas fa-paper-plane icon-lightblue"></i>
+										<span class="u-hide-desktop"><?= _("Open Webmail") ?></span>
+									</a>
+								</li>
+							<?php } ?>
+						<?php } else { ?>
+							<?php if ($data[$key]['SUSPENDED'] == 'no') { ?>
+								<li class="units-table-row-action shortcut-n" data-key-action="href">
+									<a
+										class="units-table-row-action-link"
+										href="/add/mail/?domain=<?=$key?>&token=<?=$_SESSION['token']?>"
+										title="<?= _("Add Mail Account") ?>"
+									>
+										<i class="fas fa-circle-plus icon-green"></i>
+										<span class="u-hide-desktop"><?= _("Add Mail Account") ?></span>
+									</a>
+								</li>
+								<?php if ($_SESSION['WEBMAIL_SYSTEM']) { ?>
+									<?php if (!empty($data[$key]['WEBMAIL'])) { ?>
+										<li class="units-table-row-action" data-key-action="href">
 											<a
-												class="data-controls js-confirm-action"
-												href="/delete/mail/?domain=<?=$key?>&token=<?=$_SESSION['token']?>"
-												data-confirm-title="<?= _("Delete") ?>"
-												data-confirm-message="<?= sprintf(_('Are you sure you want to delete domain %s?'), $key) ?>"
+												class="units-table-row-action-link"
+												href="http://<?=$webmail;?>.<?=$key?>/"
+												target="_blank"
+												title="<?= _("Open Webmail") ?>"
 											>
-												<i class="fas fa-trash icon-red icon-dim"></i>
+												<i class="fas fa-paper-plane icon-lightblue"></i>
+												<span class="u-hide-desktop"><?= _("Open Webmail") ?></span>
 											</a>
-										</div>
+										</li>
 									<?php } ?>
-								</div>
-							</div>
-						</div>
-						<!-- END QUICK ACTION TOOLBAR AREA -->
-						<div class="clearfix l-unit__stat-col--left u-text-center compact-2"><b>
-								<?php
-									if ($data[$key]['ACCOUNTS']) {
-										$mail_accounts = htmlentities($data[$key]['ACCOUNTS']);
-									} else {
-										$mail_accounts = '0';
-									}
-								?>
-								<span><?=$mail_accounts;?></span>
-							</b>
-						</div>
-						<div class="clearfix l-unit__stat-col--left u-text-center compact-2"><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 compact-3">
-							<i class="fas <?=$antivirus_icon;?>"></i>
-						</div>
-						<div class="clearfix l-unit__stat-col--left u-text-center compact-3">
-							<i class="fas <?=$antispam_icon;?>"></i>
-						</div>
-						<div class="clearfix l-unit__stat-col--left u-text-center compact-3">
-							<i class="fas <?=$dkim_icon;?>"></i>
-						</div>
-						<div class="clearfix l-unit__stat-col--left u-text-center compact-3">
-							<i class="fas <?=$ssl_icon;?>"></i>
-						</div>
-					</div>
+								<?php } ?>
+								<li class="units-table-row-action shortcut-enter" data-key-action="href">
+									<a
+										class="units-table-row-action-link"
+										href="/edit/mail/?domain=<?=$key?>&token=<?=$_SESSION['token']?>"
+										title="<?= _("Edit Mail Domain") ?>"
+									>
+										<i class="fas fa-pencil icon-orange"></i>
+										<span class="u-hide-desktop"><?= _("Edit Mail Domain") ?></span>
+									</a>
+								</li>
+							<?php } ?>
+							<li class="units-table-row-action shortcut-l" data-key-action="href">
+								<a
+									class="units-table-row-action-link"
+									href="?domain=<?=$key?>&dns=1&token=<?=$_SESSION['token']?>"
+									title="<?= _("DNS Records") ?>"
+								>
+									<i class="fas fa-book-atlas icon-blue"></i>
+									<span class="u-hide-desktop"><?= _("DNS Records") ?></span>
+								</a>
+							</li>
+							<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=<?=$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=<?=$key?>&token=<?=$_SESSION['token']?>"
+									title="<?= _("Delete") ?>"
+									data-confirm-title="<?= _("Delete") ?>"
+									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>
+								</a>
+							</li>
+						<?php } ?>
+					</ul>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Accounts") ?>:</span>
+					<?php
+						if ($data[$key]['ACCOUNTS']) {
+							$mail_accounts = htmlentities($data[$key]['ACCOUNTS']);
+						} else {
+							$mail_accounts = '0';
+						}
+					?>
+					<?= $mail_accounts ?>
+				</div>
+				<div class="units-table-cell">
+					<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">
+					<span class="u-hide-desktop u-text-bold"><?= _("Anti-Virus") ?>:</span>
+					<i class="fas <?= $antivirus_icon ?>" title="<?= $antivirus_title ?>"></i>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Spam Filter") ?>:</span>
+					<i class="fas <?= $antispam_icon ?>" title="<?= $antispam_title ?>"></i>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("DKIM") ?>:</span>
+					<i class="fas <?= $dkim_icon ?>" title="<?= $dkim_title ?>"></i>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("SSL") ?>:</span>
+					<i class="fas <?= $ssl_icon ?>" title="<?= $ssl_title ?>"></i>
 				</div>
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

+ 3 - 1
web/templates/pages/list_mail_acc.php

@@ -26,7 +26,7 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
@@ -74,6 +74,7 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 <!-- End toolbar -->
 
 <div class="container">
+
 	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
@@ -217,6 +218,7 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

+ 3 - 1
web/templates/pages/list_packages.php

@@ -15,7 +15,7 @@
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
@@ -43,6 +43,7 @@
 <!-- End toolbar -->
 
 <div class="container">
+
 	<div class="units js-units-container">
 		<div class="units-header">
 			<div class="l-unit__col l-unit__col--right">
@@ -225,6 +226,7 @@
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

+ 1 - 1
web/templates/pages/list_rrd.php

@@ -27,7 +27,7 @@
 				<h2 class="u-mb20"><?= htmlspecialchars($data[$key]["TITLE"]) ?></h2>
 				<canvas
 					class="u-max-height300 js-rrd-chart"
-					data-service="<?= $data[$key]["TYPE"] !== 'net' ? htmlspecialchars($data[$key]["RRD"]) : 'net_' . htmlspecialchars($data[$key]["RRD"]); ?>"
+					data-service="<?= $data[$key]["TYPE"] !== "net" ? htmlspecialchars($data[$key]["RRD"]) : "net_" . htmlspecialchars($data[$key]["RRD"]) ?>"
 					data-period="<?= htmlspecialchars($period) ?>"
 				></canvas>
 			</div>

+ 3 - 1
web/templates/pages/list_user.php

@@ -15,7 +15,7 @@
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
@@ -68,6 +68,7 @@
 <!-- End toolbar -->
 
 <div class="container">
+
 	<div class="units js-units-container">
 		<!-- Table header -->
 		<div class="units-header">
@@ -193,6 +194,7 @@
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

+ 189 - 118
web/templates/pages/list_web.php

@@ -67,21 +67,19 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units js-units-container">
-		<!-- Table header -->
-		<div class="header units-header">
-			<div class="l-unit__col l-unit__col--right">
-				<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-4"><b><?= _("Name") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left compact-4 u-text-right"><b>&nbsp;</b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("IP Address") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Disk") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact"><b><?= _("Bandwidth") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("SSL") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact"><b><?= _("Statistics") ?></b></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"><?= _("IP Address") ?></div>
+			<div class="units-table-cell"><?= _("Disk") ?></div>
+			<div class="units-table-cell"><?= _("Bandwidth") ?></div>
+			<div class="units-table-cell"><?= _("SSL") ?></div>
+			<div class="units-table-cell"><?= _("Statistics") ?></div>
 		</div>
 
 		<!-- Begin web domain list item loop -->
@@ -89,172 +87,245 @@
 			foreach ($data as $key => $value) {
 				++$i;
 				if ($data[$key]['SUSPENDED'] == 'yes') {
-						$status = 'suspended';
-						$spnd_action = 'unsuspend';
-						$spnd_action_title = _('Unsuspend');
-						$spnd_icon = 'fa-play';
-						$spnd_confirmation = _('Are you sure you want to unsuspend domain %s?');
+					$status = 'suspended';
+					$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 domain %s?');
 				} else {
-						$status = 'active';
-						$spnd_action = 'suspend';
-						$spnd_action_title = _('Suspend');
-						$spnd_icon = 'fa-pause';
-						$spnd_confirmation = _('Are you sure you want to suspend domain %s?');
+					$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 domain %s?');
 				}
 				if (!empty($data[$key]['SSL_HOME'])) {
-						if ($data[$key]['SSL_HOME'] == 'same') {
-								$ssl_home = 'public_html';
-						} else {
-								$ssl_home = 'public_shtml';
-						}
+					if ($data[$key]['SSL_HOME'] == 'same') {
+						$ssl_home = 'public_html';
+					} else {
+						$ssl_home = 'public_shtml';
+					}
 				} else {
-						$ssl_home = '';
+					$ssl_home = '';
 				}
 				$web_stats='no';
 				if (!empty($data[$key]['STATS'])) {
-						$web_stats=$data[$key]['STATS'];
+					$web_stats=$data[$key]['STATS'];
 				}
 				$ftp_user='no';
 				if (!empty($data[$key]['FTP_USER'])) {
-						$ftp_user=$data[$key]['FTP_USER'];
-
+					$ftp_user=$data[$key]['FTP_USER'];
 				}
 				if (strlen($ftp_user) > 24 ) {
-						$ftp_user = str_replace(':', ', ', $ftp_user);
-						$ftp_user = substr($ftp_user, 0, 24);
-						$ftp_user = trim($ftp_user, ":");
-						$ftp_user = str_replace(':', ', ', $ftp_user);
-						$ftp_user = $ftp_user.", ...";
+					$ftp_user = str_replace(':', ', ', $ftp_user);
+					$ftp_user = substr($ftp_user, 0, 24);
+					$ftp_user = trim($ftp_user, ":");
+					$ftp_user = str_replace(':', ', ', $ftp_user);
+					$ftp_user = $ftp_user.", ...";
 				} else {
-						$ftp_user = str_replace(':', ', ', $ftp_user);
+					$ftp_user = str_replace(':', ', ', $ftp_user);
 				}
 
 				$backend_support='no';
 				if (!empty($data[$key]['BACKEND'])) {
-						$backend_support='yes';
+					$backend_support='yes';
 				}
 
 				$proxy_support='no';
 				if (!empty($data[$key]['PROXY'])) {
-						$proxy_support='yes';
+					$proxy_support='yes';
 				}
 				if (strlen($data[$key]['PROXY_EXT']) > 24 ) {
-						$proxy_ext_title = str_replace(',', ', ', $data[$key]['PROXY_EXT']);
-						$proxy_ext = substr($data[$key]['PROXY_EXT'], 0, 24);
-						$proxy_ext = trim($proxy_ext, ",");
-						$proxy_ext = str_replace(',', ', ', $proxy_ext);
-						$proxy_ext = $proxy_ext.", ...";
+					$proxy_ext_title = str_replace(',', ', ', $data[$key]['PROXY_EXT']);
+					$proxy_ext = substr($data[$key]['PROXY_EXT'], 0, 24);
+					$proxy_ext = trim($proxy_ext, ",");
+					$proxy_ext = str_replace(',', ', ', $proxy_ext);
+					$proxy_ext = $proxy_ext.", ...";
 				} else {
-						$proxy_ext_title = '';
-						$proxy_ext = str_replace(',', ', ', $data[$key]['PROXY_EXT']);
+					$proxy_ext_title = '';
+					$proxy_ext = str_replace(',', ', ', $data[$key]['PROXY_EXT']);
 				}
 				if ($data[$key]['SUSPENDED'] === 'yes') {
 					if ($data[$key]['SSL'] == 'no') {
 						$icon_ssl = 'fas fa-circle-xmark';
+						$title_ssl = _('Disabled');
 					}
 					if ($data[$key]['SSL'] == 'yes') {
 						$icon_ssl = 'fas fa-circle-check';
+						$title_ssl = _('Enabled');
 					}
 					if ($web_stats == 'no') {
 						$icon_webstats = 'fas fa-circle-xmark';
+						$title_webstats = _('Disabled');
 					} else {
 						$icon_webstats = 'fas fa-circle-check';
+						$title_webstats = _('Enabled');
 					}
 				} else {
 					if ($data[$key]['SSL'] == 'no') {
 						$icon_ssl = 'fas fa-circle-xmark icon-red';
+						$title_ssl = _('Disabled');
 					}
 					if ($data[$key]['SSL'] == 'yes') {
 						$icon_ssl = 'fas fa-circle-check icon-green';
+						$title_ssl = _('Enabled');
 					}
 					if ($web_stats == 'no') {
 						$icon_webstats = 'fas fa-circle-xmark icon-red';
+						$title_webstats = _('Disabled');
 					} else {
 						$icon_webstats = 'fas fa-circle-check icon-green';
+						$title_webstats = _('Enabled');
 					}
 				}
 			?>
-			<div class="l-unit <?php if ($data[$key]['SUSPENDED'] == 'yes') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-unit"
+			<div class="units-table-row <?php if ($data[$key]['SUSPENDED'] == 'yes') echo 'disabled'; ?> animate__animated animate__fadeIn js-unit"
 				data-sort-ip="<?=str_replace('.', '', $data[$key]['IP'])?>"
 				data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
 				data-sort-name="<?=$key?>"
 				data-sort-bandwidth="<?=$data[$key]['U_BANDWIDTH']?>"
 				data-sort-disk="<?=$data[$key]['U_DISK']?>">
-				<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="domain[]" value="<?=$key?>" <?=$display_mode;?>>
+				<div class="units-table-cell">
+					<div>
+						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="domain[]" value="<?= $key ?>" <?= $display_mode ?>>
+						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
-					<div class="clearfix l-unit__stat-col--left wide-4 truncate">
-						<b>
-							<?php if ($read_only === 'true') {?>
-								<?=$key?>
-							<?php } else {
-								$aliases = explode(',', $data[$key]['ALIAS']);
-								$alias_new = array();
-								foreach($aliases as $alias){
-									if($alias != 'www.'.$key){
-										$alias_new[] = trim($alias);
-									}
-								}
-								?>
-								<a href="/edit/web/?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit Domain") ?>: <?=$key?>"><?=$key?><?php if( !empty($alias_new) && !empty($data[$key]['ALIAS']) ){ echo " <span class=\"hint\">(".implode(',',$alias_new).")"; } ?></a>
+				</div>
+				<div class="units-table-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Name") ?>:</span>
+					<?php if ($read_only === 'true') {?>
+						<?=$key?>
+					<?php } else {
+						$aliases = explode(',', $data[$key]['ALIAS']);
+						$alias_new = array();
+						foreach($aliases as $alias){
+							if($alias != 'www.'.$key){
+								$alias_new[] = trim($alias);
+							}
+						}
+						?>
+						<a href="/edit/web/?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit Domain") ?>: <?=$key?>">
+							<?= $key ?>
+							<?php if (!empty($alias_new) && !empty($data[$key]['ALIAS'])) {
+								echo " <span class=\"hint\">(".implode(',',$alias_new).")";
+							} ?>
+						</a>
+					<?php } ?>
+				</div>
+				<div class="units-table-cell">
+					<ul class="units-table-row-actions">
+						<?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/"
+									target="_blank"
+									rel="noopener"
+									title="<?= _("Statistics") ?>"
+								>
+									<i class="fas fa-chart-bar icon-maroon"></i>
+									<span class="u-hide-desktop"><?= _("Statistics") ?></span>
+								</a>
+							</li>
+						<?php } ?>
+						<li class="units-table-row-action" data-key-action="href">
+							<a
+								class="units-table-row-action-link"
+								href="http://<?=$key?>/"
+								target="_blank"
+								rel="noopener"
+								title="<?= _("Visit") ?>"
+							>
+								<i class="fas fa-square-up-right icon-lightblue"></i>
+								<span class="u-hide-desktop"><?= _("Visit") ?></span>
+							</a>
+						</li>
+						<?php if ($read_only !== "true") { ?>
+							<?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']?>"
+										title="<?= _("Edit Domain") ?>"
+									>
+										<i class="fas fa-pencil icon-orange"></i>
+										<span class="u-hide-desktop"><?= _("Edit Domain") ?></span>
+									</a>
+								</li>
 							<?php } ?>
-						</b>
-					</div>
-					<!-- START QUICK ACTION TOOLBAR AREA -->
-					<div class="clearfix l-unit__stat-col--left compact-4 u-text-right">
-						<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
-							<div class="actions-panel clearfix">
-								<?php if (!empty($data[$key]['STATS'])) { ?>
-									<div class="actions-panel__col actions-panel__logs shortcut-w" data-key-action="href"><a href="http://<?=$key?>/vstats/" rel="noopener" target="_blank" rel="noopener" title="<?= _("Statistics") ?>"><i class="fas fa-chart-bar icon-maroon icon-dim"></i></a></div>
-								<?php } ?>
-									<div class="actions-panel__col actions-panel__view" data-key-action="href"><a href="http://<?=$key?>/" rel="noopener" target="_blank"><i class="fas fa-square-up-right icon-lightblue icon-dim"></i></a></div>
-								<?php if ($read_only === 'true') {?>
-									<!-- Restrict ability to edit, delete, or suspend web domains when impersonating the 'admin' account -->
-									&nbsp;
-								<?php } else { ?>
-									<?php if ($data[$key]['SUSPENDED'] == 'no') {?>
-										<div class="actions-panel__col actions-panel__edit shortcut-enter" data-key-action="href"><a href="/edit/web/?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit Domain") ?>"><i class="fas fa-pencil icon-orange icon-dim"></i></a></div>
-									<?php } ?>
-									<div class="actions-panel__col actions-panel__logs shortcut-l" data-key-action="href"><a href="/list/web-log/?domain=<?=$key?>&type=access#" title="<?= _("Access Log") ?>"><i class="fas fa-binoculars icon-purple icon-dim"></i></a></div>
-									<div class="actions-panel__col actions-panel__suspend shortcut-s" data-key-action="js">
-										<a
-											class="data-controls js-confirm-action"
-											href="/<?=$spnd_action?>/web/?domain=<?=$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/web/?domain=<?=$key?>&token=<?=$_SESSION['token']?>"
-											data-confirm-title="<?= _("Delete") ?>"
-											data-confirm-message="<?= sprintf(_('Are you sure you want to delete domain %s?'), $key) ?>"
-										>
-											<i class="fas fa-trash icon-red icon-dim"></i>
-										</a>
-									</div>
-								<?php } ?>
-							</div>
-						</div>
-					</div>
-					<!-- END QUICK ACTION TOOLBAR AREA -->
-					<div class="clearfix l-unit__stat-col--left u-text-center"><?=empty($ips[$data[$key]['IP']]['NAT']) ? $data[$key]['IP'] : "{$ips[$data[$key]['IP']]['NAT']}"; ?></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><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 compact"><b><?=humanize_usage_size($data[$key]['U_BANDWIDTH'])?></b> <span class="u-text-small"><?=humanize_usage_measure($data[$key]['U_BANDWIDTH'])?></span></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center">
-						<i class="fas <?=$icon_ssl;?>"></i>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center compact">
-						<i class="fas <?=$icon_webstats;?>"></i>
-					</div>
+							<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#"
+									title="<?= _("Access Log") ?>"
+								>
+									<i class="fas fa-binoculars icon-purple"></i>
+									<span class="u-hide-desktop"><?= _("Access Log") ?></span>
+								</a>
+							</li>
+							<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']?>"
+									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/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) ?>"
+								>
+									<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">
+					<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']}"; ?>
+				</div>
+				<div class="units-table-cell">
+					<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">
+					<span class="u-hide-desktop u-text-bold"><?= _("Bandwidth") ?>:</span>
+					<span class="u-text-bold">
+						<?= humanize_usage_size($data[$key]['U_BANDWIDTH']) ?>
+					</span>
+					<span class="u-text-small">
+						<?= humanize_usage_measure($data[$key]['U_BANDWIDTH']) ?>
+					</span>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("SSL") ?>:</span>
+					<i class="fas <?= $icon_ssl ?>" title="<?= $title_ssl ?>"></i>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Statistics") ?>:</span>
+					<i class="fas <?= $icon_webstats ?>" title="<?= $title_webstats ?>"></i>
 				</div>
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

+ 7 - 9
web/templates/pages/login/login.php

@@ -1,20 +1,18 @@
 <div class="login animate__animated animate__zoomIn">
 	<a href="/" class="u-block u-mb40">
-		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION['APP_NAME']); ?>" width="100" height="120">
+		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION["APP_NAME"]) ?>" width="100" height="120">
 	</a>
 	<form id="form_login" method="post" action="/login/">
 		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<h1 class="login-title">
-			<?= sprintf(_("Welcome to %s"),htmlentities($_SESSION['APP_NAME'])) ?>
+			<?= sprintf(_("Welcome to %s"), htmlentities($_SESSION["APP_NAME"])) ?>
 		</h1>
-		<?php if(!empty($error)){
-		?>
-			<p class="error"><?=$error;?></p>
-		<?php
-		 } ?>
+		<?php if (!empty($error)) { ?>
+			<p class="error"><?= $error ?></p>
+		<?php } ?>
 		<div class="u-mb20">
-			<label for="user" class="form-label"><?= _("Username") ?></label>
-			<input type="text" class="form-control" name="user" id="user" required autofocus>
+			<label for="username" class="form-label"><?= _("Username") ?></label>
+			<input type="text" class="form-control" name="user" id="username" autocomplete="username" required autofocus>
 		</div>
 		<button type="submit" class="button">
 			<i class="fas fa-right-to-bracket"></i><?= _("Next") ?>

+ 2 - 2
web/templates/pages/login/login_1.php

@@ -1,6 +1,6 @@
 <div class="login animate__animated animate__zoomIn">
 	<a href="/" class="u-block u-mb40">
-		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION['APP_NAME']); ?>" width="100" height="120">
+		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION["APP_NAME"]) ?>" width="100" height="120">
 	</a>
 	<form id="form_login" method="post" action="/login/">
 		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
@@ -16,7 +16,7 @@
 					</a>
 				<?php } ?>
 			</label>
-			<input type="password" class="form-control" name="password" id="password" required autofocus>
+			<input type="password" class="form-control" name="password" id="password" autocomplete="current-password" required autofocus>
 		</div>
 		<div class="u-side-by-side">
 			<button type="submit" class="button">

+ 5 - 7
web/templates/pages/login/login_2.php

@@ -1,17 +1,15 @@
 <div class="login animate__animated animate__zoomIn">
 	<a href="/" class="u-block u-mb40">
-		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION['APP_NAME']); ?>" width="100" height="120">
+		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION["APP_NAME"]) ?>" width="100" height="120">
 	</a>
 	<form id="form_login" method="post" action="/login/">
 		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<h1 class="login-title">
 			<?= _("Two-factor Authentication") ?>
 		</h1>
-		<?php if(!empty($error)){
-		?>
-			<p class="error"><?=$error;?></p>
-		<?php
-		 } ?>
+		<?php if (!empty($error)) { ?>
+			<p class="error"><?= $error ?></p>
+		<?php } ?>
 		<div class="u-mb20">
 			<label for="twofa" class="form-label u-side-by-side">
 				<?= _("2FA Token") ?>
@@ -19,7 +17,7 @@
 					<?= _("Forgot Token") ?>
 				</a>
 			</label>
-			<input type="text" class="form-control" name="twofa" id="twofa" required autofocus>
+			<input type="text" class="form-control" name="twofa" id="twofa" autocomplete="one-time-code" required autofocus>
 		</div>
 		<div class="u-side-by-side">
 			<button type="submit" class="button">

+ 8 - 10
web/templates/pages/login/login_a.php

@@ -1,20 +1,18 @@
 <div class="login animate__animated animate__zoomIn">
 	<a href="/" class="u-block u-mb40">
-		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION['APP_NAME']); ?>" width="100" height="120">
+		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION["APP_NAME"]) ?>" width="100" height="120">
 	</a>
 	<form id="form_login" method="post" action="/login/">
 		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<h1 class="login-title">
-			<?= sprintf(_("Welcome to %s"),htmlentities($_SESSION['APP_NAME'])) ?>
+			<?= sprintf(_("Welcome to %s"), htmlentities($_SESSION["APP_NAME"])) ?>
 		</h1>
-		<?php if(!empty($error)){
-		?>
-			<p class="error"><?=$error;?></p>
-		<?php
-		 } ?>
+		<?php if (!empty($error)) { ?>
+			<p class="error"><?= $error ?></p>
+		<?php } ?>
 		<div class="u-mb10">
-			<label for="user" class="form-label"><?= _("Username") ?></label>
-			<input type="text" class="form-control" name="user" id="user" required autofocus>
+			<label for="username" class="form-label"><?= _("Username") ?></label>
+			<input type="text" class="form-control" name="user" id="username" autocomplete="username" required autofocus>
 		</div>
 		<div class="u-mb20">
 			<label for="password" class="form-label u-side-by-side">
@@ -25,7 +23,7 @@
 					</a>
 				<?php } ?>
 			</label>
-			<input type="password" class="form-control" name="password" id="password" required autofocus>
+			<input type="password" class="form-control" name="password" id="password" autocomplete="current-password" required>
 		</div>
 		<button type="submit" class="button">
 			<i class="fas fa-right-to-bracket"></i><?= _("Next") ?>

+ 6 - 8
web/templates/pages/login/reset2fa.php

@@ -1,6 +1,6 @@
 <div class="login animate__animated animate__zoomIn">
 	<a href="/" class="u-block u-mb40">
-		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION['APP_NAME']); ?>" width="100" height="120">
+		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION["APP_NAME"]) ?>" width="100" height="120">
 	</a>
 	<?php if ($success) { ?>
 		<div>
@@ -20,18 +20,16 @@
 			<h1 class="login-title">
 				<?= _("Unlock Account") ?>
 			</h1>
-			<?php if(!empty($error)){
-			?>
-				<p class="error"><?=$error;?></p>
-			<?php
-			 } ?>
+			<?php if (!empty($error)) { ?>
+				<p class="error"><?= $error ?></p>
+			<?php } ?>
 			<div class="u-mb10">
 				<label for="user" class="form-label"><?= _("Username") ?></label>
-				<input type="text" class="form-control" name="user" id="user" required>
+				<input type="text" class="form-control" name="user" id="user" autocomplete="username" required autofocus>
 			</div>
 			<div class="u-mb20">
 				<label for="twofa" class="form-label"><?= _("2FA Reset Code") ?></label>
-				<input type="text" class="form-control" name="twofa" id="twofa" required>
+				<input type="text" class="form-control" name="twofa" id="twofa" autocomplete="off" required>
 			</div>
 			<div class="u-side-by-side">
 				<button type="submit" class="button">

+ 7 - 9
web/templates/pages/login/reset_1.php

@@ -1,24 +1,22 @@
 <div class="login animate__animated animate__zoomIn">
 	<a href="/" class="u-block u-mb40">
-		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION['APP_NAME']); ?>" width="100" height="120">
+		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION["APP_NAME"]) ?>" width="100" height="120">
 	</a>
 	<form method="post" action="/reset/">
 		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<h1 class="login-title">
 			<?= _("Forgot Password") ?>
 		</h1>
-		<?php if(!empty($error)){
-		?>
-			<p class="error"><?=$error;?></p>
-		<?php
-		 } ?>
+		<?php if (!empty($error)) { ?>
+			<p class="error"><?= $error ?></p>
+		<?php } ?>
 		<div class="u-mb10">
-			<label for="user" class="form-label"><?= _("Username") ?></label>
-			<input type="text" class="form-control" name="user" id="user" required>
+			<label for="username" class="form-label"><?= _("Username") ?></label>
+			<input type="text" class="form-control" name="user" id="username" autocomplete="username" required autofocus>
 		</div>
 		<div class="u-mb20">
 			<label for="email" class="form-label"><?= _("Email") ?></label>
-			<input type="email" class="form-control" name="email" id="email" required>
+			<input type="email" class="form-control" name="email" id="email" autocomplete="email" required>
 		</div>
 		<div class="u-side-by-side">
 			<button type="submit" class="button">

+ 5 - 3
web/templates/pages/login/reset_2.php

@@ -1,12 +1,14 @@
 <div class="login animate__animated animate__zoomIn">
 	<a href="/" class="u-block u-mb40">
-		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION['APP_NAME']); ?>" width="100" height="120">
+		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION["APP_NAME"]) ?>" width="100" height="120">
 	</a>
 	<form method="get" action="/reset/">
 		<h1 class="login-title">
 			<?= _("Forgot Password") ?>
 		</h1>
-		<?php if(!empty($error){ show_error_message($error); } ?>
+		<?php if (!empty($error)) { ?>
+			<p class="error"><?= $error ?></p>
+		<?php } ?>
 		<p class="inline-success u-mb10">
 			<?= _("Password reset code has been sent to your email address") ?>
 		</p>
@@ -15,7 +17,7 @@
 			<input type="hidden" name="token" value="<?= htmlentities($_SESSION["token"]) ?>">
 			<input type="hidden" name="user" value="<?= htmlentities($_GET["user"]) ?>">
 			<label for="code" class="form-label"><?= _("Reset Code") ?></label>
-			<input type="text" class="form-control" name="code" id="code" required>
+			<input type="text" class="form-control" name="code" id="code" required autofocus>
 		</div>
 		<div class="u-side-by-side">
 			<button type="submit" class="button">

+ 6 - 8
web/templates/pages/login/reset_3.php

@@ -1,27 +1,25 @@
 <div class="login animate__animated animate__zoomIn">
 	<a href="/" class="u-block u-mb40">
-		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION['APP_NAME']); ?>" width="100" height="120">
+		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION["APP_NAME"]) ?>" width="100" height="120">
 	</a>
 	<form method="post">
 		<h1 class="login-title">
 			<?= _("Forgot Password") ?>
 		</h1>
-		<?php if(!empty($error)){
-		?>
-			<p class="error"><?=$error;?></p>
-		<?php
-		 } ?>
+		<?php if (!empty($error)) { ?>
+			<p class="error"><?= $error ?></p>
+		<?php } ?>
 		<div class="u-mb10">
 			<input type="hidden" name="action" value="confirm">
 			<input type="hidden" name="token" value="<?= htmlentities($_SESSION["token"]) ?>">
 			<input type="hidden" name="user" value="<?= htmlentities($_GET["user"]) ?>">
 			<input type="hidden" name="code" value="<?= htmlentities($_GET["code"]) ?>">
 			<label for="password" class="form-label"><?= _("New Password") ?></label>
-			<input type="password" class="form-control" name="password" id="password" required>
+			<input type="password" class="form-control" name="password" id="password" autocomplete="new-password" required autofocus>
 		</div>
 		<div class="u-mb20">
 			<label for="password_confirm" class="form-label"><?= _("Confirm Password") ?></label>
-			<input type="password" class="form-control" name="password_confirm" id="password_confirm" required>
+			<input type="password" class="form-control" name="password_confirm" id="password_confirm" autocomplete="new-password" required>
 		</div>
 		<div class="u-side-by-side">
 			<button type="submit" class="button">

Разница между файлами не показана из-за своего большого размера
+ 236 - 350
yarn.lock


Некоторые файлы не были показаны из-за большого количества измененных файлов