Merge remote-tracking branch 'upstream/main' into ipv6

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": [

web/css/src/themes/dark.css

@@ -217,10 +217,10 @@ strong {
 
 .toolbar-sorting-toggle {
 	&:hover {
-		color: #bcbcbc;
+		color: #aaa;
 
-		& b {
-			color: #bcbcbc;
+		& span {
+			color: #aaa;
 		}
 	}
 }
@@ -883,13 +883,13 @@ strong {
 	border-top: 1px solid #404040;
 }
 
-/* Shortcuts panel
+/* Shortcuts modal
    ========================================================================== */
 
 .shortcuts {
-	background: rgb(30 30 30 / 95%);
-	border: 1px solid rgb(255 255 255 / 25%);
-	box-shadow: 0 0 20px rgb(0 0 0 / 50%);
+	background-color: #2c2c2c;
+	border-color: #404040;
+	box-shadow: 0 8px 25px rgb(0 0 0 / 90%);
 }
 
 .shortcuts-header {

web/css/src/themes/default.css

@@ -627,7 +627,7 @@
 	&:hover {
 		color: #4b4b4b;
 
-		& b {
+		& span {
 			color: #4b4b4b;
 		}
 	}
@@ -635,12 +635,12 @@
 	&:active {
 		color: #3b9de8;
 
-		& b {
+		& span {
 			color: #3b9de8;
 		}
 	}
 
-	& b {
+	& span {
 		padding-left: 3px;
 	}
 
@@ -868,11 +868,10 @@
 		& .units-table-cell {
 			font-weight: bold;
 			padding: 14px 15px;
+		}
 
-			/* Checkbox cell */
-			&:nth-child(1) {
-				line-height: 1.1;
-			}
+		& .fas {
+			font-size: 1rem;
 		}
 	}
 }
@@ -883,6 +882,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 +918,7 @@
 
 		&:last-child {
 			border-bottom-color: transparent;
+			margin-bottom: 0;
 		}
 
 		&:hover {
@@ -951,8 +955,11 @@
 }
 
 .units-table-cell {
+	/* Row heading cell */
 	&:nth-child(2) {
 		font-size: 0.9rem;
+		padding-top: 5px;
+		padding-bottom: 5px;
 	}
 
 	& a {
@@ -965,16 +972,19 @@
 
 	@media (--viewport-large) {
 		display: table-cell;
+		vertical-align: middle;
 		padding: 10px 15px;
 
 		/* Checkbox cell */
 		&:nth-child(1) {
-			vertical-align: bottom;
+			line-height: 0.6;
 		}
 
 		/* 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;
 	}
 }
 
@@ -1954,10 +1965,10 @@
    ========================================================================== */
 
 .modal {
-	border-radius: var(--border-radius-base);
-	box-shadow: inset 0 1px 3px rgb(0 0 0 / 25%), 0 8px 40px 0 rgb(0 0 0 / 35%);
 	background-color: #f0efef;
 	border: 1px solid rgb(255 255 255 / 98%);
+	border-radius: var(--border-radius-base);
+	box-shadow: inset 0 1px 3px rgb(0 0 0 / 25%), 0 8px 40px 0 rgb(0 0 0 / 35%);
 
 	@media (--viewport-small) {
 		min-width: 360px;
@@ -1989,11 +2000,11 @@
    ========================================================================== */
 
 .shortcuts {
-	background: rgb(50 50 50 / 93%);
+	background-color: rgb(50 50 50 / 93%);
 	color: #eee;
 	border: 1px solid rgb(255 255 255 / 70%);
 	border-radius: 6px;
-	box-shadow: 0 4px 30px rgb(0 0 0 / 50%);
+	box-shadow: 0 8px 40px 0 rgb(0 0 0 / 35%);
 
 	& li {
 		padding: 5px 20px;
@@ -2142,6 +2153,7 @@
 	padding: 3px;
 
 	& .fas {
+		line-height: 1.1;
 		margin-right: 0;
 	}
 }
@@ -2487,10 +2499,10 @@
 	font-size: 0.75rem;
 	box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px #fff;
 	color: #6c6c6c;
+	text-align: center;
 	text-shadow: 0 1px #fafafa;
 	border: 1px solid #b8b8b8;
 	background-color: #eaeaea;
-	margin-top: -2px;
 }
 
 .l-unit--suspended .badge {

web/css/src/utilities.css

@@ -19,6 +19,16 @@
 	display: none !important;
 }
 
+.u-hidden-visually {
+	border: 0 !important;
+	clip: rect(1px, 1px, 1px, 1px) !important;
+	height: 1px !important;
+	overflow: hidden !important;
+	padding: 0 !important;
+	position: absolute !important;
+	width: 1px !important;
+}
+
 .u-noselect {
 	user-select: none !important;
 }

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);
 

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");

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">

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>

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>

web/templates/pages/list_access_keys.php

@@ -12,7 +12,10 @@
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
-					<?= _("Sort by") ?>: <b><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></b>
+					<?= _("Sort by") ?>:
+					<span class="u-text-bold">
+						<?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">

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 ?>">

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>

web/templates/pages/list_cron.php

@@ -21,10 +21,10 @@
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Command'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-name">

web/templates/pages/list_db.php

@@ -40,10 +40,10 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-charset">
@@ -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,15 +169,23 @@ 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
 												class="data-controls js-confirm-action"
-												href="/<?=$spnd_action?>/db/?database=<?=$key?>&token=<?=$_SESSION['token']?>"
+												href="/<?= $spnd_action ?>/db/?database=<?=$key?>&token=<?=$_SESSION['token']?>"
 												data-confirm-title="<?= $spnd_action_title ?>"
 												data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"
 											>
@@ -208,6 +217,7 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

web/templates/pages/list_dns.php

@@ -12,10 +12,10 @@
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">
@@ -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">

web/templates/pages/list_dns_public.php

@@ -12,10 +12,10 @@
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">
@@ -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>

web/templates/pages/list_dns_rec.php

@@ -18,10 +18,10 @@
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Record'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">
@@ -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">

web/templates/pages/list_firewall.php

@@ -20,7 +20,10 @@
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
-					<?= _("Sort by") ?>: <b><?= _("Action") ?> <i class="fas fa-arrow-up-a-z"></i></b>
+					<?= _("Sort by") ?>:
+					<span class="u-text-bold">
+						<?= _("Action") ?> <i class="fas fa-arrow-up-a-z"></i>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-action">
@@ -121,7 +124,7 @@
 									<div class="actions-panel__col actions-panel__suspend shortcut-s" data-key-action="js">
 										<a
 											class="data-controls js-confirm-action"
-											href="/<?=$spnd_action?>/firewall/?rule=<?=$key?>&token=<?=$_SESSION['token']?>"
+											href="/<?= $spnd_action ?>/firewall/?rule=<?=$key?>&token=<?=$_SESSION['token']?>"
 											data-confirm-title="<?= $spnd_action_title ?>"
 											data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"
 										>

web/templates/pages/list_ip.php

@@ -12,7 +12,10 @@
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
-					<?= _("Sort by") ?>: <b><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></b>
+					<?= _("Sort by") ?>:
+					<span class="u-text-bold">
+						<?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">

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 { ?>

web/templates/pages/list_mail.php

@@ -12,10 +12,10 @@
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-accounts" data-sort-as-int="1">
@@ -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">

web/templates/pages/list_mail_acc.php

@@ -24,10 +24,10 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">
@@ -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">
@@ -179,7 +180,7 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 									<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']?>"
+											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) ?>"
 										>
@@ -217,6 +218,7 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

web/templates/pages/list_packages.php

@@ -13,10 +13,10 @@
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">
@@ -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">

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>

web/templates/pages/list_search.php

@@ -12,7 +12,10 @@
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
-					<?= _("Sort by") ?>: <b><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></b>
+					<?= _("Sort by") ?>:
+					<span class="u-text-bold">
+						<?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">

web/templates/pages/list_user.php

@@ -13,10 +13,10 @@
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-bandwidth" data-sort-as-int="1">
@@ -68,24 +68,43 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units js-units-container">
-		<!-- Table header -->
-		<div class="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") ?>">
-				</div>
-				<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Name") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left compact-3"><b>&nbsp;</b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center width"><b><?= _("Package") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center super-compact"><b><?= _("IPs") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact-6"><b><i class="fas fa-hard-drive" title="<?= _("Disk") ?>"></i></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact-6"><b><i class="fas fa-right-left" title="<?= _("Bandwidth") ?>"></i></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center super-compact"><b><i class="fas fa-earth-americas" title="<?= _("Web Domains") ?>"></i></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center super-compact"><b><i class="fas fa-book-atlas" title="<?= _("DNS Zones") ?>"></i></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center super-compact"><b><i class="fas fa-envelopes-bulk" title="<?= _("Mail Domains") ?>"></i></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center super-compact"><b><i class="fas fa-database" title="<?= _("Databases") ?>"></i></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center super-compact"><b><i class="fas fa-file-zipper" title="<?= _("Backups") ?>"></i></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") ?>">
+			</div>
+			<div class="units-table-cell"><?= _("Name") ?></div>
+			<div class="units-table-cell"></div>
+			<div class="units-table-cell"><?= _("Package") ?></div>
+			<div class="units-table-cell"><?= _("IPs") ?></div>
+			<div class="units-table-cell">
+				<i class="fas fa-hard-drive" title="<?= _("Disk") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Disk") ?></span>
+			</div>
+			<div class="units-table-cell">
+				<i class="fas fa-right-left" title="<?= _("Bandwidth") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Bandwidth") ?></span>
+			</div>
+			<div class="units-table-cell">
+				<i class="fas fa-earth-americas" title="<?= _("Web Domains") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Web Domains") ?></span>
+			</div>
+			<div class="units-table-cell">
+				<i class="fas fa-book-atlas" title="<?= _("DNS Zones") ?>"></i>
+				<span class="u-hidden-visually"><?= _("DNS Zones") ?></span>
+			</div>
+			<div class="units-table-cell">
+				<i class="fas fa-envelopes-bulk" title="<?= _("Mail Domains") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Mail Domains") ?></span>
+			</div>
+			<div class="units-table-cell">
+				<i class="fas fa-database" title="<?= _("Databases") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Databases") ?></span>
+			</div>
+			<div class="units-table-cell">
+				<i class="fas fa-file-zipper" title="<?= _("Backups") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Backups") ?></span>
 			</div>
 		</div>
 
