feat: delete a page

client/js/app.js

@@ -38,6 +38,7 @@ import historyComponent from './components/history.vue'
 import loadingSpinnerComponent from './components/loading-spinner.vue'
 import modalCreatePageComponent from './components/modal-create-page.vue'
 import modalCreateUserComponent from './components/modal-create-user.vue'
+import modalDeletePageComponent from './components/modal-delete-page.vue'
 import modalDeleteUserComponent from './components/modal-delete-user.vue'
 import modalDiscardPageComponent from './components/modal-discard-page.vue'
 import modalMovePageComponent from './components/modal-move-page.vue'
@@ -86,6 +87,7 @@ Vue.component('history', historyComponent)
 Vue.component('loadingSpinner', loadingSpinnerComponent)
 Vue.component('modalCreatePage', modalCreatePageComponent)
 Vue.component('modalCreateUser', modalCreateUserComponent)
+Vue.component('modalDeletePage', modalDeletePageComponent)
 Vue.component('modalDeleteUser', modalDeleteUserComponent)
 Vue.component('modalDiscardPage', modalDiscardPageComponent)
 Vue.component('modalMovePage', modalMovePageComponent)

client/js/components/modal-delete-page.vue

@@ -0,0 +1,66 @@
+<template lang="pug">
+  transition(:duration="400")
+    .modal(v-show='isShown', v-cloak)
+      transition(name='modal-background')
+        .modal-background(v-show='isShown')
+      .modal-container
+        transition(name='modal-content')
+          .modal-content(v-show='isShown')
+            header.is-red
+              span {{ $t('modal.deletepagetitle') }}
+              p.modal-notify(v-bind:class='{ "is-active": isLoading }'): i
+            section
+              span {{ $t('modal.deletepagewarning') }}
+            footer
+              a.button.is-grey.is-outlined(v-on:click='discard') {{ $t('modal.discard') }}
+              a.button.is-red(v-on:click='deletePage') {{ $t('modal.delete') }}
+
+</template>
+
+<script>
+  export default {
+    name: 'modal-delete-page',
+    props: ['currentPath'],
+    data () {
+      return {
+        isLoading: false
+      }
+    },
+    computed: {
+      isShown () {
+        return this.$store.state.modalDeletePage.shown
+      }
+    },
+    methods: {
+      discard () {
+        this.isLoading = false
+        this.$store.dispatch('modalDeletePage/close')
+      },
+      deletePage () {
+        let self = this
+        this.isLoading = true
+        this.$http.delete(window.location.href).then(resp => {
+          return resp.json()
+        }).then(resp => {
+          if (resp.ok) {
+            window.location.assign('/')
+          } else {
+            self.isLoading = false
+            self.$store.dispatch('alert', {
+              style: 'red',
+              icon: 'ui-2_square-remove-09',
+              msg: resp.msg
+            })
+          }
+        }).catch(err => {
+          self.isLoading = false
+          self.$store.dispatch('alert', {
+            style: 'red',
+            icon: 'ui-2_square-remove-09',
+            msg: 'Error: ' + err.body.msg
+          })
+        })
+      }
+    }
+  }
+</script>

client/js/store/index.js

@@ -10,6 +10,7 @@ import editorVideo from './modules/editor-video'
 import modalCreatePage from './modules/modal-create-page'
 import modalCreateUser from './modules/modal-create-user'
 import modalDeleteUser from './modules/modal-delete-user'
+import modalDeletePage from './modules/modal-delete-page'
 import modalDiscardPage from './modules/modal-discard-page'
 import modalMovePage from './modules/modal-move-page'
 import modalProfile2fa from './modules/modal-profile-2fa'
@@ -39,6 +40,7 @@ export default new Vuex.Store({
     editorVideo,
     modalCreatePage,
     modalCreateUser,
+    modalDeletePage,
     modalDeleteUser,
     modalDiscardPage,
     modalMovePage,

client/js/store/modules/modal-delete-page.js

@@ -0,0 +1,14 @@
+export default {
+  namespaced: true,
+  state: {
+    shown: false
+  },
+  getters: {},
+  mutations: {
+    shownChange: (state, shownState) => { state.shown = shownState }
+  },
+  actions: {
+    open({ commit }) { commit('shownChange', true) },
+    close({ commit }) { commit('shownChange', false) }
+  }
+}