From 439282356c1b2d311a09450c5ddbb0a291c43662 Mon Sep 17 00:00:00 2001
From: zorun <github@bitsofnetworks.org>
Date: Fri, 16 Jul 2021 00:15:55 +0200
Subject: [PATCH] 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>
---
 ihatemoney/templates/edit_project.html | 24 ++++++++++++++----------
 ihatemoney/templates/forms.html        |  2 +-
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/ihatemoney/templates/edit_project.html b/ihatemoney/templates/edit_project.html
index f2fffb20..7fcc725e 100644
--- a/ihatemoney/templates/edit_project.html
+++ b/ihatemoney/templates/edit_project.html
@@ -2,16 +2,20 @@
 
 {% block js %}
 
-    $('#delete-project').click(function(){
-        var link = $(this).find('button');
-        link.click(function(){
-            if ($(this).hasClass("confirm")){
-                return true;
-            }
-            $(this).html("{{_("Are you sure?")}}");
-            $(this).addClass("confirm");
-            return false;
-        });
+    let link = $('#delete-project').find('button');
+    let deleteOriginalHTML = link.html();
+    link.click(function() {
+        if (link.hasClass("confirm")){
+            return true;
+        }
+        link.html("{{_("Are you sure?")}}");
+        link.addClass("confirm btn-danger");
+        return false;
+    });
+
+    $('#delete-project').focusout(function() {
+        link.removeClass("confirm btn-danger");
+        link.html(deleteOriginalHTML);
     });
 
     $('.custom-file-input').on('change', function(event) {
diff --git a/ihatemoney/templates/forms.html b/ihatemoney/templates/forms.html
index eb3321a0..b17fa14e 100644
--- a/ihatemoney/templates/forms.html
+++ b/ihatemoney/templates/forms.html
@@ -111,7 +111,7 @@
     {{ form.hidden_tag() }}
     {{ input(form.password) }}
     <div class="actions">
-        <button class="btn btn-danger">{{ _("Delete project") }}</button>
+        <button class="btn btn-primary">{{ _("Delete project") }}</button>
     </div>
 
 {% endmacro %}