@@ -98,101 +117,187 @@
 					$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 user %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 user %s?');
 				}
 			?>
-			<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 <?php if (($_SESSION['POLICY_SYSTEM_HIDE_ADMIN'] === 'yes') && ($_SESSION['user'] !== 'admin') && ($key === 'admin')) { echo 'u-hidden'; } ?>"
 				data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
 				data-sort-name="<?=strtolower($key)?>"
 				data-sort-bandwidth="<?=$data[$key]['U_BANDWIDTH']?>"
 				data-sort-disk="<?=$data[$key]['U_DISK']?>">
-				<div class="l-unit__col l-unit__col--right" style="<?php if (($_SESSION['POLICY_SYSTEM_HIDE_ADMIN'] === 'yes') && ($_SESSION['user'] !== 'admin') && ($key === 'admin')) { echo 'display: none';} ?>">
-					<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="user[]" value="<?= $key ?>">
+						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
-					<div class="clearfix l-unit__stat-col--left wide-3 userlist-username">
+				</div>
+				<div class="units-table-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") ?>">
+							<span class="u-text-bold">
+								<?=$key?>
+							</span>
+							(<?=$data[$key]['NAME'];?>)
+						</a>
+					<?php } else { ?>
+						<a href="/login/?loginas=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Log in as") ?> <?=$key?>">
+							<span class="u-text-bold">
+								<?=$key?>
+							</span>
+							(<?=$data[$key]['NAME'];?>)
+						</a>
+					<?php } ?>
+					<p>
+						<span class="u-text-bold"><?= _("Email") ?>:</span>
+						<?= $data[$key]["CONTACT"] ?>
+					</p>
+				</div>
+				<div class="units-table-cell">
+					<ul class="units-table-row-actions">
 						<?php if ($key == $user_plain) { ?>
-							<b><a href="/edit/user/?user=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit User") ?>"><?=$key?> <span style="font-weight: normal !important;">(<?=$data[$key]['NAME'];?>)</span></a></b>
+							<li class="units-table-row-action">
+								<i class="fas fa-user-check icon-dim" title="<?= $key ?> (<?= $data[$key]["NAME"] ?>)"></i>
+								<span class="u-hide-desktop"><?= $key ?> (<?= $data[$key]["NAME"] ?>)</span>
+							</li>
 						<?php } else { ?>
-							<b><a href="/login/?loginas=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Log in as") ?> <?=$key?>"><?=$key?> <span style="font-weight: normal !important;">(<?=$data[$key]['NAME'];?>)</span></a></b>
+							<li class="units-table-row-action">
+								<a
+									class="units-table-row-action-link"
+									href="/login/?loginas=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
+									title="<?= _("Log in as") ?> <?= $key ?>"
+								>
+									<i class="fas fa-right-to-bracket icon-green"></i>
+									<span class="u-hide-desktop"><?= _("Log in as") ?> <?= $key ?></span>
+								</a>
+							</li>
 						<?php } ?>
