Refactor shortcuts modal to use <dialog> (#3023)

web/css/src/themes/dark.css

@@ -1207,73 +1207,12 @@ form#vstobjects.suspended {
   background: rgb(30 30 30 / 95%);
   border: 1px solid rgb(255 255 255 / 25%);
   box-shadow: 0 0 20px rgb(0 0 0 / 50%);
-  border-bottom: none !important;
 }
 
 .shortcuts-header {
   border-bottom: 1px solid #353535;
 }
 
-.description {
-
-}
-
-.description ul{
-
-}
-
-.description li{
-
-}
-
-.description a {
-
-}
-
-.description a.purchase {
-
-}
-
-.description a.purchase:hover {
-  color: #d4d4d4;
-}
-
-.description a.purchase:active {
-  color: #d4d4d4;
-}
-
-.description a.cancel {
-
-}
-
-.description a.cancel:hover {
-
-}
-
-.description a.cancel:active {
-
-}
-
-.description.cancel-success {
-
-}
-
-.description .licence {
-
-}
-
-.description .licence input {
-
-}
-
-.description span {
-
-}
-
-.description .twoco {
-
-}
-
 .ui-dialog {
   background-color: rgb(45 45 45 / 95%);
   border: 1px solid rgb(80 80 80 / 97%);

web/css/src/themes/default.css

@@ -2,6 +2,7 @@
    Define Exo font family
    Primary font used throughout the user interface
    ========================================================================== */
+
 /* exo-300 - latin-ext_latin */
 @font-face {
   font-family: 'Exo';
@@ -182,6 +183,15 @@ pre {
   margin: 0;
 }
 
+dialog {
+  position: fixed;
+  padding: 0;
+}
+
+dialog::backdrop {
+  background-color: rgb(0 0 0 / 60%);
+}
+
 ol,
 ul {
   list-style: none;
@@ -2361,7 +2371,11 @@ body.mobile .l-icon-shortcuts {
   font-weight: normal;
 }
 
-.ftp-path-prefix { padding-top: 12px; font-size: 0.8rem; color: #555; }
+.ftp-path-prefix {
+  padding-top: 12px;
+  font-size: 0.8rem;
+  color: #555;
+}
 
 .dialog {
   display: none;
@@ -2641,10 +2655,9 @@ a.button.cancel {
 
 .body-login,
 .body-reset {
-  height: auto;
   display: flex;
+  align-items: center;
   justify-content: center;
-  padding-top: 10%;
   background: rgb(102 158 231);
   background: radial-gradient(circle, rgb(102 158 231 / 100%) 0%, rgb(43 86 177 / 100%) 100%);
 }
@@ -2657,10 +2670,10 @@ a.button.cancel {
 }
 
 .login {
-  display: flex;
-  align-items: flex-end;
   font-size: 0.85rem;
   padding: 80px 50px;
+  min-width: 320px;
+  margin-bottom: 20%;
   background-color: rgb(255 255 255 / 70%);
   border-radius: 6px;
   box-shadow:
@@ -2668,6 +2681,20 @@ a.button.cancel {
     inset 0 0 2px rgb(255 255 255 / 100%);
 }
 
+@media screen and (min-width: 768px) {
+
+  .login {
+    display: flex;
+    align-items: flex-end;
+    width: 100%;
+    max-width: 500px;
+  }
+
+  .login form {
+    flex-grow: 1;
+  }
+}
+
 .login-title {
   color: #4b4b4b;
   font-size: 1.05rem;
@@ -3193,21 +3220,11 @@ form#vstobjects.suspended {
 
 .shortcuts {
   background: rgb(50 50 50 / 93%);
-  display: inline-block;
-  position: fixed;
-  left: 50%;
-  bottom: 0;
   color: #eee;
-  width: 800px;
   border: 1px solid rgb(255 255 255 / 70%);
-  border-bottom: 0;
   font-size: 0.8rem;
-  z-index: 120;
-  transform: translate(-50%, 0);
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
+  border-radius: 6px;
   box-shadow: 0 4px 30px rgb(0 0 0 / 50%);
-  line-height: 0.9rem;
 }
 
 .shortcuts-header {
@@ -3215,7 +3232,7 @@ form#vstobjects.suspended {
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid #606060;
-  padding: 10px 10px 10px 15px;
+  padding: 10px 10px 10px 20px;
 }
 
 .shortcuts-title {
@@ -3228,7 +3245,7 @@ form#vstobjects.suspended {
 
 .shortcuts-close {
   cursor: pointer;
-  padding: 5px;
+  padding: 5px 10px;
 }
 
 .shortcuts-close:hover {
@@ -3239,103 +3256,35 @@ form#vstobjects.suspended {
   color: #a60000;
 }
 
-.shortcuts-inner {
-  display: flex;
-  width: 100%;
+.shortcuts-inner {}
+
+@media screen and (min-width: 768px) {
+
+  .shortcuts-inner {
+    display: flex;
+  }
 }
 
-.shortcuts ul {
+.shortcuts-list {
   flex-grow: 1;
-  padding: 40px 20px;
+  padding: 40px;
 }
 
-.shortcuts ul li {
+.shortcuts li {
   padding: 5px 20px;
 }
 
-.shortcuts ul li span {
+.shortcuts .key {
   color: #ff3478;
   display: inline-block;
   font-weight: 600;
-  padding: 0 20px 0 0;
-  text-align: right;
+  padding-right: 20px;
 }
 
-.shortcuts ul li span.bigger {
+.shortcuts .key.bigger {
   font-size: 18px;
 }
 
-.description {
-  font-weight: normal;
-  line-height: 25px;
-  padding-bottom: 45px;
-  margin-left: 50px;
-}
-
-.description ul {
-  margin-top: 15px;
-  padding-left: 0;
-}
-
-.description li {
-  margin: 10px 0;
-}
-
-.description a {
-  line-height: 30px;
-  text-decoration: underline;
-  color: #326b9b;
-}
-
-.description a.purchase {
-  color: #fff;
-  background-color: #3b9de8;
-  border: none;
-  border-radius: 3px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  padding: 7px 15px;
-  text-transform: capitalize;
-  text-decoration: none;
-}
-
-.description a.cancel {
-  background-color: #999;
-  border: none;
-  border-radius: 3px;
-  color: #fff;
-  font-size: 0.8rem;
-  font-weight: 600;
-  padding: 7px 15px;
-  text-transform: capitalize;
-  text-decoration: none;
-}
-
-.description a.cancel:hover {
-  background-color: #326b9b;
-}
-
-.description a.cancel:active {
-  background-color: #5f9491;
-}
-
-.description.cancel-success {
-  color: #8fac0a;
-  font-weight: 600;
-}
-
-.description span {
-  font-style: italic;
-  line-height: 45px;
-  padding-top: 20px;
-}
-
-.description .twoco {
-  font-style: italic;
-  line-height: 15px;
-  font-size: 0.8rem;
-}
-
 .ui-dialog {
   font-family: Exo, Arial, Helvetica, sans-serif;
   font-weight: 500;
@@ -3369,8 +3318,7 @@ form#vstobjects.suspended {
 }
 
 .ui-widget-overlay {
-  opacity: 0.8;
-  background: rgb(10 10 10 / 90%);
+  background-color: rgb(0 0 0 / 60%);
 }
 
 .helper-container {
@@ -3762,10 +3710,6 @@ li[aria-expanded="true"] a {
   padding-top: 18px !important;
 }
 
-.u-pt30 {
-  padding-top: 30px !important;
-}
-
 .u-pl30 {
   padding-left: 30px !important;
 }

web/css/src/themes/vestia.css

@@ -478,7 +478,7 @@ strong {
 }
 
 .shortcuts-title,
-.shortcuts ul li span {
+.shortcuts .key {
   color: #b5da0b;
 }
 

web/js/init.js

@@ -337,7 +337,12 @@ $(document).ready(function(){
               );
 
               shortcut.add("h", function(){
-                $('.shortcuts').toggleClass('u-hidden');
+                var shortcutsDialog = document.querySelector('.shortcuts');
+                if (shortcutsDialog.open) {
+                  shortcutsDialog.close();
+                } else {
+                  shortcutsDialog.showModal();
+                }
               }, {
                   'type':             'keydown',
                   'propagate':        false,
@@ -347,7 +352,10 @@ $(document).ready(function(){
               );
 
               shortcut.add("Esc", function(){
-                $('.shortcuts').addClass('u-hidden');
+                var shortcutsDialog = document.querySelector('.shortcuts');
+                if (shortcutsDialog.open) {
+                  shortcutsDialog.close();
+                }
                 $('input, checkbox, textarea, select').blur();
               }, {
                   'type':             'keydown',
@@ -536,14 +544,21 @@ $(document).ready(function(){
                   }
               );
 
-
-
-              $('.shortcuts-close').click(function(){
-                $('.shortcuts').addClass('u-hidden');
+              document.querySelector('.shortcuts-close').addEventListener('click', function(){
+                var shortcutsDialog = document.querySelector('.shortcuts');
+                if (shortcutsDialog.open) {
+                  shortcutsDialog.close();
+                }
               });
 
-              $('.to-shortcuts').click(function(){
-                $('.shortcuts').toggleClass('u-hidden');
+              document.querySelector('.to-shortcuts').addEventListener('click', function() {
+                event.preventDefault();
+                var shortcutsDialog = document.querySelector('.shortcuts');
+                if (shortcutsDialog.open) {
+                  shortcutsDialog.close();
+                } else {
+                  shortcutsDialog.showModal();
+                }
               });
 
               $(document).click(function(evt){

web/templates/footer.html

@@ -17,38 +17,33 @@
     <p><?=_('LEAVE_PAGE_CONFIRMATION')?></p>
   </div>
 
-  <div class="shortcuts animated fadeIn u-hidden">
+  <dialog class="shortcuts animated fadeIn">
     <div class="shortcuts-header">
       <div class="shortcuts-title"><?=_('Shortcuts')?></div>
-      <div class="shortcuts-close">
-        <i class="fas fa-times"></i>
-      </div>
+      <div class="shortcuts-close"><i class="fas fa-times"></i></div>
     </div>
     <div class="shortcuts-inner">
-      <ul>
+      <ul class="shortcuts-list">
         <li><span class="key">a</span><?=_('Add New object')?></li>
         <li><span class="key">Ctrl + Enter</span><?=_('Save Form')?></li>
-        <li><span class="key">Ctrl + Backspace</span><?=_('Cancel saving form')?></li>
-
-        <li class="u-pt30"><span class="key">1</span><?=_('Go to WEB list')?></li>
+        <li class="u-mb20"><span class="key">Ctrl + Backspace</span><?=_('Cancel saving form')?></li>
+        <li><span class="key">1</span><?=_('Go to WEB list')?></li>
         <li><span class="key">2</span><?=_('Go to DNS list')?></li>
         <li><span class="key">3</span><?=_('Go to MAIL list')?></li>
         <li><span class="key">4</span><?=_('Go to DB list')?></li>
         <li><span class="key">5</span><?=_('Go to CRON list')?></li>
         <li><span class="key">6</span><?=_('Go to BACKUP list')?></li>
       </ul>
-      <ul>
-        <li><span class="key">f</span><?=_('Focus on search')?></li>
-        <li class="u-pt30"><span class="key">h</span><?=_('Display/Close shortcuts')?></li>
-
-        <li class="u-pt30"><span class="key bigger">&larr;</span><?=_('Move backward through top menu')?></li>
+      <ul class="shortcuts-list">
+        <li class="u-mb20"><span class="key">f</span><?=_('Focus on search')?></li>
+        <li class="u-mb20"><span class="key">h</span><?=_('Display/Close shortcuts')?></li>
+        <li><span class="key bigger">&larr;</span><?=_('Move backward through top menu')?></li>
         <li><span class="key bigger">&rarr;</span><?=_('Move forward through top menu')?></li>
-        <li><span class="key">Enter</span><?=_('Enter focused element')?></li>
-
-        <li class="u-pt30"><span class="key bigger">&uarr;</span><?=_('Move up through elements list')?></li>
+        <li class="u-mb20"><span class="key">Enter</span><?=_('Enter focused element')?></li>
+        <li><span class="key bigger">&uarr;</span><?=_('Move up through elements list')?></li>
         <li><span class="key bigger">&darr;</span><?=_('Move down through elements list')?></li>
       </ul>
     </div>
-  </div>
+  </dialog>
 </body>
 </html>

web/templates/pages/login/login.html

@@ -11,7 +11,7 @@
     <?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>
+      <input type="text" class="form-control" name="user" id="user" tabindex="1" autofocus>
     </div>
     <button tabindex="3" type="submit" class="button">
       <?=_('Next');?>&nbsp;&nbsp;&nbsp;<i class="fas fa-sign-in-alt"></i>

web/templates/pages/login/login_1.html

@@ -18,7 +18,7 @@
           </a>
         <?php } ?>
       </label>
-      <input type="password" class="form-control" name="password" id="password" tabindex="2" style="width:260px;" autofocus>
+      <input type="password" class="form-control" name="password" id="password" tabindex="2" 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;

web/templates/pages/login/login_2.html

@@ -16,7 +16,7 @@
           <?=_('Forgot token');?>
         </a>
       </label>
-      <input type="text" class="form-control" name="twofa" id="twofa" tabindex="2" style="width:260px;" autofocus>
+      <input type="text" class="form-control" name="twofa" id="twofa" tabindex="2" 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;

web/templates/pages/login/login_a.html

@@ -11,7 +11,7 @@
     <?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>
+      <input type="text" class="form-control" name="user" id="user" tabindex="1" autofocus>
     </div>
     <div class="u-mb20">
       <label for="password" class="form-label u-side-by-side">
@@ -22,7 +22,7 @@
           </a>
         <?php } ?>
       </label>
-      <input type="password" class="form-control" name="password" id="password" tabindex="2" style="width:260px;" autofocus>
+      <input type="password" class="form-control" name="password" id="password" tabindex="2" autofocus>
     </div>
     <button tabindex="3" type="submit" class="button">
       <?=_('Next');?>&nbsp;&nbsp;&nbsp;<i class="fas fa-sign-in-alt"></i>

web/templates/pages/login/reset2fa.html

@@ -21,11 +21,11 @@
       <?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;">
+        <input type="text" class="form-control" name="user" id="user" tabindex="1">
       </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;">
+        <input type="text" class="form-control" name="twofa" id="twofa" tabindex="1">
       </div>
       <div>
         <input tabindex="2" type="submit" value="<?=_('Submit');?>" class="button">&nbsp;&nbsp;

web/templates/pages/login/reset_1.html

@@ -10,11 +10,11 @@
     <?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;">
+      <input type="text" class="form-control" name="user" id="user" tabindex="1">
     </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;">
+      <input type="email" class="form-control" name="email" id="email" tabindex="1">
     </div>
     <div>
       <input tabindex="2" type="submit" value="<?=_('Submit');?>" class="button">&nbsp;&nbsp;

web/templates/pages/login/reset_2.html

@@ -15,7 +15,7 @@
       <input type="hidden" name="token" value="<?=htmlentities($_SESSION['token']);?>"/>
       <input type="hidden" name="user" value="<?=htmlentities($_GET['user'])?>">
       <label for="code" class="form-label"><?=_('Reset Code');?></label>
-      <input type="text" class="form-control" name="code" id="code" tabindex="1" style="width:260px;">
+      <input type="text" class="form-control" name="code" id="code" tabindex="1">
     </div>
     <div>
       <input tabindex="2" type="submit" value="<?=_('Confirm');?>" class="button">&nbsp;&nbsp;

web/templates/pages/login/reset_3.html

@@ -13,11 +13,11 @@
       <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;">
+      <input type="password" class="form-control" name="password" id="password" tabindex="1">
     </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;">
+      <input type="password" class="form-control" name="password_confirm" id="password_confirm" tabindex="2">
     </div>
     <div>
       <input tabindex="3" type="submit" value="<?=_('Reset');?>" class="button">&nbsp;&nbsp;