From ff179360ccc967615ad178d91f81022d645f8e0f Mon Sep 17 00:00:00 2001
From: Igor Scheller <igor.scheller@igorshp.de>
Date: Sun, 5 Nov 2023 01:27:12 +0100
Subject: [PATCH] Added confirmation dialog to delete forms

---
 resources/assets/js/forms.js                  | 65 +++++++++++++++++++
 resources/lang/de_DE/default.po               |  3 +
 resources/lang/en_US/default.po               |  3 +
 resources/views/admin/locations/index.twig    |  2 +-
 resources/views/layouts/app.twig              |  2 +-
 resources/views/macros/form.twig              | 14 ++++
 resources/views/pages/design.twig             | 18 +++--
 resources/views/pages/news/news.twig          |  2 +-
 resources/views/pages/questions/overview.twig |  2 +-
 resources/views/pages/settings/sessions.twig  |  5 +-
 10 files changed, 102 insertions(+), 14 deletions(-)

diff --git a/resources/assets/js/forms.js b/resources/assets/js/forms.js
index 3acfd3c6..e98dddd6 100644
--- a/resources/assets/js/forms.js
+++ b/resources/assets/js/forms.js
@@ -275,6 +275,71 @@ ready(() => {
   document.querySelectorAll('.modal').forEach((element) => new bootstrap.Modal(element));
 });
 
+/**
+ * Show confirmation modal before submitting form
+ *
+ * Uses the buttons data attributes to show in the modal:
+ * - data-confirm_title: Optional title of the modal
+ * - data-confirm_submit: Body of the modal
+ *
+ * The class, title and content of the requesting button gets copied for confirmation
+ *
+ */
+ready(() => {
+  document.querySelectorAll('[data-confirm_submit_title], [data-confirm_submit_text]').forEach((element) => {
+    let modalOpen = false;
+    let oldType = element.type;
+    if (element.type !== 'submit') {
+      return;
+    }
+
+    element.type = 'button';
+    element.addEventListener('click', (event) => {
+      if (modalOpen) {
+        return;
+      }
+      event.preventDefault();
+
+      document.getElementById('confirmation-modal')?.remove();
+      document.body.insertAdjacentHTML(
+        'beforeend',
+        `
+          <div class="modal" tabindex="-1" id="confirmation-modal">
+            <div class="modal-dialog">
+              <div class="modal-content ${document.body.dataset.theme_type === 'light' ? 'bg-white' : 'bg-dark'}">
+                <div class="modal-header">
+                  <h5 class="modal-title">${element.dataset.confirm_submit_title ?? ''}</h5>
+                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body${element.dataset.confirm_submit_text ? '' : ' d-none'}">
+                  <p>${element.dataset.confirm_submit_text ?? ''}</p>
+                </div>
+                <div class="modal-footer">
+                  <button type="button" class="${element.className}"
+                    title="${element.title}" data-submit="">${element.innerHTML}</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        `
+      );
+
+      let modal = document.getElementById('confirmation-modal');
+      modal.addEventListener('hide.bs.modal', () => {
+        modalOpen = false;
+      });
+      modal.querySelector('[data-submit]').addEventListener('click', (event) => {
+        element.type = oldType;
+        element.click();
+      });
+
+      modalOpen = true;
+      let bootstrapModal = new bootstrap.Modal(modal);
+      bootstrapModal.show();
+    });
+  });
+});
+
 /**
  * Show oauth buttons on welcome title click
  */
diff --git a/resources/lang/de_DE/default.po b/resources/lang/de_DE/default.po
index 54113d24..6134dd18 100644
--- a/resources/lang/de_DE/default.po
+++ b/resources/lang/de_DE/default.po
@@ -1989,3 +1989,6 @@ msgstr "Was möchtest Du machen?"
 
 msgid "registration.register"
 msgstr "Registrieren"
+
+msgid "confirmation.delete"
+msgstr "Möchtest du es wirklich löschen?"
diff --git a/resources/lang/en_US/default.po b/resources/lang/en_US/default.po
index 8213d122..3ec07cef 100644
--- a/resources/lang/en_US/default.po
+++ b/resources/lang/en_US/default.po
@@ -644,3 +644,6 @@ msgstr "Please enter a lastname in your settings!"
 
 msgid "mobile.required.hint"
 msgstr "Please enter a mobile number in your settings!"
+
+msgid "confirmation.delete"
+msgstr "Do you really want to delete it?"
diff --git a/resources/views/admin/locations/index.twig b/resources/views/admin/locations/index.twig
index 2b7e937e..1df7cad4 100644
--- a/resources/views/admin/locations/index.twig
+++ b/resources/views/admin/locations/index.twig
@@ -57,7 +57,7 @@
                                             <form method="post" class="ps-1">
                                                 {{ csrf() }}
                                                 {{ f.hidden('id', location.id) }}
-                                                {{ f.button(m.icon('trash'), {'title': __('form.delete'), 'name': 'delete', 'type': 'submit', 'btn_type': 'danger', 'size': 'sm'}) }}
+                                                {{ f.delete(null, {'size': 'sm','confirm_title': location.name|e}) }}
                                             </form>
 
                                         </div>
diff --git a/resources/views/layouts/app.twig b/resources/views/layouts/app.twig
index fa07f01e..b074b73d 100644
--- a/resources/views/layouts/app.twig
+++ b/resources/views/layouts/app.twig
@@ -23,7 +23,7 @@
 
     {% endblock %}
 </head>
-<body>
+<body data-theme_type="{{ theme.type }}">
 
 {% block body %}
     {% block header %}