-						<br>
-						<div class="userlist-email"><b><?= _("Email") ?>:</b> <?= $data[$key]["CONTACT"] ?></div>
-					</div>
-					<!-- 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 == $user_plain) { ?>
-									<i class="fas fa-user-check icon-dim" title="<?= $key ?> (<?= $data[$key]["NAME"] ?>)"></i>
-								<?php } else { ?>
-									<a href="/login/?loginas=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Log in as") ?> <?= $key ?>"><i class="fas fa-right-to-bracket icon-green icon-dim"></i></a>
-								<?php } ?>
-								<?php if ($_SESSION["userContext"] === "admin" && $key == "admin" && $_SESSION["user"] != "admin") { ?>
-									<!-- Hide edit button from admin user when logged in with another admin user -->
-									&nbsp;
-								<?php } else { ?>
-									<div class="actions-panel__col actions-panel__edit shortcut-enter" data-key-action="href"><a href="/edit/user/?user=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit User") ?>"><i class="fas fa-pencil icon-orange icon-dim"></i></a></div>
-								<?php } ?>
-								<?php if ($key == "admin") { ?>
-									<!-- Hide suspend and delete buttons in the user list for primary 'admin' account -->
-								<?php } else { ?>
-									<?php if ($key == $user_plain) { ?>
-										<!-- Hide suspend and delete buttons in the user list for current user -->
-									<?php } else { ?>
-									<div class="actions-panel__col actions-panel__suspend shortcut-s" data-key-action="js">
-										<a
-											class="data-controls js-confirm-action"
-											href="/<?= $spnd_action ?>/user/?user=<?= $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/user/?user=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
-											data-confirm-title="<?= _("Delete") ?>"
-											data-confirm-message="<?= sprintf(_('Are you sure you want to delete user %s?'), $key) ?>"
-										>
-											<i class="fas fa-trash icon-red icon-dim"></i>
-										</a>
-									</div>
-									<?php } ?>
-								<?php } ?>
-							</div>
-						</div>
-					</div>
-					<!-- END QUICK ACTION TOOLBAR AREA -->
-					<div class="clearfix l-unit__stat-col--left u-text-center width">
-						<b>
-							<?php if ($data[$key]["PACKAGE"] === "system") { ?>
-								<?= $data[$key]["PACKAGE"] ?>
-							<?php } else { ?>
-								<a href="/edit/package/?package=<?= $data[$key]["PACKAGE"] ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Edit Package") ?>"><?= $data[$key]["PACKAGE"] ?></a>
-							<?php } ?>
-						</b>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact"><?= $data[$key]["IP_OWNED"] ?></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center compact-6"><b><?= humanize_usage_size($data[$key]["U_DISK"],1) ?></b><span class="u-text-small"><?= humanize_usage_measure($data[$key]["U_DISK"]) ?></span> / <b><?= humanize_usage_size($data[$key]["DISK_QUOTA"],1) ?></b><span class="u-text-small"><?= humanize_usage_measure($data[$key]["DISK_QUOTA"]) ?></span></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center compact-6"><b><?= humanize_usage_size($data[$key]["U_BANDWIDTH"],1) ?></b><span class="u-text-small"><?= humanize_usage_measure($data[$key]["U_BANDWIDTH"]) ?></span> / <b><?= humanize_usage_size($data[$key]["BANDWIDTH"],1) ?></b><span class="u-text-small"><?= humanize_usage_measure($data[$key]["BANDWIDTH"]) ?></span></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact" title="<?= $data[$key]["U_WEB_DOMAINS"] ?> <?= _("Web Domains") ?>"><span class="badge"><b><?= $data[$key]["U_WEB_DOMAINS"] ?></b></span></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact" title="<?= $data[$key]["U_DNS_DOMAINS"] ?> <?= _("DNS Zones") ?>"><span class="badge"><b><?= $data[$key]["U_DNS_DOMAINS"] ?></b></span></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact" title="<?= $data[$key]["U_MAIL_DOMAINS"] ?> <?= _("Mail Domains") ?>"><span class="badge"><b><?= $data[$key]["U_MAIL_DOMAINS"] ?></b></span></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact" title="<?= $data[$key]["U_DATABASES"] ?> <?= _("Databases") ?>"><span class="badge"><b><?= $data[$key]["U_DATABASES"] ?></b></span></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact" title="<?= $data[$key]["U_BACKUPS"] ?> <?= _("Backups") ?>"><span class="badge"><b><?= $data[$key]["U_BACKUPS"] ?></b></span></div>
+						<?php if (!($_SESSION["userContext"] === "admin" && $key == "admin" && $_SESSION["user"] != "admin")) { ?>
+							<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']?>"
+									title="<?= _("Edit User") ?>"
+								>
+									<i class="fas fa-pencil icon-orange"></i>
+									<span class="u-hide-desktop"><?= _("Edit User") ?></span>
+								</a>
+							</li>
+						<?php } ?>
+						<?php if (!($key == "admin" || $key == $user_plain)) { ?>
+							<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 ?>/user/?user=<?= $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/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) ?>"
+								>
+									<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-bold">
+					<span class="u-hide-desktop"><?= _("Package") ?>:</span>
+					<?php if ($data[$key]["PACKAGE"] === "system") { ?>
+						<?= $data[$key]["PACKAGE"] ?>
+					<?php } else { ?>
+						<a href="/edit/package/?package=<?= $data[$key]["PACKAGE"] ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Edit Package") ?>">
+							<?= $data[$key]["PACKAGE"] ?>
+						</a>
+					<?php } ?>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("IPs") ?>:</span>
+					<?= $data[$key]["IP_OWNED"] ?>
+				</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"], 1) ?>
+					</span>
+					<span class="u-text-small">
+						<?= humanize_usage_measure($data[$key]["U_DISK"]) ?>
+					</span> /
+					<span class="u-text-bold">
+						<?= humanize_usage_size($data[$key]["DISK_QUOTA"], 1) ?>
+					</span>
+					<span class="u-text-small">
+						<?= humanize_usage_measure($data[$key]["DISK_QUOTA"]) ?>
+					</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"], 1) ?>
+					</span>
+					<span class="u-text-small">
+						<?= humanize_usage_measure($data[$key]["U_BANDWIDTH"]) ?>
+					</span> /
+					<span class="u-text-bold">
+						<?= humanize_usage_size($data[$key]["BANDWIDTH"], 1) ?>
+					</span>
+					<span class="u-text-small">
+						<?= humanize_usage_measure($data[$key]["BANDWIDTH"]) ?>
+					</span>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Web Domains") ?>:</span>
+					<span class="badge">
+						<?= $data[$key]["U_WEB_DOMAINS"] ?>
+					</span>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("DNS Zones") ?>:</span>
+					<span class="badge">
+						<?= $data[$key]["U_DNS_DOMAINS"] ?>
+					</span>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Mail Domains") ?>:</span>
+					<span class="badge">
+						<?= $data[$key]["U_MAIL_DOMAINS"] ?>
+					</span>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Databases") ?>:</span>
+					<span class="badge">
+						<?= $data[$key]["U_DATABASES"] ?>
+					</span>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Backups") ?>:</span>
+					<span class="badge">
+						<?= $data[$key]["U_BACKUPS"] ?>
+					</span>
 				</div>
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

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") ?>

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">

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">

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") ?>

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">

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">

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">

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">