Remove tables from login pages (#3006)

web/css/src/themes/dark.css

@@ -598,10 +598,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
 .vst-ok a:active {
 }
 
-.login-box td {
-  color: #d4d4d4;
-}
-
 .form-label,
 .form-check label {
   color: #d4d4d4;
@@ -734,7 +730,7 @@ a.vst-text:active b {
   text-transform: none !important;
 }
 
-.login-box .vst-advanced:hover {
+.login .vst-advanced:hover {
   color: #ff3478 !important;
   background-color: transparent;
   border-color: transparent;
@@ -743,7 +739,7 @@ a.vst-text:active b {
   box-shadow: none !important;
 }
 
-.login-box .vst-advanced:active {
+.login .vst-advanced:active {
   color: #be1f54 !important;
   border: none !important;
   background: none !important;
@@ -757,7 +753,7 @@ a.vst-text:active b {
   text-decoration: none;
 }
 
-.login-box .vst-advanced:active,
+.login .vst-advanced:active,
 .vst-advanced:active {
   color: #fff;
   background-color: #be1f54;
@@ -765,7 +761,7 @@ a.vst-text:active b {
   text-decoration: none;
 }
 
-.login-box .vst-advanced {
+.login .vst-advanced {
   border-bottom: none;
   color: #326b9b;
   font-size: 0.85em !important;
@@ -1035,11 +1031,15 @@ a.button.cancel {
 
 .login {
   background-color: #282828;
-  box-shadow: 0 8px 25px rgb(0 0 0 / 30%), inset 0 0 2px rgb(0 0 0 / 25%) !important;
+  box-shadow: 0 8px 25px rgb(0 0 0 / 30%), inset 0 0 2px rgb(0 0 0 / 25%);
 }
 
-.login-welcome {
-  color: #fff !important;
+.login-title {
+  color: #fff;
+}
+
+.login a.error {
+  color: #f864fa;
 }
 
 .form-title {
@@ -1055,10 +1055,6 @@ a.button.cancel {
   box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
 }
 
-.login a.error {
-  color: #f864fa;
-}
-
 .hestiacp {
 
 }
@@ -1071,10 +1067,6 @@ a.button.cancel {
   color: #ff3478;
 }
 
-.login-bottom {
-
-}
-
 .l-unit.selected {
   background-color: #454545;
   color: #d4d4d4;

web/css/src/themes/default.css

@@ -1049,6 +1049,8 @@ div.l-content > div.l-separator:nth-of-type(4) {
 .body-login,
 .body-reset {
   height: auto;
+  display: flex;
+  justify-content: center;
   padding-top: 10%;
   background: rgb(102 158 231) !important;
   background: radial-gradient(circle, rgb(102 158 231 / 100%) 0%, rgb(43 86 177 / 100%) 100%) !important;
@@ -2158,13 +2160,6 @@ body.mobile .l-icon-shortcuts {
   color: #d53067;
 }
 
-.login-box td {
-  color: #4b4b4b;
-  font-size: 0.85rem;
-  padding-bottom: 4px;
-  font-weight: 600;
-}
-
 .jump-top {
   margin-top: -60px;
 }
@@ -2351,7 +2346,7 @@ a.vst-text:active b {
   text-transform: none;
 }
 
-.login-box .vst-advanced:hover {
+.login .vst-advanced:hover {
   color: #c36;
   background-color: transparent;
   border-color: transparent;
@@ -2368,7 +2363,7 @@ a.vst-text:active b {
   text-decoration: none;
 }
 
-.login-box .vst-advanced:active {
+.login .vst-advanced:active {
   color: #fff;
   background-color: #f7d616;
   border-color: #f7d616;
@@ -2383,7 +2378,7 @@ a.vst-text:active b {
   font-size: unset;
 }
 
-.login-box .vst-advanced {
+.login .vst-advanced {
   border-bottom: none;
   color: #326b9b;
   text-decoration: none;
@@ -2759,13 +2754,25 @@ a.button.cancel {
 }
 
 .login {
+  display: flex;
+  padding: 80px 50px;
   background-color: rgb(255 255 255 / 70%);
+  border-radius: 6px;
   box-shadow:
     0 8px 25px rgb(0 0 0 / 30%),
     inset 0 0 2px rgb(255 255 255 / 100%);
-  vertical-align: top;
-  width: 500px;
-  border-radius: 6px;
+}
+
+.login-title {
+  color: #4b4b4b;
+  font-size: 1.05rem;
+  font-weight: 500;
+  margin-bottom: 30px;
+}
+
+.login a.error {
+  color: #be5abf;
+  font-size: 0.8rem;
 }
 
 .login .form-control {
@@ -2776,13 +2783,8 @@ a.button.cancel {
   font-size: 0.8rem !important;
 }
 
-.login-welcome {
-  font-size: 1.05rem !important;
-  font-weight: 500 !important;
-  padding-bottom: 30px !important;
-}
-
 .form-title {
+  color: #4b4b4b;
   font-size: 1.4rem;
   font-weight: 500;
   padding-bottom: 30px;
@@ -2812,11 +2814,6 @@ a.button.cancel {
   box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
 }
 
-.login a.error {
-  color: #be5abf;
-  font-size: 0.8rem;
-}
-
 .hestiacp {
   color: #505050;
 }
@@ -2829,14 +2826,6 @@ a.button.cancel {
   color: #c36;
 }
 
-.login-bottom {
-  height: 60px;
-  text-align: right;
-  vertical-align: top;
-  font-size: 0.75rem !important;
-  margin-right: 65px;
-}
-
 .l-unit.selected {
   background-color: #f8f8f8;
   color: #4b4b4b;
@@ -3865,11 +3854,6 @@ li[aria-expanded="true"] a {
   padding-left: 40px !important;
 }
 
-.u-flex-align-center {
-  display: flex !important;
-  justify-content: center !important;
-}
-
 .u-console {
   font-family: Inconsolata, "Lucida Console", Monaco, monospace !important;
   white-space: pre !important;

web/css/src/themes/flat.css

@@ -193,8 +193,8 @@ strong {
 }
 
 .login {
-  background-color: rgb(255 255 255 / 80%) !important;
+  background-color: rgb(255 255 255 / 80%);
   box-shadow:
     0 2px 10px rgb(0 0 0 / 30%),
-    inset 0 0 2px rgb(255 255 255 / 100%) !important;
+    inset 0 0 2px rgb(255 255 255 / 100%);
 }

web/css/src/themes/vestia.css

@@ -254,12 +254,7 @@ strong {
   background: #fff !important;
 }
 
-.login {
-  background-color: rgb(255 255 255 / 80%) !important;
-  box-shadow:
-    0 2px 10px rgb(0 0 0 / 30%),
-    inset 0 0 2px rgb(255 255 255 / 100%) !important;
-}
+
 
 .form-control,
 .form-select {
@@ -661,10 +656,10 @@ a.vst-advanced:focus {
 }
 
 .login {
-  background-color: rgb(255 255 255 / 100%) !important;
-  box-shadow: 0 2px 5px rgb(0 0 0 / 30%), inset 0 0 2px rgb(255 255 255) !important;
-  font-family: Arial, Helvetica, sans-serif !important;
-  border-radius: 0 !important;
+  background-color: rgb(255 255 255 / 100%);
+  box-shadow: 0 2px 5px rgb(0 0 0 / 30%), inset 0 0 2px rgb(255 255 255);
+  font-family: Arial, Helvetica, sans-serif;
+  border-radius: 0;
 }
 
 .body-login,

web/templates/pages/edit_server.html

@@ -631,13 +631,6 @@
               <p class="u-pt18" style="font-size:1rem;padding-bottom:12px;">
                 <?=_('API');?>
               </p>
-              <div class="u-mb10">
-                <label for="api" class="form-label"><?=_('Enable legacy API access');?></label>
-                <select class="form-select" name="v_api" id="api">
-                  <option value="yes"><?=_('Yes'); ?></option>
-                  <option value="no" <?php if($_SESSION['API'] == 'no') echo 'selected' ?>><?=_('No'); ?></option>
-                </select>
-              </div>
               <div class="u-mb10">
                 <label for="api-system" class="form-label"><?=_('Enable API access');?></label>
                 <select class="form-select" name="v_api_system" id="api-system">
@@ -646,6 +639,13 @@
                   <option value='2' <?php if($_SESSION['API_SYSTEM'] == '2') echo 'selected' ?>><?=_('Enabled for all users'); ?></option>
                 </select>
               </div>
+              <div class="u-mb10">
+                <label for="api" class="form-label"><?=_('Enable legacy API access');?></label>
+                <select class="form-select" name="v_api" id="api">
+                  <option value="yes"><?=_('Yes'); ?></option>
+                  <option value="no" <?php if($_SESSION['API'] == 'no') echo 'selected' ?>><?=_('No'); ?></option>
+                </select>
+              </div>
               <div id="security_ip" style="<?php if ($_SESSION['API'] == "no" && $_SESSION['API_SYSTEM'] == '0') echo 'display:none;';?>">
                 <div class="u-mb10">
                   <label for="v_api_allowed_ip" class="form-label u-side-by-side">

web/templates/pages/login/login.html

@@ -1,48 +1,26 @@
-<div class="u-flex-align-center">
-  <table class="login animated zoomIn">
-    <tr>
-      <td>
-        <table>
-          <tr>
-            <td style="padding: 22px 30px 0 42px; height: 280px; width: 170px;">
-              <a href="/" class="u-block"><img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" style="margin-top: 70px;"></a>
-            </td>
-            <td style="padding: 40px 60px 0 0;">
-              <form method="post" action="/login/" id="form_login">
-                <input type="hidden" name="token" value="<?=$_SESSION['token']; ?>">
-                <input type="hidden" name="murmur" value="" id="murmur">
-                <table class="login-box">
-                  <tr>
-                    <td style="padding: 12px 0 0 2px;" class="login-welcome">
-                      <?=_('Welcome to Hestia Control Panel');?>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="padding: 12px 0 0 2px;">
-                      <label for="user" class="form-label"><?=_('Username');?></label>
-                      <input type="text" class="form-control" name="user" id="user" tabindex="1" style="width:260px;" autofocus>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="u-pt18">
-                      <button tabindex="3" type="submit" class="button"><?=_('Next');?>&nbsp;&nbsp;&nbsp;<i class="fas fa-sign-in-alt"></i></button>
-                    </td>
-                  </tr>
-                </table>
-              </form>
-            </td>
-          </tr>
-          <tr>
-            <td colspan=2>
-              <div class="login-bottom">
-                <div style="height:20px"><?php if (isset($error)) echo $error ?></div>
-              </div>
-            </td>
-          </tr>
-        </table>
-      </td>
-    </tr>
-  </table>
+<div class="login animated zoomIn">
+  <div style="padding-top: 40px; padding-right: 30px;">
+    <a href="/" class="u-block">
+      <img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
+    </a>
+  </div>
+  <div>
+    <form id="form_login" method="post" action="/login/">
+      <input type="hidden" name="token" value="<?=$_SESSION['token']; ?>">
+      <input type="hidden" name="murmur" value="" id="murmur">
+      <h1 class="login-title">
+        <?=_('Welcome to Hestia Control Panel');?>
+      </h1>
+      <?php if (isset($error)) echo $error ?>
+      <div class="u-mb20">
+        <label for="user" class="form-label"><?=_('Username');?></label>
+        <input type="text" class="form-control" name="user" id="user" tabindex="1" style="width:260px;" autofocus>
+      </div>
+      <button tabindex="3" type="submit" class="button">
+        <?=_('Next');?>&nbsp;&nbsp;&nbsp;<i class="fas fa-sign-in-alt"></i>
+      </button>
+    </form>
+  </div>
 </div>
 
 </body>

web/templates/pages/login/login_1.html

@@ -1,56 +1,34 @@
-<div class="u-flex-align-center">
-  <table class="login">
-    <tr>
-      <td>
-        <table>
-          <tr>
-            <td style="padding: 22px 30px 0 42px; height: 280px; width: 170px;">
-              <a href="/" class="u-block"><img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" style="margin-top: 70px;"></a>
-            </td>
-            <td style="padding: 40px 60px 0 0;" class="animated fadeIn">
-              <form method="post" action="/login/" id="form_login">
-                <input type="hidden" name="token" value="<?=$_SESSION['token']; ?>">
-                <input type="hidden" name="murmur" value="" id="murmur">
-                <table class="login-box">
-                  <tr>
-                    <td style="padding: 12px 0 0 2px;" class="login-welcome">
-                      <?=_('Welcome');?> <?=htmlspecialchars($_SESSION['login']['username']); ?>!
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="padding: 12px 0 0 2px;">
-                      <label for="password" class="form-label u-side-by-side">
-                        <?=_('Password');?>
-                        <?php if ($_SESSION['POLICY_SYSTEM_PASSWORD_RESET'] !== 'no' ) {?>
-                          <a tabindex="5" class="vst-advanced" href="/reset/">
-                            <?=_('forgot password');?>
-                          </a>
-                        <?php } ?>
-                      </label>
-                      <input type="password" class="form-control" name="password" id="password" tabindex="2" style="width:260px;" autofocus>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="u-pt18">
-                      <button tabindex="3" type="submit" class="button"><?=_('Login');?>&nbsp;&nbsp;&nbsp;<i class="fas fa-sign-in-alt"></i></button>&nbsp;&nbsp;
-                      <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/login/?logout=true'">
-                    </td>
-                  </tr>
-                </table>
-              </form>
-            </td>
-          </tr>
-          <tr>
-            <td colspan=2>
-              <div class="login-bottom">
-                <div style="height:20px"><?php if (isset($ERROR)) echo $ERROR ?></div>
-              </div>
-            </td>
-          </tr>
-        </table>
-      </td>
-    </tr>
-  </table>
+<div class="login">
+  <div style="padding-top: 40px; padding-right: 30px;">
+    <a href="/" class="u-block">
+      <img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
+    </a>
+  </div>
+  <div class="animated fadeIn">
+    <form id="form_login" method="post" action="/login/">
+      <input type="hidden" name="token" value="<?=$_SESSION['token']; ?>">
+      <input type="hidden" name="murmur" value="" id="murmur">
+      <h1 class="login-title">
+        <?=_('Welcome');?> <?=htmlspecialchars($_SESSION['login']['username']); ?>!
+      </h1>
+      <?php if (isset($ERROR)) echo $ERROR ?>
+      <div class="u-mb20">
+        <label for="password" class="form-label u-side-by-side">
+          <?=_('Password');?>
+          <?php if ($_SESSION['POLICY_SYSTEM_PASSWORD_RESET'] !== 'no' ) {?>
+            <a tabindex="5" class="vst-advanced" href="/reset/">
+              <?=_('forgot password');?>
+            </a>
+          <?php } ?>
+        </label>
+        <input type="password" class="form-control" name="password" id="password" tabindex="2" style="width:260px;" autofocus>
+      </div>
+      <div>
+        <button tabindex="3" type="submit" class="button"><?=_('Login');?>&nbsp;&nbsp;&nbsp;<i class="fas fa-sign-in-alt"></i></button>&nbsp;&nbsp;
+        <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/login/?logout=true'">
+      </div>
+    </form>
+  </div>
 </div>
 
 </body>

web/templates/pages/login/login_2.html

@@ -1,54 +1,32 @@
-<div class="u-flex-align-center">
-  <table class="login">
-    <tr>
-      <td>
-        <table>
-          <tr>
-            <td style="padding: 22px 30px 0 42px; height: 280px; width: 170px;">
-              <a href="/" class="u-block"><img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" style="margin-top: 70px;"></a>
-            </td>
-            <td style="padding: 40px 60px 0 0;" class="animated fadeIn">
-              <form method="post" action="/login/" id="form_login">
-                <input type="hidden" name="token" value="<?=$_SESSION['token']; ?>">
-                <input type="hidden" name="murmur" value="" id="murmur">
-                <table class="login-box">
-                  <tr>
-                    <td style="padding: 12px 0 0 2px;" class="login-welcome">
-                      <?=_('2 Factor Authentication');?>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="padding-top: 12px; padding-left:2px;">
-                      <label for="twofa" class="form-label u-side-by-side">
-                        <?=_('2FA Token');?>
-                        <a tabindex="5" class="vst-advanced" href="/reset2fa/">
-                          <?=_('Forgot token');?>
-                        </a>
-                      </label>
-                      <input type="text" class="form-control" name="twofa" id="twofa" tabindex="2" style="width:260px;" autofocus>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="u-pt18">
-                      <button tabindex="3" type="submit" class="button"><?=_('Login');?>&nbsp;&nbsp;&nbsp;<i class="fas fa-sign-in-alt"></i></button>&nbsp;&nbsp;
-                      <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/login/?logout'">
-                    </td>
-                  </tr>
-                </table>
-              </form>
-            </td>
-          </tr>
-          <tr>
-            <td colspan=2>
-              <div class="login-bottom">
-                <div style="height:20px"><?php if (isset($ERROR)) echo $ERROR ?></div>
-              </div>
-            </td>
-          </tr>
-        </table>
-      </td>
-    </tr>
-  </table>
+<div class="login">
+  <div style="padding-top: 40px; padding-right: 30px;">
+    <a href="/" class="u-block">
+      <img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
+    </a>
+  </div>
+  <div class="animated fadeIn">
+    <form id="form_login" method="post" action="/login/">
+      <input type="hidden" name="token" value="<?=$_SESSION['token']; ?>">
+      <input type="hidden" name="murmur" value="" id="murmur">
+      <h1 class="login-title">
+        <?=_('2 Factor Authentication');?>
+      </h1>
+      <?php if (isset($ERROR)) echo $ERROR ?>
+      <div class="u-mb20">
+        <label for="twofa" class="form-label u-side-by-side">
+          <?=_('2FA Token');?>
+          <a tabindex="5" class="vst-advanced" href="/reset2fa/">
+            <?=_('Forgot token');?>
+          </a>
+        </label>
+        <input type="text" class="form-control" name="twofa" id="twofa" tabindex="2" style="width:260px;" autofocus>
+      </div>
+      <div>
+        <button tabindex="3" type="submit" class="button"><?=_('Login');?>&nbsp;&nbsp;&nbsp;<i class="fas fa-sign-in-alt"></i></button>&nbsp;&nbsp;
+        <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/login/?logout'">
+      </div>
+    </form>
+  </div>
 </div>
 
 </body>

web/templates/pages/login/login_a.html

@@ -1,61 +1,37 @@
-<div class="u-flex-align-center">
-  <table class="login animated zoomIn">
-    <tr>
-      <td>
-        <table>
-          <tr>
-            <td style="padding: 22px 30px 0 42px; height: 280px; width: 170px;">
-              <a href="/" class="u-block"><img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" style="margin-top: 70px;"></a>
-            </td>
-            <td style="padding: 40px 60px 0 0;">
-              <form method="post" action="/login/" id="form_login">
-                <input type="hidden" name="token" value="<?=$_SESSION['token']; ?>">
-                <input type="hidden" name="murmur" value="" id="murmur">
-                <table class="login-box">
-                  <tr>
-                    <td style="padding: 12px 0 0 2px;" class="login-welcome">
-                      <?=_('Welcome to Hestia Control Panel');?>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="padding: 12px 0 5px 2px;">
-                      <label for="user" class="form-label"><?=_('Username');?></label>
-                      <input type="text" class="form-control" name="user" id="user" tabindex="1" style="width:260px;" autofocus>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="padding: 12px 0 0 2px;">
-                      <label for="password" class="form-label u-side-by-side">
-                        <?=_('Password');?>
-                        <?php if ($_SESSION['POLICY_SYSTEM_PASSWORD_RESET'] !== 'no' ) {?>
-                          <a tabindex="5" class="vst-advanced" href="/reset/">
-                            <?=_('forgot password');?>
-                          </a>
-                        <?php } ?>
-                      </label>
-                      <input type="password" class="form-control" name="password" id="password" tabindex="2" style="width:260px;" autofocus>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="u-pt18">
-                      <button tabindex="3" type="submit" class="button"><?=_('Next');?>&nbsp;&nbsp;&nbsp;<i class="fas fa-sign-in-alt"></i></button>
-                    </td>
-                  </tr>
-                </table>
-              </form>
-            </td>
-          </tr>
-          <tr>
-            <td colspan=2>
-              <div class="login-bottom">
-                <div style="height:20px"><?php if (isset($error)) echo $error ?></div>
-              </div>
-            </td>
-          </tr>
-        </table>
-      </td>
-    </tr>
-  </table>
+<div class="login animated zoomIn">
+  <div style="padding-top: 40px; padding-right: 30px;">
+    <a href="/" class="u-block">
+      <img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
+    </a>
+  </div>
+  <div>
+    <form id="form_login" method="post" action="/login/">
+      <input type="hidden" name="token" value="<?=$_SESSION['token']; ?>">
+      <input type="hidden" name="murmur" value="" id="murmur">
+      <h1 class="login-title">
+        <?=_('Welcome to Hestia Control Panel');?>
+      </h1>
+      <?php if (isset($error)) echo $error ?>
+      <div class="u-mb10">
+        <label for="user" class="form-label"><?=_('Username');?></label>
+        <input type="text" class="form-control" name="user" id="user" tabindex="1" style="width:260px;" autofocus>
+      </div>
+      <div class="u-mb20">
+        <label for="password" class="form-label u-side-by-side">
+          <?=_('Password');?>
+          <?php if ($_SESSION['POLICY_SYSTEM_PASSWORD_RESET'] !== 'no' ) {?>
+            <a tabindex="5" class="vst-advanced" href="/reset/">
+              <?=_('forgot password');?>
+            </a>
+          <?php } ?>
+        </label>
+        <input type="password" class="form-control" name="password" id="password" tabindex="2" style="width:260px;" autofocus>
+      </div>
+      <button tabindex="3" type="submit" class="button">
+        <?=_('Next');?>&nbsp;&nbsp;&nbsp;<i class="fas fa-sign-in-alt"></i>
+      </button>
+    </form>
+  </div>
 </div>
 
 </body>

web/templates/pages/login/reset2fa.html

@@ -1,69 +1,40 @@
-<div class="u-flex-align-center">
-  <table class="login">
-    <tr>
-      <td>
-        <table>
-          <tr>
-            <td style="padding: 22px 30px 0 42px; height: 280px; width: 170px;">
-              <a href="/" class="u-block"><img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" style="margin-top: 70px;"></a>
-            </td>
-            <td style="padding: 40px 60px 0 0;" class="animated fadeIn">
-              <?php if ($success) {?>
-                <table class="login-box">
-                  <tr>
-                    <td style="padding: 12px 0 0 2px;">
-                      <?=_('2FA Reset successfully'); ?>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="padding: 20px 0 12px 0;">
-                      <input type="button" class="button" value="<?=_('Log in');?>" onclick="location.href='/login/'">
-                    </td>
-                  </tr>
-                </table>
-              <?php } else { ?>
-                <form method="post" action="/reset2fa/">
-                  <input type="hidden" name="token" value="<?=$_SESSION['token'];?>"/>
-                  <table class="login-box">
-                    <tr>
-                      <td style="padding: 12px 0 0 2px;" class="login-welcome">
-                        <?=_('Reset 2FA');?>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td style="padding: 12px 0 0 2px;">
-                        <label for="user" class="form-label"><?=_('Username');?></label>
-                        <input type="text" class="form-control" name="user" id="user" tabindex="1" style="width:260px;">
-                      </td>
-                    </tr>
-                    <tr>
-                      <td style="padding: 12px 0 0 2px;">
-                        <label for="twofa" class="form-label"><?=_('2FA Reset Code');?></label>
-                        <input type="text" class="form-control" name="twofa" id="twofa" tabindex="1" style="width:260px;">
-                      </td>
-                    </tr>
-                    <tr>
-                      <td style="padding: 20px 0 12px 0;">
-                        <input tabindex="2" type="submit" value="<?=_('Submit');?>" class="button">&nbsp;&nbsp;
-                        <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/login/?logout'">
-                      </td>
-                    </tr>
-                  </table>
-                </form>
-              <?php } ?>
-            </td>
-          </tr>
-          <tr>
-            <td colspan=2>
-              <div class="login-bottom">
-                <div style="height:20px"><?php if (isset($ERROR)) echo $ERROR ?></div>
-              </div>
-            </td>
-          </tr>
-        </table>
-      </td>
-    </tr>
-  </table>
+<div class="login">
+  <div style="padding-top: 40px; padding-right: 30px;">
+    <a href="/" class="u-block">
+      <img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
+    </a>
+  </div>
+  <div class="animated fadeIn">
+    <?php if ($success) {?>
+      <h1 class="login-title">
+        <?=_('2FA Reset successfully'); ?>
+      </h1>
+      <?php if (isset($ERROR)) echo $ERROR ?>
+      <div class="u-mt20">
+        <input type="button" class="button" value="<?=_('Log in');?>" onclick="location.href='/login/'">
+      </div>
+    <?php } else { ?>
+      <form method="post" action="/reset2fa/">
+        <input type="hidden" name="token" value="<?=$_SESSION['token'];?>"/>
+        <h1 class="login-title">
+          <?=_('Reset 2FA');?>
+        </div>
+        <?php if (isset($ERROR)) echo $ERROR ?>
+        <div class="u-mb10">
+          <label for="user" class="form-label"><?=_('Username');?></label>
+          <input type="text" class="form-control" name="user" id="user" tabindex="1" style="width:260px;">
+        </div>
+        <div class="u-mb20">
+          <label for="twofa" class="form-label"><?=_('2FA Reset Code');?></label>
+          <input type="text" class="form-control" name="twofa" id="twofa" tabindex="1" style="width:260px;">
+        </div>
+        <div>
+          <input tabindex="2" type="submit" value="<?=_('Submit');?>" class="button">&nbsp;&nbsp;
+          <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/login/?logout'">
+        </div>
+      </form>
+    <?php } ?>
+  </div>
 </div>
 
 </body>

web/templates/pages/login/reset_1.html

@@ -1,54 +1,30 @@
-<div class="u-flex-align-center">
-  <table class="login">
-    <tr>
-      <td>
-        <table>
-          <tr>
-            <td style="padding: 22px 30px 0 42px; height: 280px; width: 170px;">
-              <a href="/" class="u-block"><img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" style="margin-top: 70px;"></a>
-            </td>
-            <td style="padding: 40px 60px 0 0;" class="animated fadeIn">
-              <form method="post" action="/reset/">
-                <input type="hidden" name="token" value="<?=$_SESSION['token'];?>"/>
-                <table class="login-box">
-                  <tr>
-                    <td style="padding: 12px 0 0 2px;" class="login-welcome">
-                      <?=_('Forgot Password');?>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="padding: 12px 0 0 2px;">
-                      <label for="user" class="form-label"><?=_('Username');?></label>
-                      <input type="text" class="form-control" name="user" id="user" tabindex="1" style="width:260px;">
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="padding: 12px 0 0 2px;">
-                      <label for="email" class="form-label"><?=_('Email');?></label>
-                      <input type="email" class="form-control" name="email" id="email" tabindex="1" style="width:260px;">
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="padding: 20px 0 12px 0;">
-                      <input tabindex="2" type="submit" value="<?=_('Submit');?>" class="button">&nbsp;&nbsp;
-                      <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/login/?logout'">
-                    </td>
-                  </tr>
-                </table>
-              </form>
-            </td>
-          </tr>
-          <tr>
-            <td colspan=2>
-              <div class="login-bottom">
-                <div style="height:20px"><?php if (isset($ERROR)) echo $ERROR ?></div>
-              </div>
-            </td>
-          </tr>
-        </table>
-      </td>
-    </tr>
-  </table>
+<div class="login">
+  <div style="padding-top: 40px; padding-right: 30px;">
+    <a href="/" class="u-block">
+      <img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
+    </a>
+  </div>
+  <div class="animated fadeIn">
+    <form method="post" action="/reset/">
+      <input type="hidden" name="token" value="<?=$_SESSION['token'];?>"/>
+      <h1 class="login-title">
+        <?=_('Forgot Password');?>
+      </h1>
+      <?php if (isset($ERROR)) echo $ERROR ?>
+      <div class="u-mb10">
+        <label for="user" class="form-label"><?=_('Username');?></label>
+        <input type="text" class="form-control" name="user" id="user" tabindex="1" style="width:260px;">
+      </div>
+      <div class="u-mb20">
+        <label for="email" class="form-label"><?=_('Email');?></label>
+        <input type="email" class="form-control" name="email" id="email" tabindex="1" style="width:260px;">
+      </div>
+      <div>
+        <input tabindex="2" type="submit" value="<?=_('Submit');?>" class="button">&nbsp;&nbsp;
+        <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/login/?logout'">
+      </div>
+    </form>
+  </div>
 </div>
 
 </body>

web/templates/pages/login/reset_2.html

@@ -1,55 +1,31 @@
-<div class="u-flex-align-center">
-  <table class="login">
-    <tr>
-      <td>
-        <table>
-          <tr>
-            <td style="padding: 22px 30px 0 42px; height: 280px; width: 170px;">
-              <a href="/" class="u-block"><img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" style="margin-top: 70px;"></a>
-            </td>
-            <td style="padding: 40px 60px 0 0;" class="animated fadeIn">
-              <form method="get" action="/reset/">
-                <table class="login-box">
-                  <tr>
-                    <td style="padding: 12px 0 0 2px;" class="login-welcome">
-                      <?=_('Forgot Password');?>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="padding: 12px 0 0 2px;">
-                      <?=_('RESET_CODE_SENT');?>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="padding: 12px 0 0 2px;">
-                      <input type="hidden" name="action" value="confirm">
-                      <input type="hidden" name="token" value="<?=htmlentities($_SESSION['token']);?>"/>
-                      <input type="hidden" name="user" value="<?=htmlentities($_GET['user'])?>">
-                      <label for="code" class="form-label"><?=_('Reset Code');?></label>
-                      <input type="text" class="form-control" name="code" id="code" tabindex="1" style="width:260px;">
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="padding: 20px 0 12px 0;">
-                      <input tabindex="2" type="submit" value="<?=_('Confirm');?>" class="button">&nbsp;&nbsp;
-                      <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/reset/'">
-                    </td>
-                  </tr>
-                </table>
-              </form>
-            </td>
-          </tr>
-          <tr>
-            <td colspan=2>
-              <div class="login-bottom">
-                <div style="height:20px"><?php if (isset($ERROR)) echo $ERROR ?></div>
-              </div>
-            </td>
-          </tr>
-        </table>
-      </td>
-    </tr>
-  </table>
+<div class="login">
+  <div style="padding-top: 40px; padding-right: 30px;">
+    <a href="/" class="u-block">
+      <img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
+    </a>
+  </div>
+  <div class="animated fadeIn">
+    <form method="get" action="/reset/">
+      <h1 class="login-title">
+        <?=_('Forgot Password');?>
+      </h1>
+      <?php if (isset($ERROR)) echo $ERROR ?>
+      <p style="padding: 12px 0 0 2px;">
+        <?=_('RESET_CODE_SENT');?>
+      </p>
+      <div class="u-mb20">
+        <input type="hidden" name="action" value="confirm">
+        <input type="hidden" name="token" value="<?=htmlentities($_SESSION['token']);?>"/>
+        <input type="hidden" name="user" value="<?=htmlentities($_GET['user'])?>">
+        <label for="code" class="form-label"><?=_('Reset Code');?></label>
+        <input type="text" class="form-control" name="code" id="code" tabindex="1" style="width:260px;">
+      </div>
+      <div>
+        <input tabindex="2" type="submit" value="<?=_('Confirm');?>" class="button">&nbsp;&nbsp;
+        <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/reset/'">
+      </div>
+    </form>
+  </div>
 </div>
 
 </body>

web/templates/pages/login/reset_3.html

@@ -1,57 +1,33 @@
-<div class="u-flex-align-center">
-  <table class="login">
-    <tr>
-      <td>
-        <table>
-          <tr>
-            <td style="padding: 22px 30px 0 42px; height: 280px; width: 170px;">
-              <a href="/" class="u-block"><img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" style="margin-top: 70px;"></a>
-            </td>
-            <td style="padding: 40px 60px 0 0;" class="animated fadeIn">
-              <form method="post">
-                <table class="login-box">
-                  <tr>
-                    <td style="padding: 12px 0 0 2px;" class="login-welcome">
-                      <?=_('Forgot Password');?>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="padding: 12px 0 0 2px;">
-                      <input type="hidden" name="action" value="confirm">
-                      <input type="hidden" name="token" value="<?=htmlentities($_SESSION['token']);?>"/>
-                      <input type="hidden" name="user" value="<?=htmlentities($_GET['user']);?>">
-                      <input type="hidden" name="code" value="<?=htmlentities($_GET['code']);?>">
-                      <label for="password" class="form-label"><?=_('New Password');?></label>
-                      <input type="password" class="form-control" name="password" id="password" tabindex="1" style="width:260px;">
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="padding: 12px 0 0 2px;">
-                      <label for="password_confirm" class="form-label"><?=_('Confirm Password');?></label>
-                      <input type="password" class="form-control" name="password_confirm" id="password_confirm" tabindex="2" style="width:260px;">
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="padding: 20px 0 12px 0;">
-                      <input tabindex="3" type="submit" value="<?=_('Reset');?>" class="button">&nbsp;&nbsp;
-                      <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/login/'">
-                    </td>
-                  </tr>
-                </table>
-              </form>
-            </td>
-          </tr>
-          <tr>
-            <td colspan=2>
-              <div class="login-bottom">
-                <div style="height:20px"><?php if (isset($ERROR)) echo $ERROR ?></div>
-              </div>
-            </td>
-          </tr>
-        </table>
-      </td>
-    </tr>
-  </table>
+<div class="login">
+  <div style="padding-top: 40px; padding-right: 30px;">
+    <a href="/" class="u-block">
+      <img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
+    </a>
+  </div>
+  <div class="animated fadeIn">
+    <form method="post">
+      <h1 class="login-title">
+        <?=_('Forgot Password');?>
+      </h1>
+      <?php if (isset($ERROR)) echo $ERROR ?>
+      <div class="u-mb10">
+        <input type="hidden" name="action" value="confirm">
+        <input type="hidden" name="token" value="<?=htmlentities($_SESSION['token']);?>"/>
+        <input type="hidden" name="user" value="<?=htmlentities($_GET['user']);?>">
+        <input type="hidden" name="code" value="<?=htmlentities($_GET['code']);?>">
+        <label for="password" class="form-label"><?=_('New Password');?></label>
+        <input type="password" class="form-control" name="password" id="password" tabindex="1" style="width:260px;">
+      </div>
+      <div class="u-mb20">
+        <label for="password_confirm" class="form-label"><?=_('Confirm Password');?></label>
+        <input type="password" class="form-control" name="password_confirm" id="password_confirm" tabindex="2" style="width:260px;">
+      </div>
+      <div>
+        <input tabindex="3" type="submit" value="<?=_('Reset');?>" class="button">&nbsp;&nbsp;
+        <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/login/'">
+      </div>
+    </form>
+  </div>
 </div>
 
 </body>