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

+<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

-'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

+'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) }
+  }
+}

server/locales/en/browser.json

@@ -15,6 +15,31 @@
     "videoanymp4file": "Any standard MP4 file",
     "videosuccess": "The video code has been inserted."
   },
+  "modal": {
+    "abort": "Abort",
+    "anchortitle": "Copy link to this section",
+    "anchorsuccess": "The URL has been copied to your clipboard.",
+    "anchorerror": "Clipboard copy failed. Copy the URL manually.",
+    "copyclipboard": "Copy to Clipboard",
+    "create": "Create",
+    "createpagetitle": "Create New Page",
+    "createpagepath": "Enter the new page path:",
+    "createpageinvalid": "This page path is invalid!",
+    "discard": "Discard",
+    "discardpagestay": "Stay on page",
+    "discardpagetitle": "Discard?",
+    "discardpagecreate": "Are you sure you want to leave this page and loose anything you wrote so far?",
+    "discardpageedit": "Are you sure you want to leave this page and loose any modifications?",
+    "delete": "Delete",
+    "deleteusertitle": "Delete User Account?",
+    "deleteuserwarning": "Are you sure you want to delete this user account? This action cannot be undone!",
+    "move": "Move",
+    "movepagetitle": "Move Page",
+    "movepagepath": "Enter the new page path:",
+    "movepageinvalid": "This page path is invalid or not allowed!",
+    "movepagewarning": "Note that moving or renaming pages can lead to broken links. Make sure to edit any page that links to this page afterwards!",
+    "movepageplaceholder": "page-name"
+  },
   "nav": {
     "home": "Home"
   },

server/views/modals/admin-deleteuser.pug

-.modal#modal-admin-users-delete
-  .modal-background
-  .modal-container
-    .modal-content
-      header.is-red
-        span Delete User Account?
-        p.modal-notify(v-bind:class='{ "is-active": loading }'): i
-      section
-        span Are you sure you want to delete this user account? This action cannot be undone!
-      footer
-        a.button.is-grey.is-outlined(v-on:click='cancel') Abort
-        a.button.is-red(v-on:click='deleteUser') Delete

server/views/modals/create-discard.pug

-.modal#modal-create-discard
-  .modal-background
-  .modal-container
-    .modal-content
-      header.is-orange Discard?
-      section
-        span Are you sure you want to leave this page and loose anything you wrote so far?
-      footer
-        a.button.is-grey.is-outlined.btn-create-discard Stay on page
-        a.button.is-orange(href='/') Discard

server/views/modals/edit-discard.pug

-
-.modal#modal-edit-discard
-  .modal-background
-  .modal-container
-    .modal-content
-      header.is-orange Discard?
-      section
-        span Are you sure you want to leave this page and loose any modifications?
-      footer
-        a.button.is-grey.is-outlined.btn-edit-discard Stay on page
-        a.button.is-orange(href='/' + pageData.meta.path) Discard

server/views/modals/editor-link.pug

-
-//.modallayer#modal-editor-link
-	.modallayer-content
-		.tabs.is-boxed
-			ul
-				li
-					a
-						span.icon.is-small
-							i.fa.fa-file-text-o
-						span Internal Document Link
-				li.is-active
-					a
-						span.icon.is-small
-							i.fa.fa-external-link
-						span External Link
-		.columns.is-hidden
-			.column
-				label.label Text to display
-				p.control
-					input.input(type='text', placeholder='Text input')
-			.column
-				label.label Link
-				p.control
-					input.input(type='text', placeholder='http://')
-		.columns
-			.column
-				label.label Text to display
-				p.control
-					input.input(type='text', placeholder='Text input')
-			.column
-				label.label Link
-				p.control
-					input.input(type='text', placeholder='http://')

server/views/pages/admin/users-edit.pug

 extends ./_layout.pug
 
 block rootNavRight
-  i.nav-item#notifload
+  loading-spinner
   .nav-item
     a.button(href='/admin/users')
       i.icon-reply
@@ -113,11 +113,11 @@ block adminContent
         .column.is-narrow
           section
             if usrOpts.canBeDeleted
-              button.button.is-red.btn-deluser-prompt
+              button.button.is-red(v-on:click='$store.dispatch("modalDeleteUser/open")')
                 i.icon-trash2
                 span Delete Account
 
-  include ../../modals/admin-deleteuser.pug
+  modal-delete-user(current-user=usr._id)
 
   script(type='text/javascript').
     var usrData = !{JSON.stringify(usr)};