use modal instead of browser confirm dialog

src/components/Feature/Detail/FeatureHeader.vue

@@ -132,7 +132,7 @@
             class="ui button button-hover-red tiny-margin"
             data-tooltip="Supprimer le signalement"
             data-position="bottom right"
-            @click="$emit('setIsCancelling')"
+            @click="$emit('setIsDeleting')"
           >
             <i
               class="inverted grey trash alternate icon"

src/views/Feature/FeatureDetail.vue

@@ -15,7 +15,7 @@
             :display-to-list-button="displayToListButton"
             :is-feature-creator="isFeatureCreator"
             :can-edit-feature="canEditFeature"
-            @setIsCancelling="isCanceling = true"
+            @setIsDeleting="isDeleting = true"
             @tofeature="pushNgo"
           />
         </div>
@@ -63,28 +63,33 @@
           />
         </div>
       </div>
+
       <div
-        v-if="isCanceling"
+        v-if="isDeleting"
         class="ui dimmer modals visible active"
       >
         <div
           :class="[
-            'ui mini modal subscription',
-            { 'active visible': isCanceling },
+            'ui mini modal',
+            { 'active visible': isDeleting },
           ]"
         >
           <i
             class="close icon"
             aria-hidden="true"
-            @click="isCanceling = false"
+            @click="isDeleting = false"
           />
-          <div class="ui icon header">
+          <div
+            v-if="isDeleting"
+            class="ui icon header"
+          >
             <i
               class="trash alternate icon"
               aria-hidden="true"
             />
             Supprimer le signalement
           </div>
+
           <div class="actions">
             <button
               type="button"
@@ -96,7 +101,61 @@
           </div>
         </div>
       </div>
+
+      <div
+        v-if="isLeaving"
+        class="ui dimmer modals visible active"
+      >
+        <div
+          :class="[
+            'ui mini modal',
+            { 'active visible': isLeaving },
+          ]"
+        >
+          <i
+            class="close icon"
+            aria-hidden="true"
+            @click="isLeaving = false"
+          />
+          <div class="ui icon header">
+            <i
+              :class="[project.fast_edition_mode && hasUnsavedChange ? 'sign-out' : 'random', 'icon']"
+              aria-hidden="true"
+            />
+            Abandonner {{
+              project.fast_edition_mode && hasUnsavedChange ?
+                'les modifications' :
+                'la vue signalement filtré'
+            }}
+          </div>
+          <div class="content">
+            {{
+              project.fast_edition_mode && hasUnsavedChange ?
+                'Les modifications apportées au signalement ne seront pas sauvegardées, continuer ?':
+                `Vous allez quittez la vue signalement filtré,
+                  l\'ordre des signalements pourrait changer après édition d\'un signalement.`
+            }}
+          </div>
+          <div class="actions">
+            <button
+              type="button"
+              class="ui green compact button"
+              @click="stayOnPage"
+            >
+              Annuler
+            </button>
+            <button
+              type="button"
+              class="ui red compact button"
+              @click="leavePage"
+            >
+              Continuer
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
+
     <div v-else>
       Pas de signalement correspondant trouvé
     </div>
@@ -139,19 +198,19 @@ export default {
   },
 
   beforeRouteUpdate (to, from, next) {
-    let leaving = true; // by default navigate to next route
     if (this.hasUnsavedChange) {
-      leaving = this.confirmLeave(); // prompt user that there is unsaved changes or that features order might change
+      this.confirmLeave(next); // prompt user that there is unsaved changes or that features order might change
+    } else {
+      next(); // continue navigation
     }
-    next(leaving);
   },
 
   beforeRouteLeave (to, from, next) {
-    let leaving = true; // by default navigate to next route
     if (this.hasUnsavedChange || (from.query.offset >= 0 && to.name === 'editer-signalement')) {
-      leaving = this.confirmLeave(); // prompt user that there is unsaved changes or that features order might change
+      this.confirmLeave(next); // prompt user that there is unsaved changes or that features order might change
+    } else {
+      next(); // continue navigation
     }
-    next(leaving);
   },
 
   data() {
@@ -173,7 +232,8 @@ export default {
       events: [],
       featureType: {},
       featuresCount: null,
-      isCanceling: false,
+      isDeleting: false,
+      isLeaving: false,
       slugSignal: '',
       displayToListButton: false,
     };
@@ -309,10 +369,17 @@ export default {
       }
     },
 
-    confirmLeave() {
-      return window.confirm(this.project.fast_edition_mode && this.hasUnsavedChange ?
-        'Les modifications apportées au signalement ne seront pas sauvegardées, continuer ?':
-        'Vous allez quittez la vue signalement filtré, l\'ordre des signalements pourrait changer après édition d\'un signalement.');
+    confirmLeave(next) {
+      this.next = next;
+      this.isLeaving = true;
+    },
+
+    stayOnPage() {
+      this.isLeaving = false;
+    },
+
+    leavePage() {
+      this.next();
     },
 
     async reloadPage() {

src/views/Project/FeaturesListAndMap.vue

@@ -62,7 +62,7 @@
       >
         <div
           :class="[
-            'ui mini modal subscription',
+            'ui mini modal',
             { 'active visible': isDeleteModalOpen },
           ]"
         >