Improve "confirm deletion" behaviour

* add the event listener only once, instead of every time the form is clicked

* use a standard button by default, so that the second state with a
  "danger" button is more visible

* reset confirmation button to original state when losing focus

Co-authored-by: Glandos <bugs-github@antipoul.fr>
This commit is contained in:
zorun 2021-07-16 00:15:55 +02:00
parent da49012d58
commit 439282356c
2 changed files with 15 additions and 11 deletions

View file

@ -2,16 +2,20 @@
{% block js %} {% block js %}
$('#delete-project').click(function(){ let link = $('#delete-project').find('button');
var link = $(this).find('button'); let deleteOriginalHTML = link.html();
link.click(function(){ link.click(function() {
if ($(this).hasClass("confirm")){ if (link.hasClass("confirm")){
return true; return true;
} }
$(this).html("{{_("Are you sure?")}}"); link.html("{{_("Are you sure?")}}");
$(this).addClass("confirm"); link.addClass("confirm btn-danger");
return false; return false;
}); });
$('#delete-project').focusout(function() {
link.removeClass("confirm btn-danger");
link.html(deleteOriginalHTML);
}); });
$('.custom-file-input').on('change', function(event) { $('.custom-file-input').on('change', function(event) {

View file

@ -111,7 +111,7 @@
{{ form.hidden_tag() }} {{ form.hidden_tag() }}
{{ input(form.password) }} {{ input(form.password) }}
<div class="actions"> <div class="actions">
<button class="btn btn-danger">{{ _("Delete project") }}</button> <button class="btn btn-primary">{{ _("Delete project") }}</button>
</div> </div>
{% endmacro %} {% endmacro %}