Added dangerous-button component, smarter modal

front/src/components/common/DangerousButton.vue

+<template>
+  <div @click="showModal = true" class="ui red button">
+    <slot></slot>
+
+    <modal class="small" :show.sync="showModal">
+      <div class="header">
+        <slot name="modal-header">Do you want to confirm this action?</slot>
+      </div>
+      <div class="scrolling content">
+        <div class="description">
+          <slot name="modal-content"></slot>
+        </div>
+      </div>
+      <div class="actions">
+        <div class="ui cancel button">Cancel</div>
+        <div class="ui confirm red button" @click="confirm">
+          <slot name="modal-confirm">Confirm</slot>
+        </div>
+      </div>
+    </modal>
+  </div>
+
+</template>
+<script>
+import Modal from '@/components/semantic/Modal'
+
+export default {
+  props: ['action'],
+  components: {
+    Modal
+  },
+  data () {
+    return {
+      showModal: false
+    }
+  },
+  methods: {
+    confirm () {
+      this.showModal = false
+      this.action()
+    }
+  }
+}
+</script>

front/src/components/globals.js

@@ -8,4 +8,8 @@ import Username from '@/components/common/Username'
 
 Vue.component('username', Username)
 
+import DangerousButton from '@/components/common/DangerousButton'
+
+Vue.component('dangerous-button', DangerousButton)
+
 export default {}

front/src/components/semantic/Modal.vue

@@ -19,8 +19,15 @@ export default {
       control: null
     }
   },
-  mounted () {
+  beforeDestroy () {
+    if (this.control) {
+      this.control.remove()
+    }
+  },
+  methods: {
+    initModal () {
       this.control = $(this.$el).modal({
+        duration: 100,
         onApprove: function () {
           this.$emit('approved')
         }.bind(this),
@@ -31,14 +38,19 @@ export default {
           this.$emit('update:show', false)
         }.bind(this)
       })
+    }
   },
   watch: {
     show: {
       handler (newValue) {
         if (newValue) {
+          this.initModal()
           this.control.modal('show')
         } else {
+          if (this.control) {
             this.control.modal('hide')
+            this.control.remove()
+          }
         }
       }
     }