[Web] Ratelimit settings as input group

Signed-off-by: Kristian Feldsam <feldsam@gmail.com>

data/web/edit.php

@@ -59,20 +59,22 @@ if (isset($_SESSION['mailcow_cc_role'])) {
           ];
       }
     }
-    elseif (isset($_GET["template"])){
-      $domain_template = mailbox('get', 'domain_templates', $_GET["template"]);
+    elseif (isset($_GET['template'])){
+      $domain_template = mailbox('get', 'domain_templates', $_GET['template']);
       if ($domain_template){
         $template_data = [
-          'template' => $domain_template
+          'template' => $domain_template,
+          'rl' => ['frame' => $domain_template['attributes']['rl_frame']],
         ];
         $template = 'edit/domain-templates.twig';
         $result = true;
       }
       else {
-        $mailbox_template = mailbox('get', 'mailbox_templates', $_GET["template"]);
+        $mailbox_template = mailbox('get', 'mailbox_templates', $_GET['template']);
         if ($mailbox_template){
           $template_data = [
-            'template' => $mailbox_template
+            'template' => $mailbox_template,
+            'rl' => ['frame' => $mailbox_template['attributes']['rl_frame']],
           ];
           $template = 'edit/mailbox-templates.twig';
           $result = true;

data/web/templates/edit/aliasdomain.twig

@@ -31,10 +31,12 @@
 <hr>
 <form data-id="domratelimit" class="form-inline well" method="post">
   <label class="control-label mb-2">{{ lang.acl.ratelimit }}</label>
-  <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+  <div class="input-group mb-4">
+    <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
   <select name="rl_frame" class="form-control">
     {% include 'mailbox/rl-frame.twig' %}
   </select>
+  </div>
   <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ alias_domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
 </form>
 {% if dkim %}

data/web/templates/edit/domain-templates.twig

@@ -81,13 +81,12 @@
     <div class="row">
       <label class="control-label col-sm-2">{{ lang.edit.ratelimit }}</label>
       <div class="col-sm-10">
-        <input name="rl_value" type="number" value="{{ template.attributes.rl_value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
-        <select name="rl_frame" class="form-control">
-          <option value="s"{% if template.attributes.rl_frame == 's' %} selected{% endif %}>{{ lang.ratelimit.second }}</option>
-          <option value="m"{% if template.attributes.rl_frame == 'm' %} selected{% endif %}>{{ lang.ratelimit.minute }}</option>
-          <option value="h"{% if template.attributes.rl_frame == 'h' %} selected{% endif %}>{{ lang.ratelimit.hour }}</option>
-          <option value="d"{% if template.attributes.rl_frame == 'd' %} selected{% endif %}>{{ lang.ratelimit.day }}</option>
-        </select>
+        <div class="input-group">
+          <input name="rl_value" type="number" value="{{ template.attributes.rl_value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+          <select name="rl_frame" class="form-control">
+          {% include 'mailbox/rl-frame.twig' %}
+          </select>
+        </div>
       </div>
     </div>
     {% endif %}

data/web/templates/edit/domain.twig

@@ -145,14 +145,20 @@
     {% endif %}
   </div>
   <div id="dratelimit" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-ratelimit">
-    <form data-id="domratelimit" class="form-inline well" method="post">
-      <div class="row">
-        <div class="col-12">
-          <label class="control-label mb-2">{{ lang.edit.ratelimit }}</label>
-          <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
-          <select name="rl_frame" class="form-control">
+    <form data-id="domratelimit" class="well" method="post">
+      <div class="row mb-2">
+        <label class="control-label col-sm-2">{{ lang.edit.ratelimit }}</label>
+        <div class="col-sm-10">
+          <div class="input-group">
+            <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control placeholder="{{ lang.ratelimit.disabled }}">
+            <select name="rl_frame" class="form-control">
             {% include 'mailbox/rl-frame.twig' %}
-          </select>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="row mb-2">
+        <div class="offset-sm-2 col-sm-10">
           <button data-acl="{{ acl.ratelimit }}" class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
         </div>
       </div>

data/web/templates/edit/mailbox-templates.twig

@@ -118,14 +118,13 @@
     <div class="row mb-4">
       <label class="control-label col-sm-2">{{ lang.acl.ratelimit }}</label>
       <div class="col-sm-10">
+        <div class="input-group">
         <input name="rl_value" type="number" autocomplete="off" value="{{ template.attributes.rl_value }}" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
         <select name="rl_frame" class="form-control">
-          <option value="s"{% if template.attributes.rl_frame == 's' %} selected{% endif %}>{{ lang.ratelimit.second }}</option>
-          <option value="m"{% if template.attributes.rl_frame == 'm' %} selected{% endif %}>{{ lang.ratelimit.minute }}</option>
-          <option value="h"{% if template.attributes.rl_frame == 'h' %} selected{% endif %}>{{ lang.ratelimit.hour }}</option>
-          <option value="d"{% if template.attributes.rl_frame == 'd' %} selected{% endif %}>{{ lang.ratelimit.day }}</option>
+          {% include 'mailbox/rl-frame.twig' %}
         </select>
-        <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
+        </div>
+        <p class="text-muted mt-1">{{ lang.edit.mbox_rl_info }}</p>
       </div>
     </div>
     <hr>

data/web/templates/edit/mailbox.twig

@@ -379,18 +379,24 @@
     </form>
   </div>
   <div id="mrl" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-rl">
-    <form data-id="mboxratelimit" class="form-inline well" method="post">
-      <div class="row">
-        <div class="col-sm-1">
+    <form data-id="mboxratelimit" class="well" method="post">
+      <div class="row mb-2">
+        <div class="col-sm-2">
           <p class="text-muted">{{ lang.acl.ratelimit }}</p>
         </div>
         <div class="col-sm-10">
-          <input name="rl_value" type="number" autocomplete="off" value="{{ rl.value }}" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
-          <select name="rl_frame" class="form-control">
+          <div class="input-group">
+            <input name="rl_value" type="number" autocomplete="off" value="{{ rl.value }}" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
+            <select name="rl_frame" class="form-control">
             {% include 'mailbox/rl-frame.twig' %}
-          </select>
+            </select>
+          </div>
+        </div>  
+      </div>
+      <div class="row mb-2">
+        <div class="offset-sm-2 col-sm-10">  
           <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="mboxratelimit" data-item="{{ mailbox }}" data-api-url='edit/rl-mbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
-          <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
+          <p class="text-muted mt-2">{{ lang.edit.mbox_rl_info }}</p>
         </div>
       </div>
     </form>

data/web/templates/modals/mailbox.twig

@@ -155,14 +155,13 @@
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.acl.ratelimit }}</label>
             <div class="col-sm-10">
-              <input name="rl_value" id="rl_value" type="number" autocomplete="off" value="" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
-              <select name="rl_frame" id="rl_frame" class="form-control">
-                <option value="s">{{ lang.ratelimit.second }}</option>
-                <option value="m">{{ lang.ratelimit.minute }}</option>
-                <option value="h">{{ lang.ratelimit.hour }}</option>
-                <option value="d">{{ lang.ratelimit.day }}</option>
-              </select>
-              <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
+              <div class="input-group">
+                <input name="rl_value" id="rl_value" type="number" autocomplete="off" value="" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
+                <select name="rl_frame" id="rl_frame" class="form-control">
+                {% include 'mailbox/rl-frame.twig' %}
+                </select>
+              </div>
+              <p class="text-muted mt-1">{{ lang.edit.mbox_rl_info }}</p>
             </div>
           </div>
           <div class="row mb-2">
@@ -325,14 +324,13 @@
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.acl.ratelimit }}</label>
             <div class="col-sm-10">
