From 9cc5208223790d65802d43b2edbb0543ebd07b1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20B=C3=B6hmer?= <mail@jan-boehmer.de>
Date: Fri, 29 Jul 2022 22:42:55 +0200
Subject: [PATCH] Use Stimulus for delete button handling.

---
 .../elements/delete_btn_controller.js         | 47 +++++++++++++++++++
 templates/AdminPages/_delete_form.html.twig   |  6 +--
 templates/LogSystem/_log_table.html.twig      |  6 ++-
 templates/Parts/info/_tools.html.twig         |  5 +-
 templates/Users/_2fa_settings.html.twig       | 16 ++++---
 5 files changed, 67 insertions(+), 13 deletions(-)
 create mode 100644 assets/controllers/elements/delete_btn_controller.js

diff --git a/assets/controllers/elements/delete_btn_controller.js b/assets/controllers/elements/delete_btn_controller.js
new file mode 100644
index 00000000..1845603a
--- /dev/null
+++ b/assets/controllers/elements/delete_btn_controller.js
@@ -0,0 +1,47 @@
+import {Controller} from "@hotwired/stimulus";
+
+import * as bootbox from "bootbox";
+
+export default class extends Controller
+{
+    connect()
+    {
+        this._confirmed = false;
+    }
+
+    submit(event) {
+        //If a user has not already confirmed the deletion, just let turbo do its work
+        if(this._confirmed) {
+            this._confirmed = false;
+            return;
+        }
+
+        //Prevent turbo from doing its work
+        event.preventDefault();
+
+        const message = this.element.dataset.deleteMessage;
+        const title = this.element.dataset.deleteTitle;
+
+        const form = this.element;
+        const that = this;
+
+        //Create a clone of the event with the same submitter, so we can redispatch it if needed
+        //We need to do this that way, as we need the submitter info, just calling form.submit() would not work
+        this._our_event = new SubmitEvent('submit', {
+            submitter: event.submitter,
+            bubbles: true, //This line is important, otherwise Turbo will not receive the event
+        });
+
+        const confirm = bootbox.confirm({
+            message: message, title: title, callback: function (result) {
+                //If the dialog was confirmed, then submit the form.
+                if (result) {
+                    that._confirmed = true;
+                    form.dispatchEvent(that._our_event);
+                } else {
+                    that._confirmed = false;
+                }
+            }
+        });
+    }
+}
\ No newline at end of file
diff --git a/templates/AdminPages/_delete_form.html.twig b/templates/AdminPages/_delete_form.html.twig
index 4392db70..14a2c909 100644
--- a/templates/AdminPages/_delete_form.html.twig
+++ b/templates/AdminPages/_delete_form.html.twig
@@ -1,6 +1,6 @@
-<form method="post" class="" action="{{ entity|entityURL('delete') }}"
-      data-delete-form data-title="{% trans  with {'%name%': entity.name }%}entity.delete.confirm_title{% endtrans %}"
-      data-message="{% trans %}entity.delete.message{% endtrans %}">
+<form method="post" class="" action="{{ entity|entityURL('delete') }}" {{ stimulus_controller('elements/delete_btn') }} {{ stimulus_action('elements/delete_btn', "submit", "submit") }}
+      data-delete-title="{% trans  with {'%name%': entity.name }%}entity.delete.confirm_title{% endtrans %}"
+      data-delete-message="{% trans %}entity.delete.message{% endtrans %}">
     <input type="hidden" name="_method" value="DELETE">
     <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ entity.id) }}">
     <div class="form-group">
diff --git a/templates/LogSystem/_log_table.html.twig b/templates/LogSystem/_log_table.html.twig
index 0b432932..6fb347df 100644
--- a/templates/LogSystem/_log_table.html.twig
+++ b/templates/LogSystem/_log_table.html.twig
@@ -1,5 +1,7 @@
-<form method="post" action="{{ url("log_undo") }}" data-delete-form data-title="{% trans %}log.undo.confirm_title{% endtrans %}"
-      data-message="{% trans %}log.undo.confirm_message{% endtrans %}">
+<form method="post" action="{{ url("log_undo") }}"
+        {{ stimulus_controller('elements/delete_btn') }} {{ stimulus_action('elements/delete_btn', "submit", "submit") }}
+      data-delete-title="{% trans %}log.undo.confirm_title{% endtrans %}"
+      data-delete-message="{% trans %}log.undo.confirm_message{% endtrans %}">
     <input type="hidden" name="redirect_back" value="{{ app.request.uri }}">
     <div id="part_list" class="" data-datatable data-settings='{{ datatable_settings(datatable) }}'>
         <div class="card-body">