diff --git a/resources/views/macros/form.twig b/resources/views/macros/form.twig
index f13ca267..f6a60deb 100644
--- a/resources/views/macros/form.twig
+++ b/resources/views/macros/form.twig
@@ -261,6 +261,8 @@ Renders a button.
                                     Must be a Bootstrap icon class without prefix, such as "info" or "check".
 @param {string} [opt.icon_right] - Optional icon to be added after the button label.
                                     Must be a Bootstrap icon class without prefix, such as "info" or "check".
+@param {string} [opt.confirm_title] - Optional value for the confirmation title.
+@param {string} [opt.confirm_text] - Optional value for the confirmation text.
 #}
 {% macro button(label, opt) %}
     <button
@@ -270,6 +272,8 @@ Renders a button.
         {%- if opt.name is defined %} name="{{ opt.name }}"{% endif %}
         {%- if opt.title is defined %} title="{{ opt.title }}"{% endif %}
         {%- if opt.value is defined or opt.name is defined %} value="{{ opt.value|default('1') }}"{% endif -%}
+        {%- if opt.confirm_title is defined %} data-confirm_submit_title="{{ opt.confirm_title }}"{% endif -%}
+        {%- if opt.confirm_text is defined %} data-confirm_submit_text="{{ opt.confirm_text }}"{% endif -%}
     >
         {%- if opt.icon_left is defined %}<span class="bi bi-{{ opt.icon_left }}"></span>{% endif %}
         {{ label }}
@@ -281,6 +285,16 @@ Renders a button.
     {{ _self.button(label|default(__('form.submit')), {'type': 'submit', 'btn_type': 'primary'}|merge(opt|default({}))) }}
 {%- endmacro %}
 
+{% macro delete(label, opt) %}
+    {{ _self.submit(label|default(' '), {
+        'icon_left': 'trash',
+        'title': __('form.delete'),
+        'name': 'delete',
+        'btn_type': 'danger',
+        'confirm_text': __('confirmation.delete')
+    }|merge(opt|default({}))) }}
+{%- endmacro %}
+
 {#
 Renders a "checkbox" element that will be styled as switch.
 
diff --git a/resources/views/pages/design.twig b/resources/views/pages/design.twig
index 8d9d5307..ced7421f 100644
--- a/resources/views/pages/design.twig
+++ b/resources/views/pages/design.twig
@@ -354,10 +354,14 @@
                                 'title': 'Click me!',
                             }) }}
                         </div>
-                        <code>f.submit(label)</code>
-                        <form id="form">
+                        <code>f.submit(label, opt)</code>
+                        <form class="prevent-default">
                             {{ f.submit('Go!') }}
                         </form>
+                        <code>f.delete(label, opt)</code>
+                        <form class="prevent-default">
+                            {{ f.delete('Delete it', {'confirm_title': 'Delete some item'}) }}
+                        </form>
                     </div>
 
                     <div id="checkboxes" class="col-md-3 col-lg-2">
@@ -529,9 +533,11 @@ Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</code></pre>
     </div>
     </div>
     <script>
-        document.getElementById('form').addEventListener('submit', (e) => {
-            e.preventDefault();
-            return false;
-        });
+        [...document.getElementsByClassName('prevent-default')].forEach((element) => {
+            element.addEventListener('submit', (e) => {
+                e.preventDefault();
+                return false;
+            });
+        })
     </script>
 {% endblock %}
diff --git a/resources/views/pages/news/news.twig b/resources/views/pages/news/news.twig
index dc00fead..322ba717 100644
--- a/resources/views/pages/news/news.twig
+++ b/resources/views/pages/news/news.twig
@@ -33,7 +33,7 @@
                                 action="{{ url('/news/comment/' ~ comment.id) }}" enctype="multipart/form-data"
                                 method="post">
                                 {{ csrf() }}
-                                {{ f.submit(m.icon('trash'), {'name': 'delete', 'btn_type': 'danger', 'size': 'sm', 'title': __('form.delete')}) }}
+                                {{ f.delete(null, {'size': 'sm', 'confirm_title': comment.text[:40]|e}) }}
                             </form>
                         </div>
                     {% endif %}
diff --git a/resources/views/pages/questions/overview.twig b/resources/views/pages/questions/overview.twig
index e01e8cec..d11a3bb5 100644
--- a/resources/views/pages/questions/overview.twig
+++ b/resources/views/pages/questions/overview.twig
@@ -54,7 +54,7 @@
                                                 >
                                                     {{ csrf() }}
                                                     {{ f.hidden('id', question.id) }}
-                                                    {{ f.submit(m.icon('trash'), {'name': 'delete', 'btn_type': 'danger', 'size': 'sm', 'title': __('form.delete')}) }}
+                                                    {{ f.delete(null, {'size': 'sm', 'confirm_title': question.text[:40]|e}) }}
                                                 </form>
                                             {% endif %}
 
diff --git a/resources/views/pages/settings/sessions.twig b/resources/views/pages/settings/sessions.twig
index 7e0df8c1..cecc22dc 100644
--- a/resources/views/pages/settings/sessions.twig
+++ b/resources/views/pages/settings/sessions.twig
@@ -20,10 +20,7 @@
                                 <form action="" enctype="multipart/form-data" method="post">
                                     {{ csrf() }}
                                     {{ f.hidden('id', 'all') }}
-                                    {{ f.submit(
-                                        __('form.delete_all'),
-                                        {'name': 'delete', 'btn_type': 'danger', 'size': 'sm', 'icon_left': 'trash'}
-                                    ) }}
+                                    {{ f.delete(__('form.delete_all'), {'size': 'sm', 'confirm_title': __('form.delete_all')}) }}
                                 </form>
                             {% endif %}
                         </th>