From 2d2c033ba711a20488c7d15fae2bcbec39b83321 Mon Sep 17 00:00:00 2001
From: FreddleSpl0it <patschul@posteo.de>
Date: Fri, 1 Jul 2022 16:21:02 +0200
Subject: [PATCH] [BS5] add spacing

---
 data/web/templates/modals/user.twig   | 90 ++++++++++++++-------------
 data/web/templates/user/Pushover.twig | 18 +++---
 2 files changed, 56 insertions(+), 52 deletions(-)

diff --git a/data/web/templates/modals/user.twig b/data/web/templates/modals/user.twig
index 6d95a3c9..8c96397f 100644
--- a/data/web/templates/modals/user.twig
+++ b/data/web/templates/modals/user.twig
@@ -1,6 +1,6 @@
 <!-- change fido2 fn -->
 <div class="modal fade" id="fido2ChangeFn" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-xl">
+  <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.fido2.set_fn }}</h3>
@@ -10,8 +10,8 @@
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="false" data-id="fido2ChangeFn" role="form" method="post" autocomplete="off">
           <input type="hidden" class="form-control" name="fido2_cid" id="fido2_cid">
-          <div class="row">
-            <label class="control-label col-sm-4" for="fido2_fn">{{ lang.fido2.fn }}:</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-4 text-end" for="fido2_fn">{{ lang.fido2.fn }}:</label>
             <div class="col-sm-8">
               <input type="text" class="form-control" name="fido2_fn">
             </div>