diff --git a/templates/Parts/info/_tools.html.twig b/templates/Parts/info/_tools.html.twig
index e00a362d..755ec09a 100644
--- a/templates/Parts/info/_tools.html.twig
+++ b/templates/Parts/info/_tools.html.twig
@@ -28,8 +28,9 @@
 {% endif %}
 
 <form method="post" class="mt-2" action="{{ part|entityURL('delete') }}"
-      data-delete-form data-title="{% trans  with {'%name%': part.name }%}part.delete.confirm_title{% endtrans %}"
-      data-message="{% trans %}part.delete.message{% endtrans %}">
+        {{ stimulus_controller('elements/delete_btn') }} {{ stimulus_action('elements/delete_btn', "submit", "submit") }}
+      data-delete-title="{% trans  with {'%name%': part.name }%}part.delete.confirm_title{% endtrans %}"
+      data-delete-message="{% trans %}part.delete.message{% endtrans %}">
     <input type="hidden" name="_method" value="DELETE">
     <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ part.id) }}">
     <div class="form-group">
diff --git a/templates/Users/_2fa_settings.html.twig b/templates/Users/_2fa_settings.html.twig
index e9770c5a..5068e58f 100644
--- a/templates/Users/_2fa_settings.html.twig
+++ b/templates/Users/_2fa_settings.html.twig
@@ -29,7 +29,7 @@
             <div class="tab-pane fade show active" id="tfa-google" role="tabpanel" aria-labelledby="google-tab">
                 {% set google_form_attr = {}  %}
                 {% if tfa_google.enabled %}
-                    {% set google_form_attr = { 'data-delete-form': true,
+                    {% set google_form_attr = { 'data-delete-form': true, 'data-controller': 'elements--delete-btn', 'data-action': 'submit->elements--delete-btn#submit',
                         'data-title': 'tfa_google.disable.confirm_title' | trans, 'data-message': 'tfa_google.disable.confirm_message'|trans} %}
                 {% endif %}
 
@@ -84,7 +84,7 @@
                         <span>{% trans %}tfa_backup.explanation{% endtrans %}</span>
                     </div>
                 {% else %}
-                    {% set backup_form_attr = { 'data-delete-form': true,
+                    {% set backup_form_attr = { 'data-delete-form': true, 'data-controller': 'elements--delete-btn', 'data-action': 'submit->elements--delete-btn#submit',
                         'data-title': 'tfa_backup.reset_codes.confirm_title' | trans, 'data-message': 'tfa_backup.reset_codes.confirm_message' | trans} %}
                     {{ form_start(backup_form, { 'attr': backup_form_attr}) }}
                     <div class="offset-sm-3">
@@ -112,8 +112,10 @@
 
                 {% if user.u2FKeys is not empty %}
                     <b>{% trans %}tfa_u2f.table_caption{% endtrans %}:</b>
-                    <form action="{{ url('u2f_delete') }}" method="post" data-delete-form data-title="{% trans %}tfa_u2f.delete_u2f.confirm_title{% endtrans %}"
-                          data-message="{% trans %}tfa_u2f.delete_u2f.confirm_message{% endtrans %}">
+                    <form action="{{ url('u2f_delete') }}" method="post"
+                            {{ stimulus_controller('elements/delete_btn') }} {{ stimulus_action('elements/delete_btn', "submit", "submit") }}
+                          data-delete-title="{% trans %}tfa_u2f.delete_u2f.confirm_title{% endtrans %}"
+                          data-delete-message="{% trans %}tfa_u2f.delete_u2f.confirm_message{% endtrans %}">
                         <input type="hidden" name="_method" value="DELETE">
                         <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ user.id) }}">
                         <table class="table table-striped table-bordered table-sm mt-2">
@@ -146,8 +148,10 @@
 
             <div class="tab-pane fade" id="tfa-trustedDevices" role="tabpanel" aria-labelledby="trustedDevices-tab-tab">
                 <p>{% trans %}tfa_trustedDevices.explanation{% endtrans %}</p>
-                <form action="{{ url('tfa_trustedDevices_invalidate') }}" method="post" data-delete-form data-title="{% trans %}tfa_trustedDevices.invalidate.confirm_title{% endtrans %}"
-                      data-message="{% trans %}tfa_trustedDevices.invalidate.confirm_message{% endtrans %}">
+                <form action="{{ url('tfa_trustedDevices_invalidate') }}" method="post"
+                        {{ stimulus_controller('elements/delete_btn') }} {{ stimulus_action('elements/delete_btn', "submit", "submit") }}
+                      data-delete-title="{% trans %}tfa_trustedDevices.invalidate.confirm_title{% endtrans %}"
+                      data-delete-message="{% trans %}tfa_trustedDevices.invalidate.confirm_message{% endtrans %}">
                     <input type="hidden" name="_method" value="DELETE">
                     <input type="hidden" name="_token" value="{{ csrf_token('devices_reset' ~ user.id) }}">