-              <input name="rl_value" type="number" autocomplete="off" value="" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
-              <select name="rl_frame" class="form-control">
-                <option value="s">{{ lang.ratelimit.second }}</option>
-                <option value="m">{{ lang.ratelimit.minute }}</option>
-                <option value="h">{{ lang.ratelimit.hour }}</option>
-                <option value="d">{{ lang.ratelimit.day }}</option>
-              </select>
-              <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
+              <div class="input-group">
+                <input name="rl_value" type="number" autocomplete="off" value="" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
+                <select name="rl_frame" class="form-control">
+                {% include 'mailbox/rl-frame.twig' %}
+                </select>
+              </div>
+              <p class="text-muted mt-1">{{ lang.edit.mbox_rl_info }}</p>
             </div>
           </div>
           <hr>
@@ -462,13 +460,13 @@
           <hr>
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end" for="rl_frame">{{ lang.acl.ratelimit }}</label>
-            <div class="col-sm-7">
-              <input name="rl_value" id="addDomain_rl_value" type="number" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
-            </div>
-            <div class="col-sm-3">
-              <select name="rl_frame" id="addDomain_rl_frame" class="form-control">
-              {% include 'mailbox/rl-frame.twig' %}
-              </select>
+            <div class="col-sm-10">
+              <div class="input-group">
+                <input name="rl_value" id="addDomain_rl_value" type="number" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
+                <select name="rl_frame" id="addDomain_rl_frame" class="form-control">
+                {% include 'mailbox/rl-frame.twig' %}
+                </select>
+              </div>
             </div>
           </div>
           <hr>
@@ -600,16 +598,13 @@
           <hr>
           <div class="row">
             <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.edit.ratelimit }}</label>
-            <div class="col-sm-7">
-              <input name="rl_value" type="number" value="" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
-            </div>
-            <div class="col-sm-3">
-              <select name="rl_frame" class="form-control">
-                <option value="s">{{ lang.ratelimit.second }}</option>
-                <option value="m">{{ lang.ratelimit.minute }}</option>
-                <option value="h">{{ lang.ratelimit.hour }}</option>
-                <option value="d">{{ lang.ratelimit.day }}</option>
-              </select>
+            <div class="col-sm-10">
+              <div class="input-group">
+                <input name="rl_value" type="number" value="" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+                <select name="rl_frame" class="form-control">
+                {% include 'mailbox/rl-frame.twig' %}
+                </select>
+              </div>
             </div>
           </div>
           {% endif %}
@@ -819,13 +814,13 @@
           <hr>
           <div class="row mb-2">
             <label class="control-label col-sm-2 text-sm-end" for="rl_frame">{{ lang.acl.ratelimit }}</label>
-            <div class="col-sm-7">
-              <input name="rl_value" type="number" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
-            </div>
-            <div class="col-sm-3">
-              <select name="rl_frame" class="form-control">
+            <div class="col-sm-10">
+              <div class="input-group">
+                <input name="rl_value" type="number" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
+                <select name="rl_frame" class="form-control">
                 {% include 'mailbox/rl-frame.twig' %}
-              </select>
+                </select>
+              </div>
             </div>
           </div>
           <hr>