Remove more tables from forms (#2989)

web/css/src/themes/dark.css

@@ -1030,7 +1030,6 @@ a.button.cancel {
 .mail-infoblock {
   color: #fff;
   border: 1px solid #606060;
-  margin-top: 87px;
   box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
   background-color: #454545;
 }

web/css/src/themes/default.css

@@ -2772,7 +2772,7 @@ a.button.cancel {
   color: #777;
   border: 1px solid #d9d9d9;
   padding: 6px 6px 6px 18px;
-  margin-top: 97px;
+  margin-right: 70px;
   min-width: 320px;
   overflow: hidden;
   box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
@@ -2788,6 +2788,7 @@ a.button.cancel {
   font-size: 0.75rem;
   height: 20px;
   font-weight: normal;
+  padding-bottom: 4px;
 }
 
 .mail-infoblock td:first-child {

web/css/src/themes/vestia.css

@@ -731,7 +731,6 @@ a.vst-advanced:focus {
 
 .mail-infoblock {
   border-radius: 0 !important;
-  margin-top: 92px !important;
   box-shadow: none !important;
 }
 

web/templates/pages/add_access_key.html

@@ -1,78 +1,49 @@
 <!-- Begin toolbar -->
 <div class="l-center edit">
-	<div class="l-sort clearfix">
-		<div class="l-unit-toolbar__buttonstrip">
-			<a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/access-key/">
-				<i class="fas fa-arrow-left status-icon blue"></i><?= _('Back'); ?>
-			</a>
-		</div>
-		<div class="l-unit-toolbar__buttonstrip float-right">
-			<a href="#" class="ui-button" data-action="submit" data-id="vstobjects">
-				<i class="fas fa-save status-icon purple"></i><?= _('Save'); ?>
-			</a>
-		</div>
-	</div>
+  <div class="l-sort clearfix">
+    <div class="l-unit-toolbar__buttonstrip">
+      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/access-key/">
+        <i class="fas fa-arrow-left status-icon blue"></i><?= _('Back'); ?>
+      </a>
+    </div>
+    <div class="l-unit-toolbar__buttonstrip float-right">
+      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects">
+        <i class="fas fa-save status-icon purple"></i><?= _('Save'); ?>
+      </a>
+    </div>
+  </div>
 </div>
 <!-- End toolbar -->
 
 <div class="l-separator"></div>
 
 <div class="l-center animated fadeIn">
-	<form id="vstobjects" name="v_add_access_key" method="post">
-		<input type="hidden" name="token" value="<?= $_SESSION['token'] ?>">
-		<input type="hidden" name="ok" value="Add">
+  <form id="vstobjects" name="v_add_access_key" method="post">
+    <input type="hidden" name="token" value="<?= $_SESSION['token'] ?>">
+    <input type="hidden" name="ok" value="Add">
 
-		<table class="data">
-			<tr class="data-add">
-				<td class="data-dotted">
-					<table class="data-col1">
-						<tr>
-							<td></td>
-						</tr>
-					</table>
-				</td>
-				<td class="data-dotted">
-					<table class="data-col2">
-						<tr>
-							<td class="u-pt18">
-								<span class="page-title"><?= _('Adding Access Key'); ?></span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<?php show_error_panel($_SESSION); ?>
-							</td>
-						</tr>
+    <div class="app-form">
+      <h1 class="page-title"><?= _('Adding Access Key'); ?></h1>
+      <?php show_error_panel($_SESSION);?>
+      <div class="u-input-width">
+        <p class="u-mb10"><?= _('Permissions'); ?></p>
+        <?php foreach ($apis as $api_name => $api_data) { ?>
+          <div class="form-check">
+            <input class="form-check-input" type="checkbox" value="<?= $api_name ?>" name="v_apis[]" id="v_apis_<?= $api_name ?>" tabindex="5">
+            <label for="v_apis_<?= $api_name ?>">
+              <?= _($api_name); ?>
+            </label>
+          </div>
+        <?php } ?>
+        <div class="u-mt15">
+          <label for="v_comment" class="form-label">
+            <?= _('Comment'); ?> <span class="optional">(<?= _('optional'); ?>)</span>
+          </label>
+          <input type="text" class="form-control" name="v_comment" id="v_comment" maxlength="255">
+        </div>
+      </div>
+    </div>
+
+  </form>
 
-						<tr>
-							<td class="u-pt6">
-								<?= _('Permissions'); ?>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<?php foreach ($apis as $api_name => $api_data) { ?>
-									<div class="form-check">
-										<input class="form-check-input" type="checkbox" value="<?= $api_name ?>" name="v_apis[]" id="v_apis_<?= $api_name ?>" tabindex="5">
-										<label for="v_apis_<?= $api_name ?>">
-											<?= _($api_name); ?>
-										</label>
-									</div>
-								<?php } ?>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt18">
-								<label for="v_comment" class="form-label">
-									<?= _('Comment'); ?> <span class="optional">(<?= _('optional'); ?>)</span>
-								</label>
-								<input type="text" class="form-control u-input-width" name="v_comment" id="v_comment" maxlength="255">
-							</td>
-						</tr>
-					</table>
-					<table class="data-col2 u-mb20"></table>
-				</td>
-			</tr>
-		</table>
-	</form>
 </div>

web/templates/pages/add_db.html

@@ -24,17 +24,15 @@
       <?php show_error_panel($_SESSION);?>
       <div class="u-input-width">
         <?php if (($user_plain == 'admin') && (($_GET['accept'] !== "true"))) {?>
-          <div class="u-mb10">
-            <div class="alert alert-danger alert-with-icon" role="alert">
-              <i class="fas fa-exclamation"></i>
-              <p><?=_('Avoid adding web domains on admin account');?></p>
-            </div>
+          <div class="alert alert-danger alert-with-icon" role="alert">
+            <i class="fas fa-exclamation"></i>
+            <p><?=_('Avoid adding web domains on admin account');?></p>
           </div>
         <?php } ?>
         <?php if (($user_plain == 'admin') && (empty($_GET['accept']))) {?>
-          <div class="u-mb10">
+          <div class="u-side-by-side u-pt18">
             <div><a href="/add/user/" class="vst-advanced admin-warning-button"><?=_('Add User');?></a></div>
-            <div><a href="/add/db/?accept=true" class="vst-advanced button danger admin-warning-button"><?=_('Continue');?></a></div>
+            <div style="margin-left: 3px;"><a href="/add/db/?accept=true" class="vst-advanced button danger admin-warning-button"><?=_('Continue');?></a></div>
           </div>
         <?php } ?>
         <?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin")) {?>

web/templates/pages/add_dns_rec.html

@@ -1,13 +1,13 @@
 <!-- Begin toolbar -->
 <div class="l-center edit">
-	<div class="l-sort clearfix">
-		<div class="l-unit-toolbar__buttonstrip">
-			<a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/dns/?domain=<?=htmlentities(trim($v_domain, "'"))?>&token=<?=$_SESSION['token']?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-		</div>
-		<div class="l-unit-toolbar__buttonstrip float-right">
-			<a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
-		</div>
-	</div>
+  <div class="l-sort clearfix">
+    <div class="l-unit-toolbar__buttonstrip">
+      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/dns/?domain=<?=htmlentities(trim($v_domain, "'"))?>&token=<?=$_SESSION['token']?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+    </div>
+    <div class="l-unit-toolbar__buttonstrip float-right">
+      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+    </div>
+  </div>
 </div>
 <!-- End toolbar -->
 
@@ -15,108 +15,77 @@
 
 <div class="l-center animated fadeIn">
 
-	<form id="vstobjects" name="v_add_dns_rec" method="post">
-		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-		<input type="hidden" name="ok_rec" value="add">
+  <form id="vstobjects" name="v_add_dns_rec" method="post">
+    <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
+    <input type="hidden" name="ok_rec" value="add">
+
+    <div class="app-form">
+      <h1 class="page-title"><?=_('Adding DNS Record');?></h1>
+      <?php show_error_panel($_SESSION);?>
+      <div class="u-input-width">
+        <div class="u-mb10">
+          <label for="v_domain" class="form-label"><?=_('Domain');?></label>
+          <input type="text" class="form-control" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
+          <input type="hidden" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
+        </div>
+        <div class="u-mb10">
+          <label for="v_rec" class="form-label"><?=_('Record');?></label>
+          <input type="text" class="form-control" name="v_rec" id="v_rec" value="<?=htmlentities(trim($v_rec, "'"))?>">
+          <small class="hint"></small>
+        </div>
+        <div class="u-mb10">
+          <label for="v_type" class="form-label"><?=_('Type');?></label>
+          <select class="form-select" name="v_type" id="v_type">
+            <option value="A" <?php if ($v_type == 'A') echo "selected"; ?>>A</option>
+            <option value="AAAA" <?php if ($v_type == 'AAAA') echo "selected"; ?>>AAAA</option>
+            <option value="CAA" <?php if ($v_type == 'CAA') echo "selected"; ?>>CAA</option>
+            <option value="CNAME" <?php if ($v_type == 'CNAME') echo "selected"; ?>>CNAME</option>
+            <option value="DNSKEY" <?php if ($v_type == 'DNSKEY') echo "selected"; ?>>DNSKEY</option>
+            <option value="IPSECKEY" <?php if ($v_type == 'IPSECKEY') echo "selected"; ?>>IPSECKEY</option>
+            <option value="KEY" <?php if ($v_type == 'KEY') echo "selected"; ?>>KEY</option>
+            <option value="MX" <?php if ($v_type == 'MX') echo "selected"; ?>>MX</option>
+            <option value="NS" <?php if ($v_type == 'NS') echo "selected"; ?>>NS</option>
+            <option value="PTR" <?php if ($v_type == 'PTR') echo "selected"; ?>>PTR</option>
+            <option value="SPF" <?php if ($v_type == 'SPF') echo "selected"; ?>>SPF</option>
+            <option value="SRV" <?php if ($v_type == 'SRV') echo "selected"; ?>>SRV</option>
+            <option value="TLSA" <?php if ($v_type == 'TLSA') echo "selected"; ?>>TLSA</option>
+            <option value="TXT" <?php if ($v_type == 'TXT') echo "selected"; ?>>TXT</option>
+          </select>
+        </div>
+        <div class="u-mb10">
+          <label for="v_val" class="form-label"><?=_('IP or Value');?></label>
+          <div class="u-pos-relative">
+            <select class="form-select" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
+              <option value="">&nbsp;</option>
+              <?php
+                foreach ($v_ips as $ip => $value) {
+                  $display_ip = empty($value['NAT']) ? $ip : "{$value['NAT']}";
+                  echo "<option value='{$display_ip}'>" . htmlentities($display_ip) . "</option>\n";
+                }
+              ?>
+            </select>
+            <input type="text" class="form-control list-editor" name="v_val" id="v_val" value="<?=htmlentities(trim($v_val, "'"))?>">
+          </div>
+        </div>
+        <div class="u-mb10">
+          <label for="v_priority" class="form-label">
+            <?=_('Priority');?> <span class="optional">(<?=_('optional');?>)</span>
+          </label>
+          <input type="text" class="form-control" name="v_priority" id="v_priority" value="<?=htmlentities(trim($v_priority, "'"))?>">
+        </div>
+        <div class="u-mb10">
+          <label for="v_ttl" class="form-label">
+            <?=_('TTL');?> <span class="optional">(<?=_('optional');?>)</span>
+          </label>
+          <input type="text" class="form-control" name="v_ttl" id="v_ttl" value="<?=htmlentities(trim($v_ttl, "'"))?>">
+        </div>
+      </div>
+    </div>
+
+  </form>
 
-		<table class="data">
-			<tr class="data-add">
-				<td class="data-dotted">
-					<table class="data-col1">
-						<tr>
-							<td></td>
-						</tr>
-					</table>
-				</td>
-				<td class="data-dotted">
-					<table class="data-col2" width="600px">
-						<tr>
-							<td class="u-pt18">
-								<span class="page-title"><?=_('Adding DNS Record');?></span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<?php show_error_panel($_SESSION);?>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt18">
-								<label for="v_domain" class="form-label"><?=_('Domain');?></label>
-								<input type="text" class="form-control u-input-width" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
-								<input type="hidden" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_rec" class="form-label"><?=_('Record');?></label>
-								<input type="text" class="form-control u-input-width" name="v_rec" id="v_rec" value="<?=htmlentities(trim($v_rec, "'"))?>">
-								<small class="hint"></small>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_type" class="form-label"><?=_('Type');?></label>
-								<select class="form-select u-input-width" name="v_type" id="v_type">
-									<option value="A" <?php if ($v_type == 'A') echo "selected"; ?>>A</option>
-									<option value="AAAA" <?php if ($v_type == 'AAAA') echo "selected"; ?>>AAAA</option>
-									<option value="CAA" <?php if ($v_type == 'CAA') echo "selected"; ?>>CAA</option>
-									<option value="CNAME" <?php if ($v_type == 'CNAME') echo "selected"; ?>>CNAME</option>
-									<option value="DNSKEY" <?php if ($v_type == 'DNSKEY') echo "selected"; ?>>DNSKEY</option>
-									<option value="IPSECKEY" <?php if ($v_type == 'IPSECKEY') echo "selected"; ?>>IPSECKEY</option>
-									<option value="KEY" <?php if ($v_type == 'KEY') echo "selected"; ?>>KEY</option>
-									<option value="MX" <?php if ($v_type == 'MX') echo "selected"; ?>>MX</option>
-									<option value="NS" <?php if ($v_type == 'NS') echo "selected"; ?>>NS</option>
-									<option value="PTR" <?php if ($v_type == 'PTR') echo "selected"; ?>>PTR</option>
-									<option value="SPF" <?php if ($v_type == 'SPF') echo "selected"; ?>>SPF</option>
-									<option value="SRV" <?php if ($v_type == 'SRV') echo "selected"; ?>>SRV</option>
-									<option value="TLSA" <?php if ($v_type == 'TLSA') echo "selected"; ?>>TLSA</option>
-									<option value="TXT" <?php if ($v_type == 'TXT') echo "selected"; ?>>TXT</option>
-								</select>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_val" class="form-label"><?=_('IP or Value');?></label>
-								<div class="u-pos-relative u-input-width">
-									<select class="form-select" tabindex="-1" onchange="this.nextElementSibling.value=this.value">
-										<option value="">&nbsp;</option>
-										<?php
-											foreach ($v_ips as $ip => $value) {
-												$display_ip = empty($value['NAT']) ? $ip : "{$value['NAT']}";
-												echo "<option value='{$display_ip}'>" . htmlentities($display_ip) . "</option>\n";
-											}
-										?>
-									</select>
-									<input type="text" class="form-control list-editor" name="v_val" id="v_val" value="<?=htmlentities(trim($v_val, "'"))?>">
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_priority" class="form-label">
-									<?=_('Priority');?> <span class="optional">(<?=_('optional');?>)</span>
-								</label>
-								<input type="text" class="form-control u-input-width" name="v_priority" id="v_priority" value="<?=htmlentities(trim($v_priority, "'"))?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_ttl" class="form-label">
-									<?=_('TTL');?> <span class="optional">(<?=_('optional');?>)</span>
-								</label>
-								<input type="text" class="form-control u-input-width" name="v_ttl" id="v_ttl" value="<?=htmlentities(trim($v_ttl, "'"))?>">
-							</td>
-						</tr>
-					</table>
-					<table class="data-col2 u-mb20">
-					</table>
-				</td>
-			</tr>
-		</table>
-	</form>
 </div>
 
 <script>
-	GLOBAL.DNS_REC_PREFIX = "<?=htmlentities($_GET['domain']); ?>";
+  GLOBAL.DNS_REC_PREFIX = "<?=htmlentities($_GET['domain']); ?>";
 </script>

web/templates/pages/add_firewall.html

@@ -1,13 +1,13 @@
 <!-- Begin toolbar -->
 <div class="l-center edit">
-	<div class="l-sort clearfix">
-		<div class="l-unit-toolbar__buttonstrip">
-			<a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/firewall/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-		</div>
-		<div class="l-unit-toolbar__buttonstrip float-right">
-			<a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
-		</div>
-	</div>
+  <div class="l-sort clearfix">
+    <div class="l-unit-toolbar__buttonstrip">
+      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/firewall/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+    </div>
+    <div class="l-unit-toolbar__buttonstrip float-right">
+      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+    </div>
+  </div>
 </div>
 <!-- End toolbar -->
 
@@ -15,106 +15,78 @@
 
 <div class="l-center animated fadeIn">
 
-	<form id="vstobjects" name="v_add_ip" method="post">
-		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-		<input type="hidden" name="ok" value="Add">
+  <form id="vstobjects" name="v_add_ip" method="post">
+    <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
+    <input type="hidden" name="ok" value="Add">
+
+    <div class="app-form">
+      <h1 class="page-title"><?=_('Adding Firewall Rule');?></h1>
+      <?php show_error_panel($_SESSION);?>
+      <div class="u-input-width">
+        <div class="u-mb10">
+          <label for="v_action" class="form-label"><?=_('Action') ?></label>
+          <select class="form-select" name="v_action" id="v_action">
+            <option value="DROP" <?php if ((!empty($v_action)) && ( $v_action == "'DROP'" )) echo 'selected'?>><?=_('DROP');?></option>
+            <option value="ACCEPT" <?php if ((!empty($v_action)) && ( $v_action == "'ACCEPT'" )) echo 'selected'?>><?=_('ACCEPT');?></option>
+          </select>
+        </div>
+        <div class="u-mb10">
+          <label for="v_protocol" class="form-label"><?=_('Protocol') ?></label>
+          <select class="form-select" name="v_protocol" id="v_protocol">
+            <option value="TCP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "'TCP'" )) echo 'selected'?>><?=_('TCP');?></option>
+            <option value="UDP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "'UDP'" )) echo 'selected'?>><?=_('UDP');?></option>
+            <option value="ICMP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "'ICMP'" )) echo 'selected'?>><?=_('ICMP');?></option>
+          </select>
+        </div>
+        <div class="u-mb10">
+          <label for="v_port" class="form-label">
+            <?=_('Port');?> <span class="optional">(<?=_('Ranges and Lists are acceptable');?>)</span>
+          </label>
+          <input type="text" class="form-control" name="v_port" id="v_port" value="<?=htmlentities(trim($v_port, "'"))?>" placeholder="<?=_('All ports: 0, Range: 80-82, List: 80,443,8080,8443');?>">
+        </div>
+        <div class="u-mb10">
+          <label for="v_ip" class="form-label">
+            <?=_('IP address / IPset');?> <span class="optional">(<?=_('CIDR format is supported');?>)</span>
+          </label>
+          <div class="u-pos-relative">
+            <select class="form-select" tabindex="-1" id="quickips_list" onchange="this.nextElementSibling.value=this.value">
+              <option value="">&nbsp;</option>
+            </select>
+            <input type="text" class="form-control list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+          </div>
+        </div>
+        <div class="u-mb10">
+          <label for="v_comment" class="form-label">
+            <?=_('Comment');?> <span class="optional">(<?=_('optional');?>)</span>
+          </label>
+          <input type="text" class="form-control" name="v_comment" id="v_comment" maxlength="255" value="<?=htmlentities(trim($v_comment, "'"))?>">
+        </div>
+      </div>
+    </div>
+
+  </form>
 
-		<table class="data">
-			<tr class="data-add">
-				<td class="data-dotted">
-					<table class="data-col1">
-						<tr>
-							<td></td>
-						</tr>
-					</table>
-				</td>
-				<td class="data-dotted">
-					<table class="data-col2" width="600px">
-						<tr>
-							<td class="u-pt18">
-								<span class="page-title"><?=_('Adding Firewall Rule');?></span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<?php show_error_panel($_SESSION);?>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt18">
-								<label for="v_action" class="form-label"><?=_('Action') ?></label>
-								<select class="form-select u-input-width" name="v_action" id="v_action">
-									<option value="DROP" <?php if ((!empty($v_action)) && ( $v_action == "'DROP'" )) echo 'selected'?>><?=_('DROP');?></option>
-									<option value="ACCEPT" <?php if ((!empty($v_action)) && ( $v_action == "'ACCEPT'" )) echo 'selected'?>><?=_('ACCEPT');?></option>
-								</select>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_protocol" class="form-label"><?=_('Protocol') ?></label>
-								<select class="form-select u-input-width" name="v_protocol" id="v_protocol">
-									<option value="TCP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "'TCP'" )) echo 'selected'?>><?=_('TCP');?></option>
-									<option value="UDP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "'UDP'" )) echo 'selected'?>><?=_('UDP');?></option>
-									<option value="ICMP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "'ICMP'" )) echo 'selected'?>><?=_('ICMP');?></option>
-								</select>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_port" class="form-label">
-									<?=_('Port');?> <span class="optional">(<?=_('Ranges and Lists are acceptable');?>)</span>
-								</label>
-								<input type="text" class="form-control u-input-width" name="v_port" id="v_port" value="<?=htmlentities(trim($v_port, "'"))?>" placeholder="<?=_('All ports: 0, Range: 80-82, List: 80,443,8080,8443');?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_ip" class="form-label">
-									<?=_('IP address / IPset');?> <span class="optional">(<?=_('CIDR format is supported');?>)</span>
-								</label>
-								<div class="u-pos-relative u-input-width">
-									<select class="form-select" tabindex="-1" id="quickips_list" onchange="this.nextElementSibling.value=this.value">
-										<option value="">&nbsp;</option>
-									</select>
-									<input type="text" class="form-control list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_comment" class="form-label">
-									<?=_('Comment');?> <span class="optional">(<?=_('optional');?>)</span>
-								</label>
-								<input type="text" class="form-control u-input-width" name="v_comment" id="v_comment" maxlength="255" value="<?=htmlentities(trim($v_comment, "'"))?>">
-							</td>
-						</tr>
-					</table>
-					<table class="data-col2 u-mb20"></table>
-				</td>
-			</tr>
-		</table>
-	</form>
 </div>
 
 <script>
-	var iplists = JSON.parse('<?=$ipset_lists_json?>');
-	iplists.sort(function (a, b) {
-		return a.name > b.name;
-	});
+  var iplists = JSON.parse('<?=$ipset_lists_json?>');
+  iplists.sort(function (a, b) {
+    return a.name > b.name;
+  });
 
-	$(function () {
-		var targetElement = document.getElementById('quickips_list');
+  $(function () {
+    var targetElement = document.getElementById('quickips_list');
 
-		var newEl = document.createElement("option");
-		newEl.text = "IP address lists:";
-		newEl.disabled = true;
-		targetElement.appendChild(newEl);
+    var newEl = document.createElement("option");
+    newEl.text = "IP address lists:";
+    newEl.disabled = true;
+    targetElement.appendChild(newEl);
 
-		iplists.forEach(iplist => {
-			var newEl = document.createElement("option");
-			newEl.text = iplist.name;
-			newEl.value = "ipset:" + iplist.name;
-			targetElement.appendChild(newEl);
-		});
-	});
+    iplists.forEach(iplist => {
+      var newEl = document.createElement("option");
+      newEl.text = iplist.name;
+      newEl.value = "ipset:" + iplist.name;
+      targetElement.appendChild(newEl);
+    });
+  });
 </script>

web/templates/pages/add_firewall_banlist.html

@@ -1,13 +1,13 @@
 <!-- Begin toolbar -->
 <div class="l-center edit">
-	<div class="l-sort clearfix">
-		<div class="l-unit-toolbar__buttonstrip">
-			<a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/firewall/banlist/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-		</div>
-		<div class="l-unit-toolbar__buttonstrip float-right">
-			<a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
-		</div>
-	</div>
+  <div class="l-sort clearfix">
+    <div class="l-unit-toolbar__buttonstrip">
+      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/firewall/banlist/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+    </div>
+    <div class="l-unit-toolbar__buttonstrip float-right">
+      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+    </div>
+  </div>
 </div>
 <!-- End toolbar -->
 
@@ -15,57 +15,35 @@
 
 <div class="l-center animated fadeIn">
 
-	<form id="vstobjects" name="v_add_ip" method="post">
-		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-		<input type="hidden" name="ok" value="Add">
+  <form id="vstobjects" name="v_add_ip" method="post">
+    <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
+    <input type="hidden" name="ok" value="Add">
+
+    <div class="app-form">
+      <h1 class="page-title"><?=_('Adding IP Address to Banlist');?></h1>
+      <?php show_error_panel($_SESSION);?>
+      <div class="u-input-width">
+        <div class="u-mb20">
+          <label for="v_ip" class="form-label">
+            <?=_('IP address');?> <span class="optional">(<?=_('CIDR format is supported');?>)</span>
+          </label>
+          <input type="text" class="form-control" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+        </div>
+        <div class="u-mb10">
+          <label for="v_chain" class="form-label"><?=_('Banlist') ?></label>
+          <select class="form-select" name="v_chain" id="v_chain">
+            <option value="SSH" <?php if ((!empty($v_chain)) && ( $v_chain == "'SSH'" )) echo 'selected'?>><?=_('SSH');?></option>
+            <option value="WEB" <?php if ((!empty($v_chain)) && ( $v_chain == "'WEB'" )) echo 'selected'?>><?=_('WEB');?></option>
+            <option value="FTP" <?php if ((!empty($v_chain)) && ( $v_chain == "'FTP'" )) echo 'selected'?>><?=_('FTP');?></option>
+            <option value="DNS" <?php if ((!empty($v_chain)) && ( $v_chain == "'DNS'" )) echo 'selected'?>><?=_('DNS');?></option>
+            <option value="MAIL" <?php if ((!empty($v_chain)) && ( $v_chain == "'MAIL'" )) echo 'selected'?>><?=_('MAIL');?></option>
+            <option value="DB" <?php if ((!empty($v_chain)) && ( $v_chain == "'DB'" )) echo 'selected'?>><?=_('DB');?></option>
+            <option value="HESTIA" <?php if ((!empty($v_chain)) && ( $v_chain == "'HESTIA'" )) echo 'selected'?>><?=_('HESTIA');?></option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+  </form>
 
-		<table class="data">
-			<tr class="data-add">
-				<td class="data-dotted">
-					<table class="data-col1">
-						<tr>
-							<td></td>
-						</tr>
-					</table>
-				</td>
-				<td class="data-dotted">
-					<table class="data-col2" width="600px">
-						<tr>
-							<td class="u-pt18">
-								<span class="page-title"><?=_('Adding IP Address to Banlist');?></span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<?php show_error_panel($_SESSION);?>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_ip" class="form-label">
-									<?=_('IP address');?> <span class="optional">(<?=_('CIDR format is supported');?>)</span>
-								</label>
-								<input type="text" class="form-control u-input-width" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt18">
-								<label for="v_chain" class="form-label"><?=_('Banlist') ?></label>
-								<select class="form-select u-input-width" name="v_chain" id="v_chain">
-									<option value="SSH" <?php if ((!empty($v_chain)) && ( $v_chain == "'SSH'" )) echo 'selected'?>><?=_('SSH');?></option>
-									<option value="WEB" <?php if ((!empty($v_chain)) && ( $v_chain == "'WEB'" )) echo 'selected'?>><?=_('WEB');?></option>
-									<option value="FTP" <?php if ((!empty($v_chain)) && ( $v_chain == "'FTP'" )) echo 'selected'?>><?=_('FTP');?></option>
-									<option value="DNS" <?php if ((!empty($v_chain)) && ( $v_chain == "'DNS'" )) echo 'selected'?>><?=_('DNS');?></option>
-									<option value="MAIL" <?php if ((!empty($v_chain)) && ( $v_chain == "'MAIL'" )) echo 'selected'?>><?=_('MAIL');?></option>
-									<option value="DB" <?php if ((!empty($v_chain)) && ( $v_chain == "'DB'" )) echo 'selected'?>><?=_('DB');?></option>
-									<option value="HESTIA" <?php if ((!empty($v_chain)) && ( $v_chain == "'HESTIA'" )) echo 'selected'?>><?=_('HESTIA');?></option>
-								</select>
-							</td>
-						</tr>
-					</table>
-					<table class="data-col2"></table>
-				</td>
-			</tr>
-		</table>
-	</form>
 </div>

web/templates/pages/add_firewall_ipset.html

@@ -1,13 +1,13 @@
 <!-- Begin toolbar -->
 <div class="l-center edit">
-	<div class="l-sort clearfix">
-		<div class="l-unit-toolbar__buttonstrip">
-			<a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/firewall/ipset/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-		</div>
-		<div class="l-unit-toolbar__buttonstrip float-right">
-			<a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
-		</div>
-	</div>
+  <div class="l-sort clearfix">
+    <div class="l-unit-toolbar__buttonstrip">
+      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/firewall/ipset/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+    </div>
+    <div class="l-unit-toolbar__buttonstrip float-right">
+      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+    </div>
+  </div>
 </div>
 <!-- End toolbar -->
 
@@ -15,136 +15,110 @@
 
 <div class="l-center animated fadeIn">
 
-	<form id="vstobjects" name="v_add_ipset" method="post">
-		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-		<input type="hidden" name="ok" value="Add">
+  <form id="vstobjects" name="v_add_ipset" method="post">
+    <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
+    <input type="hidden" name="ok" value="Add">
+
+    <div class="app-form">
+      <h1 class="page-title"><?=_('Adding Firewall Ipset List');?></h1>
+      <?php show_error_panel($_SESSION);?>
+      <div class="u-input-width">
+        <div class="u-mb10">
+          <label for="v_ipname" class="form-label"><?=_('Ip List Name') ?></label>
+          <input type="text" class="form-control" name="v_ipname" id="v_ipname" maxlength="255" value="<?=htmlentities(trim($v_ipname, "'"))?>">
+        </div>
+        <div class="u-mb10">
+          <label for="v_datasource" class="form-label">
+            <?=_('Data Source') ?> <span class="optional">(<?=_('url, script or file');?>)</span>
+          </label>
+          <div class="u-pos-relative">
+            <select class="form-select" tabindex="-1" id="datasource_list" onchange="this.nextElementSibling.value=this.value">
+              <option value="">clear</option>
+            </select>
+            <input type="text" class="form-control list-editor" name="v_datasource" id="v_datasource" maxlength="255" value="<?=htmlentities(trim($v_datasource, "'"))?>">
+          </div>
+        </div>
+        <div class="u-mb10">
+          <label for="v_ipver" class="form-label"><?=_('Ip Version') ?></label>
+          <select class="form-select" name="v_ipver" id="v_ipver">
+            <option value="v4" <?php if ((!empty($v_ipver)) && ( $v_ipver == "'v4'" )) echo 'selected'?>><?=_('ip v4');?></option>
+            <option value="v6" <?php if ((!empty($v_ipver)) && ( $v_ipver == "'v6'" )) echo 'selected'?>><?=_('ip v6');?></option>
+          </select>
+        </div>
+        <div class="u-mb10">
+          <label for="v_autoupdate" class="form-label"><?=_('Autoupdate') ?></label>
+          <select class="form-select" name="v_autoupdate" id="v_autoupdate">
+            <option value="yes" <?php if ((!empty($v_autoupdate)) && ( $v_autoupdate == "'yes'" )) echo 'selected'?>><?=_('yes');?></option>
+            <option value="no" <?php if ((!empty($v_autoupdate)) && ( $v_autoupdate == "'no'" )) echo 'selected'?>><?=_('no');?></option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+  </form>
 
-		<table class="data">
-			<tr class="data-add">
-				<td class="data-dotted">
-					<table class="data-col1">
-						<tr>
-							<td></td>
-						</tr>
-					</table>
-				</td>
-				<td class="data-dotted">
-					<table class="data-col2" width="600px">
-						<tr>
-							<td class="u-pt18">
-								<span class="page-title"><?=_('Adding Firewall Ipset List');?></span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<?php show_error_panel($_SESSION);?>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt18">
-								<label for="v_ipname" class="form-label"><?=_('Ip List Name') ?></label>
-								<input type="text" class="form-control u-input-width" name="v_ipname" id="v_ipname" maxlength="255" value="<?=htmlentities(trim($v_ipname, "'"))?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt18">
-								<label for="v_datasource" class="form-label">
-									<?=_('Data Source') ?> <span class="optional">(<?=_('url, script or file');?>)</span>
-								</label>
-								<div class="u-pos-relative u-input-width">
-									<select class="form-select" tabindex="-1" id="datasource_list" onchange="this.nextElementSibling.value=this.value">
-										<option value="">clear</option>
-									</select>
-									<input type="text" class="form-control list-editor" name="v_datasource" id="v_datasource" maxlength="255" value="<?=htmlentities(trim($v_datasource, "'"))?>">
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt18">
-								<label for="v_ipver" class="form-label"><?=_('Ip Version') ?></label>
-								<select class="form-select u-input-width" name="v_ipver" id="v_ipver">
-									<option value="v4" <?php if ((!empty($v_ipver)) && ( $v_ipver == "'v4'" )) echo 'selected'?>><?=_('ip v4');?></option>
-									<option value="v6" <?php if ((!empty($v_ipver)) && ( $v_ipver == "'v6'" )) echo 'selected'?>><?=_('ip v6');?></option>
-								</select>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt18">
-								<label for="v_autoupdate" class="form-label"><?=_('Autoupdate') ?></label>
-								<select class="form-select u-input-width" name="v_autoupdate" id="v_autoupdate">
-									<option value="yes" <?php if ((!empty($v_autoupdate)) && ( $v_autoupdate == "'yes'" )) echo 'selected'?>><?=_('yes');?></option>
-									<option value="no" <?php if ((!empty($v_autoupdate)) && ( $v_autoupdate == "'no'" )) echo 'selected'?>><?=_('no');?></option>
-								</select>
-							</td>
-						</tr>
-					</table>
-					<table class="data-col2"></table>
-				</td>
-			</tr>
-		</table>
-	</form>
 </div>
 
 <script>
-	var country_iplists = [
-		<?php
-			$country = array('ca' => 'Canada', 'cn' => 'China', 'fr' => 'French', 'de' => 'Germany', 'in' => 'India', 'nl' => 'Netherlands', 'ro' => 'Romania', 'ru' => 'Russia', 'es' => 'Spain', 'ch' => 'Switzerland', 'tr' => 'Turkey', 'ua' => 'Ukraine',  'gb' => 'United Kingdom', 'us' => 'United States');
-			foreach($country as $iso =>$name){
-				echo '{name: "[IPv4] Country - '.$name.'",	source:"https://raw.githubusercontent.com/ipverse/rir-ip/master/country/'.$iso.'/ipv4-aggregated.txt"},'."\n";
-			}
-		?>
-		// Define IPv6 country lists
-		/*
-		<?php
-			foreach($country as $iso =>$name){
-				echo '{name: "[IPv6] Country - '.$name.'",	source:"https://raw.githubusercontent.com/ipverse/rir-ip/master/country/'.$iso.'/ipv6-aggregated.txt"},'."\n";
-			}
-		?>
-		*/
-	];
+  var country_iplists = [
+    <?php
+      $country = array('ca' => 'Canada', 'cn' => 'China', 'fr' => 'French', 'de' => 'Germany', 'in' => 'India', 'nl' => 'Netherlands', 'ro' => 'Romania', 'ru' => 'Russia', 'es' => 'Spain', 'ch' => 'Switzerland', 'tr' => 'Turkey', 'ua' => 'Ukraine',  'gb' => 'United Kingdom', 'us' => 'United States');
+      foreach($country as $iso =>$name){
+        echo '{name: "[IPv4] Country - '.$name.'",	source:"https://raw.githubusercontent.com/ipverse/rir-ip/master/country/'.$iso.'/ipv4-aggregated.txt"},'."\n";
+      }
+    ?>
+    // Define IPv6 country lists
+    /*
+    <?php
+      foreach($country as $iso =>$name){
+        echo '{name: "[IPv6] Country - '.$name.'",	source:"https://raw.githubusercontent.com/ipverse/rir-ip/master/country/'.$iso.'/ipv6-aggregated.txt"},'."\n";
+      }
+    ?>
+    */
+  ];
 
-	var blacklist_iplists = [
-		{ name: "[IPv4] Block Malicious IPs", source: "script:/usr/local/hestia/install/deb/firewall/ipset/blacklist.sh" },
-		/*
-		{name: "[IPv6] Block Malicious IPs",       source:"script:/usr/local/hestia/install/deb/firewall/ipset/blacklist.ipv6.sh"},
-		*/
-	];
+  var blacklist_iplists = [
+    { name: "[IPv4] Block Malicious IPs", source: "script:/usr/local/hestia/install/deb/firewall/ipset/blacklist.sh" },
+    /*
+    {name: "[IPv6] Block Malicious IPs",       source:"script:/usr/local/hestia/install/deb/firewall/ipset/blacklist.ipv6.sh"},
+    */
+  ];
 
-	country_iplists.sort(function (a, b) {
-		return a.name > b.name;
-	});
+  country_iplists.sort(function (a, b) {
+    return a.name > b.name;
+  });
 
-	blacklist_iplists.sort(function (a, b) {
-		return a.name > b.name;
-	});
+  blacklist_iplists.sort(function (a, b) {
+    return a.name > b.name;
+  });
 
-	$(function () {
-		var targetElement = document.getElementById('datasource_list');
+  $(function () {
+    var targetElement = document.getElementById('datasource_list');
 
-		// Blacklist
-		var newEl = document.createElement("option");
-		newEl.text = "<?=_('BLACKLIST') ?>";
-		newEl.disabled = true;
-		targetElement.appendChild(newEl);
+    // Blacklist
+    var newEl = document.createElement("option");
+    newEl.text = "<?=_('BLACKLIST') ?>";
+    newEl.disabled = true;
+    targetElement.appendChild(newEl);
 
-		blacklist_iplists.forEach(iplist => {
-			var newEl = document.createElement("option");
-			newEl.text = iplist.name;
-			newEl.value = iplist.source;
-			targetElement.appendChild(newEl);
-		});
+    blacklist_iplists.forEach(iplist => {
+      var newEl = document.createElement("option");
+      newEl.text = iplist.name;
+      newEl.value = iplist.source;
+      targetElement.appendChild(newEl);
+    });
 
-		// IPVERSE
-		var newEl = document.createElement("option");
-		newEl.text = "<?=_('IPVERSE') ?>";
-		newEl.disabled = true;
-		targetElement.appendChild(newEl);
+    // IPVERSE
+    var newEl = document.createElement("option");
+    newEl.text = "<?=_('IPVERSE') ?>";
+    newEl.disabled = true;
+    targetElement.appendChild(newEl);
 
-		country_iplists.forEach(iplist => {
-			var newEl = document.createElement("option");
-			newEl.text = iplist.name;
-			newEl.value = iplist.source;
-			targetElement.appendChild(newEl);
-		});
-	});
+    country_iplists.forEach(iplist => {
+      var newEl = document.createElement("option");
+      newEl.text = iplist.name;
+      newEl.value = iplist.source;
+      targetElement.appendChild(newEl);
+    });
+  });
 </script>

web/templates/pages/add_ip.html

@@ -1,13 +1,13 @@
 <!-- Begin toolbar -->
 <div class="l-center edit">
-	<div class="l-sort clearfix">
-		<div class="l-unit-toolbar__buttonstrip">
-			<a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/ip/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-		</div>
-		<div class="l-unit-toolbar__buttonstrip float-right">
-			<a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
-		</div>
-	</div>
+  <div class="l-sort clearfix">
+    <div class="l-unit-toolbar__buttonstrip">
+      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/ip/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+    </div>
+    <div class="l-unit-toolbar__buttonstrip float-right">
+      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+    </div>
+  </div>
 </div>
 <!-- End toolbar -->
 
@@ -15,101 +15,69 @@
 
 <div class="l-center animated fadeIn">
 
-	<form id="vstobjects" name="v_add_ip" method="post">
-		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-		<input type="hidden" name="ok" value="Add">
+  <form id="vstobjects" name="v_add_ip" method="post">
+    <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
+    <input type="hidden" name="ok" value="Add">
+
+    <div class="app-form">
+      <h1 class="page-title"><?=_('Adding IP address');?></h1>
+      <?php show_error_panel($_SESSION);?>
+      <div class="u-input-width">
+        <div class="u-mb10">
+          <label for="v_ip" class="form-label"><?=_('IP address') ?></label>
+          <input type="text" class="form-control" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+        </div>
+        <div class="u-mb10">
+          <label for="v_netmask" class="form-label"><?=_('Netmask');?></label>
+          <input type="text" class="form-control" name="v_netmask" id="v_netmask" value="<?=htmlentities(trim($v_netmask, "'"))?>">
+        </div>
+        <div class="u-mb10">
+          <label for="v_interface" class="form-label"><?=_('Interface');?></label>
+          <select class="form-select" name="v_interface" id="v_interface">
+            <?php
+              foreach ($interfaces as $key => $value) {
+                echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
+                if ((!empty($v_interface)) && ( $value == $v_interface )) echo ' selected';
+                echo ">".htmlentities($value)."</option>\n";
+              }
+            ?>
+          </select>
+        </div>
+        <div class="form-check u-mb10">
+          <input class="form-check-input" type="checkbox" name="v_shared" id="v_shared" <?php if (empty($v_dedicated)) echo 'checked' ?> onclick="javascript:elementHideShow('usrtable');">
+          <label for="v_shared">
+            <?=_('Shared');?>
+          </label>
+        </div>
+        <div id="usrtable" style="display:<?php if (empty($v_dedicated)) { echo 'none';} else {echo 'block';}?> ;">
+          <div class="u-mb10">
+            <label for="v_owner" class="form-label"><?=_('Assigned user');?></label>
+            <select class="form-select" name="v_owner" id="v_owner">
+              <?php
+                foreach ($users as $key => $value) {
+                  echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
+                  if ((!empty($v_owner)) && ( $value == $v_owner )) echo ' selected';
+                  echo ">".htmlentities($value)."</option>\n";
+                }
+              ?>
+            </select>
+          </div>
+        </div>
+        <div class="u-mb10">
+          <label for="v_name" class="form-label">
+            <?=_('Assigned domain');?> <span class="optional">(<?=_('optional');?>)</span>
+          </label>
+          <input type="text" class="form-control" name="v_name" id="v_name" value="<?=htmlentities(trim($v_name, "'"))?>">
+        </div>
+        <div class="u-mb10">
+          <label for="v_nat" class="form-label">
+            <?=_('NAT IP association');?> <span class="optional">(<?=_('optional');?>)</span>
+          </label>
+          <input type="text" class="form-control" name="v_nat" id="v_nat" value="<?=htmlentities(trim($v_nat, "'"))?>">
+        </div>
+      </div>
+    </div>
+
+  </form>
 
-		<table class="data">
-			<tr class="data-add">
-				<td class="data-dotted">
-					<table class="data-col1">
-						<tr>
-							<td></td>
-						</tr>
-					</table>
-				</td>
-				<td class="data-dotted">
-					<table class="data-col2" width="600px">
-						<tr>
-							<td class="u-pt18">
-								<span class="page-title"><?=_('Adding IP address');?></span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<?php show_error_panel($_SESSION);?>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt18">
-								<label for="v_ip" class="form-label"><?=_('IP address') ?></label>
-								<input type="text" class="form-control u-input-width" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_netmask" class="form-label"><?=_('Netmask');?></label>
-								<input type="text" class="form-control u-input-width" name="v_netmask" id="v_netmask" value="<?=htmlentities(trim($v_netmask, "'"))?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_interface" class="form-label"><?=_('Interface');?></label>
-								<select class="form-select u-input-width" name="v_interface" id="v_interface">
-									<?php
-										foreach ($interfaces as $key => $value) {
-											echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
-											if ((!empty($v_interface)) && ( $value == $v_interface )) echo ' selected';
-											echo ">".htmlentities($value)."</option>\n";
-										}
-									?>
-								</select>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<div class="form-check">
-									<input class="form-check-input" type="checkbox" name="v_shared" id="v_shared" <?php if (empty($v_dedicated)) echo 'checked' ?> onclick="javascript:elementHideShow('usrtable');">
-									<label for="v_shared">
-										<?=_('Shared');?>
-									</label>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6" style="display:<?php if (empty($v_dedicated)) { echo 'none';} else {echo 'block';}?> ;" id="usrtable">
-								<label for="v_owner" class="form-label"><?=_('Assigned user');?></label>
-								<select class="form-select u-input-width" name="v_owner" id="v_owner">
-									<?php
-										foreach ($users as $key => $value) {
-											echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
-											if ((!empty($v_owner)) && ( $value == $v_owner )) echo ' selected';
-											echo ">".htmlentities($value)."</option>\n";
-										}
-									?>
-								</select>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_name" class="form-label">
-									<?=_('Assigned domain');?> <span class="optional">(<?=_('optional');?>)</span>
-								</label>
-								<input type="text" class="form-control u-input-width" name="v_name" id="v_name" value="<?=htmlentities(trim($v_name, "'"))?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_nat" class="form-label">
-									<?=_('NAT IP association');?> <span class="optional">(<?=_('optional');?>)</span>
-								</label>
-								<input type="text" class="form-control u-input-width" name="v_nat" id="v_nat" value="<?=htmlentities(trim($v_nat, "'"))?>">
-							</td>
-						</tr>
-					</table>
-					<table class="data-col2 u-mb20"></table>
-				</td>
-			</tr>
-		</table>
-	</form>
 </div>

web/templates/pages/add_key.html

@@ -1,17 +1,17 @@
 <!-- Begin toolbar -->
 <div class="l-center edit">
-	<div class="l-sort clearfix">
-		<div class="l-unit-toolbar__buttonstrip">
-			<?php if (($_SESSION['userContext'] === 'admin') && (isset($_GET['user'])) && ($_GET['user'] !== 'admin')) { ?>
-				<a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/key/?user=<?=htmlentities($_GET['user']);?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-			<?php } else { ?>
-				<a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/key/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-			<?php } ?>
-		</div>
-		<div class="l-unit-toolbar__buttonstrip float-right">
-			<a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
-		</div>
-	</div>
+  <div class="l-sort clearfix">
+    <div class="l-unit-toolbar__buttonstrip">
+      <?php if (($_SESSION['userContext'] === 'admin') && (isset($_GET['user'])) && ($_GET['user'] !== 'admin')) { ?>
+        <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/key/?user=<?=htmlentities($_GET['user']);?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <?php } else { ?>
+        <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/key/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <?php } ?>
+    </div>
+    <div class="l-unit-toolbar__buttonstrip float-right">
+      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+    </div>
+  </div>
 </div>
 <!-- End toolbar -->
 
@@ -19,41 +19,19 @@
 
 <div class="l-center animated fadeIn">
 
-	<form id="vstobjects" name="v_add_key" method="post">
-		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-		<input type="hidden" name="ok" value="Add">
+  <form id="vstobjects" name="v_add_key" method="post">
+    <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
+    <input type="hidden" name="ok" value="Add">
+
+    <div class="app-form">
+      <h1 class="page-title"><?=_('Add SSH Key');?></h1>
+      <?php show_error_panel($_SESSION);?>
+      <div style="max-width: 600px;">
+        <label for="v_key" class="form-label"><?=_('SSH KEY') ?></label>
+        <textarea class="form-control u-min-height100" name="v_key" id="v_key"><?=htmlentities(trim($v_key, "'"))?></textarea>
+      </div>
+    </div>
+
+  </form>
 
-		<table class="data">
-			<tr class="data-add">
-				<td class="data-dotted">
-					<table class="data-col1">
-						<tr>
-							<td></td>
-						</tr>
-					</table>
-				</td>
-				<td class="data-dotted">
-					<table class="data-col2" width="600px">
-						<tr>
-							<td class="u-pt18">
-								<span class="page-title"><?=_('Add SSH Key');?></span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<?php show_error_panel($_SESSION);?>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt18">
-								<label for="v_key" class="form-label"><?=_('SSH KEY') ?></label>
-								<textarea class="form-control u-min-height100" name="v_key" id="v_key"><?=htmlentities(trim($v_key, "'"))?></textarea>
-							</td>
-						</tr>
-					</table>
-					<table class="data-col2"></table>
-				</td>
-			</tr>
-		</table>
-	</form>
 </div>

web/templates/pages/add_mail_acc.html

@@ -1,13 +1,13 @@
 <!-- Begin toolbar -->
 <div class="l-center edit">
-	<div class="l-sort clearfix">
-		<div class="l-unit-toolbar__buttonstrip">
-			<a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/mail/?domain=<?=htmlentities(trim($v_domain, "'"))?>&token=<?=$_SESSION['token']?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-		</div>
-		<div class="l-unit-toolbar__buttonstrip float-right">
-			<a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
-		</div>
-	</div>
+  <div class="l-sort clearfix">
+    <div class="l-unit-toolbar__buttonstrip">
+      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/mail/?domain=<?=htmlentities(trim($v_domain, "'"))?>&token=<?=$_SESSION['token']?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+    </div>
+    <div class="l-unit-toolbar__buttonstrip float-right">
+      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+    </div>
+  </div>
 </div>
 <!-- End toolbar -->
 
@@ -15,174 +15,126 @@
 
 <div class="l-center animated fadeIn">
 
-	<form id="vstobjects" name="v_add_mail_acc" method="post">
-		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-		<input type="hidden" name="ok_acc" value="add">
+  <form id="vstobjects" name="v_add_mail_acc" method="post">
+    <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
+    <input type="hidden" name="ok_acc" value="add">
 
-		<table class="data">
-			<tr class="data-add">
-				<td class="data-dotted">
-					<table class="data-col1">
-						<tr>
-							<td></td>
-						</tr>
-					</table>
-				</td>
-				<td class="data-dotted">
-					<table class="data-col2" width="440px">
-						<tr>
-							<td class="u-pt18">
-								<span class="page-title"><?=_('Adding Mail Account');?></span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<?php show_error_panel($_SESSION);?>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt18">
-								<label for="v_domain" class="form-label"><?=_('Domain');?></label>
-								<input type="text" class="form-control u-input-width" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
-								<input type="hidden" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_account" class="form-label"><?=_('Account');?></label>
-								<input type="text" class="form-control u-input-width" name="v_account" id="v_account" value="<?=htmlentities(trim($v_account, "'"))?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_password" class="form-label">
-									<?=_('Password');?>
-									<a href="javascript:applyRandomString();" title="<?=_('generate');?>" class="u-ml5"><i class="fas fa-sync status-icon green icon-large"></i></a>
-								</label>
-								<div class="u-pos-relative u-input-width u-mb10">
-									<input type="text" class="form-control js-password-input" name="v_password" id="v_password">
-									<meter max="4" class="password-meter"></meter>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<p class="u-mb10"><?=_('Your password must have at least');?>:</p>
-								<ul class="u-list-bulleted u-mb10">
-									<li><?=_('8 characters long');?></li>
-									<li><?=_('1 uppercase & 1 lowercase character');?></li>
-									<li><?=_('1 number');?></li>
-								</ul>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<a href="javascript:elementHideShow('advtable');" class="vst-advanced"> <?=_('Advanced options');?></a>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<table style="display:<?php if (empty($v_adv)) echo 'none';?> ;" id="advtable">
-									<tr>
-										<td class="u-pt6">
-											<label for="v_quota" class="form-label">
-												<?=_('Quota');?> <span class="optional">(<?=_('in megabytes');?>)</span>
-											</label>
-											<div class="u-pos-relative u-input-width">
-												<input type="text" class="form-control" name="v_quota" id="v_quota" value="<?=htmlentities(trim($v_quota, "'"))?>">
-												<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
-											</div>
-										</td>
-									</tr>
-									<tr>
-										<td class="u-pt6">
-											<label for="v_aliases" class="form-label">
-												<?=_('Aliases');?> <span class="optional">(<?=_('use local-part');?>)</span>
-											</label>
-											<textarea class="form-control" name="v_aliases" id="v_aliases"><?=htmlentities(trim($v_aliases, "'"))?></textarea>
-										</td>
-									</tr>
-									<tr>
-										<td class="u-pt6">
-											<label for="v_fwd" class="form-label">
-												<?=_('Forward to');?> <span class="optional">(<?=_('one or more email addresses');?>)</span>
-											</label>
-											<textarea class="form-control" name="v_fwd" id="v_fwd" <?php if($v_blackhole == 'yes') echo "disabled";?>><?=htmlentities(trim($v_fwd, "'"))?></textarea>
-										</td>
-									</tr>
-									<tr>
-										<td class="u-pt6">
-											<div class="form-check">
-												<input class="form-check-input" type="checkbox" name="v_blackhole" id="v_blackhole" <?php if ($v_blackhole == 'yes') echo 'checked' ?>>
-												<label for="v_blackhole">
-													<?=_('Discard all mail');?>
-												</label>
-											</div>
-										</td>
-									</tr>
-									<tr <?php if ($v_blackhole == 'yes') echo 'style="display:none"'; ?> id="id_fwd_for">
-										<td class="u-pt6">
-											<div class="form-check">
-												<input class="form-check-input" type="checkbox" name="v_fwd_only" id="v_fwd_for" <?php if ($v_fwd_only == 'yes') echo 'checked' ?>>
-												<label for="v_fwd_for">
-													<?=_('Do not store forwarded mail');?>
-												</label>
-											</div>
-										</td>
-									</tr>
-									<tr>
-										<td class="u-pt6">
-											<label for="v_rate" class="form-label">
-												<?=_('Rate limit');?> <span class="optional">(<?=_('Email / hour');?>)</span>
-											</label>
-											<input type="text" class="form-control u-input-width" name="v_rate" id="v_rate" value="<?=htmlentities(trim($v_rate, "'"))?>" <?php if($_SESSION['userContext'] != "admin"){ echo "disabled";}?>>
-										</td>
-									</tr>
-								</table>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_send_email" class="form-label">
-									<?=_('Send login credentials to email address') ?>
-								</label>
-								<input type="email" class="form-control u-input-width" name="v_send_email" id="v_send_email" value="<?=htmlentities(trim($v_send_email, "'"))?>">
-								<input type="hidden" name="v_credentials" id="v_credentials">
-							</td>
-						</tr>
-					</table>
-					<table class="data-col2"></table>
-				</td>
-				<td class="mail-infoblock-td">
-					<div class="mail-infoblock">
-						<table>
-						<tr><td colspan="2"><strong><?=strtoupper(_('Common account settings'));?></strong></td><tr>
-						<tr><td><?=_('Username');?>: </td><td><span id="v_account">example</span>@<?=htmlentities(trim($v_domain, "'"))?></td></tr>
-						<tr><td><?=_('Password');?>: </td><td><span id="v_password"></span></td></tr>
-						<?php if ($_SESSION['WEBMAIL_SYSTEM']) {?><tr><td><?=_('Webmail');?>: </td><td><a class="vst" href="http://<?=htmlentities($v_webmail_alias)?>" target="_blank">http://<?=htmlentities($v_webmail_alias)?></a></td></tr><?php } ?>
-						<tr><td><?=_('Hostname');?>: </td><td>mail.<?=htmlentities($v_domain)?></td></tr>
+    <div class="app-form">
+      <h1 class="page-title"><?=_('Adding Mail Account');?></h1>
+      <?php show_error_panel($_SESSION);?>
+      <div style="display: flex; justify-content: space-between;">
+        <div class="u-input-width">
+          <div class="u-mb10">
+            <label for="v_domain" class="form-label"><?=_('Domain');?></label>
+            <input type="text" class="form-control" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
+            <input type="hidden" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
+          </div>
+          <div class="u-mb10">
+            <label for="v_account" class="form-label"><?=_('Account');?></label>
+            <input type="text" class="form-control" name="v_account" id="v_account" value="<?=htmlentities(trim($v_account, "'"))?>">
+          </div>
+          <div class="u-mb10">
+            <label for="v_password" class="form-label">
+              <?=_('Password');?>
+              <a href="javascript:applyRandomString();" title="<?=_('generate');?>" class="u-ml5"><i class="fas fa-sync status-icon green icon-large"></i></a>
+            </label>
+            <div class="u-pos-relative u-mb10">
+              <input type="text" class="form-control js-password-input" name="v_password" id="v_password">
+              <meter max="4" class="password-meter"></meter>
+            </div>
+          </div>
+          <p class="u-mb10"><?=_('Your password must have at least');?>:</p>
+          <ul class="u-list-bulleted">
+            <li><?=_('8 characters long');?></li>
+            <li><?=_('1 uppercase & 1 lowercase character');?></li>
+            <li><?=_('1 number');?></li>
+          </ul>
+          <div class="u-pt18">
+            <a href="javascript:elementHideShow('advtable');" class="vst-advanced"><?=_('Advanced options');?></a>
+          </div>
+          <div id="advtable" style="display:<?php if (empty($v_adv)) echo 'none';?> ;">
+            <div class="u-mt15 u-mb10">
+              <label for="v_quota" class="form-label">
+                <?=_('Quota');?> <span class="optional">(<?=_('in megabytes');?>)</span>
+              </label>
+              <div class="u-pos-relative">
+                <input type="text" class="form-control" name="v_quota" id="v_quota" value="<?=htmlentities(trim($v_quota, "'"))?>">
+                <i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+              </div>
+            </div>
+            <div class="u-mb10">
+              <label for="v_aliases" class="form-label">
+                <?=_('Aliases');?> <span class="optional">(<?=_('use local-part');?>)</span>
+              </label>
+              <textarea class="form-control" name="v_aliases" id="v_aliases"><?=htmlentities(trim($v_aliases, "'"))?></textarea>
+            </div>
+            <div class="u-mb10">
+              <label for="v_fwd" class="form-label">
+                <?=_('Forward to');?> <span class="optional">(<?=_('one or more email addresses');?>)</span>
+              </label>
+              <textarea class="form-control" name="v_fwd" id="v_fwd" <?php if($v_blackhole == 'yes') echo "disabled";?>><?=htmlentities(trim($v_fwd, "'"))?></textarea>
+            </div>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" name="v_blackhole" id="v_blackhole" <?php if ($v_blackhole == 'yes') echo 'checked' ?>>
+              <label for="v_blackhole">
+                <?=_('Discard all mail');?>
+              </label>
+            </div>
+            <div <?php if ($v_blackhole == 'yes') echo 'style="display:none"'; ?> id="id_fwd_for" class="u-pt6">
+              <div class="form-check u-mb10">
+                <input class="form-check-input" type="checkbox" name="v_fwd_only" id="v_fwd_for" <?php if ($v_fwd_only == 'yes') echo 'checked' ?>>
+                <label for="v_fwd_for">
+                  <?=_('Do not store forwarded mail');?>
+                </label>
+              </div>
+            </div>
+            <div class="u-mb10">
+              <label for="v_rate" class="form-label">
+                <?=_('Rate limit');?> <span class="optional">(<?=_('Email / hour');?>)</span>
+              </label>
+              <input type="text" class="form-control" name="v_rate" id="v_rate" value="<?=htmlentities(trim($v_rate, "'"))?>" <?php if($_SESSION['userContext'] != "admin"){ echo "disabled";}?>>
+            </div>
+          </div>
+          <div class="u-mt15">
+            <label for="v_send_email" class="form-label">
+              <?=_('Send login credentials to email address') ?>
+            </label>
+            <input type="email" class="form-control" name="v_send_email" id="v_send_email" value="<?=htmlentities(trim($v_send_email, "'"))?>">
+            <input type="hidden" name="v_credentials" id="v_credentials">
+          </div>
+        </div>
+        <div>
+          <div class="mail-infoblock">
+            <table>
+              <tr><td colspan="2"><strong><?=strtoupper(_('Common account settings'));?></strong></td><tr>
+              <tr><td><?=_('Username');?>: </td><td><span id="v_account">example</span>@<?=htmlentities(trim($v_domain, "'"))?></td></tr>
+              <tr><td><?=_('Password');?>: </td><td><span id="v_password"></span></td></tr>
+              <?php if ($_SESSION['WEBMAIL_SYSTEM']) {?><tr><td><?=_('Webmail');?>: </td><td><a class="vst" href="http://<?=htmlentities($v_webmail_alias)?>" target="_blank">http://<?=htmlentities($v_webmail_alias)?></a></td></tr><?php } ?>
+              <tr><td><?=_('Hostname');?>: </td><td>mail.<?=htmlentities($v_domain)?></td></tr>
 
-						<tr><td colspan="2"><strong><?=strtoupper(_('IMAP settings'));?></strong></td></tr>
-						<tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
-						<tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 993
-						<tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 143
-						<tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 143
+              <tr><td colspan="2"><strong><?=strtoupper(_('IMAP settings'));?></strong></td></tr>
+              <tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
+              <tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 993
+              <tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 143
+              <tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 143
 
-						<tr><td colspan="2"><strong><?=strtoupper(_('POP3 settings'));?></strong></td></tr>
-						<tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
-						<tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 995
-						<tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 110
-						<tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 110
+              <tr><td colspan="2"><strong><?=strtoupper(_('POP3 settings'));?></strong></td></tr>
+              <tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
+              <tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 995
+              <tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 110
+              <tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 110
+
+              <tr><td colspan="2"><strong><?=strtoupper(_('SMTP settings'));?></strong></td></tr>
+              <tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
+              <tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 465
+              <tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 587
+              <tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 25
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </form>
 
-						<tr><td colspan="2"><strong><?=strtoupper(_('SMTP settings'));?></strong></td></tr>
-						<tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
-						<tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 465
-						<tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 587
-						<tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 25
-						</table>
-					</div>
-				</td>
-			</tr>
-		</table>
-	</form>
 </div>

web/templates/pages/add_web.html

@@ -25,8 +25,7 @@
       <h1 class="page-title"><?=_('Add Web Domain');?></h1>
       <?php show_error_panel($_SESSION);?>
       <div class="u-input-width">
-        <?php
-        if (($user_plain == 'admin') && (($_GET['accept'] !== "true"))) {?>
+        <?php if (($user_plain == 'admin') && (($_GET['accept'] !== "true"))) {?>
           <div class="alert alert-danger alert-with-icon" role="alert">
             <i class="fas fa-exclamation"></i>
             <p><?=_('Avoid adding web domains on admin account');?></p>

web/templates/pages/edit_mail_acc.html

@@ -1,13 +1,13 @@
 <!-- Begin toolbar -->
 <div class="l-center edit">
-	<div class="l-sort clearfix">
-		<div class="l-unit-toolbar__buttonstrip">
-			<a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/mail/?domain=<?=htmlentities(trim($v_domain, "'"))?>&token=<?=$_SESSION['token']?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-		</div>
-		<div class="l-unit-toolbar__buttonstrip float-right">
-			<a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
-		</div>
-	</div>
+  <div class="l-sort clearfix">
+    <div class="l-unit-toolbar__buttonstrip">
+      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/mail/?domain=<?=htmlentities(trim($v_domain, "'"))?>&token=<?=$_SESSION['token']?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+    </div>
+    <div class="l-unit-toolbar__buttonstrip float-right">
+      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+    </div>
+  </div>
 </div>
 <!-- End toolbar -->
 
@@ -15,186 +15,132 @@
 
 <div class="l-center animated fadeIn">
 
-	<form id="vstobjects" name="v_edit_mail_acc" method="post" class="<?=$v_status?>">
-		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-		<input type="hidden" name="save" value="save">
+  <form id="vstobjects" name="v_edit_mail_acc" method="post" class="<?=$v_status?>">
+    <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
+    <input type="hidden" name="save" value="save">
 
-		<table class="data">
-			<tr class="data-add">
-				<td class="data-dotted">
-					<table class="data-col1">
-						<tr>
-							<td></td>
-						</tr>
-					</table>
-				</td>
-				<td class="data-dotted">
-					<table class="data-col2" width="420px">
-						<tr>
-							<td class="u-pt18">
-								<span class="page-title"><?=_('Editing Mail Account');?></span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<?php show_error_panel($_SESSION);?>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt18">
-								<label for="v_email" class="form-label"><?=_('Account');?></label>
-								<input type="text" class="form-control u-input-width" name="v_email" id="v_email" value="<?=htmlentities($_GET['account'])."@".htmlentities($_GET['domain'])?>" disabled>
-								<input type="hidden" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
-								<input type="hidden" name="v_account" value="<?=htmlentities(trim($v_account, "'"))?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_password" class="form-label">
-									<?=_('Password');?>
-									<a href="javascript:applyRandomString();" title="<?=_('generate');?>" class="u-ml5"><i class="fas fa-sync status-icon green icon-large"></i></a>
-								</label>
-								<div class="u-pos-relative u-input-width u-mb10">
-									<input type="text" class="form-control js-password-input" name="v_password" id="v_password" value="<?=htmlentities(trim($v_password, "'"))?>">
-									<meter max="4" class="password-meter"></meter>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<p class="u-mb10"><?=_('Your password must have at least');?>:</p>
-								<ul class="u-list-bulleted u-mb10">
-									<li><?=_('8 characters long');?></li>
-									<li><?=_('1 uppercase & 1 lowercase character');?></li>
-									<li><?=_('1 number');?></li>
-								</ul>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_send_email" class="form-label">
-									<?=_('Send login credentials to email address') ?>
-								</label>
-								<input type="email" class="form-control u-input-width" name="v_send_email" id="v_send_email" value="<?=htmlentities(trim($v_send_email, "'"))?>">
-								<input type="hidden" name="v_credentials" id="v_credentials">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_quota" class="form-label">
-									<?=_('Quota');?> <span class="optional">(<?=_('in megabytes');?>)</span>
-								</label>
-								<div class="u-pos-relative u-input-width">
-									<input type="text" class="form-control" name="v_quota" id="v_quota" value="<?php if (!empty($v_quota)) {echo htmlentities(trim($v_quota, "'"));} else { echo "0"; } ?>">
-									<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_aliases" class="form-label">
-									<?=_('Aliases');?> <span class="optional">(<?=_('use local-part');?>)</span>
-								</label>
-								<textarea class="form-control u-input-width" name="v_aliases" id="v_aliases"><?=htmlentities(trim($v_aliases, "'"))?></textarea>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<div class="form-check">
-									<input class="form-check-input" type="checkbox" name="v_blackhole" id="v_blackhole" <?php if ($v_blackhole == 'yes') echo 'checked' ?>>
-									<label for="v_blackhole">
-										<?=_('Discard all mail');?>
-									</label>
-								</div>
-							</td>
-						</tr>
-						<tr <?php if ($v_blackhole == 'yes') echo 'style="display:none"'; ?> id="id_fwd_for">
-							<td class="u-pt6">
-								<div class="form-check">
-									<input class="form-check-input" type="checkbox" name="v_fwd_only" id="v_fwd_for" <?php if ($v_fwd_only == 'yes') echo 'checked' ?>>
-									<label for="v_fwd_for">
-										<?=_('Do not store forwarded mail');?>
-									</label>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<div class="form-check">
-									<input class="form-check-input" type="checkbox" name="v_autoreply" id="v_autoreply" <?php if ($v_autoreply == 'yes') echo 'checked' ?> onclick="javascript:elementHideShow('autoreplytable');">
-									<label for="v_autoreply">
-										<?=_('Autoreply');?>
-									</label>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<table style="display:<?php if ($v_autoreply == 'yes') { echo 'block';} else {echo 'none';}?> ;" id="autoreplytable">
-									<tr>
-										<td class="u-pt6">
-											<label for="v_autoreply_message" class="form-label"><?=_('Message');?></label>
-											<textarea class="form-control u-input-width" name="v_autoreply_message" id="v_autoreply_message"><?=htmlentities(trim($v_autoreply_message, "'"))?></textarea>
-										</td>
-									</tr>
-								</table>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<table id="v-fwd-opt">
-									<tr>
-										<td class="u-pt6">
-											<label for="v_fwd" class="form-label">
-												<?=_('Forward to');?> <span class="optional">(<?=_('one or more email addresses');?>)</span>
-											</label>
-											<textarea class="form-control u-input-width" name="v_fwd" id="v_fwd" <?php if($v_blackhole == 'yes') echo "disabled";?>><?=htmlentities(trim($v_fwd, "'"))?></textarea>
-										</td>
-									</tr>
-								</table>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_rate" class="form-label">
-									<?=_('Rate limit');?> <span class="optional">(<?=_('Email / hour');?>)</span>
-								</label>
-								<input type="text" class="form-control u-input-width" name="v_rate" id="v_rate" value="<?=htmlentities(trim($v_rate, "'"))?>" <?php if($_SESSION['userContext'] != "admin"){ echo "disabled";}?>>
-							</td>
-						</tr>
-					</table>
-					<table class="data-col2"></table>
-				</td>
-				<td class="mail-infoblock-td">
-					<div class="mail-infoblock">
-						<table>
-						<tr><td colspan="2"><strong><?=strtoupper(_('Common account settings'));?></strong></td><tr>
-						<tr><td><?=_('Username');?>: </td><td><span id="v_account"></span>@<?=htmlentities(trim($v_domain, "'"))?></td></tr>
-						<tr><td><?=_('Password');?>: </td><td><span id="v_password"></span></td></tr>
-						<?php if ($_SESSION['WEBMAIL_SYSTEM']) {?><tr><td><?=_('Webmail');?>: </td><td><a class="vst" href="http://<?=htmlentities($v_webmail_alias)?>" target="_blank">http://<?=htmlentities($v_webmail_alias)?></a></td></tr><?php } ?>
-						<tr><td><?=_('Hostname');?>: </td><td>mail.<?=htmlentities($v_domain)?></td></tr>
+    <div class="app-form">
+      <h1 class="page-title"><?=_('Editing Mail Account');?></h1>
+      <?php show_error_panel($_SESSION);?>
+      <div style="display: flex; justify-content: space-between;">
+        <div class="u-input-width">
+          <div class="u-mb10">
+            <label for="v_email" class="form-label"><?=_('Account');?></label>
+            <input type="text" class="form-control" name="v_email" id="v_email" value="<?=htmlentities($_GET['account'])."@".htmlentities($_GET['domain'])?>" disabled>
+            <input type="hidden" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
+            <input type="hidden" name="v_account" value="<?=htmlentities(trim($v_account, "'"))?>">
+          </div>
+          <div class="u-mb10">
+            <label for="v_password" class="form-label">
+              <?=_('Password');?>
+              <a href="javascript:applyRandomString();" title="<?=_('generate');?>" class="u-ml5"><i class="fas fa-sync status-icon green icon-large"></i></a>
+            </label>
+            <div class="u-pos-relative u-mb10">
+              <input type="text" class="form-control js-password-input" name="v_password" id="v_password" value="<?=htmlentities(trim($v_password, "'"))?>">
+              <meter max="4" class="password-meter"></meter>
+            </div>
+          </div>
+          <p class="u-mb10"><?=_('Your password must have at least');?>:</p>
+          <ul class="u-list-bulleted">
+            <li><?=_('8 characters long');?></li>
+            <li><?=_('1 uppercase & 1 lowercase character');?></li>
+            <li><?=_('1 number');?></li>
+          </ul>
+          <div class="u-pt18 u-mb10">
+            <label for="v_send_email" class="form-label">
+              <?=_('Send login credentials to email address') ?>
+            </label>
+            <input type="email" class="form-control" name="v_send_email" id="v_send_email" value="<?=htmlentities(trim($v_send_email, "'"))?>">
+            <input type="hidden" name="v_credentials" id="v_credentials">
+          </div>
+          <div class="u-mb10">
+            <label for="v_quota" class="form-label">
+              <?=_('Quota');?> <span class="optional">(<?=_('in megabytes');?>)</span>
+            </label>
+            <div class="u-pos-relative">
+              <input type="text" class="form-control" name="v_quota" id="v_quota" value="<?php if (!empty($v_quota)) {echo htmlentities(trim($v_quota, "'"));} else { echo "0"; } ?>">
+              <i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>"></i>
+            </div>
+          </div>
+          <div class="u-mb10">
+            <label for="v_aliases" class="form-label">
+              <?=_('Aliases');?> <span class="optional">(<?=_('use local-part');?>)</span>
+            </label>
+            <textarea class="form-control" name="v_aliases" id="v_aliases"><?=htmlentities(trim($v_aliases, "'"))?></textarea>
+          </div>
+          <div class="form-check u-mb10">
+            <input class="form-check-input" type="checkbox" name="v_blackhole" id="v_blackhole" <?php if ($v_blackhole == 'yes') echo 'checked' ?>>
+            <label for="v_blackhole">
+              <?=_('Discard all mail');?>
+            </label>
+          </div>
+          <div <?php if ($v_blackhole == 'yes') echo 'style="display:none"'; ?> id="id_fwd_for">
+            <div class="form-check u-mb10">
+              <input class="form-check-input" type="checkbox" name="v_fwd_only" id="v_fwd_for" <?php if ($v_fwd_only == 'yes') echo 'checked' ?>>
+              <label for="v_fwd_for">
+                <?=_('Do not store forwarded mail');?>
+              </label>
+            </div>
+          </div>
+          <div class="form-check u-mb10">
+            <input class="form-check-input" type="checkbox" name="v_autoreply" id="v_autoreply" <?php if ($v_autoreply == 'yes') echo 'checked' ?> onclick="javascript:elementHideShow('autoreplytable');">
+            <label for="v_autoreply">
+              <?=_('Autoreply');?>
+            </label>
+          </div>
+          <div id="autoreplytable" style="display:<?php if ($v_autoreply == 'yes') { echo 'block';} else {echo 'none';}?> ;">
+            <div class="u-mb10">
+              <label for="v_autoreply_message" class="form-label"><?=_('Message');?></label>
+              <textarea class="form-control" name="v_autoreply_message" id="v_autoreply_message"><?=htmlentities(trim($v_autoreply_message, "'"))?></textarea>
+            </div>
+          </div>
+          <div id="v-fwd-opt">
+            <div class="u-mb10">
+              <label for="v_fwd" class="form-label">
+                <?=_('Forward to');?> <span class="optional">(<?=_('one or more email addresses');?>)</span>
+              </label>
+              <textarea class="form-control" name="v_fwd" id="v_fwd" <?php if($v_blackhole == 'yes') echo "disabled";?>><?=htmlentities(trim($v_fwd, "'"))?></textarea>
+            </div>
+          </div>
+          <div class="u-mb10">
+            <label for="v_rate" class="form-label">
+              <?=_('Rate limit');?> <span class="optional">(<?=_('Email / hour');?>)</span>
+            </label>
+            <input type="text" class="form-control" name="v_rate" id="v_rate" value="<?=htmlentities(trim($v_rate, "'"))?>" <?php if($_SESSION['userContext'] != "admin"){ echo "disabled";}?>>
+          </div>
+        </div>
+        <div>
+          <div class="mail-infoblock">
+            <table>
+              <tr><td colspan="2"><strong><?=strtoupper(_('Common account settings'));?></strong></td><tr>
+              <tr><td><?=_('Username');?>: </td><td><span id="v_account"></span>@<?=htmlentities(trim($v_domain, "'"))?></td></tr>
+              <tr><td><?=_('Password');?>: </td><td><span id="v_password"></span></td></tr>
+              <?php if ($_SESSION['WEBMAIL_SYSTEM']) {?><tr><td><?=_('Webmail');?>: </td><td><a class="vst" href="http://<?=htmlentities($v_webmail_alias)?>" target="_blank">http://<?=htmlentities($v_webmail_alias)?></a></td></tr><?php } ?>
+              <tr><td><?=_('Hostname');?>: </td><td>mail.<?=htmlentities($v_domain)?></td></tr>
 
-						<tr><td colspan="2"><strong><?=strtoupper(_('IMAP settings'));?></strong></td></tr>
-						<tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
-						<tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 993
-						<tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 143
-						<tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 143
+              <tr><td colspan="2"><strong><?=strtoupper(_('IMAP settings'));?></strong></td></tr>
+              <tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
+              <tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 993
+              <tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 143
+              <tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 143
 
-						<tr><td colspan="2"><strong><?=strtoupper(_('POP3 settings'));?></strong></td></tr>
-						<tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
-						<tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 995
-						<tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 110
-						<tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 110
+              <tr><td colspan="2"><strong><?=strtoupper(_('POP3 settings'));?></strong></td></tr>
+              <tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
+              <tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 995
+              <tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 110
+              <tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 110
+
+              <tr><td colspan="2"><strong><?=strtoupper(_('SMTP settings'));?></strong></td></tr>
+              <tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
+              <tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 465
+              <tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 587
+              <tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 25
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </form>
 
-						<tr><td colspan="2"><strong><?=strtoupper(_('SMTP settings'));?></strong></td></tr>
-						<tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
-						<tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 465
-						<tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 587
-						<tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 25
-						</table>
-					</div>
-				</td>
-			</tr>
-		</table>
-	</form>
 </div>

web/templates/pages/edit_web.html

@@ -427,7 +427,7 @@
                 <div class="u-pl50 u-mb10">
                   <label for="v_ftp_user[<?=$i ?>][v_ftp_user]" class="form-label">
                     <?=_('Username');?><br>
-                    <span style="font-size: 10pt; color:#777;"><?=sprintf(_('Prefix %s will be added to username automatically'),$user_plain."_");?></span>
+                    <span style="color:#777;"><?=sprintf(_('Prefix %s will be added to username automatically'),$user_plain."_");?></span>
                   </label>
                   <input type="text" class="form-control v-ftp-user" <?=$ftp_user['is_new'] != 1 ? 'disabled="disabled"' : '' ?>
                   name="v_ftp_user[<?=$i ?>][v_ftp_user]" id="v_ftp_user[<?=$i ?>][v_ftp_user]" value="<?=htmlentities(trim($v_ftp_user, "'"))?>">
@@ -481,7 +481,7 @@
     <div class="u-pl50 u-mb10">
       <label for="v_ftp_user[%INDEX%][v_ftp_user]" class="form-label">
         <?=_('Username');?><br>
-        <span style="font-size: 10pt; color:#777;"><?=sprintf(_('Prefix %s will be added to username automatically'),$user_plain."_");?></span>
+        <span style="color:#777;"><?=sprintf(_('Prefix %s will be added to username automatically'),$user_plain."_");?></span>
       </label>
       <input type="text" class="form-control v-ftp-user" name="v_ftp_user[%INDEX%][v_ftp_user]" id="v_ftp_user[%INDEX%][v_ftp_user]" value="">
       <small class="hint"></small>

web/templates/pages/list_access_key.html

@@ -1,105 +1,65 @@
 <?php
 // Prevent resubmit form on page refresh
 if (!empty($_POST['ok'])) {
-	?>
-	<script>
-		if (window.history.replaceState) {
-			window.history.replaceState(null, null, window.location.href);
-		}
-	</script>
+  ?>
+  <script>
+    if (window.history.replaceState) {
+      window.history.replaceState(null, null, window.location.href);
+    }
+  </script>
 <?php } ?>
 
 <!-- Begin toolbar -->
 <div class="l-center edit">
-	<div class="l-sort clearfix">
-		<div class="l-unit-toolbar__buttonstrip">
-			<a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/access-key/">
-				<i class="fas fa-arrow-left status-icon blue"></i><?= _('Back'); ?>
-			</a>
-		</div>
-	</div>
+  <div class="l-sort clearfix">
+    <div class="l-unit-toolbar__buttonstrip">
+      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/access-key/">
+        <i class="fas fa-arrow-left status-icon blue"></i><?= _('Back'); ?>
+      </a>
+    </div>
+  </div>
 </div>
 <!-- End toolbar -->
 
 <div class="l-separator"></div>
 
 <div class="l-center animated fadeIn">
+  <form id="vstobjects">
 
-	<form id="vstobjects">
-		<table class="data">
-			<tr class="data-add">
-				<td class="data-dotted">
-					<table class="data-col1">
-						<tr>
-							<td></td>
-						</tr>
-					</table>
-				</td>
-				<td class="data-dotted">
-					<table class="data-col2">
-						<tr>
-							<td class="u-pt18">
-								<span class="page-title"><?= _("Access Key") ?></span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<?php show_error_panel($_SESSION); ?>
-							</td>
-						</tr>
+    <div class="app-form">
+      <h1 class="page-title"><?= _("Access Key") ?></h1>
+      <?php show_error_panel($_SESSION);?>
+      <div class="u-input-width">
+        <?php if (!empty($key_data['ACCESS_KEY_ID'])) { ?>
+          <div class="u-mt15 u-mb10">
+            <label for="access_key_id" class="form-label"><?= _('Access Key Id'); ?></label>
+            <input type="text" class="form-control" id="access_key_id" maxlength="255" readonly value="<?= htmlentities(trim($key_data['ACCESS_KEY_ID'], "'")) ?>">
+          </div>
+        <?php } ?>
+        <?php if (!empty($_SESSION['ok_msg'])) { ?>
+          <?php if (!empty($key_data['ACCESS_KEY_ID']) && !empty($key_data['SECRET_ACCESS_KEY'])) { ?>
+            <div class="u-mb20">
+              <label for="secret_key" class="form-label">
+                <?= _('Secret Key'); ?><br>
+                <span style="color:#ffd500;"><?= _('Warning! Last chance to save secret access key!'); ?></span>
+              </label>
+              <input type="text" class="form-control" id="secret_key" maxlength="255" readonly value="<?= htmlentities(trim($key_data['SECRET_ACCESS_KEY'], "'")) ?>">
+            </div>
+          <?php } ?>
+        <?php } ?>
+        <p class="u-mb10"><?= _('Permissions'); ?></p>
+        <ul class="u-list-bulleted u-mb10">
+          <?php foreach ($key_data['PERMISSIONS'] as $api_name) { ?>
+            <li><?= _($api_name); ?></li>
+          <?php } ?>
+        </ul>
+        <div class="u-mb10">
+          <label for="service" class="form-label"><?= _('Comment'); ?></label>
+          <input type="text" class="form-control" id="service" maxlength="255" readonly value="<?= htmlentities(trim($key_data['COMMENT'], "'")) ?>">
+        </div>
+      </div>
+    </div>
 
-						<?php if (!empty($key_data['ACCESS_KEY_ID'])) { ?>
-							<tr>
-								<td class="u-pt18">
-									<label for="access_key_id" class="form-label"><?= _('Access Key Id'); ?></label>
-									<input type="text" class="form-control u-input-width" id="access_key_id" maxlength="255" readonly value="<?= htmlentities(trim($key_data['ACCESS_KEY_ID'], "'")) ?>">
-								</td>
-							</tr>
-						<?php } ?>
+  </form>
 
-						<?php
-						if (!empty($_SESSION['ok_msg'])) {
-							?>
-							<?php if (!empty($key_data['ACCESS_KEY_ID']) && !empty($key_data['SECRET_ACCESS_KEY'])) { ?>
-								<tr>
-									<td class="u-pt6">
-										<label for="secret_key" class="form-label">
-											<?= _('Secret Key'); ?><br>
-											<span style="font-size: 10pt; color:#ffd500;"><?= _('Warning! Last chance to save secret access key!'); ?></span>
-										</label>
-										<input type="text" class="form-control u-input-width" id="secret_key" maxlength="255" readonly value="<?= htmlentities(trim($key_data['SECRET_ACCESS_KEY'], "'")) ?>">
-									</td>
-								</tr>
-							<?php } ?>
-						<?php }
-						?>
-
-						<tr>
-							<td class="u-pt18">
-								<?= _('Permissions'); ?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<ul class="u-list-bulleted">
-									<?php
-									foreach ($key_data['PERMISSIONS'] as $api_name) {
-										?>
-										<li><?= _($api_name); ?></li>
-									<?php } ?>
-								</ul>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="service" class="form-label"><?= _('Comment'); ?></label>
-								<input type="text" class="form-control u-input-width" id="service" maxlength="255" readonly value="<?= htmlentities(trim($key_data['COMMENT'], "'")) ?>">
-							</td>
-						</tr>
-					</table>
-					<table class="data-col2"></table>
-				</td>
-			</tr>
-		</table>
-	</form>
 </div>

web/templates/pages/list_access_keys.html

@@ -43,7 +43,7 @@
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onChange="checkedAll('objects');">
+					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');">
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-6"><b><?=_('Access Key');?></b></div>
 				<div class="clearfix l-unit__stat-col--left compact text-right"><b>&nbsp;</b></div>

web/templates/pages/list_backup.html

@@ -45,7 +45,7 @@
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onChange="checkedAll('objects');" <?=$display_mode;?>>
+					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');" <?=$display_mode;?>>
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-4"><b><?=_('File Name');?></b></div>
 				<div class="clearfix l-unit__stat-col--left compact-4 text-right"><b>&nbsp;</b></div>

web/templates/pages/list_cron.html

@@ -64,7 +64,7 @@
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onChange="checkedAll('objects');" <?=$display_mode;?>>
+				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');" <?=$display_mode;?>>
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-5"><b><?=_('Command');?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-2 text-right"><b>&nbsp;</b></div>

web/templates/pages/list_db.html

@@ -88,7 +88,7 @@
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onChange="checkedAll('objects');" <?=$display_mode;?>>
+				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');" <?=$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 text-right compact-3"><b>&nbsp;</b></div>

web/templates/pages/list_dns.html

@@ -64,7 +64,7 @@
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onChange="checkedAll('objects');" <?=$display_mode;?>>
+				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');" <?=$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 text-right"><b>&nbsp;</b></div>

web/templates/pages/list_dns_rec.html

@@ -63,7 +63,7 @@
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onChange="checkedAll('objects');" <?=$display_mode;?>>
+				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');" <?=$display_mode;?>>
 			</div>
 			<div class="clearfix l-unit__stat-col--left small"><b><?=_('Record');?></b></div>
 			<div class="clearfix l-unit__stat-col--left super-compact text-right"><b>&nbsp;</b></div>

web/templates/pages/list_firewall.html

@@ -47,7 +47,7 @@
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onChange="checkedAll('objects');">
+				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');">
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-1"><b><?=_('Action');?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-2 text-right"><b>&nbsp;</b></div>

web/templates/pages/list_firewall_banlist.html

@@ -33,7 +33,7 @@
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onChange="checkedAll('objects');">
+				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');">
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><?=_('IP address');?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-4"><b>&nbsp;</b></div>

web/templates/pages/list_firewall_ipset.html

@@ -33,7 +33,7 @@
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onChange="checkedAll('objects');">
+				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');">
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><?=_('Ip List Name');?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-4"><b>&nbsp;</b></div>

web/templates/pages/list_ip.html

@@ -46,7 +46,7 @@
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onChange="checkedAll('objects');">
+					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');">
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-3"><b><?=_('IP Address');?></b></div>
 				<div class="clearfix l-unit__stat-col--left compact text-right"><b>&nbsp;</b></div>

web/templates/pages/list_mail.html

@@ -62,7 +62,7 @@
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onChange="checkedAll('objects');" <?=$display_mode;?>>
+				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');" <?=$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 text-right compact-5"><b>&nbsp;</b></div>

web/templates/pages/list_mail_acc.html

@@ -67,7 +67,7 @@
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onChange="checkedAll('objects');" <?=$display_mode;?>>
+					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');" <?=$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 text-right compact-4"><b>&nbsp;</b></div>

web/templates/pages/list_packages.html

@@ -45,7 +45,7 @@
 	<div class="table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onChange="checkedAll('objects');">
+				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');">
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-2"><b><?=_('Package');?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-3 text-right"><b>&nbsp;</b></div>

web/templates/pages/list_services.html

@@ -94,7 +94,7 @@
 	<div class="table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onChange="checkedAll('objects');">
+				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');">
 			</div>
 
 			<div class="clearfix l-unit__stat-col--left wide-2"><b><?=_('Service');?></b></div>

web/templates/pages/list_updates.html

@@ -27,7 +27,7 @@
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left super-compact center">
-					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onChange="checkedAll('objects');">
+					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');">
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide"><b><?=_('Package');?></b></div>
 				<div class="clearfix l-unit__stat-col--left wide-5"><b><?=_('Description');?></b></div>

web/templates/pages/list_user.html

@@ -66,7 +66,7 @@
 	<div class="table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onChange="checkedAll('objects');">
+				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');">
 			</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>

web/templates/pages/list_web.html

@@ -65,7 +65,7 @@
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onChange="checkedAll('objects');" <?=$display_mode;?>>
+				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');" <?=$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 text-right"><b>&nbsp;</b></div>