refactor: modal-delete-user -> vue component + localizations

client/js/app.js

@@ -60,6 +60,7 @@ import editorVideoComponent from './components/editor-video.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 modalDeleteUserComponent from './components/modal-delete-user.vue'
 import modalDiscardPageComponent from './components/modal-discard-page.vue'
 import modalMovePageComponent from './components/modal-move-page.vue'
 import pageLoaderComponent from './components/page-loader.vue'
@@ -162,6 +163,7 @@ $(() => {
       loadingSpinner: loadingSpinnerComponent,
       modalCreatePage: modalCreatePageComponent,
       modalCreateUser: modalCreateUserComponent,
+      modalDeleteUser: modalDeleteUserComponent,
       modalDiscardPage: modalDiscardPageComponent,
       modalMovePage: modalMovePageComponent,
       pageLoader: pageLoaderComponent,

client/js/components/anchor.vue

@@ -7,13 +7,13 @@
         transition(name='modal-content')
           .modal-content(v-show='isShown')
             header.is-blue
-              span Copy link to this section
+              span {{ $t('modal.anchortitle') }}
             section
               p.control.is-fullwidth
                 input.input(type='text', ref='anchorURLinput', v-model='anchorURL')
             footer
-              a.button.is-grey.is-outlined(v-on:click='cancel') Discard
-              a.button.is-blue(v-clipboard='anchorURL', @success="clipboardSuccess", @error="clipboardError") Copy to Clipboard
+              a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.discard') }}
+              a.button.is-blue(v-clipboard='anchorURL', @success="clipboardSuccess", @error="clipboardError") {{ $t('modal.copyclipboard') }}
 </template>
 
 <script>
@@ -38,7 +38,7 @@
         this.$store.dispatch('alert', {
           style: 'blue',
           icon: 'clipboard',
-          msg: 'The URL has been copied to your clipboard.'
+          msg: this.$t('modal.anchorsuccess')
         })
         this.$store.dispatch('anchorClose')
       },
@@ -46,7 +46,7 @@
         this.$store.dispatch('alert', {
           style: 'red',
           icon: 'clipboard',
-          msg: 'Clipboard copy failed. Copy the URL manually.'
+          msg: this.$t('modal.anchorerror')
         })
         this.$refs.anchorURLinput.select()
       }

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

@@ -6,15 +6,15 @@
       .modal-container
         transition(name='modal-content')
           .modal-content(v-show='isShown')
-            header.is-light-blue Create New Document
+            header.is-light-blue {{ $t('modal.createpagetitle') }}
             section
-              label.label Enter the new document path:
+              label.label {{ $t('modal.createpagepath') }}
               p.control.is-fullwidth(v-bind:class='{ "is-loading": isLoading }')
                 input.input(type='text', placeholder='page-name', v-model='userPath', ref='createPageInput', @keyup.enter='create', @keyup.esc='cancel')
-                span.help.is-red(v-show='isInvalid') This document path is invalid!
+                span.help.is-red(v-show='isInvalid') {{ $t('modal.createpageinvalid') }}
             footer
-              a.button.is-grey.is-outlined(v-on:click='cancel') Discard
-              a.button.is-light-blue(v-on:click='create') Create
+              a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.discard') }}
+              a.button.is-light-blue(v-on:click='create') {{ $t('modal.create') }}
 </template>
 
 <script>

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

@@ -0,0 +1,65 @@
+<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.deleteusertitle') }}
+              p.modal-notify(v-bind:class='{ "is-active": isLoading }'): i
+            section
+              span {{ $t('modal.deleteuserwarning') }}
+            footer
+              a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.abort') }}
+              a.button.is-red(v-on:click='deleteUser') {{ $t('modal.delete') }}
+</template>
+
+<script>
+  export default {
+    name: 'modal-delete-user',
+    props: ['currentUser'],
+    data () {
+      return {
+        isLoading: false
+      }
+    },
+    computed: {
+      isShown () {
+        return this.$store.state.modalDeleteUser.shown
+      }
+    },
+    methods: {
+      cancel: function () {
+        this.isLoading = false
+        this.$store.dispatch('modalDeleteUser/close')
+      },
+      discard: function () {
+        let self = this
+        this.isLoading = true
+        this.$http.delete('/admin/users/' + this.currentUser).then(resp => {
+          return resp.json()
+        }).then(resp => {
+          if (resp.ok) {
+            window.location.assign('/admin/users')
+          } else {
+            self.isLoading = false
+            self.$store.dispatch('alert', {
+              style: 'red',
+              icon: 'square-cross',
+              msg: resp.msg
+            })
+          }
+        }).catch(err => {
+          self.isLoading = false
+          self.$store.dispatch('alert', {
+            style: 'red',
+            icon: 'square-cross',
+            msg: 'Error: ' + err.body.msg
+          })
+        })
+      }
+    }
+  }
+</script>

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