@@ -37,32 +37,32 @@
       <div class="modal-body">
         <p>{{ lang.add.syncjob_hint }}</p>
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_syncjob">
-          <div class="row">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="host1">{{ lang.add.hostname }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="host1" required>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-4">
             <label class="control-label col-sm-2" for="port1">{{ lang.add.port }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="port1" min="1" max="65535" value="143" required>
               <small class="text-muted">1-65535</small>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="user1">{{ lang.add.username }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="user1" required>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-4">
             <label class="control-label col-sm-2" for="password1">{{ lang.add.password }}</label>
             <div class="col-sm-10">
               <input type="password" class="form-control" name="password1" data-hibp="true" required>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="enc1">{{ lang.add.enc_method }}</label>
             <div class="col-sm-10">
               <select name="enc1" title="{{ lang.add.select }}" required>
@@ -72,109 +72,109 @@
               </select>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="mins_interval">{{ lang.add.mins_interval }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="mins_interval" min="1" max="43800" value="20" required>
               <small class="text-muted">1-43800</small>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="subfolder2">{{ lang.edit.subfolder2|raw }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="subfolder2" value="">
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="maxage">{{ lang.edit.maxage|raw }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="maxage" min="0" max="32000" value="0">
               <small class="text-muted">0-32000</small>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="maxbytespersecond">{{ lang.edit.maxbytespersecond|raw }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="maxbytespersecond" min="0" max="125000000" value="0">
               <small class="text-muted">0-125000000</small>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="timeout1">{{ lang.edit.timeout1 }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="timeout1" min="1" max="32000" value="600">
               <small class="text-muted">1-32000</small>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="timeout2">{{ lang.edit.timeout2 }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="timeout2" min="1" max="32000" value="600">
               <small class="text-muted">1-32000</small>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="exclude">{{ lang.add.exclude }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="exclude" value="(?i)spam|(?i)junk">
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-4">
             <label class="control-label col-sm-2" for="custom_params">{{ lang.add.custom_params }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="custom_params" placeholder="--delete2folders --otheroption">
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="delete2duplicates" checked> {{ lang.add.delete2duplicates }} (--delete2duplicates)</label>
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="delete1"> {{ lang.add.delete1 }} (--delete1)</label>
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="delete2"> {{ lang.add.delete2 }} (--delete2)</label>
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="automap" checked> {{ lang.add.automap }} (--automap)</label>
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="skipcrossduplicates"> {{ lang.add.skipcrossduplicates }} (--skipcrossduplicates)</label>
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="subscribeall" checked> {{ lang.add.subscribeall }} (--subscribeall)</label>
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-4">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="row">
+          <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-success" data-action="add_item" data-id="add_syncjob" data-api-url='add/syncjob' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
@@ -186,7 +186,7 @@
 </div><!-- add sync job modal -->
 <!-- app passwd modal -->
 <div class="modal fade" id="addAppPasswdModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-xl">
+  <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.add.app_password }}</h3>
@@ -194,26 +194,26 @@
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-pwgen-length="32" data-id="add_apppasswd">
-          <div class="row">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="app_name">{{ lang.add.app_name }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="app_name" required>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-4">
             <label class="control-label col-sm-2" for="app_passwd">{{ lang.user.password }} (<a href="#" class="generate_password">{{ lang.user.generate }}</a>)</label>
             <div class="col-sm-10">
               <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="app_passwd" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="app_passwd2">{{ lang.user.password_repeat }}</label>
             <div class="col-sm-10">
               <input type="password" data-pwgen-field="true" class="form-control" name="app_passwd2" autocomplete="new-password" required>
               <p class="text-muted">{{ lang.user.new_password_description }}</p>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-4">
             <label class="control-label col-sm-2" for="protocols">{{ lang.add.app_passwd_protocols }}</label>
             <div class="col-sm-10">
               <select class="full-width-select" data-live-search="true" id="protocols" name="protocols" multiple>
@@ -226,14 +226,14 @@
               </select>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="row">
+          <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-success" data-action="add_item" data-id="add_apppasswd" data-api-url='add/app-passwd' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
@@ -259,37 +259,41 @@
 </div><!-- log modal -->
 <!-- pw change modal -->
 <div class="modal fade" id="pwChangeModal" tabindex="-1" role="dialog" aria-labelledby="pwChangeModalLabel">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.user.change_password }}</h3>
-        {% if number_of_app_passwords > 0 %}
-        <p>{{ lang.user.change_password_hint_app_passwords | replace({'{{number_of_app_passwords}}': number_of_app_passwords}) }}</p>
-        {% endif %}
         <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="false" data-id="pwchange" role="form" method="post" autocomplete="off">
           <div class="row">
             <label class="control-label col-sm-3" for="user_new_pass">{{ lang.user.new_password }} (<a href="#" class="generate_password">{{ lang.user.generate }}</a>)</label>
-            <div class="col-sm-5">
+            <div class="col-sm-9">
               <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="user_new_pass" autocomplete="new-password" required>
             </div>
           </div>
           <div class="row">
             <label class="control-label col-sm-3" for="user_new_pass2">{{ lang.user.new_password_repeat }}</label>
-            <div class="col-sm-5">
+            <div class="col-sm-9">
               <input type="password" data-pwgen-field="true" class="form-control" name="user_new_pass2" autocomplete="new-password" required>
               <p class="text-muted">{{ lang.user.new_password_description }}</p>
             </div>
           </div>
           <hr>
-          <div class="row">
+          <div class="row mb-4">
             <label class="control-label col-sm-3" for="user_old_pass">{{ lang.user.password_now }}</label>
-            <div class="col-sm-5">
+            <div class="col-sm-9">
               <input type="password" class="form-control" name="user_old_pass" autocomplete="off" required>
             </div>
           </div>
+          {% if number_of_app_passwords > 0 %}
+            <div class="row mb-2">
+              <div class="offset-sm-3 col-sm-9">
+                <small>{{ lang.user.change_password_hint_app_passwords | replace({'{{number_of_app_passwords}}': number_of_app_passwords}) }}</small>
+              </div>
+            </div>
+          {% endif %}
           <div class="row">
             <div class="offset-sm-3 col-sm-9">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="pwchange" data-item="null" data-api-url='edit/self' data-api-attr='{}' href="#">{{ lang.user.change_password }}</button>
@@ -300,9 +304,9 @@
     </div>
   </div>
 </div><!-- pw change modal -->
-<!-- pw change modal -->
+<!-- temp alias modal -->
 <div class="modal fade" id="tempAliasModal" tabindex="-1" role="dialog" aria-labelledby="tempAliasModalLabel">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="false" data-id="pwchange" role="form" method="post" autocomplete="off">
@@ -335,10 +339,10 @@
       </div>
     </div>
   </div>
-</div><!-- pw change modal -->
+</div><!-- temp alias modal -->
 <!-- sieve filter modal -->
 <div class="modal fade" id="userFilterModal" tabindex="-1" role="dialog">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.user.active_sieve }}</h3>
diff --git a/data/web/templates/user/Pushover.twig b/data/web/templates/user/Pushover.twig
index 2a0eb341..346738da 100644
--- a/data/web/templates/user/Pushover.twig
+++ b/data/web/templates/user/Pushover.twig
@@ -19,37 +19,37 @@
             <p class="text-muted">{{ lang.user.pushover_info|format(mailcow_cc_username)|raw }}</p>
             <p class="text-muted">{{ lang.user.pushover_vars|raw }}: <code>{SUBJECT}</code>, <code>{SENDER}</code></p>
             <div class="row">
-              <div class="col-sm-6">
+              <div class="col-sm-6 mb-2">
                 <div class="form-group">
                   <label for="token">API Token/Key (Application)</label>
                   <input type="text" class="form-control" name="token" maxlength="30" value="{{ pushover_data.token }}" required>
                 </div>
               </div>
-              <div class="col-sm-6">
+              <div class="col-sm-6 mb-2">
                 <div class="form-group">
                   <label for="key">User/Group Key</label>
                   <input type="text" class="form-control" name="key" maxlength="30" value="{{ pushover_data.key }}" required>
                 </div>
               </div>
-              <div class="col-sm-6">
+              <div class="col-sm-6 mb-2">
                 <div class="form-group">
                   <label for="title">{{ lang.user.pushover_title }}</label>
                   <input type="text" class="form-control" name="title" value="{{ pushover_data.title }}" placeholder="Mail">
                 </div>
               </div>
-              <div class="col-sm-6">
+              <div class="col-sm-6 mb-2">
                 <div class="form-group">
                   <label for="text">{{ lang.user.pushover_text }}</label>
                   <input type="text" class="form-control" name="text" value="{{ pushover_data.text }}" placeholder="You've got mail 📧">
                 </div>
               </div>
-              <div class="col-sm-12">
+              <div class="col-sm-12 mb-4">
                 <div class="form-group">
                   <label for="text">{{ lang.user.pushover_sender_array|raw }}</label>
                   <input type="text" class="form-control" name="senders" value="{{ pushover_data.senders }}" placeholder="sender1@example.com, sender2@example.com">
                 </div>
               </div>
-              <div class="col-sm-12">
+              <div class="col-sm-12 mb-2">
                 <div class="checkbox">
                   <label><input type="checkbox" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.user.active }}</label>
                 </div>
@@ -60,11 +60,11 @@
                 </legend>
                 <hr />
               </div>
-              <div class="col-sm-12">
+              <div class="col-sm-12 mb-4">
                 <div id="po_advanced" class="collapse">
                   <div class="form-group">
                     <label for="text">{{ lang.user.pushover_sender_regex }}</label>
-                    <input type="text" class="form-control" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
+                    <input type="text" class="form-control mb-4" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
                     <div class="checkbox">
                       <label><input type="checkbox" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.user.pushover_evaluate_x_prio|raw }}</label>
                     </div>
@@ -75,7 +75,7 @@
                 </div>
               </div>
             </div>
-            <div class="btn-group mass-actions-user" data-acl="{{ acl.pushover }}">
+            <div class="btn-group mass-actions-user mb-2" data-acl="{{ acl.pushover }}">
               <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" data-action="edit_selected" data-id="pushover" data-item="{{ mailcow_cc_username }}" data-api-url='edit/pushover' data-api-attr='{}' href="#">{{ lang.user.save }}</a>
               <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="pushover-test" data-item="{{ mailcow_cc_username }}" data-api-url='edit/pushover-test' data-api-attr='{}' href="#"><i class="bi bi-check-all"></i> {{ lang.user.pushover_verify }}</a>
               <a id="pushover_delete" class="btn btn-sm d-block d-sm-inline btn-danger" data-action="edit_selected" data-id="pushover-delete" data-item="{{ mailcow_cc_username }}" data-api-url='edit/pushover' data-api-attr='{"delete":"true"}' href="#"><i class="bi bi-trash"></i> {{ lang.user.remove }}</a>