From b526c67e4f6d989b0409bdad9ce02436f1507cb4 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Mon, 2 Sep 2019 15:32:14 +0200
Subject: [PATCH] See #890: added confirmation before deleting comment

---
 .../components/manage/moderation/NotesThread.vue  | 15 ++++++++++++---
 front/src/style/_main.scss                        |  7 +++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/front/src/components/manage/moderation/NotesThread.vue b/front/src/components/manage/moderation/NotesThread.vue
index 2d5aab8b5..705354ec8 100644
--- a/front/src/components/manage/moderation/NotesThread.vue
+++ b/front/src/components/manage/moderation/NotesThread.vue
@@ -17,9 +17,18 @@
           </expandable-div>
         </div>
         <div class="meta">
-          <a role="button" @click.prevent="remove(note)">
-            <i class="trash icon"></i> <translate translate-context="*/*/*/Verb">Delete</translate>
-          </a>
+          <dangerous-button
+            :class="['ui', {loading: isLoading}, 'basic borderless mini button']"
+            color="grey"
+            @confirm="remove(note)">
+            <i class="trash icon"></i>
+            <translate translate-context="*/*/*/Verb">Delete</translate>
+            <p slot="modal-header"><translate translate-context="Popup/Moderation/Title">Delete this note?</translate></p>
+            <div slot="modal-content">
+              <p><translate translate-context="Content/Moderation/Paragraph">The note will be removed. This action is irreversible.</translate></p>
+            </div>
+            <p slot="modal-confirm"><translate translate-context="*/*/*/Verb">Delete</translate></p>
+          </dangerous-button>
         </div>
       </div>
     </div>
diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss
index 708d6d946..742d66673 100644
--- a/front/src/style/_main.scss
+++ b/front/src/style/_main.scss
@@ -376,5 +376,12 @@ input + .help {
   }
 }
 
+.ui.borderless.button {
+  border: none !important;
+  box-shadow: none !important;
+  padding-left: 0;
+  padding-right: 0;
+}
+
 @import "./themes/_light.scss";
 @import "./themes/_dark.scss";