Start removing tables from forms (#2986)

* Disable default browser margin on <h1>

* Remove tables on Add Web form

* Remove tables on Edit Web form

* Improve class naming

* Tidy alerts

* Remove dead .mode-add class

* Remove tables on Add/Edit User forms

* Set role attribute on alerts

* Remove tables on Add/Edit Mail forms

* Fix formatting

* Consistently stack "hint" messages

So these inputs can eventually be full width.

* Remove tables on Add/Edit Database forms

web/css/src/themes/default.css

@@ -196,6 +196,7 @@ body {
   background: radial-gradient(circle, rgb(102 158 231 / 100%) 0%, rgb(43 86 177 / 100%) 100%) !important;
 }
 
+h1,
 p,
 pre {
   margin: 0;
@@ -530,9 +531,8 @@ a {
 }
 
 .alert {
-  border-radius: 4px;
   box-sizing: border-box;
-  display: block;
+  border-radius: 4px;
   font-size: 0.8rem;
   font-weight: 400;
   padding: 0.8rem;
@@ -596,10 +596,6 @@ a {
   color: #fff;
 }
 
-form#vstobjects .alert {
-  width: 380px;
-}
-
 .app-list.cards {
   display: flex;
   flex-wrap: wrap;
@@ -2865,9 +2861,8 @@ a.button.cancel {
 .page-title {
   font-size: 1.4rem !important;
   font-weight: 500 !important;
-  padding-bottom: 30px !important;
+  padding-bottom: 10px !important;
   letter-spacing: -0.01em;
-  cursor: default;
 }
 
 .section-title {
@@ -3866,6 +3861,10 @@ li[aria-expanded="true"] a {
   margin-left: 10px !important;
 }
 
+.u-mb5 {
+  margin-bottom: 5px !important;
+}
+
 .u-mb10 {
   margin-bottom: 10px !important;
 }

web/css/src/themes/flat.css

@@ -168,8 +168,8 @@ strong {
 }
 
 .alert {
-  text-shadow: none !important;
-  box-shadow: none !important;
+  text-shadow: none;
+  box-shadow: none;
 }
 
 .pill.usage {

web/css/src/themes/vestia.css

@@ -237,8 +237,8 @@ strong {
 }
 
 .alert {
-  text-shadow: none !important;
-  box-shadow: none !important;
+  text-shadow: none;
+  box-shadow: none;
 }
 
 .pill.usage {

web/js/events.js

@@ -184,7 +184,7 @@ VE.helpers.initAdditionalPasswordFieldElements = function(ref) {
     $(ref).prop('autocomplete', 'off');
 
     var enabled_html = enabled ? '' : 'show-passwords-enabled-action';
-    var html = '<span class="toggle-password"><i class="toggle-psw-visibility-icon fas fa-eye-slash ' + enabled_html + '" onClick="VE.helpers.toggleHiddenPasswordText(\'' + ref + '\', this)"></i></span>';
+    var html = '<span class="toggle-password"><i class="toggle-psw-visibility-icon fas fa-eye-slash ' + enabled_html + '" onclick="VE.helpers.toggleHiddenPasswordText(\'' + ref + '\', this)"></i></span>';
     $(ref).after(html);
 }
 

web/js/pages/edit_user.js

@@ -34,10 +34,10 @@ $(document).ready(function(){
     $('.js-add-ns-button').click(function(){
         var n = $('input[name^=v_ns]').length;
         if(n < 8){
-            var t = $($('input[name=v_ns1]').parents('tr')[0]).clone(true, true);
+            var t = $($('input[name=v_ns1]').parents('div')[0]).clone(true, true);
             t.find('input').attr({value:'', name:'v_ns'+(n+1)});
             t.find('span').show();
-            $('tr.js-add-ns').before(t);
+            $('.js-add-ns').before(t);
         }
         if( n == 7 ) {
             $('.js-add-ns').addClass('u-hidden');
@@ -45,7 +45,7 @@ $(document).ready(function(){
     });
 
     $('.js-remove-ns').click(function(){
-        $(this).parents('tr')[0].remove();
+        $(this).parents('div')[0].remove();
         $('input[name^=v_ns]').each(function(i, ns){
             $(ns).attr({name: 'v_ns'+(i+1)});
             i < 2 ? $(ns).parent().find('span').hide() : $(ns).parent().find('span').show();

web/js/pages/edit_web.js

@@ -106,8 +106,8 @@ App.Listeners.WEB.keypress_ftp_path = function() {
 //
 //
 App.Actions.WEB.add_ftp_user_form = function() {
-    var ref = $('#templates').find('.ftptable-nrm').clone(true);
-    var index = $('.data-col2 .ftptable').length + 1;
+    var ref = $('#templates').find('.js-ftp-account-nrm').clone(true);
+    var index = $('.app-form .js-ftp-account').length + 1;
 
     ref.find('input').each(function(i, elm) {
         var name = $(elm).attr('name');
@@ -128,29 +128,29 @@ App.Actions.WEB.add_ftp_user_form = function() {
     $('#ftp_users').append(ref);
 
     var index = 1;
-    $('.data-col2 .ftp-user-number:visible').each(function(i, o) {
+    $('.app-form .ftp-user-number:visible').each(function(i, o) {
         $(o).text(index);
         index += 1;
     });
 }
 
 App.Actions.WEB.remove_ftp_user = function(elm) {
-    var ref = $(elm).parents('.ftptable');
+    var ref = $(elm).parents('.js-ftp-account');
     ref.find('.v-ftp-user-deleted').val('1');
     if (ref.find('.v-ftp-user-is-new').val() == 1) {
         ref.remove();
         return true;
     }
-    ref.removeClass('ftptable-nrm');
+    ref.removeClass('js-ftp-account-nrm');
     ref.hide();
 
     var index = 1;
-    $('.data-col2 .ftp-user-number:visible').each(function(i, o) {
+    $('.app-form .ftp-user-number:visible').each(function(i, o) {
         $(o).text(index);
         index += 1;
     });
 
-    if ($('.ftptable-nrm:visible').length == 0) {
+    if ($('.js-ftp-account-nrm:visible').length == 0) {
         $('.add-new-ftp-user-button').hide();
         $('input[name="v_ftp"]').prop('checked', false);
     }
@@ -158,8 +158,8 @@ App.Actions.WEB.remove_ftp_user = function(elm) {
 
 App.Actions.WEB.toggle_additional_ftp_accounts = function(elm) {
     if ($(elm).prop('checked')) {
-        $('.ftptable-nrm, .v-add-new-user, .add-new-ftp-user-button').show();
-        $('.ftptable-nrm').each(function(i, elm) {
+        $('.js-ftp-account-nrm, .v-add-new-user, .add-new-ftp-user-button').show();
+        $('.js-ftp-account-nrm').each(function(i, elm) {
             var login = $(elm).find('.v-ftp-user');
             if (login.val().trim() != '') {
                 $(elm).find('.v-ftp-user-deleted').val(0);
@@ -167,8 +167,8 @@ App.Actions.WEB.toggle_additional_ftp_accounts = function(elm) {
         });
     }
     else {
-        $('.ftptable-nrm, .v-add-new-user, .add-new-ftp-user-button').hide();
-        $('.ftptable-nrm').each(function(i, elm) {
+        $('.js-ftp-account-nrm, .v-add-new-user, .add-new-ftp-user-button').hide();
+        $('.js-ftp-account-nrm').each(function(i, elm) {
             var login = $(elm).find('.v-ftp-user');
             if (login.val().trim() != '') {
                 $(elm).find('.v-ftp-user-deleted').val(1);
@@ -207,16 +207,14 @@ App.Actions.WEB.randomPasswordGenerated = function(elm) {
 }
 
 App.Actions.WEB.passwordChanged = function(elm) {
-    var ref = $(elm).parents('.ftptable');
+    var ref = $(elm).parents('.js-ftp-account');
     if (ref.find('.vst-email-alert-on-psw').length == 0) {
         var inp_name = ref.find('.v-ftp-user-is-new').prop('name');
         inp_name = inp_name.replace('is_new', 'v_ftp_email');
-        ref.find('tr:last').after('<tr>\
-                                        <td class="u-pl50 u-pt6">\
-                                            <label for="' + inp_name + '" class="form-label">Send FTP credentials to email</label>\
-                                            <input type="text" class="form-control vst-email-alert-on-psw u-input-width" value="" name="' + inp_name + '" id="' + inp_name + '">\
-                                        </td>\
-                                    </tr>');
+        ref.find('div:last').after('<div class="u-pl50 u-mb10">\
+                                      <label for="' + inp_name + '" class="form-label">Send FTP credentials to email</label>\
+                                      <input type="email" class="form-control vst-email-alert-on-psw" value="" name="' + inp_name + '" id="' + inp_name + '">\
+                                   </div>');
     }
 }
 
@@ -285,7 +283,7 @@ function WEBrandom() {
 }
 
 function FTPrandom(elm) {
-    $(elm).parents('.ftptable').find('.v-ftp-user-psw').val(randomString2(16));
+    $(elm).parents('.js-ftp-account').find('.v-ftp-user-psw').val(randomString2(16));
     App.Actions.WEB.randomPasswordGenerated && App.Actions.WEB.randomPasswordGenerated(elm);
 }
 

web/templates/pages/add_access_key.html

@@ -22,7 +22,7 @@
 		<input type="hidden" name="token" value="<?= $_SESSION['token'] ?>">
 		<input type="hidden" name="ok" value="Add">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/add_cron.html

@@ -331,7 +331,7 @@
 	<form id="vstobjects" name="v_add_cron" method="post">
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="ok" value="Add">
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/add_db.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/db/"><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/db/"><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,190 +15,147 @@
 
 <div class="l-center animated fadeIn">
 
-	<form id="vstobjects" name="v_add_db" method="post">
-		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-		<input type="hidden" name="ok" value="Add">
+  <form id="vstobjects" name="v_add_db" 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 database');?></h1>
+      <?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>
+        <?php } ?>
+        <?php if (($user_plain == 'admin') && (empty($_GET['accept']))) {?>
+          <div class="u-mb10">
+            <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>
+        <?php } ?>
+        <?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin")) {?>
+          <p class="hint u-mb20">
+            <?=sprintf(_('Prefix %s will be automatically added to database name and database user'),'<b>'.$user_plain.'_</b>'); ?>
+          </p>
+          <div class="u-mb10">
+            <label for="v_database" class="form-label"><?=_('Database');?></label>
+            <input type="text" class="form-control" name="v_database" id="v_database" value="<?=htmlentities(trim($v_database, "'"))?>">
+            <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">
+              <?php
+                foreach ($db_types as $key => $value) {
+                  echo "\n\t\t\t\t\t\t\t\t\t\t<option value=\"".htmlentities($value)."\"";
+                  if ((!empty($v_type)) && ( $value == $v_type )) echo ' selected';
+                  echo ">".htmlentities($value)."</option>";
+                }
+              ?>
+            </select>
+          </div>
+          <div class="u-mb10">
+            <label for="v_dbuser" class="form-label">
+              <?=_('Username');?>
+              &nbsp;&nbsp;&nbsp;&nbsp;<em><small>(<?=sprintf(_('maximum characters length, including prefix'), 32);?>)</small></em>
+            </label>
+            <input type="text" class="form-control" name="v_dbuser" id="v_dbuser" value="<?=htmlentities(trim($v_dbuser, "'"))?>">
+            <small class="hint"></small>
+          </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 u-mb10">
+            <li><?=_('8 characters long');?></li>
+            <li><?=_('1 uppercase & 1 lowercase character');?></li>
+            <li><?=_('1 number');?></li>
+          </ul>
+          <div class="u-mb20">
+            <label for="v_db_email" class="form-label">
+              <?=_('Send login credentials to email address') ?>
+            </label>
+            <input type="email" class="form-control" name="v_db_email" id="v_db_email" value="<?=htmlentities(trim($v_db_email, "'"))?>">
+          </div>
+          <div class="u-mb10">
+            <a href="javascript:elementHideShow('advanced-opts');" class="vst-advanced"><?=_('Advanced options');?></a>
+          </div>
+          <div id="advanced-opts" style="display: none;">
+            <div class="u-mt15 u-mb10">
+              <label for="v_host" class="form-label"><?=_('Host');?></label>
+              <select class="form-select u-mb20" name="v_host" id="v_host">
+                <?php
+                  foreach ($db_hosts as $value) {
+                    echo "\n\t\t\t\t\t\t\t\t\t\t<option value=\"".htmlentities($value)."\"";
+                    if ((!empty($v_host)) && ( $value == $v_host )) echo ' selected';
+                    echo ">".htmlentities($value)."</option>";
+                  }
+                ?>
+              </select>
+            </div>
+            <div class="u-mb10">
+              <label for="v_charset" class="form-label"><?=_('Charset');?></label>
+              <select class="form-select" name="v_charset" id="v_charset">
+                <option value=big5 <?php if ((!empty($v_charset)) && ( $v_charset == 'big5')) echo 'selected';?>>big5</option>
+                <option value=dec8 <?php if ((!empty($v_charset)) && ( $v_charset == 'dec8')) echo 'selected';?>>dec8</option>
+                <option value=cp850 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp850')) echo 'selected';?>>cp850</option>
+                <option value=hp8 <?php if ((!empty($v_charset)) && ( $v_charset == 'hp8')) echo 'selected';?>>hp8</option>
+                <option value=koi8r <?php if ((!empty($v_charset)) && ( $v_charset == 'koi8r')) echo 'selected';?>>koi8r</option>
+                <option value=latin1 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin1')) echo 'selected';?>>latin1</option>
+                <option value=latin2 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin2')) echo 'selected';?>>latin2</option>
+                <option value=swe7 <?php if ((!empty($v_charset)) && ( $v_charset == 'swe7')) echo 'selected';?>>swe7</option>
+                <option value=ascii <?php if ((!empty($v_charset)) && ( $v_charset == 'ascii')) echo 'selected';?>>ascii</option>
+                <option value=ujis <?php if ((!empty($v_charset)) && ( $v_charset == 'ujis')) echo 'selected';?>>ujis</option>
+                <option value=sjis <?php if ((!empty($v_charset)) && ( $v_charset == 'sjis')) echo 'selected';?>>sjis</option>
+                <option value=hebrew <?php if ((!empty($v_charset)) && ( $v_charset == 'hebrew')) echo 'selected';?>>hebrew</option>
+                <option value=tis620 <?php if ((!empty($v_charset)) && ( $v_charset == 'tis620')) echo 'selected';?>>tis620</option>
+                <option value=euckr <?php if ((!empty($v_charset)) && ( $v_charset == 'euckr')) echo 'selected';?>>euckr</option>
+                <option value=koi8u <?php if ((!empty($v_charset)) && ( $v_charset == 'koi8u')) echo 'selected';?>>koi8u</option>
+                <option value=gb2312 <?php if ((!empty($v_charset)) && ( $v_charset == 'gb2312')) echo 'selected';?>>gb2312</option>
+                <option value=greek <?php if ((!empty($v_charset)) && ( $v_charset == 'greek')) echo 'selected';?>>greek</option>
+                <option value=cp1250 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1250')) echo 'selected';?>>cp1250</option>
+                <option value=gbk <?php if ((!empty($v_charset)) && ( $v_charset == 'gbk')) echo 'selected';?>>gbk</option>
+                <option value=latin5 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin5')) echo 'selected';?>>latin5</option>
+                <option value=armscii8 <?php if ((!empty($v_charset)) && ( $v_charset == 'armscii8')) echo 'selected';?>>armscii8</option>
+                <option value=utf8 <?php if ((!empty($v_charset)) && ( $v_charset == 'utf8')) echo 'selected';?> <?php if (empty($v_charset)) echo 'selected';?>>utf8</option>
+                <option value=utf8mb4 <?php if ((!empty($v_charset)) && ( $v_charset == 'utf8mb4')) echo 'selected';?>>utf8mb4</option>
+                <option value=ucs2 <?php if ((!empty($v_charset)) && ( $v_charset == 'ucs2')) echo 'selected';?>>ucs2</option>
+                <option value=cp866 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp866')) echo 'selected';?>>cp866</option>
+                <option value=keybcs2 <?php if ((!empty($v_charset)) && ( $v_charset == 'keybcs2')) echo 'selected';?>>keybcs2</option>
+                <option value=macce <?php if ((!empty($v_charset)) && ( $v_charset == 'macce')) echo 'selected';?>>macce</option>
+                <option value=macroman <?php if ((!empty($v_charset)) && ( $v_charset == 'macroman')) echo 'selected';?>>macroman</option>
+                <option value=cp852 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp852')) echo 'selected';?>>cp852</option>
+                <option value=latin7 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin7')) echo 'selected';?>>latin7</option>
+                <option value=cp1251 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1251')) echo 'selected';?>>cp1251</option>
+                <option value=cp1256 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1256')) echo 'selected';?>>cp1256</option>
+                <option value=cp1257 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1257')) echo 'selected';?>>cp1257</option>
+                <option value=binary <?php if ((!empty($v_charset)) && ( $v_charset == 'binary')) echo 'selected';?>>binary</option>
+                <option value=geostd8 <?php if ((!empty($v_charset)) && ( $v_charset == 'geostd8')) echo 'selected';?>>geostd8</option>
+                <option value=cp932 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp932')) echo 'selected';?>>cp932</option>
+                <option value=eucjpms <?php if ((!empty($v_charset)) && ( $v_charset == 'eucjpms')) echo 'selected';?>>eucjpms</option>
+              </select>
+            </div>
+          </div>
+        <?php } ?>
+      </div>
+    </div>
+
+  </form>
 
-		<table class="data mode-add">
-			<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 database');?></span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<?php show_error_panel($_SESSION);?>
-							</td>
-						</tr>
-						<?php if (($user_plain == 'admin') && (($_GET['accept'] !== "true")))  {?>
-							<tr>
-								<td class="u-pt18">
-									<span class="alert alert-danger alert-with-icon">
-										<i class="fas fa-exclamation"></i>
-										<?=_('Avoid adding web domains on admin account');?>
-									</span>
-								</td>
-							</tr>
-						<?php } ?>
-						<?php if (($user_plain == 'admin') && (empty($_GET['accept']))) {?>
-							<tr>
-								<td class="u-pt18">
-									<span><a href="/add/user/" class="vst-advanced admin-warning-button"><?=_('Add User');?></a></span>
-									<span><a href="/add/db/?accept=true" class="vst-advanced button danger admin-warning-button"><?=_('Continue');?></a> </span>
-								</td>
-							</tr>
-						<?php } ?>
-						<?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin"))  {?>
-							<tr>
-								<td class="hint">
-									<?=sprintf(_('Prefix %s will be automatically added to database name and database user'),'<b>'.$user_plain.'_</b>'); ?>
-								</td>
-								</td>
-							</tr>
-							<tr>
-								<td class="u-pt18">
-									<label for="v_database" class="form-label"><?=_('Database');?></label>
-									<div class="u-side-by-side">
-										<input type="text" class="form-control u-input-width" name="v_database" id="v_database" value="<?=htmlentities(trim($v_database, "'"))?>">
-										<small class="hint u-ml10"></small>
-									</div>
-								</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">
-										<?php
-											foreach ($db_types as $key => $value) {
-												echo "\n\t\t\t\t\t\t\t\t\t\t<option value=\"".htmlentities($value)."\"";
-												if ((!empty($v_type)) && ( $value == $v_type )) echo ' selected';
-												echo ">".htmlentities($value)."</option>";
-											}
-										?>
-									</select>
-								</td>
-							</tr>
-							<tr>
-								<td class="u-pt6">
-									<label for="v_dbuser" class="form-label">
-										<?=_('Username');?>
-										&nbsp;&nbsp;&nbsp;&nbsp;<em><small>(<?=sprintf(_('maximum characters length, including prefix'), 32);?>)</small></em>
-									</label>
-									<div class="u-side-by-side">
-										<input type="text" class="form-control u-input-width" name="v_dbuser" id="v_dbuser" value="<?=htmlentities(trim($v_dbuser, "'"))?>">
-										<small class="hint u-ml10"></small>
-									</div>
-								</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 class="u-pt6">
-									<label for="v_db_email" class="form-label">
-										<?=_('Send login credentials to email address') ?>
-									</label>
-									<input type="email" class="form-control u-input-width" name="v_db_email" id="v_db_email" value="<?=htmlentities(trim($v_db_email, "'"))?>">
-								</td>
-							</tr>
-							<tr>
-								<td class="u-pt18">
-									<a href="javascript:elementHideShow('advanced-opts');" class="vst-advanced"><?=_('Advanced options');?></a>
-								</td>
-							</tr>
-							<tr>
-								<td class="u-pt18" id="advanced-opts" style="display: none;">
-									<label for="v_host" class="form-label"><?=_('Host');?></label>
-									<select class="form-select u-input-width u-mb20" name="v_host" id="v_host">
-										<?php
-											foreach ($db_hosts as $value) {
-												echo "\n\t\t\t\t\t\t\t\t\t\t<option value=\"".htmlentities($value)."\"";
-												if ((!empty($v_host)) && ( $value == $v_host )) echo ' selected';
-												echo ">".htmlentities($value)."</option>";
-											}
-										?>
-									</select>
-									<label for="v_charset" class="form-label"><?=_('Charset');?></label>
-									<select class="form-select u-input-width" name="v_charset" id="v_charset">
-										<option value=big5 <?php if ((!empty($v_charset)) && ( $v_charset == 'big5')) echo 'selected';?>>big5</option>
-										<option value=dec8 <?php if ((!empty($v_charset)) && ( $v_charset == 'dec8')) echo 'selected';?>>dec8</option>
-										<option value=cp850 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp850')) echo 'selected';?>>cp850</option>
-										<option value=hp8 <?php if ((!empty($v_charset)) && ( $v_charset == 'hp8')) echo 'selected';?>>hp8</option>
-										<option value=koi8r <?php if ((!empty($v_charset)) && ( $v_charset == 'koi8r')) echo 'selected';?>>koi8r</option>
-										<option value=latin1 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin1')) echo 'selected';?>>latin1</option>
-										<option value=latin2 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin2')) echo 'selected';?>>latin2</option>
-										<option value=swe7 <?php if ((!empty($v_charset)) && ( $v_charset == 'swe7')) echo 'selected';?>>swe7</option>
-										<option value=ascii <?php if ((!empty($v_charset)) && ( $v_charset == 'ascii')) echo 'selected';?>>ascii</option>
-										<option value=ujis <?php if ((!empty($v_charset)) && ( $v_charset == 'ujis')) echo 'selected';?>>ujis</option>
-										<option value=sjis <?php if ((!empty($v_charset)) && ( $v_charset == 'sjis')) echo 'selected';?>>sjis</option>
-										<option value=hebrew <?php if ((!empty($v_charset)) && ( $v_charset == 'hebrew')) echo 'selected';?>>hebrew</option>
-										<option value=tis620 <?php if ((!empty($v_charset)) && ( $v_charset == 'tis620')) echo 'selected';?>>tis620</option>
-										<option value=euckr <?php if ((!empty($v_charset)) && ( $v_charset == 'euckr')) echo 'selected';?>>euckr</option>
-										<option value=koi8u <?php if ((!empty($v_charset)) && ( $v_charset == 'koi8u')) echo 'selected';?>>koi8u</option>
-										<option value=gb2312 <?php if ((!empty($v_charset)) && ( $v_charset == 'gb2312')) echo 'selected';?>>gb2312</option>
-										<option value=greek <?php if ((!empty($v_charset)) && ( $v_charset == 'greek')) echo 'selected';?>>greek</option>
-										<option value=cp1250 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1250')) echo 'selected';?>>cp1250</option>
-										<option value=gbk <?php if ((!empty($v_charset)) && ( $v_charset == 'gbk')) echo 'selected';?>>gbk</option>
-										<option value=latin5 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin5')) echo 'selected';?>>latin5</option>
-										<option value=armscii8 <?php if ((!empty($v_charset)) && ( $v_charset == 'armscii8')) echo 'selected';?>>armscii8</option>
-										<option value=utf8 <?php if ((!empty($v_charset)) && ( $v_charset == 'utf8')) echo 'selected';?> <?php if (empty($v_charset)) echo 'selected';?>>utf8</option>
-										<option value=utf8mb4 <?php if ((!empty($v_charset)) && ( $v_charset == 'utf8mb4')) echo 'selected';?>>utf8mb4</option>
-										<option value=ucs2 <?php if ((!empty($v_charset)) && ( $v_charset == 'ucs2')) echo 'selected';?>>ucs2</option>
-										<option value=cp866 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp866')) echo 'selected';?>>cp866</option>
-										<option value=keybcs2 <?php if ((!empty($v_charset)) && ( $v_charset == 'keybcs2')) echo 'selected';?>>keybcs2</option>
-										<option value=macce <?php if ((!empty($v_charset)) && ( $v_charset == 'macce')) echo 'selected';?>>macce</option>
-										<option value=macroman <?php if ((!empty($v_charset)) && ( $v_charset == 'macroman')) echo 'selected';?>>macroman</option>
-										<option value=cp852 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp852')) echo 'selected';?>>cp852</option>
-										<option value=latin7 <?php if ((!empty($v_charset)) && ( $v_charset == 'latin7')) echo 'selected';?>>latin7</option>
-										<option value=cp1251 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1251')) echo 'selected';?>>cp1251</option>
-										<option value=cp1256 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1256')) echo 'selected';?>>cp1256</option>
-										<option value=cp1257 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp1257')) echo 'selected';?>>cp1257</option>
-										<option value=binary <?php if ((!empty($v_charset)) && ( $v_charset == 'binary')) echo 'selected';?>>binary</option>
-										<option value=geostd8 <?php if ((!empty($v_charset)) && ( $v_charset == 'geostd8')) echo 'selected';?>>geostd8</option>
-										<option value=cp932 <?php if ((!empty($v_charset)) && ( $v_charset == 'cp932')) echo 'selected';?>>cp932</option>
-										<option value=eucjpms <?php if ((!empty($v_charset)) && ( $v_charset == 'eucjpms')) echo 'selected';?>>eucjpms</option>
-									</select>
-								</td>
-							</tr>
-						</table>
-						<table class="data-col2"></table>
-					</td>
-				</tr>
-			<?php } ?>
-		</table>
-	</form>
 </div>
 
 <script>
-	GLOBAL.DB_USER_PREFIX = "<?=$user_plain;?>_";
-	GLOBAL.DB_DBNAME_PREFIX = "<?=$user_plain;?>_";
+  GLOBAL.DB_USER_PREFIX = "<?=$user_plain;?>_";
+  GLOBAL.DB_DBNAME_PREFIX = "<?=$user_plain;?>_";
 </script>

web/templates/pages/add_dns.html

@@ -19,7 +19,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="ok" value="Add">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">
@@ -40,13 +40,13 @@
 								<?php show_error_panel($_SESSION);?>
 							</td>
 						</tr>
-						<?php if (($user_plain == 'admin') && (($_GET['accept'] !== "true")))  {?>
+						<?php if (($user_plain == 'admin') && (($_GET['accept'] !== "true"))) {?>
 							<tr>
 								<td class="u-pt18">
-									<span class="alert alert-danger alert-with-icon">
+									<div class="alert alert-danger alert-with-icon u-input-width" role="alert">
 										<i class="fas fa-exclamation"></i>
-										<?=_('Avoid adding web domains on admin account');?>
-									</span>
+										<p><?=_('Avoid adding web domains on admin account');?></p>
+									</div>
 								</td>
 							</tr>
 						<?php } ?>

web/templates/pages/add_dns_rec.html

@@ -19,7 +19,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="ok_rec" value="add">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">
@@ -50,10 +50,8 @@
 						<tr>
 							<td class="u-pt6">
 								<label for="v_rec" class="form-label"><?=_('Record');?></label>
-								<div class="u-side-by-side">
-									<input type="text" class="form-control u-input-width" name="v_rec" id="v_rec" value="<?=htmlentities(trim($v_rec, "'"))?>">
-									<small class="hint u-ml10"></small>
-								</div>
+								<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>

web/templates/pages/add_firewall.html

@@ -19,7 +19,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="ok" value="Add">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/add_firewall_banlist.html

@@ -19,7 +19,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="ok" value="Add">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/add_firewall_ipset.html

@@ -19,7 +19,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="ok" value="Add">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/add_ip.html

@@ -19,7 +19,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="ok" value="Add">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/add_key.html

@@ -23,7 +23,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="ok" value="Add">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/add_mail.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/"><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/"><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,168 +15,113 @@
 
 <div class="l-center animated fadeIn">
 
-	<form id="vstobjects" name="v_add_mail" method="post">
-		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-		<input type="hidden" name="ok" value="Add">
+  <form id="vstobjects" name="v_add_mail" 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 Mail Domain');?></h1>
+      <?php show_error_panel($_SESSION);?>
+      <div class="u-input-width">
+        <?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>
+          </div>
+        <?php } ?>
+        <?php if (($user_plain == 'admin') && (empty($_GET['accept']))) {?>
+          <div class="u-side-by-side u-pt18">
+            <div><a href="/add/user/" class="vst-advanced admin-warning-button"><?=_('Add User');?></a></div>
+            <div style="margin-left: 3px;"><a href="/add/mail/?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")) {?>
+          <div class="u-mb20">
+            <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, "'"))?>">
+          </div>
+          <?php if($_SESSION['WEBMAIL_SYSTEM']){?>
+            <div class="u-mb20">
+              <label for="v_webmail" class="form-label"><?=_('Webmail Client');?></label>
+              <select class="form-select" name="v_webmail" id="v_webmail" tabindex="6">
+                <?php foreach ($webmail_clients as $client){
+                  echo "\t\t\t\t<option value=\"".htmlentities($client)."\"";
+                  if (( $v_webmail == $client )) {
+                    echo ' selected' ;
+                  }
+                  echo ">".htmlentities(ucfirst($client))."</option>\n";
+                  }
+                ?>
+                <option value="" <?php if (empty($v_webmail) || $v_webmail == 'disabled' ){ echo "selected";}?>><?=_('Disabled');?></option>
+              </select>
+            </div>
+          <?php } ?>
+          <?php if (!empty($_SESSION['ANTISPAM_SYSTEM'])) {?>
+            <div class="u-mb10">
+              <div class="form-check">
+                <input class="form-check-input" type="checkbox" name="v_antispam" id="v_antispam" <?php if ((empty($v_antispam)) || ($v_antispam == 'yes')) echo 'checked'; ?>>
+                <label for="v_antispam">
+                  <?=_('AntiSpam Support');?>
+                </label>
+              </div>
+            </div>
+            <div class="u-mb10">
+              <div class="form-check">
+                <input class="form-check-input" type="checkbox" name="v_reject" id="v_reject" <?php if ((empty($v_reject)) || ($v_reject == 'yes')) echo 'checked'; ?>>
+                <label for="v_reject">
+                  <?=_('Reject spam');?>
+                </label>
+              </div>
+            </div>
+          <?php } ?>
+          <?php if (!empty($_SESSION['ANTIVIRUS_SYSTEM'])) {?>
+            <div class="u-mb10">
+              <div class="form-check">
+                <input class="form-check-input" type="checkbox" name="v_antivirus" id="v_antivirus" <?php if ((empty($v_antivirus)) || ($v_antivirus == 'yes')) echo 'checked'; ?>>
+                <label for="v_antivirus">
+                  <?=_('AntiVirus Support');?>
+                </label>
+              </div>
+            </div>
+          <?php } ?>
+          <div class="u-mb10">
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" name="v_dkim" id="v_dkim" <?php if (isset($v_dkim)&&$v_dkim == 'yes') echo 'checked'; ?>>
+              <label for="v_dkim">
+                <?=_('DKIM Support');?>
+              </label>
+            </div>
+          </div>
+          <div class="u-mb10">
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" name="v_smtp_relay" id="v_smtp_relay" <?php if ($v_smtp_relay == 'true') echo 'checked'; ?> onclick="javascript:elementHideShow('smtp_relay_table');">
+              <label for="v_smtp_relay">
+                <?=_('SMTP Relay');?>
+              </label>
+            </div>
+          </div>
+          <div class="u-pl50" style="display:<?php if ($v_smtp_relay == 'true'){echo 'block';} else {echo 'none';} ?>;" id="smtp_relay_table">
+            <div class="u-mb10">
+              <label for="v_smtp_relay_host" class="form-label"><?=_('Host');?></label>
+              <input type="text" class="form-control" name="v_smtp_relay_host" id="v_smtp_relay_host" value="<?=htmlentities(trim($v_smtp_relay_host, "'"))?>">
+            </div>
+            <div class="u-mb10">
+              <label for="v_smtp_relay_port" class="form-label"><?=_('Port');?></label>
+              <input type="text" class="form-control" name="v_smtp_relay_port" id="v_smtp_relay_port" value="<?=htmlentities(trim($v_smtp_relay_port, "'"))?>">
+            </div>
+            <div class="u-mb10">
+              <label for="v_smtp_relay_user" class="form-label"><?=_('Username');?></label>
+              <input type="text" class="form-control" name="v_smtp_relay_user" id="v_smtp_relay_user" value="<?=htmlentities(trim($v_smtp_relay_user, "'"))?>">
+            </div>
+            <div class="u-mb10">
+              <label for="v_smtp_relay_pass" class="form-label"><?=_('Password');?></label>
+              <input type="text" class="form-control" name="v_smtp_relay_pass" id="v_smtp_relay_pass">
+            </div>
+          </div>
+        <?php } ?>
+      </div>
+    </div>
+
+  </form>
 
-		<table class="data mode-add">
-			<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 Mail Domain');?></span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<?php show_error_panel($_SESSION);?>
-							</td>
-						</tr>
-						<?php if (($user_plain == 'admin') && (($_GET['accept'] !== "true")))  {?>
-							<tr>
-								<td class="u-pt18">
-									<span class="alert alert-danger alert-with-icon">
-										<i class="fas fa-exclamation"></i>
-										<?=_('Avoid adding web domains on admin account');?>
-									</span>
-								</td>
-							</tr>
-						<?php } ?>
-						<?php if (($user_plain == 'admin') && (empty($_GET['accept']))) {?>
-							<tr>
-								<td class="u-pt18">
-									<span><a href="/add/user/" class="vst-advanced admin-warning-button"><?=_('Add User');?></a></span>
-									<span><a href="/add/mail/?accept=true" class="vst-advanced button danger admin-warning-button"><?=_('Continue');?></a> </span>
-								</td>
-							</tr>
-						<?php } ?>
-						<?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin"))  {?>
-							<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, "'"))?>">
-								</td>
-							</tr>
-							<?php if($_SESSION['WEBMAIL_SYSTEM']){?>
-								<tr>
-									<td class="u-pt18">
-										<label for="v_webmail" class="form-label"><?=_('Webmail Client');?></label>
-										<select class="form-select u-input-width" name="v_webmail" id="v_webmail" tabindex="6">
-											<?php foreach ($webmail_clients as $client){
-												echo "\t\t\t\t<option value=\"".htmlentities($client)."\"";
-												if (( $v_webmail == $client )) {
-													echo ' selected' ;
-												}
-												echo ">".htmlentities(ucfirst($client))."</option>\n";
-												}
-											?>
-											<option value="" <?php if (empty($v_webmail) || $v_webmail == 'disabled' ){ echo "selected";}?>><?=_('Disabled');?></option>
-										</select>
-									</td>
-								</tr>
-							<?php } ?>
-							<?php if (!empty($_SESSION['ANTISPAM_SYSTEM'])) {?>
-								<tr>
-									<td class="u-pt18">
-										<div class="form-check">
-											<input class="form-check-input" type="checkbox" name="v_antispam" id="v_antispam" <?php if ((empty($v_antispam)) || ($v_antispam == 'yes')) echo 'checked'; ?>>
-											<label for="v_antispam">
-												<?=_('AntiSpam Support');?>
-											</label>
-										</div>
-									</td>
-								</tr>
-								<tr>
-									<td class="u-pt6">
-										<div class="form-check">
-											<input class="form-check-input" type="checkbox" name="v_reject" id="v_reject" <?php if ((empty($v_reject)) || ($v_reject == 'yes')) echo 'checked'; ?>>
-											<label for="v_reject">
-												<?=_('Reject spam');?>
-											</label>
-										</div>
-									</td>
-								</tr>
-							<?php } ?>
-							<?php if (!empty($_SESSION['ANTIVIRUS_SYSTEM'])) {?>
-								<tr>
-									<td class="u-pt6">
-										<div class="form-check">
-											<input class="form-check-input" type="checkbox" name="v_antivirus" id="v_antivirus" <?php if ((empty($v_antivirus)) || ($v_antivirus == 'yes')) echo 'checked'; ?>>
-											<label for="v_antivirus">
-												<?=_('AntiVirus Support');?>
-											</label>
-										</div>
-									</td>
-								</tr>
-							<?php } ?>
-							<tr>
-								<td class="u-pt6">
-									<div class="form-check">
-										<input class="form-check-input" type="checkbox" name="v_dkim" id="v_dkim" <?php if (isset($v_dkim)&&$v_dkim == 'yes') echo 'checked'; ?>>
-										<label for="v_dkim">
-											<?=_('DKIM Support');?>
-										</label>
-									</div>
-								</td>
-							</tr>
-							<tr>
-								<td class="u-pt6">
-									<div class="form-check">
-										<input class="form-check-input" type="checkbox" name="v_smtp_relay" id="v_smtp_relay" <?php if ($v_smtp_relay == 'true') echo 'checked'; ?> onclick="javascript:elementHideShow('smtp_relay_table');">
-										<label for="v_smtp_relay">
-											<?=_('SMTP Relay');?>
-										</label>
-									</div>
-								</td>
-							</tr>
-							<tr>
-								<td class="u-pl50">
-									<table style="display:<?php if ($v_smtp_relay == 'true'){echo 'block';} else {echo 'none';} ?>;" id="smtp_relay_table">
-										<tr>
-											<td class="u-pt6">
-												<label for="v_smtp_relay_host" class="form-label"><?=_('Host');?></label>
-												<input type="text" class="form-control u-input-width" name="v_smtp_relay_host" id="v_smtp_relay_host" value="<?=htmlentities(trim($v_smtp_relay_host, "'"))?>">
-											</td>
-										</tr>
-										<tr>
-											<td class="u-pt6">
-												<label for="v_smtp_relay_port" class="form-label"><?=_('Port');?></label>
-												<input type="text" class="form-control u-input-width" name="v_smtp_relay_port" id="v_smtp_relay_port" value="<?=htmlentities(trim($v_smtp_relay_port, "'"))?>">
-											</td>
-										</tr>
-										<tr>
-											<td class="u-pt6">
-												<label for="v_smtp_relay_user" class="form-label"><?=_('Username');?></label>
-												<input type="text" class="form-control u-input-width" name="v_smtp_relay_user" id="v_smtp_relay_user" value="<?=htmlentities(trim($v_smtp_relay_user, "'"))?>">
-											</td>
-										</tr>
-										<tr>
-											<td class="u-pt6">
-												<label for="v_smtp_relay_pass" class="form-label"><?=_('Password');?></label>
-												<input type="text" class="form-control u-input-width" name="v_smtp_relay_pass" id="v_smtp_relay_pass">
-											</td>
-										</tr>
-									</table>
-								</td>
-							</tr>
-						<?php } ?>
-						<tr>
-							<td>
-								<br>
-							</td>
-						</tr>
-					</table>
-					<table class="data-col2"></table>
-				</td>
-			</tr>
-		</table>
-	</form>
 </div>

web/templates/pages/add_mail_acc.html

@@ -19,7 +19,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="ok_acc" value="add">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/add_package.html

@@ -19,7 +19,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="ok" value="Add">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/add_user.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/user/"><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/user/"><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,153 +15,111 @@
 
 <div class="l-center animated fadeIn">
 
-	<form id="vstobjects" name="v_add_user" method="post">
-		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-		<input type="hidden" name="ok" value="Add">
+  <form id="vstobjects" name="v_add_user" 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 User');?></h1>
+      <?php show_error_panel($_SESSION);?>
+      <div class="u-input-width">
+        <div class="u-mb10">
+          <label for="v_username" class="form-label"><?=_('Username');?></label>
+          <input type="text" class="form-control" name="v_username" id="v_username" value="<?=htmlentities(trim($v_username, "'"))?>" tabindex="1">
+        </div>
+        <div class="u-mb10">
+          <label for="v_name" class="form-label"><?=_('Contact');?></label>
+          <input type="text" class="form-control" name="v_name" id="v_name" value="<?=htmlentities(trim($v_name, "'"))?>" tabindex="2">
+        </div>
+        <div class="u-mb10">
+          <label for="v_email" class="form-label"><?=_('Email');?></label>
+          <input type="email" class="form-control" name="v_email" id="v_email" value="<?=htmlentities(trim($v_email, "'"))?>" tabindex="3">
+        </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, "'"))?>" tabindex="4">
+            <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 u-mb10">
+          <li><?=_('8 characters long');?></li>
+          <li><?=_('1 uppercase & 1 lowercase character');?></li>
+          <li><?=_('1 number');?></li>
+        </ul>
+        <div class="u-mb10">
+          <div class="form-check">
+            <input class="form-check-input" type="checkbox" name="v_login_disabled" id="v_login_disabled" onclick="javascript:elementHideShow('send-welcome');" <?php if ($v_login_disabled == "yes") echo 'checked' ?>>
+            <label for="v_login_disabled">
+              <?=_('Do not allow user to log in to Control Panel');?>
+            </label>
+          </div>
+        </div>
+        <div id="send-welcome">
+          <div class="form-check u-mb10">
+            <input class="form-check-input" type="checkbox" name="v_email_notice" id="v_email_notify" tabindex="5">
+            <label for="v_email_notify">
+              <?=_('Send welcome email');?>
+            </label>
+          </div>
+        </div>
+        <div class="u-mb10">
+          <label for="v_language" class="form-label"><?=_('Language');?></label>
+          <select class="form-select" name="v_language" id="v_language" tabindex="6">
+            <?php
+              foreach ($languages as $key => $value) {
+                echo "\n\t\t\t\t\t\t\t\t\t<option value=\"".htmlentities($key)."\"";
+                if (( $key == $_SESSION['LANGUAGE'] ) && (empty($v_language))){
+                  echo ' selected' ;
+                }
+                if (isset($v_language)){
+                  if ( htmlentities($key) == trim($v_language,"'") ){
+                    echo ' selected' ;
+                  }
+                }
+                echo ">".htmlentities($value)."</option>\n";
+              }
+            ?>
+          </select>
+        </div>
+        <div class="u-mb10">
+          <label for="v_role" class="form-label"><?=_('Role');?></label>
+          <select class="form-select" name="v_role" id="v_role">
+            <option value="user"><?=_('User');?>
+            <option value="admin" <?php if($v_role == "admin" ){ echo "selected"; } ?>><?=_('Administrator');?>
+          </select>
+        </div>
+        <div class="u-mb10">
+          <label for="v_package" class="form-label"><?=_('Package');?></label>
+          <select class="form-select" name="v_package" id="v_package" tabindex="8">
+            <?php
+              foreach ($data as $key => $value) {
+                echo "\n\t\t\t\t\t\t\t\t\t\t\t\t\t<option value=\"".htmlentities($key)."\"";
+                if ((!empty($v_package)) && ( $key == $_POST['v_package'])){
+                  echo 'selected' ;
+                } else {
+                  if ( $key == 'default'){
+                    echo 'selected' ;
+                  }
+                }
+                echo ">".htmlentities($key)."</option>\n";
+              }
+            ?>
+          </select>
+        </div>
+        <div class="u-mb10">
+          <label for="v_notify" class="form-label">
+            <?=_('Send login credentials to email address') ?>
+          </label>
+          <input type="email" class="form-control" name="v_notify" id="v_notify" value="<?=htmlentities(trim($v_notify, "'"))?>" tabindex="8">
+        </div>
+      </div>
+    </div>
+
+  </form>
 
-		<table class="data mode-add">
-			<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 User');?></span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<?php show_error_panel($_SESSION);?>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt18">
-								<label for="v_username" class="form-label"><?=_('Username');?></label>
-								<input type="text" class="form-control" name="v_username" id="v_username" value="<?=htmlentities(trim($v_username, "'"))?>" tabindex="1">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_name" class="form-label"><?=_('Contact');?></label>
-								<input type="text" class="form-control" name="v_name" id="v_name" value="<?=htmlentities(trim($v_name, "'"))?>" tabindex="2">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_email" class="form-label"><?=_('Email');?></label>
-								<input type="email" class="form-control" name="v_email" id="v_email" value="<?=htmlentities(trim($v_email, "'"))?>" tabindex="3">
-							</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-mb10">
-									<input type="text" class="form-control js-password-input" name="v_password" id="v_password" value="<?=htmlentities(trim($v_password, "'"))?>" tabindex="4">
-									<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>
-								<div class="form-check">
-									<input class="form-check-input" type="checkbox" name="v_login_disabled" id="v_login_disabled" onclick="javascript:elementHideShow('send-welcome');" <?php if ($v_login_disabled == "yes") echo 'checked' ?>>
-									<label for="v_login_disabled">
-										<?=_('Do not allow user to log in to Control Panel');?>
-									</label>
-								</div>
-							</td>
-						</tr>
-						<tr id="send-welcome">
-							<td class="u-pt6">
-								<div class="form-check">
-									<input class="form-check-input" type="checkbox" name="v_email_notice" id="v_email_notify" tabindex="5">
-									<label for="v_email_notify">
-										<?=_('Send welcome email');?>
-									</label>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_language" class="form-label"><?=_('Language');?></label>
-								<select class="form-select" name="v_language" id="v_language" tabindex="6">
-									<?php
-										foreach ($languages as $key => $value) {
-											echo "\n\t\t\t\t\t\t\t\t\t<option value=\"".htmlentities($key)."\"";
-											if (( $key == $_SESSION['LANGUAGE'] ) && (empty($v_language))){
-												echo ' selected' ;
-											}
-											if (isset($v_language)){
-												if ( htmlentities($key) == trim($v_language,"'") ){
-													echo ' selected' ;
-												}
-											}
-											echo ">".htmlentities($value)."</option>\n";
-										}
-									?>
-								</select>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_role" class="form-label"><?=_('Role');?></label>
-								<select class="form-select" name="v_role" id="v_role">
-									<option value="user"><?=_('User');?>
-									<option value="admin" <?php if($v_role == "admin" ){ echo "selected"; } ?>><?=_('Administrator');?>
-								</select>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_package" class="form-label"><?=_('Package');?></label>
-								<select class="form-select" name="v_package" id="v_package" tabindex="8">
-									<?php
-										foreach ($data as $key => $value) {
-											echo "\n\t\t\t\t\t\t\t\t\t\t\t\t\t<option value=\"".htmlentities($key)."\"";
-											if ((!empty($v_package)) && ( $key == $_POST['v_package'])){
-												echo 'selected' ;
-											} else {
-												if ( $key == 'default'){
-													echo 'selected' ;
-												}
-											}
-											echo ">".htmlentities($key)."</option>\n";
-										}
-									?>
-								</select>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_notify" class="form-label">
-									<?=_('Send login credentials to email address') ?>
-								</label>
-								<input type="email" class="form-control u-input-width" name="v_notify" id="v_notify" value="<?=htmlentities(trim($v_notify, "'"))?>" tabindex="8">
-							</td>
-						</tr>
-					</table>
-					<table class="data-col2 u-mb20"></table>
-				</td>
-			</tr>
-		</table>
-	</form>
 </div>

web/templates/pages/add_web.html

@@ -1,15 +1,15 @@
 <!-- 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/web/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-		</div>
-		<div class="l-unit-toolbar__buttonstrip float-right">
-			<?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin"))  {?>
-				<a href="#" class="ui-button" title="<?=_('Save');?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
-			<?php } ?>
-		</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/web/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+    </div>
+    <div class="l-unit-toolbar__buttonstrip float-right">
+      <?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin")) {?>
+        <a href="#" class="ui-button" title="<?=_('Save');?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <?php } ?>
+    </div>
+  </div>
 </div>
 <!-- End toolbar -->
 
@@ -17,108 +17,70 @@
 
 <div class="l-center animated fadeIn">
 
-	<form id="vstobjects" name="v_add_web" method="post">
-		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-		<input type="hidden" name="ok" value="Add">
+  <form id="vstobjects" name="v_add_web" 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 Web Domain');?></h1>
+      <?php show_error_panel($_SESSION);?>
+      <div class="u-input-width">
+        <?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>
+          </div>
+        <?php } ?>
+        <?php if (($user_plain == 'admin') && (empty($_GET['accept']))) {?>
+          <div class="u-side-by-side u-pt18">
+            <div><a href="/add/user/" class="vst-advanced admin-warning-button"><?=_('Add User');?></a></div>
+            <div style="margin-left: 3px;"><a href="/add/web/?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")) {?>
+          <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, "'"))?>">
+          </div>
+          <div class="u-mb20">
+            <label for="v_ip" class="form-label"><?=_('IP Address');?></label>
+            <select class="form-select" name="v_ip" id="v_ip">
+              <?php
+                foreach ($ips as $ip => $value) {
+                  $display_ip = htmlentities(empty($value['NAT']) ? $ip : "{$value['NAT']}");
+                  $ip_selected = (!empty($v_ip) && $ip == $_POST['v_ip']) ? 'selected' : '';
+                  echo "\t\t\t\t<option value=\"{$ip}\" {$ip_selected}>{$display_ip}</option>\n";
+                }
+              ?>
+            </select>
+          </div>
+          <?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) {?>
+            <?php if($panel[$user_plain]['DNS_DOMAINS'] != "0") { ?>
+              <div class="u-mb10">
+                <div class="form-check">
+                  <input class="form-check-input" type="checkbox" name="v_dns" id="v_dns" <?php if (empty($v_dns)&&$panel[$user_plain]['DNS_DOMAINS'] != "0") ?>>
+                  <label for="v_dns">
+                    <?=_('DNS Support');?>
+                  </label>
+                </div>
+              </div>
+            <?php } ?>
+          <?php } ?>
+          <?php if ((isset($_SESSION['IMAP_SYSTEM'])) && (!empty($_SESSION['IMAP_SYSTEM']))) {?>
+            <?php if($panel[$user_plain]['MAIL_DOMAINS'] != "0") { ?>
+              <div class="form-check">
+                <input class="form-check-input" type="checkbox" name="v_mail" id="v_mail" <?php if (empty($v_mail)&&$panel[$user_plain]['MAIL_DOMAINS'] != "0") ?>>
+                <label for="v_mail">
+                  <?=_('Mail Support');?>
+                </label>
+              </div>
+            <?php } ?>
+          <?php } ?>
+        <?php } ?>
+      </div>
+    </div>
+
+  </form>
 
-		<table class="data mode-add">
-			<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"><?=_('Add Web Domain');?></span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<?php show_error_panel($_SESSION);?>
-							</td>
-						</tr>
-						<?php
-						if (($user_plain == 'admin') && (($_GET['accept'] !== "true")))  {?>
-							<tr>
-								<td class="u-pt18">
-									<span class="alert alert-danger alert-with-icon">
-										<i class="fas fa-exclamation"></i>
-										<?=_('Avoid adding web domains on admin account');?>
-									</span>
-								</td>
-							</tr>
-						<?php } ?>
-						<?php if (($user_plain == 'admin') && (empty($_GET['accept']))) {?>
-							<tr>
-								<td class="u-pt18">
-									<span><a href="/add/user/" class="vst-advanced admin-warning-button"><?=_('Add User');?></a></span>
-									<span><a href="/add/web/?accept=true" class="vst-advanced button danger admin-warning-button"><?=_('Continue');?></a> </span>
-								</td>
-							</tr>
-						<?php } ?>
-						<?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin")) {?>
-							<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, "'"))?>">
-								</td>
-							</tr>
-							<tr>
-								<td class="u-pt6">
-									<label for="v_ip" class="form-label"><?=_('IP Address');?></label>
-									<select class="form-select" name="v_ip" id="v_ip">
-										<?php
-											foreach ($ips as $ip => $value) {
-												$display_ip = htmlentities(empty($value['NAT']) ? $ip : "{$value['NAT']}");
-												$ip_selected = (!empty($v_ip) && $ip == $_POST['v_ip']) ? 'selected' : '';
-												echo "\t\t\t\t<option value=\"{$ip}\" {$ip_selected}>{$display_ip}</option>\n";
-											}
-										?>
-									</select>
-								</td>
-							</tr>
-							<tr>
-								<td class="u-pt6"></td>
-							</tr>
-							<?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) {?>
-								<?php if($panel[$user_plain]['DNS_DOMAINS'] != "0") { ?>
-									<tr>
-										<td class="u-pt6">
-											<div class="form-check">
-												<input class="form-check-input" type="checkbox" name="v_dns" id="v_dns" <?php if (empty($v_dns)&&$panel[$user_plain]['DNS_DOMAINS'] != "0") ?>>
-												<label for="v_dns">
-													<?=_('DNS Support');?>
-												</label>
-											</div>
-										</td>
-									</tr>
-								<?php } ?>
-							<?php } ?>
-							<?php if ((isset($_SESSION['IMAP_SYSTEM'])) && (!empty($_SESSION['IMAP_SYSTEM']))) {?>
-								<?php if($panel[$user_plain]['MAIL_DOMAINS'] != "0") { ?>
-									<tr>
-										<td class="u-pt6">
-											<div class="form-check">
-												<input class="form-check-input" type="checkbox" name="v_mail" id="v_mail" <?php if (empty($v_mail)&&$panel[$user_plain]['MAIL_DOMAINS'] != "0") ?>>
-												<label for="v_mail">
-													<?=_('Mail Support');?>
-												</label>
-											</div>
-										</td>
-									</tr>
-								<?php } ?>
-							<?php } ?>
-						<?php } ?>
-					</table>
-					<table class="data-col2 u-mb20">
-					</table>
-				</td>
-			</tr>
-		</table>
-	</form>
 </div>

web/templates/pages/edit_db.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/db/"><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/db/"><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,64 @@
 
 <div class="l-center animated fadeIn">
 
-	<form id="vstobjects" name="v_edit_db" 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_db" method="post" class="<?=$v_status?>">
+    <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
+    <input type="hidden" name="save" value="save">
+
+    <div class="app-form">
+      <h1 class="page-title"><?=_('Editing Database');?></h1>
+      <?php show_error_panel($_SESSION);?>
+      <div class="u-input-width">
+        <div class="u-mb10">
+          <label for="v_database" class="form-label"><?=_('Database');?></label>
+          <input type="text" class="form-control u-input-width" name="v_database" id="v_database" value="<?=htmlentities(trim($v_database, "'"))?>" disabled>
+          <small class="hint"></small>
+        </div>
+        <div class="u-mb10">
+          <label for="v_dbuser" class="form-label">
+            <?=_('Username');?>
+            &nbsp;&nbsp;&nbsp;&nbsp;<em><small>(<?=sprintf(_('maximum characters length, including prefix'), 32);?>)</small></em>
+          </label>
+          <input type="text" class="form-control u-input-width" name="v_dbuser" id="v_dbuser" value="<?=htmlentities(trim($v_dbuser, "'"))?>">
+          <small class="hint"></small>
+        </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 u-mb10">
+          <li><?=_('8 characters long');?></li>
+          <li><?=_('1 uppercase & 1 lowercase character');?></li>
+          <li><?=_('1 number');?></li>
+        </ul>
+        <div class="u-mb10">
+          <label for="v_type" class="form-label"><?=_('Type');?></label>
+          <input type="text" class="form-control u-input-width" name="v_type" id="v_type" value="<?=htmlentities(trim($v_type, "'"))?>" disabled>
+        </div>
+        <div class="u-mb10">
+          <label for="v_host" class="form-label"><?=_('Host');?></label>
+          <input type="text" class="form-control u-input-width" name="v_host" id="v_host" value="<?=htmlentities(trim($v_host, "'"))?>" disabled>
+        </div>
+        <div class="u-mb10">
+          <label for="v_charset" class="form-label"><?=_('Charset');?></label>
+          <input type="text" class="form-control u-input-width" name="v_charset" id="v_charset" value="<?=htmlentities(trim($v_charset, "'"))?>" disabled>
+        </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"><?=_('Editing Database');?></span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<?php show_error_panel($_SESSION);?>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt18">
-								<label for="v_database" class="form-label"><?=_('Database');?></label>
-								<div class="u-side-by-side">
-									<input type="text" class="form-control u-input-width" name="v_database" id="v_database" value="<?=htmlentities(trim($v_database, "'"))?>" disabled>
-									<small class="hint u-ml10"></small>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_dbuser" class="form-label">
-									<?=_('Username');?>
-									&nbsp;&nbsp;&nbsp;&nbsp;<em><small>(<?=sprintf(_('maximum characters length, including prefix'), 32);?>)</small></em>
-								</label>
-								<div class="u-side-by-side">
-									<input type="text" class="form-control u-input-width" name="v_dbuser" id="v_dbuser" value="<?=htmlentities(trim($v_dbuser, "'"))?>">
-									<small class="hint u-ml10"></small>
-								</div>
-							</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-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_type" class="form-label"><?=_('Type');?></label>
-								<input type="text" class="form-control u-input-width" name="v_type" id="v_type" value="<?=htmlentities(trim($v_type, "'"))?>" disabled>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_host" class="form-label"><?=_('Host');?></label>
-								<input type="text" class="form-control u-input-width" name="v_host" id="v_host" value="<?=htmlentities(trim($v_host, "'"))?>" disabled>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_charset" class="form-label"><?=_('Charset');?></label>
-								<input type="text" class="form-control u-input-width" name="v_charset" id="v_charset" value="<?=htmlentities(trim($v_charset, "'"))?>" disabled>
-							</td>
-						</tr>
-					</table>
-					<table class="data-col2"></table>
-				</td>
-			</tr>
-		</table>
-	</form>
 </div>
+
 <?php if ($v_type == 'pgsql'){ $user_plain=strtolower($user_plain); } ?>
 <script>
-	GLOBAL.DB_USER_PREFIX = "<?=$user_plain;?>_";
-	GLOBAL.DB_DBNAME_PREFIX = "<?=$user_plain;?>_";
+  GLOBAL.DB_USER_PREFIX = "<?=$user_plain;?>_";
+  GLOBAL.DB_DBNAME_PREFIX = "<?=$user_plain;?>_";
 </script>

web/templates/pages/edit_dns_rec.html

@@ -50,11 +50,9 @@
 						<tr>
 							<td class="u-pt6">
 								<label for="v_rec" class="form-label"><?=_('Record');?></label>
-								<div class="u-side-by-side">
-									<input type="text" class="form-control u-input-width" name="v_rec" id="v_rec" value="<?=htmlentities(trim($v_rec, "'"))?>">
-									<input type="hidden" name="v_record_id" value="<?=htmlentities(trim($v_record_id, "'"))?>">
-									<small class="hint u-ml10"></small>
-								</div>
+								<input type="text" class="form-control u-input-width" name="v_rec" id="v_rec" value="<?=htmlentities(trim($v_rec, "'"))?>">
+								<input type="hidden" name="v_record_id" value="<?=htmlentities(trim($v_record_id, "'"))?>">
+								<small class="hint"></small>
 							</td>
 						</tr>
 						<tr>

web/templates/pages/edit_mail.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/"><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/"><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,295 +15,218 @@
 
 <div class="l-center animated fadeIn">
 
-	<form id="vstobjects" name="v_edit_mail" 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" method="post" class="<?=$v_status?>">
+    <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
+    <input type="hidden" name="save" value="save">
+
+    <div class="app-form">
+      <h1 class="page-title"><?=_('Editing Mail Domain');?></h1>
+      <?php show_error_panel($_SESSION);?>
+      <div class="u-input-width">
+        <div class="u-mb20">
+          <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>
+        <?php if($_SESSION['WEBMAIL_SYSTEM']){?>
+          <div class="u-mb10">
+            <label for="v_webmail" class="form-label"><?=_('Webmail Client');?></label>
+            <select class="form-select" name="v_webmail" id="v_webmail" tabindex="6">
+              <?php foreach ($webmail_clients as $client){
+                echo "\t\t\t\t<option value=\"".htmlentities($client)."\"";
+                if (( htmlentities(trim($v_webmail,"'")) == $client )) {
+                  echo ' selected' ;
+                }
+                echo ">".htmlentities(ucfirst($client))."</option>\n";
+                }
+              ?>
+              <option value="disabled" <?php if (htmlentities(trim($v_webmail,"'")) == 'disabled') { echo "selected";}?>><?=_('Disabled');?></option>
+            </select>
+          </div>
+        <?php } ?>
+        <div class="u-mb10">
+          <label for="v_catchall" class="form-label"><?=_('Catchall email');?></label>
+          <input type="email" class="form-control" name="v_catchall" id="v_catchall" value="<?=htmlentities(trim($v_catchall, "'"))?>">
+        </div>
+        <div class="u-mb20">
+          <label for="v_rate" class="form-label">
+            <?=_('Rate limit');?> <span class="optional">(<?=_('Email / hour / account');?>)</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>
+        <?php if (!empty($_SESSION['ANTISPAM_SYSTEM'])) {?>
+          <div class="u-mb10">
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" name="v_antispam" id="v_antispam" <?php if ($v_antispam == 'yes') echo 'checked'; ?>>
+              <label for="v_antispam">
+                <?=_('AntiSpam Support');?>
+              </label>
+            </div>
+          </div>
+          <div class="u-mb10">
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" name="v_reject" id="v_reject" <?php if ($v_reject == 'yes') echo 'checked'; ?>>
+              <label for="v_reject">
+                <?=_('Reject spam');?>
+              </label>
+            </div>
+          </div>
+        <?php } ?>
+        <?php if (!empty($_SESSION['ANTIVIRUS_SYSTEM'])) {?>
+          <div class="u-mb10">
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" name="v_antivirus" id="v_antivirus" <?php if ($v_antivirus == 'yes') echo 'checked'; ?>>
+              <label for="v_antivirus">
+                <?=_('AntiVirus Support');?>
+              </label>
+            </div>
+          </div>
+        <?php } ?>
+        <div class="u-mb10">
+          <div class="form-check">
+            <input class="form-check-input" type="checkbox" name="v_dkim" id="v_dkim" <?php if ($v_dkim == 'yes') echo 'checked'; ?>>
+            <label for="v_dkim">
+              <?=_('DKIM Support');?>
+            </label>
+          </div>
+        </div>
+        <div class="u-mb10">
+          <div class="form-check">
+            <input class="form-check-input" type="checkbox" name="v_ssl" id="v_ssl" <?php if ($v_ssl == 'yes') echo 'checked' ?> onclick="javascript:elementHideShow('ssltable');">
+            <label for="v_ssl">
+              <?=_('SSL Support');?>
+            </label>
+          </div>
+        </div>
+        <div class="u-pl50" id="ssltable" style="display:<?php if ($v_ssl == 'no' ) { echo 'none';} else {echo 'block';}?> ;">
+          <div class="u-mb10">
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" name="v_letsencrypt" id="v_letsencrypt" onclick="javascript:elementHideShow('ssl-details');App.Actions.MAIL.toggle_letsencrypt(this);" <?php if($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') echo 'checked' ?>">
+              <label for="v_letsencrypt">
+                <?=_('Lets Encrypt Support');?>
+              </label>
+            </div>
+          </div>
+          <div id="le-warning" class="u-mb20">
+            <div class="alert alert-info alert-with-icon" role="alert">
+              <i class="fas fa-exclamation"></i>
+              <p><?php echo $v_webmail_alias;?></p>
+              <p><?=sprintf(_("To enable Let's Encrypt SSL, ensure that DNS records exist for mail.%s and %s!"), $v_domain, $v_webmail_alias); ?></p>
+            </div>
+          </div>
+          <div id="ssl-details" style="<?php if ($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') { echo 'display: none;'; } ?>">
+            <div class="u-mb10">
+              <label for="v_ssl_crt" class="form-label">
+                <?=_('SSL Certificate');?>
+                <span id="generate-csr"> / <a class="generate" target="_blank" href="/generate/ssl/?domain=<?=htmlentities($v_domain)?>"><?=_('Generate CSR');?></a></span>
+              </label>
+              <textarea class="form-control u-min-height100 u-console" <?php if ($v_letsencrypt == 'yes') echo 'disabled' ?> name="v_ssl_crt" id="v_ssl_crt"><?=htmlentities(trim($v_ssl_crt, "'"))?></textarea>
+            </div>
+            <div class="u-mb10">
+              <label for="v_ssl_key" class="form-label"><?=_('SSL Key');?></label>
+              <textarea class="form-control u-min-height100 u-console" <?php if ($v_letsencrypt == 'yes') echo 'disabled' ?> name="v_ssl_key" id="v_ssl_key"><?=htmlentities(trim($v_ssl_key, "'"))?></textarea>
+            </div>
+            <div class="u-mb20">
+              <label for="v_ssl_ca" class="form-label">
+                <?=_('SSL Certificate Authority / Intermediate');?> <span class="optional">(<?=_('optional');?>)</span>
+              </label>
+              <textarea class="form-control u-min-height100 u-console" <?php if ($v_letsencrypt == 'yes') echo 'disabled' ?> name="v_ssl_ca" id="v_ssl_ca"><?=htmlentities(trim($v_ssl_ca, "'"))?></textarea>
+            </div>
+          </div>
+          <?php if ($v_ssl != 'no' ) { ?>
+            <table class="additional-info">
+              <tr>
+                <td>
+                  <b><?=_('SUBJECT');?>:</b>
+                </td>
+                <td class="details">
+                  <?=htmlentities($v_ssl_subject);?>
+                </td>
+              </tr>
+              <?php if ($v_ssl_aliases){?>
+                <tr>
+                  <td>
+                    <b><?=_('Aliases');?>:</b>
+                  </td>
+                  <td class="details">
+                    <?=htmlentities($v_ssl_aliases)?>
+                  </td>
+                </tr>
+              <?php } ?>
+              <tr>
+                <td>
+                  <b><?=_('NOT_BEFORE');?>:</b>
+                </td>
+                <td class="details">
+                  <?=htmlentities($v_ssl_not_before)?>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <b><?=_('NOT_AFTER');?>:</b>
+                </td>
+                <td class="details">
+                  <?=htmlentities($v_ssl_not_after)?>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <b><?=_('SIGNATURE');?>:</b>
+                </td>
+                <td class="details">
+                  <?=htmlentities($v_ssl_signature)?>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <b><?=_('PUB_KEY');?>:</b>
+                </td>
+                <td class="details">
+                  <?=htmlentities($v_ssl_pub_key)?>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <b><?=_('ISSUER');?>:</b>
+                </td>
+                <td class="details">
+                  <?=htmlentities($v_ssl_issuer)?>
+                </td>
+              </tr>
+            </table>
+          <? } // if ssl is enabled ?>
+        </div>
+        <div class="u-mb10">
+          <label>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" name="v_smtp_relay" id="v_smtp_relay" <?php if ($v_smtp_relay == 'true') echo 'checked'; ?> onclick="javascript:elementHideShow('smtp_relay_table');">
+              <label for="v_smtp_relay">
+                <?=_('SMTP Relay');?>
+              </label>
+            </div>
+          </label>
+        </div>
+        <div class="u-pl50" id="smtp_relay_table" style="display:<?php if ($v_smtp_relay == 'true') {echo 'block';} else {echo 'none';} ?>;">
+          <div class="u-mb10">
+            <label for="v_smtp_relay_host" class="form-label"><?=_('Host');?></label>
+            <input type="text" class="form-control" name="v_smtp_relay_host" id="v_smtp_relay_host" value="<?=htmlentities(trim($v_smtp_relay_host, "'"))?>">
+          </div>
+          <div class="u-mb10">
+            <label for="v_smtp_relay_port" class="form-label"><?=_('Port');?></label>
+            <input type="text" class="form-control" name="v_smtp_relay_port" id="v_smtp_relay_port" value="<?=htmlentities(trim($v_smtp_relay_port, "'"))?>">
+          </div>
+          <div class="u-mb10">
+            <label for="v_smtp_relay_user" class="form-label"><?=_('Username');?></label>
+            <input type="text" class="form-control" name="v_smtp_relay_user" id="v_smtp_relay_user" value="<?=htmlentities(trim($v_smtp_relay_user, "'"))?>">
+          </div>
+          <div class="u-mb10">
+            <label for="v_smtp_relay_pass" class="form-label"><?=_('Password');?></label>
+            <input type="text" class="form-control" name="v_smtp_relay_pass" id="v_smtp_relay_pass">
+          </div>
+        </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">
-						<tr>
-							<td class="u-pt18">
-								<span class="page-title"><?=_('Editing Mail Domain');?></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>
-						<?php if($_SESSION['WEBMAIL_SYSTEM']){?>
-							<tr>
-								<td class="u-pt18">
-									<label for="v_webmail" class="form-label"><?=_('Webmail Client');?></label>
-									<select class="form-select u-input-width" name="v_webmail" id="v_webmail" tabindex="6">
-										<?php foreach ($webmail_clients as $client){
-											echo "\t\t\t\t<option value=\"".htmlentities($client)."\"";
-											if (( htmlentities(trim($v_webmail,"'")) == $client )) {
-												echo ' selected' ;
-											}
-											echo ">".htmlentities(ucfirst($client))."</option>\n";
-											}
-										?>
-										<option value="disabled" <?php if (htmlentities(trim($v_webmail,"'")) == 'disabled') { echo "selected";}?>><?=_('Disabled');?></option>
-									</select>
-								</td>
-							</tr>
-						<?php } ?>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_catchall" class="form-label"><?=_('Catchall email');?></label>
-								<input type="email" class="form-control u-input-width" name="v_catchall" id="v_catchall" value="<?=htmlentities(trim($v_catchall, "'"))?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_rate" class="form-label">
-									<?=_('Rate limit');?> <span class="optional">(<?=_('Email / hour / account');?>)</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>
-						<?php if (!empty($_SESSION['ANTISPAM_SYSTEM'])) {?>
-							<tr>
-								<td class="u-pt18">
-									<div class="form-check">
-										<input class="form-check-input" type="checkbox" name="v_antispam" id="v_antispam" <?php if ($v_antispam == 'yes') echo 'checked'; ?>>
-										<label for="v_antispam">
-											<?=_('AntiSpam Support');?>
-										</label>
-									</div>
-								</td>
-							</tr>
-							<tr>
-								<td class="u-pt6">
-									<div class="form-check">
-										<input class="form-check-input" type="checkbox" name="v_reject" id="v_reject" <?php if ($v_reject == 'yes') echo 'checked'; ?>>
-										<label for="v_reject">
-											<?=_('Reject spam');?>
-										</label>
-									</div>
-								</td>
-							</tr>
-						<?php } ?>
-						<?php if (!empty($_SESSION['ANTIVIRUS_SYSTEM'])) {?>
-							<tr>
-								<td class="u-pt6">
-									<div class="form-check">
-										<input class="form-check-input" type="checkbox" name="v_antivirus" id="v_antivirus" <?php if ($v_antivirus == 'yes') echo 'checked'; ?>>
-										<label for="v_antivirus">
-											<?=_('AntiVirus Support');?>
-										</label>
-									</div>
-								</td>
-							</tr>
-						<?php } ?>
-						<tr>
-							<td class="u-pt6">
-								<div class="form-check">
-									<input class="form-check-input" type="checkbox" name="v_dkim" id="v_dkim" <?php if ($v_dkim == 'yes') echo 'checked'; ?>>
-									<label for="v_dkim">
-										<?=_('DKIM Support');?>
-									</label>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<div class="form-check">
-									<input class="form-check-input" type="checkbox" name="v_ssl" id="v_ssl" <?php if ($v_ssl == 'yes') echo 'checked' ?> onclick="javascript:elementHideShow('ssltable');">
-									<label for="v_ssl">
-										<?=_('SSL Support');?>
-									</label>
-								</div>
-							</td>
-						</tr>
-						<tr id="ssltable" style="display:<?php if ($v_ssl == 'no' ) { echo 'none';} else {echo 'block';}?> ;" class="u-pl50">
-							<td>
-								<table>
-									<tr>
-										<td class="u-pt6">
-											<div class="form-check">
-												<input class="form-check-input" type="checkbox" name="v_letsencrypt" id="v_letsencrypt" onclick="javascript:elementHideShow('ssl-details');App.Actions.MAIL.toggle_letsencrypt(this);" <?php if($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') echo 'checked' ?>">
-												<label for="v_letsencrypt">
-													<?=_('Lets Encrypt Support');?>
-												</label>
-											</div>
-										</td>
-									</tr>
-									<tr id="le-warning" class="u-pt18">
-										<td>
-											<span class="alert alert-info alert-with-icon">
-												<i class="fas fa-exclamation"></i>
-												<?php echo $v_webmail_alias;?>
-												<?=sprintf(_("To enable Let's Encrypt SSL, ensure that DNS records exist for mail.%s and %s!"), $v_domain, $v_webmail_alias); ?><br>
-											</span>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<table id="ssl-details" style="<?php if ($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') { echo 'display: none;'; } ?>">
-												<tr>
-													<td class="u-pt18">
-														<label for="v_ssl_crt" class="form-label">
-															<?=_('SSL Certificate');?>
-															<span id="generate-csr"> / <a class="generate" target="_blank" href="/generate/ssl/?domain=<?=htmlentities($v_domain)?>"><?=_('Generate CSR');?></a></span>
-														</label>
-														<textarea class="form-control u-input-width u-min-height100 u-console" <?php if ($v_letsencrypt == 'yes') echo 'disabled' ?> name="v_ssl_crt" id="v_ssl_crt"><?=htmlentities(trim($v_ssl_crt, "'"))?></textarea>
-													</td>
-												</tr>
-												<tr>
-													<td class="u-pt6">
-														<label for="v_ssl_key" class="form-label"><?=_('SSL Key');?></label>
-														<textarea class="form-control u-min-height100 u-console" <?php if ($v_letsencrypt == 'yes') echo 'disabled' ?> name="v_ssl_key" id="v_ssl_key"><?=htmlentities(trim($v_ssl_key, "'"))?></textarea>
-													</td>
-												</tr>
-												<tr>
-													<td class="u-pt6">
-														<label for="v_ssl_ca" class="form-label">
-															<?=_('SSL Certificate Authority / Intermediate');?> <span class="optional">(<?=_('optional');?>)</span>
-														</label>
-														<textarea class="form-control u-min-height100 u-console" <?php if ($v_letsencrypt == 'yes') echo 'disabled' ?> name="v_ssl_ca" id="v_ssl_ca"><?=htmlentities(trim($v_ssl_ca, "'"))?></textarea>
-													</td>
-												</tr>
-											</table>
-											<?php if ($v_ssl != 'no' ) { ?>
-												<tr>
-													<td>
-														<table class="additional-info">
-															<tr>
-																<td>
-																	<b><?=_('SUBJECT');?>:</b>
-																</td>
-																<td class="details">
-																	<?=htmlentities($v_ssl_subject);?>
-																</td>
-															</tr>
-															<?php if ($v_ssl_aliases){?>
-																<tr>
-																	<td>
-																		<b><?=_('Aliases');?>:</b>
-																	</td>
-																	<td class="details">
-																		<?=htmlentities($v_ssl_aliases)?>
-																	</td>
-																</tr>
-															<?php } ?>
-															<tr>
-																<td>
-																	<b><?=_('NOT_BEFORE');?>:</b>
-																</td>
-																<td class="details">
-																	<?=htmlentities($v_ssl_not_before)?>
-																</td>
-															</tr>
-															<tr>
-																<td>
-																	<b><?=_('NOT_AFTER');?>:</b>
-																</td>
-																<td class="details">
-																	<?=htmlentities($v_ssl_not_after)?>
-																</td>
-															</tr>
-															<tr>
-																<td>
-																	<b><?=_('SIGNATURE');?>:</b>
-																</td>
-																<td class="details">
-																	<?=htmlentities($v_ssl_signature)?>
-																</td>
-															</tr>
-															<tr>
-																<td>
-																	<b><?=_('PUB_KEY');?>:</b>
-																</td>
-																<td class="details">
-																	<?=htmlentities($v_ssl_pub_key)?>
-																</td>
-															</tr>
-															<tr>
-																<td>
-																	<b><?=_('ISSUER');?>:</b>
-																</td>
-																<td class="details">
-																	<?=htmlentities($v_ssl_issuer)?>
-																</td>
-															</tr>
-														</table>
-													</td>
-												</tr>
-											<? } // if ssl is enabled ?>
-										</td>
-									</tr>
-								</table>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label>
-									<div class="form-check">
-										<input class="form-check-input" type="checkbox" name="v_smtp_relay" id="v_smtp_relay" <?php if ($v_smtp_relay == 'true') echo 'checked'; ?> onclick="javascript:elementHideShow('smtp_relay_table');">
-										<label for="v_smtp_relay">
-											<?=_('SMTP Relay');?>
-										</label>
-									</div>
-								</label>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pl50">
-								<table style="display:<?php if ($v_smtp_relay == 'true') {echo 'block';} else {echo 'none';} ?>;" id="smtp_relay_table">
-									<tr>
-										<td class="u-pt6">
-											<label for="v_smtp_relay_host" class="form-label"><?=_('Host');?></label>
-											<input type="text" class="form-control u-input-width" name="v_smtp_relay_host" id="v_smtp_relay_host" value="<?=htmlentities(trim($v_smtp_relay_host, "'"))?>">
-										</td>
-									</tr>
-									<tr>
-										<td class="u-pt6">
-											<label for="v_smtp_relay_port" class="form-label"><?=_('Port');?></label>
-											<input type="text" class="form-control u-input-width" name="v_smtp_relay_port" id="v_smtp_relay_port" value="<?=htmlentities(trim($v_smtp_relay_port, "'"))?>">
-										</td>
-									</tr>
-									<tr>
-										<td class="u-pt6">
-											<label for="v_smtp_relay_user" class="form-label"><?=_('Username');?></label>
-											<input type="text" class="form-control u-input-width" name="v_smtp_relay_user" id="v_smtp_relay_user" value="<?=htmlentities(trim($v_smtp_relay_user, "'"))?>">
-										</td>
-									</tr>
-									<tr>
-										<td class="u-pt6">
-											<label for="v_smtp_relay_pass" class="form-label"><?=_('Password');?></label>
-											<input type="text" class="form-control u-input-width" name="v_smtp_relay_pass" id="v_smtp_relay_pass">
-										</td>
-									</tr>
-								</table>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<br>
-							</td>
-						</tr>
-					</table>
-					<table class="data-col2"></table>
-				</td>
-			</tr>
-		</table>
-	</form>
 </div>

web/templates/pages/edit_server.html

@@ -23,7 +23,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="save" value="save">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">
@@ -258,10 +258,10 @@
 											<td class="u-pt18">
 												<?=_('Enabled multi PHP versions');?>
 
-												<span class="alert alert-info alert-with-icon">
+												<div class="alert alert-info alert-with-icon u-input-width" role="alert">
 													<i class="fas fa-info"></i>
-													<?=_('Please wait while php is installed or removed');?>
-												</span>
+													<p><?=_('Please wait while php is installed or removed');?></p>
+												</div>
 											</td>
 										</tr>
 										<?php foreach($v_php_versions as $php_version): ?>

web/templates/pages/edit_server_bind9.html

@@ -19,7 +19,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="save" value="save">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/edit_server_dovecot.html

@@ -19,7 +19,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="save" value="save">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/edit_server_httpd.html

@@ -20,7 +20,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="save" value="save">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/edit_server_mysql.html

@@ -19,7 +19,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="save" value="save">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/edit_server_nginx.html

@@ -20,7 +20,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="save" value="save">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/edit_server_pgsql.html

@@ -19,7 +19,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="save" value="save">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/edit_server_php.html

@@ -19,7 +19,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="save" value="save">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/edit_server_service.html

@@ -19,7 +19,7 @@
 		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 		<input type="hidden" name="save" value="save">
 
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/edit_user.html

@@ -1,46 +1,46 @@
 <!-- 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/user/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-			<?php
-				if (($_SESSION['userContext'] === 'admin') && (!isset($_SESSION['look'])) && ($_SESSION['user'] !== $v_username)) {
-					$ssh_key_url = "/list/key/?user=".htmlentities($user_plain)."&token=".$_SESSION['token']."";
-					$log_url = "/list/log/?user=".htmlentities($user_plain)."&token=".$_SESSION['token']."";
-					$keys_url = "/list/access-key/?user=".htmlentities($user_plain)."&token=".$_SESSION['token']."";
-				} else {
-					$ssh_key_url = "/list/key/";
-					$log_url = "/list/log/";
-					$keys_url = "/list/access-key/";
-				}
-			?>
-			<a href="<?=$ssh_key_url; ?>" id="btn-create" class="ui-button cancel" dir="ltr" title="<?=_('Manage SSH keys');?>"><i class="fas fa-key status-icon orange"></i><?=_('Manage SSH keys');?></a>
-			<?php if (($_SESSION['userContext'] == 'admin') || ($_SESSION['userContext'] !== 'admin') && ($_SESSION['POLICY_USER_VIEW_LOGS'] !== 'no')) {?>
-				<a href="<?=$log_url; ?>" id="btn-create" class="ui-button cancel" dir="ltr" title="<?=_('Logs');?>"><i class="fas fa-history status-icon maroon"></i><?=_('Logs');?></a>
-			<?php } ?>
-			<?php
-				$api_status = (!empty($_SESSION['API_SYSTEM']) && is_numeric($_SESSION['API_SYSTEM'])) ? $_SESSION['API_SYSTEM'] : 0;
-				if (($user_plain == 'admin' && $api_status > 0) || ($user_plain != 'admin' && $api_status > 1)) { ?>
-				<a href="<?=$keys_url; ?>" id="btn-create" class="ui-button cancel" dir="ltr" title="<?=_('Access Keys');?>"><i class="fas fa-key status-icon purple"></i><?=_('Access Keys');?></a>
-			<?php } ?>
-		</div>
-		<div class="l-unit-toolbar__buttonstrip float-right">
-			<?php if (($_SESSION['user'] == $v_username) || (isset($_SESSION['look']))) {?>
-				<!-- Do not show delete button for currently logged in user-->
-			<?} else {?>
-				<a href="/login/?loginas=<?=htmlentities($v_username)?>&token=<?=$_SESSION['token']?>" id="btn-create" class="ui-button cancel" dir="ltr" title="<?=_('login as');?>"><i class="fas fa-sign-in-alt status-icon maroon"></i><?=_('login as');?></a>
-					<a class="data-controls do_delete ui-button danger cancel">
-						<i class="do_delete fas fa-times-circle status-icon red"></i>
-						<?=_('Delete');?>
-						<input type="hidden" name="delete_url" value="/delete/user/?user=<?=htmlentities($v_username)?>&token=<?=$_SESSION['token']?>">
-						<div class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-							<p><?=sprintf(_('DELETE_USER_CONFIRMATION'),htmlentities($v_username))?></p>
-						</div>
-					</a>
-			<?php } ?>
-			<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/user/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <?php
+        if (($_SESSION['userContext'] === 'admin') && (!isset($_SESSION['look'])) && ($_SESSION['user'] !== $v_username)) {
+          $ssh_key_url = "/list/key/?user=".htmlentities($user_plain)."&token=".$_SESSION['token']."";
+          $log_url = "/list/log/?user=".htmlentities($user_plain)."&token=".$_SESSION['token']."";
+          $keys_url = "/list/access-key/?user=".htmlentities($user_plain)."&token=".$_SESSION['token']."";
+        } else {
+          $ssh_key_url = "/list/key/";
+          $log_url = "/list/log/";
+          $keys_url = "/list/access-key/";
+        }
+      ?>
+      <a href="<?=$ssh_key_url; ?>" id="btn-create" class="ui-button cancel" dir="ltr" title="<?=_('Manage SSH keys');?>"><i class="fas fa-key status-icon orange"></i><?=_('Manage SSH keys');?></a>
+      <?php if (($_SESSION['userContext'] == 'admin') || ($_SESSION['userContext'] !== 'admin') && ($_SESSION['POLICY_USER_VIEW_LOGS'] !== 'no')) {?>
+        <a href="<?=$log_url; ?>" id="btn-create" class="ui-button cancel" dir="ltr" title="<?=_('Logs');?>"><i class="fas fa-history status-icon maroon"></i><?=_('Logs');?></a>
+      <?php } ?>
+      <?php
+        $api_status = (!empty($_SESSION['API_SYSTEM']) && is_numeric($_SESSION['API_SYSTEM'])) ? $_SESSION['API_SYSTEM'] : 0;
+        if (($user_plain == 'admin' && $api_status > 0) || ($user_plain != 'admin' && $api_status > 1)) { ?>
+        <a href="<?=$keys_url; ?>" id="btn-create" class="ui-button cancel" dir="ltr" title="<?=_('Access Keys');?>"><i class="fas fa-key status-icon purple"></i><?=_('Access Keys');?></a>
+      <?php } ?>
+    </div>
+    <div class="l-unit-toolbar__buttonstrip float-right">
+      <?php if (($_SESSION['user'] == $v_username) || (isset($_SESSION['look']))) {?>
+        <!-- Do not show delete button for currently logged in user-->
+      <?} else {?>
+        <a href="/login/?loginas=<?=htmlentities($v_username)?>&token=<?=$_SESSION['token']?>" id="btn-create" class="ui-button cancel" dir="ltr" title="<?=_('login as');?>"><i class="fas fa-sign-in-alt status-icon maroon"></i><?=_('login as');?></a>
+          <a class="data-controls do_delete ui-button danger cancel">
+            <i class="do_delete fas fa-times-circle status-icon red"></i>
+            <?=_('Delete');?>
+            <input type="hidden" name="delete_url" value="/delete/user/?user=<?=htmlentities($v_username)?>&token=<?=$_SESSION['token']?>">
+            <div class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
+              <p><?=sprintf(_('DELETE_USER_CONFIRMATION'),htmlentities($v_username))?></p>
+            </div>
+          </a>
+      <?php } ?>
+      <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 -->
 
@@ -48,359 +48,249 @@
 
 <div class="l-center animated fadeIn">
 
-	<form id="vstobjects" method="post" name="v_edit_user" class="<?=$v_status?>">
-		<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-		<input type="hidden" name="save" value="save">
+  <form id="vstobjects" method="post" name="v_edit_user" class="<?=$v_status?>">
+    <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
+    <input type="hidden" name="save" value="save">
+
+    <div class="app-form">
+      <h1 class="page-title"><?=_('Editing User');?></h1>
+      <?php show_error_panel($_SESSION);?>
+      <div class="u-input-width">
+        <div class="u-mb10">
+          <label for="v_user" class="form-label"><?=_('Username');?></label>
+          <input type="text" class="form-control" name="v_user" id="v_user" value="<?=htmlentities(trim($v_username, "'"))?>" disabled>
+          <input type="hidden" name="v_username" value="<?=htmlentities(trim($v_username, "'"))?>">
+        </div>
+        <div class="u-mb10">
+          <label for="v_name" class="form-label"><?=_('Contact');?></label>
+          <input type="text" class="form-control" name="v_name" id="v_name" value="<?=htmlentities(trim($v_name, "'"))?>" <?php if (($_SESSION['userContext'] !=='admin' ) && ($_SESSION['POLICY_USER_EDIT_DETAILS'] !=='yes' )) { echo 'disabled' ; }?> >
+          <?php if (($_SESSION['userContext'] !== 'admin') && ($_SESSION['POLICY_USER_EDIT_DETAILS'] !== 'yes')) {?>
+            <input type="hidden" name="v_name" value="<?=htmlentities(trim($v_name, "'"))?>">
+          <?php } ?>
+        </div>
+        <div class="u-mb10">
+          <label for="v_email" class="form-label"><?=_('Email');?></label>
+          <input type="email" class="form-control" name="v_email" id="v_email" value="<?=htmlentities(trim($v_email, "'"))?>" <?php if (($_SESSION['userContext'] !=='admin' ) && ($_SESSION['POLICY_USER_EDIT_DETAILS'] !=='yes' )) { echo 'disabled' ; }?>>
+          <?php if (($_SESSION['userContext'] !== 'admin') && ($_SESSION['POLICY_USER_EDIT_DETAILS'] !== 'yes')) {?>
+            <input type="hidden" name="v_email" value="<?=htmlentities(trim($v_email, "'"))?>">
+          <?php } ?>
+        </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>
+        <div id="password-details" class="u-mb20">
+          <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>
+          <?php if ($_SESSION['userContext'] === 'admin') {?>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" name="v_login_disabled" id="v_login_disabled" onclick="javascript:elementHideShow('password-options');elementHideShow('password-options-ip');" <?php if ($v_login_disabled === "yes") echo 'checked' ?>>
+              <label for="v_login_disabled">
+                <?=_('Do not allow user to log in to Control Panel');?>
+              </label>
+            </div>
+          <?php } ?>
+          <div id="password-options" style="<?php if ($v_login_disabled === 'yes') { echo 'display: none;'; } else { echo 'display: block;'; }?>">
+            <div class="form-check u-mt15">
+              <input class="form-check-input" type="checkbox" name="v_twofa" id="v_twofa" <?php if(!empty($v_twofa)) echo 'checked' ?>>
+              <label for="v_twofa">
+                <?=_('Enable 2FA');?>
+              </label>
+            </div>
+            <?php if (!empty($v_twofa)) { ?>
+              <p class="u-mb10"><?=_('2FA Reset Code:').' '.$v_twofa; ?></p>
+              <p class="u-mb10"><?=_('Please scan the code below in your 2FA application:'); ?></p>
+              <div><img class="qr-code" src="<?=htmlentities($v_qrcode); ?>" alt=""></div>
+            <?php } ?>
+          </div>
+          <div id="password-options-ip" style="<?php if ($v_login_disabled === 'yes') { echo 'display: none;'; } else { echo 'display: block;'; }?>">
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" name="v_login_use_iplist" id="v_login_use_iplist" onclick="javascript:elementHideShow('ip-allowlist')" <?php if ($v_login_use_iplist === "yes") echo 'checked' ?>>
+              <label for="v_login_use_iplist">
+                <?=_('Use IP address allow list for login attempts');?>
+              </label>
+            </div>
+          </div>
+          <div id="ip-allowlist" class="u-pt6" style="<?php if ($v_login_use_iplist === 'yes') { echo 'display: block;'; } else { echo 'display: none;'; } ?>">
+            <input type="text" class="form-control" name="v_login_allowed_ips" value="<?=htmlentities(trim($v_login_allowed_ips, "'"))?>" placeholder="<?=_('Example: 127.0.0.1,192.168.1.100');?>">
+          </div>
+        </div>
+        <div class="u-mb10">
+          <label for="v_language" class="form-label"><?=_('Language');?></label>
+          <select class="form-select" name="v_language" id="v_language">
+            <?php
+              foreach ($languages as $key => $value) {
+                echo "\n\t\t\t\t\t\t\t\t\t<option value=\"".$key."\"";
+                $skey = "'".$key."'";
+                if (( $key == $v_language ) || ( $skey == $v_language)){
+                  echo 'selected' ;
+                }
+                if (( $key == detect_user_language() ) && (empty($v_language))){
+                  echo 'selected' ;
+                }
+                echo ">".htmlentities($value)."</option>\n";
+              }
+            ?>
+          </select>
+        </div>
+        <?php if ($v_username == 'admin') {?>
+          <!-- Hide option to change 'admin' user's role-->
+        <?php } else { ?>
+          <?php if (($_SESSION['userContext'] === 'admin') && ($_SESSION['user'] != $v_username)) {?>
+            <div class="u-mb10">
+              <label for="v_role" class="form-label"><?=_('Role');?></label>
+              <select class="form-select" name="v_role" id="v_role">
+                <option value="user"><?=_('User');?>
+                <option value="admin" <?php if($v_role == "admin" ){ echo "selected"; } ?>><?=_('Administrator');?>
+              </select>
+            </div>
+          <?php } ?>
+        <?php } ?>
+        <?php if ($_SESSION['POLICY_USER_CHANGE_THEME'] !== 'no') {?>
+        <div class="u-mb10">
+          <label for="v_user_theme" class="form-label"><?=_('Theme') ?></label>
+          <select class="form-select" name="v_user_theme" id="v_user_theme">
+            <?php
+              foreach ($themes as $key => $value) {
+                echo "\t\t\t\t<option value=\"".$value."\"";
+                if ((!empty($_SESSION['userTheme'])) && ( $value == $v_user_theme )) {
+                  echo ' selected' ;
+                }
+                if ((empty($v_user_theme) && (!empty($_SESSION['THEME']))) && ( $value == $_SESSION['THEME'] )) {
+                  echo ' selected' ;
+                }
+                echo ">".$value."</option>\n";
+              }
+            ?>
+          </select>
+        </div>
+        <?php } ?>
+          <div class="u-mb10">
+            <label for="v_sort_order" class="form-label"><?=_('Default list sort order');?></label>
+            <select class="form-select" name="v_sort_order" id="v_sort_order">
+              <option value='date' <?php if($v_sort_order === 'date') echo 'selected' ?>><?=_('Date'); ?></option>
+              <option value='name' <?php if($v_sort_order === 'name') echo 'selected' ?>><?=_('Name'); ?></option>
+            </select>
+          </div>
+        <?php if ($_SESSION['userContext'] === 'admin') {?>
+          <div class="u-mb20">
+            <label for="v_package" class="form-label"><?=_('Package');?></label>
+            <select class="form-select" name="v_package" id="v_package">
+              <?php
+                foreach ($packages as $key => $value) {
+                  echo "\n\t\t\t\t\t\t\t\t\t<option value=\"".htmlentities($key)."\"";
+                  $skey = "'".$key."'";
+                  if (( $key == $v_package ) || ( $skey == $v_package)){
+                    echo 'selected' ;
+                  }
+                  echo ">".htmlentities($key)."</option>\n";
+                }
+              ?>
+            </select>
+          </div>
+          <a href="javascript:elementHideShow('advanced-opts');" class="vst-advanced"><?=_('Advanced options');?></a>
+          <div id="advanced-opts" style="display: none;">
+            <div class="u-mt15 u-mb10">
+              <label for="v_shell" class="form-label"><?=_('SSH Access');?></label>
+              <select class="form-select" name="v_shell" id="v_shell">
+                <?php
+                  foreach ($shells as $key => $value) {
+                    echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
+                    $svalue = "'".$value."'";
+                    if (( $value == $v_shell ) || ($svalue == $v_shell )){
+                      echo 'selected' ;
+                    }
+                    echo ">".htmlentities($value)."</option>\n";
+                  }
+                ?>
+              </select>
+            </div>
+            <div class="u-mb10">
+              <label for="v_phpcli" class="form-label"><?=_('PHP CLI Version');?></label>
+              <select class="form-select" name="v_phpcli" id="v_phpcli">
+                <?php
+                  foreach ($php_versions as $key => $value) {
+                    $php = explode('-',$value);
+                    echo "\t\t\t\t<option value=\"".$value."\"";
+                    $svalue = "'".$value."'";
+                    if ((!empty($v_phpcli)) && ( $value == $v_phpcli ) || ($svalue == $v_phpcli)){
+                      echo ' selected' ;
+                    }
+                    if ((empty($v_phpcli)) && ($value == DEFAULT_PHP_VERSION)){
+                      echo ' selected' ;
+                    }
+                    echo ">".htmlentities($value)."</option>\n";
+                  }
+                ?>
+              </select>
+            </div>
+            <?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) {?>
+              <p class="form-label u-mb10"><?=_('Default Name Servers');?></p>
+              <div class="u-mb5">
+                <input type="text" class="form-control" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
+              </div>
+              <div class="u-mb5">
+                <input type="text" class="form-control" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
+              </div>
+              <?php
+                if($v_ns3) {
+                  echo '<div class="u-side-by-side u-mb5">
+                    <input type="text" class="form-control" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
+                    <span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+                  </div>';
+                }
+                if($v_ns4) {
+                  echo '<div class="u-side-by-side u-mb5">
+                    <input type="text" class="form-control" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
+                    <span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+                  </div>';
+                }
+                if($v_ns5) {
+                  echo '<div class="u-side-by-side u-mb5">
+                    <input type="text" class="form-control" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
+                    <span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+                  </div>';
+                }
+                if($v_ns6) {
+                  echo '<div class="u-side-by-side u-mb5">
+                    <input type="text" class="form-control" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
+                    <span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+                  </div>';
+                }
+                if($v_ns7) {
+                  echo '<div class="u-side-by-side u-mb5">
+                    <input type="text" class="form-control" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
+                    <span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+                  </div>';
+                }
+                if($v_ns8) {
+                  echo '<div class="u-side-by-side u-mb5">
+                    <input type="text" class="form-control" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
+                    <span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
+                  </div>';
+                }
+              ?>
+              <div class="js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
+                <div class="u-pt18">
+                  <span class="js-add-ns-button additional-control add"><?=_('Add one more Name Server');?></span>
+                </div>
+              </div>
+            <?php } ?>
+          </div>
+        <?php } ?>
+      </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">
-						<tr>
-							<td class="u-pt18">
-								<span class="page-title"><?=_('Editing User');?></span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<?php show_error_panel($_SESSION);?>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt18">
-								<label for="v_user" class="form-label"><?=_('Username');?></label>
-								<input type="text" class="form-control u-input-width" name="v_user" id="v_user" value="<?=htmlentities(trim($v_username, "'"))?>" disabled>
-								<input type="hidden" name="v_username" value="<?=htmlentities(trim($v_username, "'"))?>">
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_name" class="form-label"><?=_('Contact');?></label>
-								<input type="text" class="form-control" name="v_name" id="v_name" value="<?=htmlentities(trim($v_name, "'"))?>" <?php if (($_SESSION['userContext'] !=='admin' ) && ($_SESSION['POLICY_USER_EDIT_DETAILS'] !=='yes' )) { echo 'disabled' ; }?> >
-								<?php if (($_SESSION['userContext'] !== 'admin') && ($_SESSION['POLICY_USER_EDIT_DETAILS'] !== 'yes')) {?>
-									<input type="hidden" name="v_name" value="<?=htmlentities(trim($v_name, "'"))?>">
-								<?php } ?>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_email" class="form-label"><?=_('Email');?></label>
-								<input type="email" class="form-control" name="v_email" id="v_email" value="<?=htmlentities(trim($v_email, "'"))?>" <?php if (($_SESSION['userContext'] !=='admin' ) && ($_SESSION['POLICY_USER_EDIT_DETAILS'] !=='yes' )) { echo 'disabled' ; }?>>
-								<?php if (($_SESSION['userContext'] !== 'admin') && ($_SESSION['POLICY_USER_EDIT_DETAILS'] !== 'yes')) {?>
-									<input type="hidden" name="v_email" value="<?=htmlentities(trim($v_email, "'"))?>">
-								<?php } ?>
-							</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-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>
-								<table id="password-details">
-									<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>
-									<?php if ($_SESSION['userContext'] === 'admin') {?>
-										<tr>
-											<td>
-												<div class="form-check">
-													<input class="form-check-input" type="checkbox" name="v_login_disabled" id="v_login_disabled" onclick="javascript:elementHideShow('password-options');elementHideShow('password-options-ip');" <?php if ($v_login_disabled === "yes") echo 'checked' ?>>
-													<label for="v_login_disabled">
-														<?=_('Do not allow user to log in to Control Panel');?>
-													</label>
-												</div>
-											</td>
-										</tr>
-									<?php } ?>
-									<tr>
-										<td id="password-options" style="<?php if ($v_login_disabled === 'yes') { echo 'display: none;'; } else { echo 'display: table-cell;'; }?>">
-											<div class="form-check u-mt15">
-												<input class="form-check-input" type="checkbox" name="v_twofa" id="v_twofa" <?php if(!empty($v_twofa)) echo 'checked' ?>>
-												<label for="v_twofa">
-													<?=_('Enable 2FA');?>
-												</label>
-											</div>
-											<?php if (!empty($v_twofa)) { ?>
-												<p class="u-mb10"><?=_('2FA Reset Code:').' '.$v_twofa; ?></p>
-												<p class="u-mb10"><?=_('Please scan the code below in your 2FA application:'); ?></p>
-												<div><img class="qr-code" src="<?=htmlentities($v_qrcode); ?>"></div>
-											<?php } ?>
-										</td>
-									</tr>
-									<tr>
-										<td id="password-options-ip" style="<?php if ($v_login_disabled === 'yes') { echo 'display: none;'; } else { echo 'display: table-cell;'; }?>">
-											<div class="form-check">
-												<input class="form-check-input" type="checkbox" name="v_login_use_iplist" id="v_login_use_iplist" onclick="javascript:elementHideShow('ip-allowlist')" <?php if ($v_login_use_iplist === "yes") echo 'checked' ?>>
-												<label for="v_login_use_iplist">
-													<?=_('Use IP address allow list for login attempts');?>
-												</label>
-											</div>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<table id="ip-allowlist" style="<?php if ($v_login_use_iplist === 'yes') { echo 'display: table-cell;'; } else { echo 'display: none;'; } ?>">
-												<tr>
-													<td>
-														<input type="text" class="form-control u-input-width" name="v_login_allowed_ips" value="<?=htmlentities(trim($v_login_allowed_ips, "'"))?>" placeholder="<?=_('Example: 127.0.0.1,192.168.1.100');?>">
-													</td>
-												</tr>
-											</table>
-										</td>
-									</tr>
-								</table>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_language" class="form-label"><?=_('Language');?></label>
-								<select class="form-select" name="v_language" id="v_language">
-									<?php
-										foreach ($languages as $key => $value) {
-											echo "\n\t\t\t\t\t\t\t\t\t<option value=\"".$key."\"";
-											$skey = "'".$key."'";
-											if (( $key == $v_language ) || ( $skey == $v_language)){
-												echo 'selected' ;
-											}
-											if (( $key == detect_user_language() ) && (empty($v_language))){
-												echo 'selected' ;
-											}
-											echo ">".htmlentities($value)."</option>\n";
-										}
-									?>
-								</select>
-							</td>
-						</tr>
-						<?php if ($v_username == 'admin') {?>
-							<!-- Hide option to change 'admin' user's role-->
-						<?php } else { ?>
-							<?php if (($_SESSION['userContext'] === 'admin') && ($_SESSION['user'] != $v_username)) {?>
-							<tr>
-								<td class="u-pt6">
-									<label for="v_role" class="form-label"><?=_('Role');?></label>
-									<select class="form-select" name="v_role" id="v_role">
-										<option value="user"><?=_('User');?>
-										<option value="admin" <?php if($v_role == "admin" ){ echo "selected"; } ?>><?=_('Administrator');?>
-									</select>
-								</td>
-							</tr>
-							<?php } ?>
-						<?php } ?>
-						<?php if ($_SESSION['POLICY_USER_CHANGE_THEME'] !== 'no') {?>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_user_theme" class="form-label"><?=_('Theme') ?></label>
-								<select class="form-select" name="v_user_theme" id="v_user_theme">
-									<?php
-										foreach ($themes as $key => $value) {
-											echo "\t\t\t\t<option value=\"".$value."\"";
-											if ((!empty($_SESSION['userTheme'])) && ( $value == $v_user_theme )) {
-												echo ' selected' ;
-											}
-											if ((empty($v_user_theme) && (!empty($_SESSION['THEME']))) && ( $value == $_SESSION['THEME'] )) {
-												echo ' selected' ;
-											}
-											echo ">".$value."</option>\n";
-										}
-									?>
-								</select>
-							</td>
-						</tr>
-						<?php } ?>
-							<tr>
-								<td class="u-pt6">
-									<label for="v_sort_order" class="form-label"><?=_('Default list sort order');?></label>
-									<select class="form-select" name="v_sort_order" id="v_sort_order">
-										<option value='date' <?php if($v_sort_order === 'date') echo 'selected' ?>><?=_('Date'); ?></option>
-										<option value='name' <?php if($v_sort_order === 'name') echo 'selected' ?>><?=_('Name'); ?></option>
-									</select>
-								</td>
-							</tr>
-						<?php if ($_SESSION['userContext'] === 'admin') {?>
-							<tr>
-								<td class="u-pt6">
-									<label for="v_package" class="form-label"><?=_('Package');?></label>
-									<select class="form-select" name="v_package" id="v_package">
-										<?php
-											foreach ($packages as $key => $value) {
-												echo "\n\t\t\t\t\t\t\t\t\t<option value=\"".htmlentities($key)."\"";
-												$skey = "'".$key."'";
-												if (( $key == $v_package ) || ( $skey == $v_package)){
-													echo 'selected' ;
-												}
-												echo ">".htmlentities($key)."</option>\n";
-											}
-										?>
-									</select>
-								</td>
-							</tr>
-							<tr>
-								<td class="u-pt18">
-									<a href="javascript:elementHideShow('advanced-opts');" class="vst-advanced"><?=_('Advanced options');?></a>
-								</td>
-							</tr>
-							<tr>
-								<td class="u-pt18">
-									<table id="advanced-opts" style="display: none;">
-										<tr>
-											<td class="u-pt6">
-												<label for="v_shell" class="form-label"><?=_('SSH Access');?></label>
-												<select class="form-select" name="v_shell" id="v_shell">
-													<?php
-														foreach ($shells as $key => $value) {
-															echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
-															$svalue = "'".$value."'";
-															if (( $value == $v_shell ) || ($svalue == $v_shell )){
-																echo 'selected' ;
-															}
-															echo ">".htmlentities($value)."</option>\n";
-														}
-													?>
-												</select>
-											</td>
-										</tr>
-										<tr>
-											<td class="u-pt6">
-												<label for="v_phpcli" class="form-label"><?=_('PHP CLI Version');?></label>
-												<select class="form-select" name="v_phpcli" id="v_phpcli">
-													<?php
-														foreach ($php_versions as $key => $value) {
-															$php = explode('-',$value);
-															echo "\t\t\t\t<option value=\"".$value."\"";
-															$svalue = "'".$value."'";
-															if ((!empty($v_phpcli)) && ( $value == $v_phpcli ) || ($svalue == $v_phpcli)){
-																echo ' selected' ;
-															}
-															if ((empty($v_phpcli)) && ($value == DEFAULT_PHP_VERSION)){
-																echo ' selected' ;
-															}
-															echo ">".htmlentities($value)."</option>\n";
-														}
-													?>
-												</select>
-											</td>
-										</tr>
-										<?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) {?>
-											<tr>
-												<td class="u-pt6">
-													<p class="form-label"><?=_('Default Name Servers');?></p>
-												</td>
-											</tr>
-											<tr>
-												<td>
-													<input type="text" class="form-control u-input-width" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
-												</td>
-											</tr>
-											<tr>
-												<td>
-													<input type="text" class="form-control u-input-width" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
-												</td>
-											</tr>
-											<?php
-												if($v_ns3) {
-													echo '<tr>
-														<td>
-															<div class="u-side-by-side">
-																<input type="text" class="form-control u-input-width" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
-																<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
-															</div>
-														</td>
-													</tr>';
-												}
-												if($v_ns4) {
-													echo '<tr>
-														<td>
-															<div class="u-side-by-side">
-																<input type="text" class="form-control u-input-width" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
-																<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
-															</div>
-														</td>
-													</tr>';
-												}
-												if($v_ns5) {
-													echo '<tr>
-														<td>
-															<div class="u-side-by-side">
-																<input type="text" class="form-control u-input-width" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
-																<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
-															</div>
-														</td>
-													</tr>';
-												}
-												if($v_ns6) {
-													echo '<tr>
-														<td>
-															<div class="u-side-by-side">
-																<input type="text" class="form-control u-input-width" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
-																<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
-															</div>
-														</td>
-													</tr>';
-												}
-												if($v_ns7) {
-													echo '<tr>
-														<td>
-															<div class="u-side-by-side">
-																<input type="text" class="form-control u-input-width" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
-																<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
-															</div>
-														</td>
-													</tr>';
-												}
-												if($v_ns8) {
-													echo '<tr>
-														<td>
-															<div class="u-side-by-side">
-																<input type="text" class="form-control u-input-width" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
-																<span class="js-remove-ns u-ml10"><i class="fas fa-trash status-icon dim red"></i></span>
-															</div>
-														</td>
-													</tr>';
-												}
-											?>
-											<tr class="js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
-												<td class="u-pt18">
-													<span class="js-add-ns-button additional-control add"><?=_('Add one more Name Server');?></span>
-												</td>
-											</tr>
-										<?php } ?>
-									</table>
-								</td>
-							</tr>
-						<?php } ?>
-						<?php if ($_SESSION['userContext'] !== 'admin') {?>
-							<tr>
-								<td class="u-pt18">
-								</td>
-							</tr>
-						<?php } ?>
-					</table>
-					<table class="data-col2 u-mb20"></table>
-				</td>
-			</tr>
-		</table>
-	</form>
 </div>

web/templates/pages/edit_web.html

@@ -1,21 +1,21 @@
 <!-- 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/web/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-		</div>
-		<div class="l-unit-toolbar__buttonstrip float-right">
-			<a href="/delete/web/cache/?domain=<?=htmlentities($v_domain);?>&token=<?=$_SESSION['token'];?>" class="ui-button cancel <?php if ( $v_nginx_cache == 'yes' || (($v_proxy_template == 'caching' || is_int(strpos($v_proxy_template, 'caching-'))) && $_SESSION['PROXY_SYSTEM'] == 'nginx')) { echo "block"; } else{ echo "u-hidden"; }?>" id="v-clear-cache">
-				<i class="fas fa-trash status-icon red"></i><?=_('Purge Nginx Cache');?>
-			</a>
-			<?php if ($_SESSION['PLUGIN_APP_INSTALLER'] !== 'false') {?>
-				<a href="/add/webapp/?domain=<?=htmlentities($v_domain);?>" class="ui-button cancel" dir="ltr">
-					<i class="fas fa-magic status-icon blue"></i> <?=_('Quick Install App');?>
-				</a>
-			<?php } ?>
-			<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/web/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+    </div>
+    <div class="l-unit-toolbar__buttonstrip float-right">
+      <a href="/delete/web/cache/?domain=<?=htmlentities($v_domain);?>&token=<?=$_SESSION['token'];?>" class="ui-button cancel <?php if ( $v_nginx_cache == 'yes' || (($v_proxy_template == 'caching' || is_int(strpos($v_proxy_template, 'caching-'))) && $_SESSION['PROXY_SYSTEM'] == 'nginx')) { echo "block"; } else{ echo "u-hidden"; }?>" id="v-clear-cache">
+        <i class="fas fa-trash status-icon red"></i><?=_('Purge Nginx Cache');?>
+      </a>
+      <?php if ($_SESSION['PLUGIN_APP_INSTALLER'] !== 'false') {?>
+        <a href="/add/webapp/?domain=<?=htmlentities($v_domain);?>" class="ui-button cancel" dir="ltr">
+          <i class="fas fa-magic status-icon blue"></i> <?=_('Quick Install App');?>
+        </a>
+      <?php } ?>
+      <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 -->
 
@@ -23,617 +23,488 @@
 
 <div class="l-center animated fadeIn">
 
-	<form id="vstobjects" name="v_edit_web" 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_web" 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">
-						<tr>
-							<td class="u-pt18">
-								<span class="page-title"><?=_('Editing Domain');?></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_aliases" class="form-label"><?=_('Aliases');?></label>
-								<textarea class="form-control u-input-width" name="v_aliases" id="v_aliases"><?=htmlentities(trim($v_aliases, "'"))?></textarea>
-							</td>
-						</tr>
-						<?php if ($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') {?>
-						<tr>
-							<td>
-								<span class="alert alert-info alert-with-icon">
-									<i class="fas fa-exclamation"></i>
-									<?=_('Lets Encrypt will obtain a new SSL certificate if web domain aliases are changed.');?>
-								</span>
-							</td>
-						</tr>
-						<?php } ?>
-						<tr>
-							<td class="u-pt6">
-								<label for="v_ip" class="form-label"><?=_('IP Address');?></label>
-								<select class="form-select u-input-width" name="v_ip" id="v_ip">
-									<?php
-										foreach ($ips as $ip => $value) {
-											$display_ip = htmlentities(empty($value['NAT']) ? $ip : "{$value['NAT']}");
-											$ip_selected = ((!empty($v_ip) && $ip == $v_ip) || $v_ip == "'{$ip}'")  ? 'selected' : '';
-											echo "\n\t\t\t\t\t\t\t\t\t\t\t\t<option value=\"{$ip}\" {$ip_selected}>{$display_ip}</option>\n";
-										}
-									?>
-								</select>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt18">
-								<label for="v_stats" class="form-label"><?=_('Web Statistics');?></label>
-								<select class="form-select u-input-width" name="v_stats" id="v_stats">
-									<?php
-										foreach ($stats as $key => $value) {
-											$svalue = "'".$value."'";
-											echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
-											if (empty($v_stats)) $v_stats = 'none';
-											if (( $value == $v_stats ) || ($svalue == $v_stats )){
-												echo ' selected' ;
-											}
-										echo ">". htmlentities(_($value)) ."</option>\n";
-										}
-									?>
-								</select>
-							</td>
-						</tr>
-						<tr class="stats-auth" style="<?php if ($v_stats == 'none') { ?>display:none<?php } ?>">
-							<td class="u-pt6">
-								<div class="form-check">
-									<input class="form-check-input" type="checkbox" name="v_stats_auth" id="v_stats_auth" <?php if (!empty($v_stats_user)) echo 'checked' ?> onclick="javascript:elementHideShow('statstable');">
-									<label for="v_stats_auth">
-										<?=_('Statistics Authorization');?>
-									</label>
-								</div>
-							</td>
-						</tr>
-						<tr class="stats-auth">
-							<td class="u-pl50">
-								<table style="display:<?php if (empty($v_stats_user)) { echo 'none';} else {echo 'block';}?> ;" id="statstable" name="v-add-web-domain-stats-user">
-									<tr>
-										<td class="u-pt6">
-											<label for="v_stats_user" class="form-label"><?=_('Username');?></label>
-											<input type="text" class="form-control u-input-width" name="v_stats_user" id="v_stats_user" value="<?=htmlentities(trim($v_stats_user, "'"))?>">
-										</td>
-									</tr>
-									<tr>
-										<td class="u-pt6">
-											<label for="v_password" class="form-label">
-												<?=_('Password');?> / <a href="javascript:WEBrandom();" class="generate"><?=_('generate');?></a>
-											</label>
-											<div class="u-pos-relative">
-												<input type="text" class="form-control js-password-input" name="v_stats_password" id="v_password" value="<?=trim($v_stats_password, "'")?>">
-											</div>
-										</td>
-									</tr>
-								</table>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<div class="form-check">
-									<input class="form-check-input" type="checkbox" name="v-redirect-checkbox" id="v-redirect-checkbox" <?php if (!empty($v_redirect)) echo 'checked' ?> onclick="javascript:elementHideShow('v_redirect');">
-									<label for="v-redirect-checkbox">
-										<?=_('Enable domain redirection');?>
-									</label>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pl50">
-								<div style="display:<?php if (empty($v_redirect)) { echo 'none';} else {echo 'block';}?> ;" id="v_redirect">
-									<div class="form-check">
-										<input class="form-check-input v-redirect-custom-value" type="radio" name="v-redirect" id="v-redirect-radio-1" value="<?='www.'.htmlentities($v_domain);?>" <?php if ($v_redirect == "www.".$v_domain) echo 'checked'; ?>>
-										<label for="v-redirect-radio-1">
-											<?=sprintf(_('Redirect visitors to %s'),"www.".htmlentities($v_domain));?>
-										</label>
-									</div>
-									<div class="form-check">
-										<input class="form-check-input v-redirect-custom-value" type="radio" name="v-redirect" id="v-redirect-radio-2" value="<?=htmlentities($v_domain);?>" <?php if( $v_redirect == $v_domain) echo 'checked';?> >
-										<label for="v-redirect-radio-2">
-											<?=sprintf(_('Redirect visitors to %s'),htmlentities($v_domain));?>
-										</label>
-									</div>
-									<div class="form-check">
-										<input class="form-check-input v-redirect-custom-value" type="radio" name="v-redirect" id="v-redirect-radio-3" value="custom" <?php if( !empty($v_redirect_custom)) echo 'checked';?>>
-										<label for="v-redirect-radio-3">
-											<?=_("Redirect visitors to a custom domain or web address");?>
-										</label>
-									</div>
-									<table id="custom_redirect" style="margin-left: 22px; display:<?php if (empty($v_redirect_custom)) { echo 'none';} else {echo 'block';}?> ;">
-										<tr>
-											<td class="u-pt6">
-												<label for="v-redirect-custom" class="form-label"><?=_('Target domain or URL');?></label>
-												<input type="text" class="form-control u-input-width" name="v-redirect-custom" id="v-redirect-custom" value="<?=$v_redirect_custom;?>">
-											</td>
-										</tr>
-										<tr>
-											<td class="u-pt6">
-												<label for="v-redirect-code" class="form-label"><?=_('Status code');?>:</label>
-												<select class="form-select" name="v-redirect-code" id="v-redirect-code">
-													<?php foreach ($redirect_code_options as $status_code): ?>
-													<option value="<?=$status_code;?>"
-														<?=($v_redirect_code === $status_code || (empty($v_redirect_code) && $status_code === $v_redirect_code))?' selected="selected" ':''; ?>>
-														<?=$status_code;?>
-													</option>
-													<?php endforeach; ?>
-												</select>
-											</td>
-										</tr>
-									</table>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pt6">
-								<div class="form-check">
-									<input class="form-check-input" type="checkbox" name="v_ssl" id="v_ssl" <?php if ($v_ssl == 'yes') echo 'checked' ?> onclick="javascript:App.Actions.WEB.toggle_ssl(this);">
-									<label for="v_ssl">
-										<?=_('SSL Support');?>
-									</label>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td class="u-pl50">
-								<table style="display:<?php if ($v_ssl == 'no' ) { echo 'none';} else {echo 'block';}?> ;" id="ssltable">
-									<tr>
-										<td class="u-pt6">
-											<div class="form-check">
-												<input class="form-check-input" type="checkbox" name="v_letsencrypt" id="letsencrypt" <?php if($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') echo 'checked' ?> onclick="elementHideShow('letsinfo');App.Actions.WEB.toggle_letsencrypt(this)">
-												<label for="letsencrypt">
-													<?=_('Lets Encrypt Support');?>
-												</label>
-											</div>
-										</td>
-									</tr>
-									<tr>
-										<td class="u-pt6">
-											<div class="form-check">
-												<input class="form-check-input" type="checkbox" name="v_ssl_forcessl" id="v_ssl_forcessl" <?php if($v_ssl_forcessl == 'yes') echo 'checked' ?> onclick="">
-												<label for="v_ssl_forcessl">
-													<?=_('Force SSL/HTTPS');?>
-												</label>
-											</div>
-										</td>
-									</tr>
-									<tr>
-										<td class="u-pt6">
-											<div class="form-check">
-												<input class="form-check-input" type="checkbox" name="v_ssl_hsts" id="ssl_hsts" <?php if($v_ssl_hsts == 'yes') echo 'checked' ?> onclick="App.Actions.WEB.toggle_hsts(this)">
-												<label for="ssl_hsts">
-													<?=_('Enable SSL HSTS');?>
-												</label>
-											</div>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<table id="ssl-details" style="<?php if ($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') { echo 'display: none;'; } ?>">
-												<tr>
-													<td class="u-pt18">
-														<label for="ssl_crt" class="form-label">
-															<?=_('SSL Certificate');?>
-															<span id="generate-csr"> / <a class="generate" target="_blank" href="/generate/ssl/?domain=<?=htmlentities($v_domain)?>"><?=_('Generate CSR');?></a></span>
-														</label>
-														<textarea class="form-control u-min-height100 u-console" name="v_ssl_crt" id="ssl_crt"><?=htmlentities(trim($v_ssl_crt, "'"))?></textarea>
-													</td>
-												</tr>
-												<tr>
-													<td class="u-pt6">
-														<label for="v_ssl_key" class="form-label"><?=_('SSL Key');?></label>
-														<textarea class="form-control u-min-height100 u-console" name="v_ssl_key" id="v_ssl_key"><?=htmlentities(trim($v_ssl_key, "'"))?></textarea>
-													</td>
-												</tr>
-												<tr>
-													<td class="u-pt6">
-														<label for="v_ssl_ca" class="form-label">
-															<?=_('SSL Certificate Authority / Intermediate');?> <span class="optional">(<?=_('optional');?>)</span>
-														</label>
-														<textarea class="form-control u-min-height100 u-console" name="v_ssl_ca" id="v_ssl_ca"><?=htmlentities(trim($v_ssl_ca, "'"))?></textarea>
-													</td>
-												</tr>
-											</table>
-										</td>
-									</tr>
-									<?php if ($v_ssl != 'no' ) { ?>
-										<tr>
-											<td>
-												<table class="additional-info">
-													<tr>
-														<td>
-															<b><?=_('SUBJECT');?>:</b>
-														</td>
-														<td class="details">
-															<?=$v_ssl_subject?>
-														</td>
-													</tr>
-													<?php if ($v_ssl_aliases){?>
-													<tr>
-														<td>
-															<b><?=_('ALIASES');?>:</b>
-														</td>
-														<td class="details">
-															<?=$v_ssl_aliases?>
-														</td>
-													</tr>
-													<?php } ?>
-													<tr>
-														<td>
-															<b><?=_('NOT_BEFORE');?>:</b>
-														</td>
-														<td class="details">
-															<?=$v_ssl_not_before?>
-														</td>
-													</tr>
-													<tr>
-														<td>
-															<b><?=_('NOT_AFTER');?>:</b>
-														</td>
-														<td class="details">
-															<?=$v_ssl_not_after?>
-														</td>
-													</tr>
-													<tr>
-														<td>
-															<b><?=_('SIGNATURE');?>:</b>
-														</td>
-														<td class="details">
-															<?=$v_ssl_signature?>
-														</td>
-													</tr>
-													<tr>
-														<td>
-															<b><?=_('PUB_KEY');?>:</b>
-														</td>
-														<td class="details">
-															<?=$v_ssl_pub_key?>
-														</td>
-													</tr>
-													<tr>
-														<td>
-															<b><?=_('ISSUER');?>:</b>
-														</td>
-														<td class="details">
-															<?=$v_ssl_issuer?>
-														</td>
-													</tr>
-													<tr id="letsinfo" style="display:<?php if ($v_letsencrypt == 'yes' || $v_letsencrypt == 'on' ) { echo 'block';} else {echo 'none';} ?>">
-														<td><a href="#" onclick="elementHideShow('ssl-details'); return false;" class="generate"><?=_('Show Certificate');?></a></td>
-													</tr>
-												</table>
-											</td>
-										</tr>
-									<? } // if ssl is enabled ?>
-								</table>
-							</td>
-						</tr>
+    <div class="app-form">
+      <h1 class="page-title"><?=_('Editing Domain');?></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_aliases" class="form-label"><?=_('Aliases');?></label>
+          <textarea class="form-control" name="v_aliases" id="v_aliases"><?=htmlentities(trim($v_aliases, "'"))?></textarea>
+        </div>
+        <?php if ($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') {?>
+          <div class="u-mb10">
+            <div class="alert alert-info alert-with-icon" role="alert">
+              <i class="fas fa-exclamation"></i>
+              <p><?=_('Lets Encrypt will obtain a new SSL certificate if web domain aliases are changed.');?></p>
+            </div>
+          </div>
+        <?php } ?>
+        <div class="u-mb20">
+          <label for="v_ip" class="form-label"><?=_('IP Address');?></label>
+          <select class="form-select" name="v_ip" id="v_ip">
+            <?php
+              foreach ($ips as $ip => $value) {
+                $display_ip = htmlentities(empty($value['NAT']) ? $ip : "{$value['NAT']}");
+                $ip_selected = ((!empty($v_ip) && $ip == $v_ip) || $v_ip == "'{$ip}'")  ? 'selected' : '';
+                echo "\n\t\t\t\t\t\t\t\t\t\t\t\t<option value=\"{$ip}\" {$ip_selected}>{$display_ip}</option>\n";
+              }
+            ?>
+          </select>
+        </div>
+        <div class="u-mb10">
+          <label for="v_stats" class="form-label"><?=_('Web Statistics');?></label>
+          <select class="form-select" name="v_stats" id="v_stats">
+            <?php
+              foreach ($stats as $key => $value) {
+                $svalue = "'".$value."'";
+                echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
+                if (empty($v_stats)) $v_stats = 'none';
+                if (( $value == $v_stats ) || ($svalue == $v_stats )){
+                  echo ' selected' ;
+                }
+              echo ">". htmlentities(_($value)) ."</option>\n";
+              }
+            ?>
+          </select>
+        </div>
+        <div class="stats-auth u-mb10" style="<?php if ($v_stats == 'none') { ?>display:none<?php } ?>">
+          <div class="form-check">
+            <input class="form-check-input" type="checkbox" name="v_stats_auth" id="v_stats_auth" <?php if (!empty($v_stats_user)) echo 'checked' ?> onclick="javascript:elementHideShow('statstable');">
+            <label for="v_stats_auth">
+              <?=_('Statistics Authorization');?>
+            </label>
+          </div>
+        </div>
+        <div class="stats-auth">
+          <div class="u-pl50">
+            <div style="display:<?php if (empty($v_stats_user)) { echo 'none';} else {echo 'block';}?> ;" id="statstable" name="v-add-web-domain-stats-user">
+              <div class="u-mb10">
+                <label for="v_stats_user" class="form-label"><?=_('Username');?></label>
+                <input type="text" class="form-control" name="v_stats_user" id="v_stats_user" value="<?=htmlentities(trim($v_stats_user, "'"))?>">
+              </div>
+              <div class="u-mb20">
+                <label for="v_password" class="form-label">
+                  <?=_('Password');?> / <a href="javascript:WEBrandom();" class="generate"><?=_('generate');?></a>
+                </label>
+                <div class="u-pos-relative">
+                  <input type="text" class="form-control js-password-input" name="v_stats_password" id="v_password" value="<?=trim($v_stats_password, "'")?>">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="form-check u-mb10">
+          <input class="form-check-input" type="checkbox" name="v-redirect-checkbox" id="v-redirect-checkbox" <?php if (!empty($v_redirect)) echo 'checked' ?> onclick="javascript:elementHideShow('v_redirect');">
+          <label for="v-redirect-checkbox">
+            <?=_('Enable domain redirection');?>
+          </label>
+        </div>
+        <div class="u-pl50 u-mb10">
+          <div style="display:<?php if (empty($v_redirect)) { echo 'none';} else {echo 'block';}?> ;" id="v_redirect">
+            <div class="form-check">
+              <input class="form-check-input v-redirect-custom-value" type="radio" name="v-redirect" id="v-redirect-radio-1" value="<?='www.'.htmlentities($v_domain);?>" <?php if ($v_redirect == "www.".$v_domain) echo 'checked'; ?>>
+              <label for="v-redirect-radio-1">
+                <?=sprintf(_('Redirect visitors to %s'),"www.".htmlentities($v_domain));?>
+              </label>
+            </div>
+            <div class="form-check">
+              <input class="form-check-input v-redirect-custom-value" type="radio" name="v-redirect" id="v-redirect-radio-2" value="<?=htmlentities($v_domain);?>" <?php if( $v_redirect == $v_domain) echo 'checked';?> >
+              <label for="v-redirect-radio-2">
+                <?=sprintf(_('Redirect visitors to %s'),htmlentities($v_domain));?>
+              </label>
+            </div>
+            <div class="form-check">
+              <input class="form-check-input v-redirect-custom-value" type="radio" name="v-redirect" id="v-redirect-radio-3" value="custom" <?php if( !empty($v_redirect_custom)) echo 'checked';?>>
+              <label for="v-redirect-radio-3">
+                <?=_("Redirect visitors to a custom domain or web address");?>
+              </label>
+            </div>
+            <div id="custom_redirect" style="margin-left: 22px; display:<?php if (empty($v_redirect_custom)) { echo 'none';} else {echo 'block';}?> ;">
+              <div class="u-mt15 u-mb10">
+                <label for="v-redirect-custom" class="form-label"><?=_('Target domain or URL');?></label>
+                <input type="text" class="form-control" name="v-redirect-custom" id="v-redirect-custom" value="<?=$v_redirect_custom;?>">
+              </div>
+              <div class="u-mb20">
+                <label for="v-redirect-code" class="form-label"><?=_('Status code');?>:</label>
+                <select class="form-select" name="v-redirect-code" id="v-redirect-code">
+                  <?php foreach ($redirect_code_options as $status_code): ?>
+                  <option value="<?=$status_code;?>"
+                    <?=($v_redirect_code === $status_code || (empty($v_redirect_code) && $status_code === $v_redirect_code))?' selected="selected" ':''; ?>>
+                    <?=$status_code;?>
+                  </option>
+                  <?php endforeach; ?>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" type="checkbox" name="v_ssl" id="v_ssl" <?php if ($v_ssl == 'yes') echo 'checked' ?> onclick="javascript:App.Actions.WEB.toggle_ssl(this);">
+          <label for="v_ssl">
+            <?=_('SSL Support');?>
+          </label>
+        </div>
+        <div class="u-pl50">
+          <div style="display:<?php if ($v_ssl == 'no' ) { echo 'none';} else {echo 'block';}?> ;" id="ssltable">
+            <div class="u-mt15 u-mb10">
+              <div class="form-check">
+                <input class="form-check-input" type="checkbox" name="v_letsencrypt" id="letsencrypt" <?php if($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') echo 'checked' ?> onclick="elementHideShow('letsinfo');App.Actions.WEB.toggle_letsencrypt(this)">
+                <label for="letsencrypt">
+                  <?=_('Lets Encrypt Support');?>
+                </label>
+              </div>
+            </div>
+            <div class="u-mb10">
+              <div class="form-check">
+                <input class="form-check-input" type="checkbox" name="v_ssl_forcessl" id="v_ssl_forcessl" <?php if($v_ssl_forcessl == 'yes') echo 'checked' ?> onclick="">
+                <label for="v_ssl_forcessl">
+                  <?=_('Force SSL/HTTPS');?>
+                </label>
+              </div>
+            </div>
+            <div class="u-mb10">
+              <div class="form-check">
+                <input class="form-check-input" type="checkbox" name="v_ssl_hsts" id="ssl_hsts" <?php if($v_ssl_hsts == 'yes') echo 'checked' ?>>
+                <label for="ssl_hsts">
+                  <?=_('Enable SSL HSTS');?>
+                </label>
+              </div>
+            </div>
+            <div id="ssl-details" style="<?php if ($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') { echo 'display: none;'; } ?>">
+              <div class="u-mb10">
+                <label for="ssl_crt" class="form-label">
+                  <?=_('SSL Certificate');?>
+                  <span id="generate-csr"> / <a class="generate" target="_blank" href="/generate/ssl/?domain=<?=htmlentities($v_domain)?>"><?=_('Generate CSR');?></a></span>
+                </label>
+                <textarea class="form-control u-min-height100 u-console" name="v_ssl_crt" id="ssl_crt"><?=htmlentities(trim($v_ssl_crt, "'"))?></textarea>
+              </div>
+              <div class="u-mb10">
+                <label for="v_ssl_key" class="form-label"><?=_('SSL Key');?></label>
+                <textarea class="form-control u-min-height100 u-console" name="v_ssl_key" id="v_ssl_key"><?=htmlentities(trim($v_ssl_key, "'"))?></textarea>
+              </div>
+              <div class="u-mb10">
+                <label for="v_ssl_ca" class="form-label">
+                  <?=_('SSL Certificate Authority / Intermediate');?> <span class="optional">(<?=_('optional');?>)</span>
+                </label>
+                <textarea class="form-control u-min-height100 u-console" name="v_ssl_ca" id="v_ssl_ca"><?=htmlentities(trim($v_ssl_ca, "'"))?></textarea>
+              </div>
+            </div>
+            <?php if ($v_ssl != 'no' ) { ?>
+              <table class="additional-info">
+                <tr>
+                  <td>
+                    <b><?=_('SUBJECT');?>:</b>
+                  </td>
+                  <td class="details">
+                    <?=$v_ssl_subject?>
+                  </td>
+                </tr>
+                <?php if ($v_ssl_aliases){?>
+                <tr>
+                  <td>
+                    <b><?=_('ALIASES');?>:</b>
+                  </td>
+                  <td class="details">
+                    <?=$v_ssl_aliases?>
+                  </td>
+                </tr>
+                <?php } ?>
+                <tr>
+                  <td>
+                    <b><?=_('NOT_BEFORE');?>:</b>
+                  </td>
+                  <td class="details">
+                    <?=$v_ssl_not_before?>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <b><?=_('NOT_AFTER');?>:</b>
+                  </td>
+                  <td class="details">
+                    <?=$v_ssl_not_after?>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <b><?=_('SIGNATURE');?>:</b>
+                  </td>
+                  <td class="details">
+                    <?=$v_ssl_signature?>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <b><?=_('PUB_KEY');?>:</b>
+                  </td>
+                  <td class="details">
+                    <?=$v_ssl_pub_key?>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <b><?=_('ISSUER');?>:</b>
+                  </td>
+                  <td class="details">
+                    <?=$v_ssl_issuer?>
+                  </td>
+                </tr>
+                <tr id="letsinfo" style="display:<?php if ($v_letsencrypt == 'yes' || $v_letsencrypt == 'on' ) { echo 'block';} else {echo 'none';} ?>">
+                  <td><a href="#" onclick="elementHideShow('ssl-details'); return false;" class="generate"><?=_('Show Certificate');?></a></td>
+                </tr>
+              </table>
+            <? } // if ssl is enabled ?>
+          </div>
+        </div>
 
-						<tr>
-							<td class="u-pt18">
-								<a href="javascript:elementHideShow('advanced-opts');" class="vst-advanced"><?=_('Advanced options');?></a>
-							</td>
-						</tr>
+        <div class="u-pt18">
+          <a href="javascript:elementHideShow('advanced-opts');" class="vst-advanced"><?=_('Advanced options');?></a>
+        </div>
 
-						<tr>
-							<td class="u-pt18">
-								<table id="advanced-opts" style="display: none;">
-									<?php if (($_SESSION['userContext'] === 'admin') || ($_SESSION['userContext'] === 'user') && ($_SESSION['POLICY_USER_EDIT_WEB_TEMPLATES'] === 'yes')) { ?>
-										<tr>
-											<td class="u-pt6">
-												<label for="v_template" class="form-label">
-													<?=_('Web Template') . "<span class='optional'>" . strtoupper($_SESSION['WEB_SYSTEM']) . "</span>";?>
-												</label>
-												<select class="form-select u-input-width" name="v_template" id="v_template">
-													<?php
-														foreach ($templates as $key => $value) {
-															echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
-															$svalue = "'".$value."'";
-															if ((!empty($v_template)) && ( $value == $v_template ) || ($svalue == $v_template)){
-																echo ' selected' ;
-															}
-															echo ">".htmlentities($value)."</option>\n";
-														}
-													?>
-												</select>
-											</td>
-										</tr>
-										<?php if($_SESSION['WEB_SYSTEM'] == 'nginx'){?>
-											<tr>
-												<td>
-													<div class="form-check">
-														<input class="form-check-input" type="checkbox" name="v_nginx_cache_check" id="v_nginx_cache_check" <?php if ($v_nginx_cache == 'yes') echo 'checked' ?> onclick="javascript:elementHideShow('v_nginx_duration');">
-														<label for="v_nginx_cache_check">
-															<?=_('Enable FastCGI Cache'); ?>
-															<a href="https://docs.hestiacp.com/admin_docs/web/fastcgi.html#nginx-fastcgi-cache" target="_blank">
-																<i class="fas fa-question-circle"></i>
-															</a>
-														</label>
-													</div>
-												</td>
-											</tr>
-											<tr>
-												<td class="u-pl50">
-													<table id="v_nginx_duration" style="display:<?php if ($v_nginx_cache != 'yes' ) { echo 'none';} else {echo 'block';}?> ;">
-														<tr>
-															<td class="u-pt6">
-																<label for="v_nginx_cache_duration" class="form-label">
-																	<?=_('Cache Duration'); ?> <span class="optional"><?=_('For example: 30s, 10m or 1d');?>
-																</label>
-																<input type="text" class="form-control u-input-width" name="v_nginx_cache_duration" id="v_nginx_cache_duration" value="<?=htmlentities(trim($v_nginx_cache_duration, "'"))?>">
-															</td>
-														</tr>
-													</table>
-												</td>
-											</tr>
-										<?php } ?>
-										<?php if (!empty($_SESSION['WEB_BACKEND'])) { ?>
-											<tr>
-												<td class="u-pt6">
-													<label for="v_backend_template" class="form-label">
-														<?=_('Backend Template') . " <span class='optional'>" . strtoupper($_SESSION['WEB_BACKEND']) . "</span>";?>
-													</label>
-													<select class="form-select u-input-width" name="v_backend_template" id="v_backend_template">
-														<?php
-															foreach ($backend_templates as $key => $value) {
-																echo "\t\t\t\t<option value=\"".$value."\"";
-																$svalue = "'".$value."'";
-																if ((!empty($v_backend_template)) && ( $value == $v_backend_template ) || ($svalue == $v_backend_template)){
-																	echo ' selected' ;
-																}
-																if ((empty($v_backend_template)) && ($value == 'default')){
-																	echo ' selected' ;
-																}
-																echo ">".htmlentities($value)."</option>\n";
-															}
-														?>
-													</select>
-												</td>
-											</tr>
-										<?php }?>
-										<?php if (!empty($_SESSION['PROXY_SYSTEM'])) { ?>
-											<tr style="display: none;">
-												<td class="u-pt6">
-													<div class="form-check">
-														<input class="form-check-input" type="checkbox" name="v_proxy" id="v_proxy" <?php if (!empty($v_proxy)) echo 'checked' ?> onclick="javascript:elementHideShow('proxytable');">
-														<label for="v_proxy">
-															<?=_('Proxy Support') . "<span class='optional'>" . strtoupper($_SESSION['PROXY_SYSTEM']) . "</span>";?>
-														</label>
-													</div>
-												</td>
-											</tr>
-											<tr>
-												<td>
-													<table style="display:<?php if (empty($v_proxy)) { echo 'none';} else {echo 'block';}?> ;" id="proxytable">
-														<tr>
-															<td class="u-pt6">
-																<label for="v_proxy_template" class="form-label"><?=_('Proxy Template');?></label>
-																<select class="form-select u-input-width" name="v_proxy_template" id="v_proxy_template">
-																	<?php
-																		foreach ($proxy_templates as $key => $value) {
-																			echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
-																			$svalue = "'".$value."'";
-																			if ((!empty($v_proxy_template)) && ( $value == $v_proxy_template ) || ($svalue == $v_proxy_template)){
-																				echo ' selected' ;
-																			}
-																			if ((empty($v_proxy_template)) && ($value == 'default')){
-																				echo ' selected' ;
-																			}
-																			echo ">".htmlentities($value)."</option>\n";
-																		}
-																	?>
-																</select>
-															</td>
-														</tr>
-														<tr>
-															<td class="u-pt6">
-																<label for="v_proxy_ext" class="form-label"><?=_('Proxy Extensions');?></label>
-																<textarea class="form-control u-input-width u-min-height100" name="v_proxy_ext" id="v_proxy_ext"><?php if (!empty($v_proxy_ext)) { echo htmlentities(trim($v_proxy_ext, "'"));} else { echo 'jpg, jpeg, gif, png, ico, svg, css, zip, tgz, gz, rar, bz2, exe, pdf, doc, xls, ppt, txt, odt, ods, odp, odf, tar, bmp, rtf, js, mp3, avi, mpeg, flv, html, htm'; } ?></textarea>
-															</td>
-														</tr>
-													</table>
-												</td>
-											</tr>
-										<?php } ?>
-									<?php } ?>
-									<tr>
-										<td class="u-pt6">
-											<div class="form-check">
-												<input class="form-check-input" type="checkbox" name="v_custom_doc_root_check" id="v_custom_doc_root_check" <?php if (!empty($v_custom_doc_root)) echo 'checked' ?> onclick="javascript:elementHideShow('v_custom_doc_root');">
-												<label for="v_custom_doc_root_check">
-													<?=_('Custom document root');?>
-												</label>
-											</div>
-										</td>
-									</tr>
-									<tr>
-										<td class="u-pl50">
-											<table style="display:<?php if (empty($v_custom_doc_root)) { echo 'none';} else {echo 'block';}?> ;" id="v_custom_doc_root">
-												<tr>
-													<td class="u-pt6">
-														<label for="v-custom-doc-domain" class="form-label"><?=_('Point to');?></label>
-														<input type="hidden" name="v-custom-doc-root_prepath" value="<?=$v_custom_doc_root_prepath;?>">
-														<select class="form-select" name="v-custom-doc-domain" id="v-custom-doc-domain">
-															<?php foreach ($user_domains as $domain): ?>
-															<option value="<?=htmlentities($domain);?>"
-																<?=($v_custom_doc_domain === $domain || (empty($v_custom_doc_domain) && $domain === $v_domain))?' selected="selected" ':''; ?>>
-																<?=htmlentities($domain);?>
-															</option>
-															<?php endforeach; ?>
-														</select>
-													</td>
-												</tr>
-												<tr>
-													<td class="u-pt6">
-														<label for="v-custom-doc-folder" class="form-label">
-															<?php print( _('Directory'));?> <span class="optional">(<?=_('optional');?>)</span>
-														</label>
-														<input type="text" class="form-control u-input-width" name="v-custom-doc-folder" id="v-custom-doc-folder" value="<?=htmlentities(trim($v_custom_doc_folder, "'"))?>">
-														<small class="custom_docroot_hint"></small>
-													</td>
-												</tr>
-											</table>
-										</td>
-									</tr>
-									<?php if (in_array($_SESSION['FTP_SYSTEM'], array('vsftpd', 'proftpd'))) { ?>
-										<tr>
-											<td class="u-pt6">
-												<div class="form-check">
-													<input class="form-check-input" type="checkbox" name="v_ftp" id="v_ftp" <?php if (!empty($v_ftp_user)) echo 'checked' ?> onclick="App.Actions.WEB.toggle_additional_ftp_accounts(this)">
-													<label for="v_ftp">
-														<?=_('Additional FTP Account');?>
-													</label>
-												</div>
-											</td>
-										</tr>
-										<tr>
-											<td id="ftp_users">
-												<?php foreach ($v_ftp_users as $i => $ftp_user): ?>
-												<?php
-													$v_ftp_user     = $ftp_user['v_ftp_user'];
-													$v_ftp_password = $ftp_user['v_ftp_password'];
-													$v_ftp_path     = $ftp_user['v_ftp_path'];
-													$v_ftp_email    = $ftp_user['v_ftp_email'];
-													$v_ftp_pre_path = $ftp_user['v_ftp_pre_path'];
-												?>
-												<table style="display:<?php if (empty($v_ftp_user)) { echo 'none';} else {echo 'block';}?> ;" class="ftptable ftptable-nrm" name="v_add_domain_ftp">
-													<tr>
-														<td class="u-pt6">
-															<?=_('FTP');?> #<span class="ftp-user-number"><?=$i + 1; ?></span> <a class="ftp-remove-user additional-control" onCLick="App.Actions.WEB.remove_ftp_user(this)"><?=_('delete');?></a>
-															<input type="hidden" class="v-ftp-user-deleted" name="v_ftp_user[<?=$i ?>][delete]" value="0">
-															<input type="hidden" class="v-ftp-user-is-new" name="v_ftp_user[<?=$i ?>][is_new]" value="<?=htmlentities($ftp_user['is_new']) ?>">
-														</td>
-													</tr>
-													<tr>
-														<td class="u-pl50 u-pt6">
-															<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>
-															</label>
-															<input type="text" class="form-control v-ftp-user u-input-width" <?=$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, "'"))?>">
-															<input type="hidden" name="v_record_id" value="<?=htmlentities(trim($v_record_id, "'"))?>">
-															<small class="hint"></small>
-														</td>
-													</tr>
-													<tr>
-														<td class="u-pl50 u-pt6">
-															<label for="v_ftp_user[<?=$i ?>][v_ftp_password]" class="form-label">
-																<?=_('Password');?> / <a href="javascript:void(0);" onClick="FTPrandom(this)" ; class="generate"><?=_('generate');?></a>
-															</label>
-															<input type="text" class="form-control v-ftp-user-psw" name="v_ftp_user[<?=$i ?>][v_ftp_password]" id="v_ftp_user[<?=$i ?>][v_ftp_password]" value="<?=htmlentities(trim($v_ftp_password, "'"))?>">
-														</td>
-													</tr>
-													<tr>
-														<td class="u-pl50 u-pt6">
-															<label for="v_ftp_user[<?=$i ?>][v_ftp_path]" class="form-label"><?=_('Path');?></label>
-															<input type="hidden" name="v_ftp_pre_path" value="<?=!empty($v_ftp_pre_path) ? htmlentities(trim($v_ftp_pre_path, "'")) : '/'; ?>">
-															<input type="hidden" name="v_ftp_user[<?=$i ?>][v_ftp_path_prev]" value="<?php if (!empty($v_ftp_path)) echo ($v_ftp_path[0] != '/' ? '/' : '').htmlentities(trim($v_ftp_path, "'")) ?>">
-															<input type="text" class="form-control v-ftp-path u-input-width" name="v_ftp_user[<?=$i ?>][v_ftp_path]" id="v_ftp_user[<?=$i ?>][v_ftp_path]" value="<?php if (!empty($v_ftp_path)) echo ($v_ftp_path[0] != '/' ? '/' : '').htmlentities(trim($v_ftp_path, "'")) ?>">
-															<span class="ftp-path-prefix"><?=htmlentities(trim($v_ftp_pre_path, "'"))?></span><span class="ftp-path-value v-ftp-path-hint"></span>
-														</td>
-													</tr>
-													<?php if ($ftp_user['is_new'] == 1): ?>
-														<tr>
-															<td class="u-pl50 u-pt6">
-																<label for="v_ftp_user[<?=$i ?>][v_ftp_email]" class="form-label"><?=_('Send FTP credentials to email');?></label>
-																<input type="text" class="form-control vst-email-alert-on-psw u-input-width" name="v_ftp_user[<?=$i ?>][v_ftp_email]" id="v_ftp_user[<?=$i ?>][v_ftp_email]" value="<?=htmlentities(trim($v_ftp_email, "'"))?>">
-															</td>
-														</tr>
-													<?php endif; ?>
-												</table>
-												<?php endforeach; ?>
-											</td>
-										</tr>
+        <div id="advanced-opts" style="display: none;">
+          <?php if (($_SESSION['userContext'] === 'admin') || ($_SESSION['userContext'] === 'user') && ($_SESSION['POLICY_USER_EDIT_WEB_TEMPLATES'] === 'yes')) { ?>
+            <div class="u-mt15 u-mb10">
+              <label for="v_template" class="form-label">
+                <?=_('Web Template') . "<span class='optional'>" . strtoupper($_SESSION['WEB_SYSTEM']) . "</span>";?>
+              </label>
+              <select class="form-select" name="v_template" id="v_template">
+                <?php
+                  foreach ($templates as $key => $value) {
+                    echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
+                    $svalue = "'".$value."'";
+                    if ((!empty($v_template)) && ( $value == $v_template ) || ($svalue == $v_template)){
+                      echo ' selected' ;
+                    }
+                    echo ">".htmlentities($value)."</option>\n";
+                  }
+                ?>
+              </select>
+            </div>
+            <?php if($_SESSION['WEB_SYSTEM'] == 'nginx'){?>
+              <div class="u-mb10">
+                <div class="form-check">
+                  <input class="form-check-input" type="checkbox" name="v_nginx_cache_check" id="v_nginx_cache_check" <?php if ($v_nginx_cache == 'yes') echo 'checked' ?> onclick="javascript:elementHideShow('v_nginx_duration');">
+                  <label for="v_nginx_cache_check">
+                    <?=_('Enable FastCGI Cache'); ?>
+                    <a href="https://docs.hestiacp.com/admin_docs/web/fastcgi.html#nginx-fastcgi-cache" target="_blank">
+                      <i class="fas fa-question-circle"></i>
+                    </a>
+                  </label>
+                </div>
+              </div>
+              <div class="u-pl50">
+                <div id="v_nginx_duration" style="display:<?php if ($v_nginx_cache != 'yes' ) { echo 'none';} else {echo 'block';}?> ;">
+                  <div class="u-pt6">
+                    <label for="v_nginx_cache_duration" class="form-label">
+                      <?=_('Cache Duration'); ?> <span class="optional"><?=_('For example: 30s, 10m or 1d');?>
+                    </label>
+                    <input type="text" class="form-control" name="v_nginx_cache_duration" id="v_nginx_cache_duration" value="<?=htmlentities(trim($v_nginx_cache_duration, "'"))?>">
+                  </div>
+                </table>
+              </div>
+            <?php } ?>
+            <?php if (!empty($_SESSION['WEB_BACKEND'])) { ?>
+              <div class="u-mb10">
+                <label for="v_backend_template" class="form-label">
+                  <?=_('Backend Template') . " <span class='optional'>" . strtoupper($_SESSION['WEB_BACKEND']) . "</span>";?>
+                </label>
+                <select class="form-select" name="v_backend_template" id="v_backend_template">
+                  <?php
+                    foreach ($backend_templates as $key => $value) {
+                      echo "\t\t\t\t<option value=\"".$value."\"";
+                      $svalue = "'".$value."'";
+                      if ((!empty($v_backend_template)) && ( $value == $v_backend_template ) || ($svalue == $v_backend_template)){
+                        echo ' selected' ;
+                      }
+                      if ((empty($v_backend_template)) && ($value == 'default')){
+                        echo ' selected' ;
+                      }
+                      echo ">".htmlentities($value)."</option>\n";
+                    }
+                  ?>
+                </select>
+              </div>
+            <?php }?>
+            <?php if (!empty($_SESSION['PROXY_SYSTEM'])) { ?>
+              <div style="display: none;">
+                <div class="form-check u-mb10">
+                  <input class="form-check-input" type="checkbox" name="v_proxy" id="v_proxy" <?php if (!empty($v_proxy)) echo 'checked' ?> onclick="javascript:elementHideShow('proxytable');">
+                  <label for="v_proxy">
+                    <?=_('Proxy Support') . "<span class='optional'>" . strtoupper($_SESSION['PROXY_SYSTEM']) . "</span>";?>
+                  </label>
+                </div>
+              </div>
+              <div style="display:<?php if (empty($v_proxy)) { echo 'none';} else {echo 'block';}?> ;" id="proxytable">
+                <div class="u-mb10">
+                  <label for="v_proxy_template" class="form-label"><?=_('Proxy Template');?></label>
+                  <select class="form-select" name="v_proxy_template" id="v_proxy_template">
+                    <?php
+                      foreach ($proxy_templates as $key => $value) {
+                        echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
+                        $svalue = "'".$value."'";
+                        if ((!empty($v_proxy_template)) && ( $value == $v_proxy_template ) || ($svalue == $v_proxy_template)){
+                          echo ' selected' ;
+                        }
+                        if ((empty($v_proxy_template)) && ($value == 'default')){
+                          echo ' selected' ;
+                        }
+                        echo ">".htmlentities($value)."</option>\n";
+                      }
+                    ?>
+                  </select>
+                </div>
+                <div class="u-mb10">
+                  <label for="v_proxy_ext" class="form-label"><?=_('Proxy Extensions');?></label>
+                  <textarea class="form-control u-min-height100" name="v_proxy_ext" id="v_proxy_ext"><?php if (!empty($v_proxy_ext)) { echo htmlentities(trim($v_proxy_ext, "'"));} else { echo 'jpg, jpeg, gif, png, ico, svg, css, zip, tgz, gz, rar, bz2, exe, pdf, doc, xls, ppt, txt, odt, ods, odp, odf, tar, bmp, rtf, js, mp3, avi, mpeg, flv, html, htm'; } ?></textarea>
+                </div>
+              </table>
+            <?php } ?>
+          <?php } ?>
+          <div class="u-mb10">
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" name="v_custom_doc_root_check" id="v_custom_doc_root_check" <?php if (!empty($v_custom_doc_root)) echo 'checked' ?> onclick="javascript:elementHideShow('v_custom_doc_root');">
+              <label for="v_custom_doc_root_check">
+                <?=_('Custom document root');?>
+              </label>
+            </div>
+          </div>
+          <div class="u-pl50">
+            <div style="display:<?php if (empty($v_custom_doc_root)) { echo 'none';} else {echo 'block';}?> ;" id="v_custom_doc_root">
+              <div class="u-mb10">
+                <label for="v-custom-doc-domain" class="form-label"><?=_('Point to');?></label>
+                <input type="hidden" name="v-custom-doc-root_prepath" value="<?=$v_custom_doc_root_prepath;?>">
+                <select class="form-select" name="v-custom-doc-domain" id="v-custom-doc-domain">
+                  <?php foreach ($user_domains as $domain): ?>
+                  <option value="<?=htmlentities($domain);?>"
+                    <?=($v_custom_doc_domain === $domain || (empty($v_custom_doc_domain) && $domain === $v_domain))?' selected="selected" ':''; ?>>
+                    <?=htmlentities($domain);?>
+                  </option>
+                  <?php endforeach; ?>
+                </select>
+              </div>
+              <div class="u-mb10">
+                <label for="v-custom-doc-folder" class="form-label">
+                  <?php print( _('Directory'));?> <span class="optional">(<?=_('optional');?>)</span>
+                </label>
+                <input type="text" class="form-control" name="v-custom-doc-folder" id="v-custom-doc-folder" value="<?=htmlentities(trim($v_custom_doc_folder, "'"))?>">
+                <small class="custom_docroot_hint"></small>
+              </div>
+            </div>
+          </div>
+          <?php if (in_array($_SESSION['FTP_SYSTEM'], array('vsftpd', 'proftpd'))) { ?>
+            <div class="u-mb10">
+              <div class="form-check">
+                <input class="form-check-input" type="checkbox" name="v_ftp" id="v_ftp" <?php if (!empty($v_ftp_user)) echo 'checked' ?> onclick="App.Actions.WEB.toggle_additional_ftp_accounts(this)">
+                <label for="v_ftp">
+                  <?=_('Additional FTP Account');?>
+                </label>
+              </div>
+            </div>
+            <div id="ftp_users">
+              <?php foreach ($v_ftp_users as $i => $ftp_user): ?>
+              <?php
+                $v_ftp_user     = $ftp_user['v_ftp_user'];
+                $v_ftp_password = $ftp_user['v_ftp_password'];
+                $v_ftp_path     = $ftp_user['v_ftp_path'];
+                $v_ftp_email    = $ftp_user['v_ftp_email'];
+                $v_ftp_pre_path = $ftp_user['v_ftp_pre_path'];
+              ?>
+              <div style="display:<?php if (empty($v_ftp_user)) { echo 'none';} else {echo 'block';}?> ;" class="js-ftp-account js-ftp-account-nrm" name="v_add_domain_ftp">
+                <div class="u-mb10">
+                  <?=_('FTP');?> #<span class="ftp-user-number"><?=$i + 1; ?></span> <a class="ftp-remove-user additional-control" onclick="App.Actions.WEB.remove_ftp_user(this)"><?=_('delete');?></a>
+                  <input type="hidden" class="v-ftp-user-deleted" name="v_ftp_user[<?=$i ?>][delete]" value="0">
+                  <input type="hidden" class="v-ftp-user-is-new" name="v_ftp_user[<?=$i ?>][is_new]" value="<?=htmlentities($ftp_user['is_new']) ?>">
+                </div>
+                <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>
+                  </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, "'"))?>">
+                  <input type="hidden" name="v_record_id" value="<?=htmlentities(trim($v_record_id, "'"))?>">
+                  <small class="hint"></small>
+                </div>
+                <div class="u-pl50 u-mb10">
+                  <label for="v_ftp_user[<?=$i ?>][v_ftp_password]" class="form-label">
+                    <?=_('Password');?> / <a href="javascript:void(0);" onclick="FTPrandom(this)" ; class="generate"><?=_('generate');?></a>
+                  </label>
+                  <input type="text" class="form-control v-ftp-user-psw" name="v_ftp_user[<?=$i ?>][v_ftp_password]" id="v_ftp_user[<?=$i ?>][v_ftp_password]" value="<?=htmlentities(trim($v_ftp_password, "'"))?>">
+                </div>
+                <div class="u-pl50 u-mb10">
+                  <label for="v_ftp_user[<?=$i ?>][v_ftp_path]" class="form-label"><?=_('Path');?></label>
+                  <input type="hidden" name="v_ftp_pre_path" value="<?=!empty($v_ftp_pre_path) ? htmlentities(trim($v_ftp_pre_path, "'")) : '/'; ?>">
+                  <input type="hidden" name="v_ftp_user[<?=$i ?>][v_ftp_path_prev]" value="<?php if (!empty($v_ftp_path)) echo ($v_ftp_path[0] != '/' ? '/' : '').htmlentities(trim($v_ftp_path, "'")) ?>">
+                  <input type="text" class="form-control v-ftp-path" name="v_ftp_user[<?=$i ?>][v_ftp_path]" id="v_ftp_user[<?=$i ?>][v_ftp_path]" value="<?php if (!empty($v_ftp_path)) echo ($v_ftp_path[0] != '/' ? '/' : '').htmlentities(trim($v_ftp_path, "'")) ?>">
+                  <span class="ftp-path-prefix"><?=htmlentities(trim($v_ftp_pre_path, "'"))?></span><span class="ftp-path-value v-ftp-path-hint"></span>
+                </div>
+                <?php if ($ftp_user['is_new'] == 1): ?>
+                  <div class="u-pl50 u-mb10">
+                    <label for="v_ftp_user[<?=$i ?>][v_ftp_email]" class="form-label"><?=_('Send FTP credentials to email');?></label>
+                    <input type="email" class="form-control vst-email-alert-on-psw" name="v_ftp_user[<?=$i ?>][v_ftp_email]" id="v_ftp_user[<?=$i ?>][v_ftp_email]" value="<?=htmlentities(trim($v_ftp_email, "'"))?>">
+                  </div>
+                <?php endif; ?>
+              </div>
+              <?php endforeach; ?>
+            </div>
 
-										<tr class="add-new-ftp-user-button" style="<?=!empty($v_ftp_user) ? '' : 'display:none;' ?>">
-											<td class="u-pt18 v-add-new-user step-bottom">
-												<a class="additional-control vst-advanced" onClick="App.Actions.WEB.add_ftp_user_form()"><?=_('Add one more FTP Account');?></a>
-											</td>
-										</tr>
-									<?php } ?>
-								</table>
-							</td>
-						</tr>
-					</table>
-					<table class="data-col2 u-mb20">
-					</table>
-				</td>
-			</tr>
-		</table>
-	</form>
+            <div class="add-new-ftp-user-button" style="<?=!empty($v_ftp_user) ? '' : 'display:none;' ?>">
+              <div class="u-pt18 v-add-new-user step-bottom">
+                <a class="additional-control vst-advanced" onclick="App.Actions.WEB.add_ftp_user_form()"><?=_('Add one more FTP Account');?></a>
+              </div>
+            </div>
+          <?php } ?>
+        </div>
+      </div>
+    </div>
 
-	<div id="templates" class="u-hidden">
-		<table class="ftptable ftptable-nrm" name="v_add_domain_ftp">
-			<tr>
-				<td class="u-pt6">
-					<?=_('FTP') ?> #<span class="ftp-user-number"></span> <a class="ftp-remove-user additional-control" onCLick="App.Actions.WEB.remove_ftp_user(this)"><?=_('delete');?></a>
-					<input type="hidden" class="v-ftp-user-deleted" name="v_ftp_user[%INDEX%][delete]" value="0">
-					<input type="hidden" class="v-ftp-user-is-new" name="v_ftp_user[%INDEX%][is_new]" value="1">
-				</td>
-			</tr>
-			<tr>
-				<td class="u-pl50 u-pt6">
-					<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>
-					</label>
-					<input type="text" class="form-control v-ftp-user u-input-width" name="v_ftp_user[%INDEX%][v_ftp_user]" id="v_ftp_user[%INDEX%][v_ftp_user]" value="">
-					<small class="hint"></small>
-				</td>
-			</tr>
-			<tr>
-				<td class="u-pl50 u-pt6">
-					<label for="v_ftp_user[%INDEX%][v_ftp_password]" class="form-label">
-						<?=_('Password');?> / <a href="javascript:void(0);" onClick="FTPrandom(this)" ; class="generate"><?=_('generate');?></a>
-					</label>
-					<input type="text" class="form-control v-ftp-user-psw" name="v_ftp_user[%INDEX%][v_ftp_password]" id="v_ftp_user[%INDEX%][v_ftp_password]">
-				</td>
-			</tr>
-			<tr>
-				<td class="u-pl50 u-pt6">
-					<label for="v_ftp_user[%INDEX%][v_ftp_path]" class="form-label"><?=_('Path');?></label>
-					<input type="hidden" name="v_ftp_pre_path" value="">
-					<input type="text" class="form-control v-ftp-path u-input-width" name="v_ftp_user[%INDEX%][v_ftp_path]" id="v_ftp_user[%INDEX%][v_ftp_path]" value="">
-					<span class="ftp-path-prefix"><?=htmlentities(trim($v_ftp_pre_path_new_user, "'"))?></span><span class="ftp-path-value v-ftp-path-hint"></span>
-				</td>
-			</tr>
-			<tr>
-				<td class="u-pl50 u-pt6">
-					<label for="v_ftp_user[%INDEX%][v_ftp_email]" class="form-label"><?=_('Send FTP credentials to email');?></label>
-					<input type="text" class="form-control vst-email-alert-on-psw u-input-width" name="v_ftp_user[%INDEX%][v_ftp_email]" id="v_ftp_user[%INDEX%][v_ftp_email]" value="">
-				</td>
-			</tr>
-		</table>
-	</div>
+  </form>
+
+</div>
+
+<div id="templates" class="u-hidden">
+  <div class="js-ftp-account js-ftp-account-nrm" name="v_add_domain_ftp">
+    <div class="u-mb10">
+      <?=_('FTP') ?> #<span class="ftp-user-number"></span> <a class="ftp-remove-user additional-control" onclick="App.Actions.WEB.remove_ftp_user(this)"><?=_('delete');?></a>
+      <input type="hidden" class="v-ftp-user-deleted" name="v_ftp_user[%INDEX%][delete]" value="0">
+      <input type="hidden" class="v-ftp-user-is-new" name="v_ftp_user[%INDEX%][is_new]" value="1">
+    </div>
+    <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>
+      </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>
+    </div>
+    <div class="u-pl50 u-mb10">
+      <label for="v_ftp_user[%INDEX%][v_ftp_password]" class="form-label">
+        <?=_('Password');?> / <a href="javascript:void(0);" onclick="FTPrandom(this)" ; class="generate"><?=_('generate');?></a>
+      </label>
+      <input type="text" class="form-control v-ftp-user-psw" name="v_ftp_user[%INDEX%][v_ftp_password]" id="v_ftp_user[%INDEX%][v_ftp_password]">
+    </div>
+    <div class="u-pl50 u-mb10">
+      <label for="v_ftp_user[%INDEX%][v_ftp_path]" class="form-label"><?=_('Path');?></label>
+      <input type="hidden" name="v_ftp_pre_path" value="">
+      <input type="text" class="form-control v-ftp-path" name="v_ftp_user[%INDEX%][v_ftp_path]" id="v_ftp_user[%INDEX%][v_ftp_path]" value="">
+      <span class="ftp-path-prefix"><?=htmlentities(trim($v_ftp_pre_path_new_user, "'"))?></span><span class="ftp-path-value v-ftp-path-hint"></span>
+    </div>
+    <div class="u-pl50 u-mb10">
+      <label for="v_ftp_user[%INDEX%][v_ftp_email]" class="form-label"><?=_('Send FTP credentials to email');?></label>
+      <input type="email" class="form-control vst-email-alert-on-psw" name="v_ftp_user[%INDEX%][v_ftp_email]" id="v_ftp_user[%INDEX%][v_ftp_email]" value="">
+    </div>
+  </div>
 </div>
 
 <script>
-	GLOBAL.FTP_USER_PREFIX = "<?=$user_plain.'_';?>";
+  GLOBAL.FTP_USER_PREFIX = "<?=$user_plain.'_';?>";
 </script>

web/templates/pages/list_access_key.html

@@ -26,7 +26,7 @@ if (!empty($_POST['ok'])) {
 <div class="l-center animated fadeIn">
 
 	<form id="vstobjects">
-		<table class="data mode-add">
+		<table class="data">
 			<tr class="data-add">
 				<td class="data-dotted">
 					<table class="data-col1">

web/templates/pages/setup_webapp.html

@@ -31,13 +31,12 @@
 
 			<div class="app-form">
 				<?php if( !$WebappInstaller->isDomainRootClean()): ?>
-					<span class="alert alert-info alert-with-icon">
+					<div class="alert alert-info alert-with-icon u-input-width" role="alert">
 						<i class="fas fa-info"></i>
-						<?=_('Data loss warning!');?><br><br>
-						<?=_('Your web folder already has files uploaded to it. The installer will overwrite your files and / or the installation might fail.');?><br><br>
-						<?php echo sprintf(_('Please make sure ~/web/%s/public_html is empty!'),$v_domain);?>
-					</span>
-					<br>
+						<p class="u-mb10"><?=_('Data loss warning!');?></p>
+						<p class="u-mb10"><?=_('Your web folder already has files uploaded to it. The installer will overwrite your files and / or the installation might fail.');?></p>
+						<p><?php echo sprintf(_('Please make sure ~/web/%s/public_html is empty!'),$v_domain);?></p>
+					</div>
 				<?php endif; ?>
 				<div class="u-input-width u-pt18">
 					<?php foreach ($WebappInstaller->getOptions() as $form_name => $form_control):?>