@@ -6,13 +6,13 @@
       .modal-container
         transition(name='modal-content')
           .modal-content(v-show='isShown')
-            header.is-orange Discard?
+            header.is-orange {{ $t('modal.discardpagetitle') }}
             section
-              span(v-if='mode === "create"') Are you sure you want to leave this page and loose anything you wrote so far?
-              span(v-else) Are you sure you want to leave this page and loose any modifications?
+              span(v-if='mode === "create"') {{ $t('modal.discardpagecreate') }}
+              span(v-else) {{ $t('modal.discardpageedit') }}
             footer
-              a.button.is-grey.is-outlined(v-on:click='stay') Stay on page
-              a.button.is-orange(v-on:click='discard') Discard
+              a.button.is-grey.is-outlined(v-on:click='stay') {{ $t('modal.discardpagestay') }}
+              a.button.is-orange(v-on:click='discard') {{ $t('modal.discard') }}
 </template>
 
 <script>

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

@@ -6,16 +6,16 @@
       .modal-container
         transition(name='modal-content')
           .modal-content(v-show='isShown')
-            header.is-indigo Move document
+            header.is-indigo {{ $t('modal.movepagetitle') }}
             section
-              label.label Enter the new document path:
+              label.label {{ $t('modal.movepagepath') }}
               p.control.is-fullwidth(v-bind:class='{ "is-loading": isLoading }')
-                input.input(type='text', placeholder='page-name', v-model='movePath', ref='movePageInput', @keyup.enter='move', @keyup.esc='cancel')
-                span.help.is-red(v-show='isInvalid') This document path is invalid or not allowed!
-                span.note Note that moving or renaming documents can lead to broken links. Make sure to edit any page that links to this document afterwards!
+                input.input(type='text', v-bind:placeholder='$t("modal.movepageplaceholder")', v-model='movePath', ref='movePageInput', @keyup.enter='move', @keyup.esc='cancel')
+                span.help.is-red(v-show='isInvalid') {{ $t('modal.movepageinvalid') }}
+                span.note {{ $t('modal.movepagewarning') }}
             footer
-              a.button.is-grey.is-outlined(v-on:click='cancel') Discard
-              a.button.is-indigo(v-on:click='move') Move
+              a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.discard') }}
+              a.button.is-indigo(v-on:click='move') {{ $t('modal.move') }}
 </template>
 
 <script>

client/js/modals/admin-users-delete.js

@@ -1,43 +0,0 @@
-'use strict'
-
-/* global usrData */
-
-'use strict'
-
-import $ from 'jquery'
-import Vue from 'vue'
-
-// Vue Delete User instance
-
-module.exports = (alerts) => {
-  let vueDeleteUser = new Vue({
-    el: '#modal-admin-users-delete',
-    data: {
-      loading: false
-    },
-    methods: {
-      open: (ev) => {
-        $('#modal-admin-users-delete').addClass('is-active')
-      },
-      cancel: (ev) => {
-        $('#modal-admin-users-delete').removeClass('is-active')
-      },
-      deleteUser: (ev) => {
-        vueDeleteUser.loading = true
-        $.ajax('/admin/users/' + usrData._id, {
-          dataType: 'json',
-          method: 'DELETE'
-        }).then((rData, rStatus, rXHR) => {
-          vueDeleteUser.loading = false
-          vueDeleteUser.cancel()
-          window.location.assign('/admin/users')
-        }, (rXHR, rStatus, err) => {
-          vueDeleteUser.loading = false
-          alerts.pushError('Error', rXHR.responseJSON.msg)
-        })
-      }
-    }
-  })
-
-  $('.btn-deluser-prompt').on('click', vueDeleteUser.open)
-}

client/js/store/index.js

@@ -8,6 +8,7 @@ import editorCodeblock from './modules/editor-codeblock'
 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 modalDiscardPage from './modules/modal-discard-page'
 import modalMovePage from './modules/modal-move-page'
 import pageLoader from './modules/page-loader'
@@ -34,6 +35,7 @@ export default new Vuex.Store({
     editorVideo,
     modalCreatePage,
     modalCreateUser,
+    modalDeleteUser,
     modalDiscardPage,
     modalMovePage,
     pageLoader

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

@@ -0,0 +1,16 @@
+'use strict'
+
+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) }
+  }
+}