From ba27ff552bd9b9d252a5eedc4ca5e24e63c2acbd Mon Sep 17 00:00:00 2001
From: Benjamin Bertrand <benjamin.bertrand@esss.se>
Date: Tue, 19 Dec 2017 21:46:29 +0100
Subject: [PATCH] Add confirmation dialog to delete

Create macro to add delete button with modal dialog
to cancel or confirm deletion.
---
 app/templates/_helpers.html          | 23 +++++++++++++++++++++++
 app/templates/network/view_host.html |  7 +++----
 app/templates/users/profile.html     |  7 +++----
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/app/templates/_helpers.html b/app/templates/_helpers.html
index acc9431..3508eaa 100644
--- a/app/templates/_helpers.html
+++ b/app/templates/_helpers.html
@@ -43,3 +43,26 @@
 {% macro format_datetime(dt) -%}
   {{ dt.strftime("%Y-%m-%d %H:%M") }}
 {%- endmacro %}
+
+{% macro delete_button_with_confirmation(title, modal_id, message) -%}
+  <button type="button" class="btn btn-light" data-toggle="modal" data-target={{ "#%s" | format(modal_id) }}>
+    <span class="oi oi-trash" title="{{ title }}" aria-hidden="true"></span>
+  </button>
+  <!-- Modal -->
+  <div class="modal fade" id="{{ modal_id }}" tabindex="-1" role="dialog" aria-labelledby="delete-confirmation" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h6 class="modal-title">{{ message }}</h6>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+          <button type="submit" class="btn btn-primary">OK</button>
+        </div>
+      </div>
+    </div>
+  </div>
+{%- endmacro %}
diff --git a/app/templates/network/view_host.html b/app/templates/network/view_host.html
index 38efba3..50ae3f9 100644
--- a/app/templates/network/view_host.html
+++ b/app/templates/network/view_host.html
@@ -1,5 +1,5 @@
 {% extends "network/hosts.html" %}
-{% from "_helpers.html" import link_to_item %}
+{% from "_helpers.html" import link_to_item, delete_button_with_confirmation %}
 
 {% block title %}View Host - CSEntry{% endblock %}
 
@@ -50,9 +50,8 @@
           </a>
           <form method="POST" action="/network/interfaces/delete">
             <input id="interface_id" name="interface_id" type="hidden" value="{{ interface.id }}">
-            <button type="submit" class="btn btn-light">
-              <span class="oi oi-trash" title="Delete interface" aria-hidden="true"></span>
-            </button>
+            {{ delete_button_with_confirmation("Delete interface", "deleteConfirmation-%s" | format(interface.id),
+               "Are you sure you want to delete interface %s?" | format(interface.name)) }}
           </form>
         </td>
         <td>{{ interface.name }}</td>
diff --git a/app/templates/users/profile.html b/app/templates/users/profile.html
index 58f2ac6..0eb3c46 100644
--- a/app/templates/users/profile.html
+++ b/app/templates/users/profile.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% from "_helpers.html" import render_field %}
+{% from "_helpers.html" import render_field, delete_button_with_confirmation %}
 
 {% block title %}Profile - CSEntry{% endblock %}
 
@@ -50,9 +50,8 @@
           <form method="POST" action="/users/tokens/revoke">
             <input id="token_id" name="token_id" type="hidden" value="{{ token.id }}">
             <input id="jti" name="jti" type="hidden" value="{{ token.jti }}">
-            <button type="submit" class="btn btn-danger">
-              <span class="oi oi-trash" title="Revoke token" aria-hidden="true"></span>
-            </button>
+            {{ delete_button_with_confirmation("Revoke token", "revokeConfirmation-%s" | format(token.id),
+               "Are you sure you want to revoke token %s?" | format(token.jti))  }}
           </form>
         </td>
         <td>{{ token.jti }}</td>
-- 
GitLab