Use Stimulus for delete button handling.

This commit is contained in:
Jan Böhmer 2022-07-29 22:42:55 +02:00
parent 45db4314f7
commit 9cc5208223
5 changed files with 67 additions and 13 deletions

View file

@ -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;
}
}
});
}
}

View file

@ -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">

View file

@ -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">

View file

@ -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">

View file

@ -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) }}">