From 8239adfe7b4b9569abd08380bb3ee519035aca33 Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Mon, 29 May 2017 21:58:33 -0400
Subject: [PATCH] refactor: modal-delete-user -> vue component + localizations

---
 client/js/app.js                             |  2 +
 client/js/components/anchor.vue              | 10 +--
 client/js/components/modal-create-page.vue   | 10 +--
 client/js/components/modal-delete-user.vue   | 65 ++++++++++++++++++++
 client/js/components/modal-discard-page.vue  | 10 +--
 client/js/components/modal-move-page.vue     | 14 ++---
 client/js/modals/admin-users-delete.js       | 43 -------------
 client/js/store/index.js                     |  2 +
 client/js/store/modules/modal-delete-user.js | 16 +++++
 server/locales/en/browser.json               | 25 ++++++++
 server/views/modals/admin-deleteuser.pug     | 12 ----
 server/views/modals/create-discard.pug       | 10 ---
 server/views/modals/edit-discard.pug         | 11 ----
 server/views/modals/editor-link.pug          | 33 ----------
 server/views/pages/admin/users-edit.pug      |  6 +-
 15 files changed, 135 insertions(+), 134 deletions(-)
 create mode 100644 client/js/components/modal-delete-user.vue
 delete mode 100644 client/js/modals/admin-users-delete.js
 create mode 100644 client/js/store/modules/modal-delete-user.js
 delete mode 100644 server/views/modals/admin-deleteuser.pug
 delete mode 100644 server/views/modals/create-discard.pug
 delete mode 100644 server/views/modals/edit-discard.pug
 delete mode 100644 server/views/modals/editor-link.pug

diff --git a/client/js/app.js b/client/js/app.js
index f2678332..bbbcfeb2 100644
--- a/client/js/app.js
+++ b/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,
diff --git a/client/js/components/anchor.vue b/client/js/components/anchor.vue
index 8fbe1a53..e1f90f41 100644
--- a/client/js/components/anchor.vue
+++ b/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()
       }
diff --git a/client/js/components/modal-create-page.vue b/client/js/components/modal-create-page.vue
index 93bfe481..c4529a1d 100644
--- a/client/js/components/modal-create-page.vue
+++ b/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>
diff --git a/client/js/components/modal-delete-user.vue b/client/js/components/modal-delete-user.vue
new file mode 100644
index 00000000..f08e3198
--- /dev/null
+++ b/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>
diff --git a/client/js/components/modal-discard-page.vue b/client/js/components/modal-discard-page.vue
index 9968f567..52650d65 100644
--- a/client/js/components/modal-discard-page.vue
+++ b/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>
diff --git a/client/js/components/modal-move-page.vue b/client/js/components/modal-move-page.vue
index eb5ef331..6eb081a8 100644
--- a/client/js/components/modal-move-page.vue
+++ b/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>
diff --git a/client/js/modals/admin-users-delete.js b/client/js/modals/admin-users-delete.js
deleted file mode 100644
index e7df9ef8..00000000
--- a/client/js/modals/admin-users-delete.js
+++ /dev/null
@@ -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)
-}
diff --git a/client/js/store/index.js b/client/js/store/index.js
index 93bcfc32..a4708e00 100644
--- a/client/js/store/index.js
+++ b/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
diff --git a/client/js/store/modules/modal-delete-user.js b/client/js/store/modules/modal-delete-user.js
new file mode 100644
index 00000000..5b1d08c9
--- /dev/null
+++ b/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) }
+  }
+}
diff --git a/server/locales/en/browser.json b/server/locales/en/browser.json
index ecf31e43..538970db 100644
--- a/server/locales/en/browser.json
+++ b/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"
   },
diff --git a/server/views/modals/admin-deleteuser.pug b/server/views/modals/admin-deleteuser.pug
deleted file mode 100644
index d3166892..00000000
--- a/server/views/modals/admin-deleteuser.pug
+++ /dev/null
@@ -1,12 +0,0 @@
-.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
diff --git a/server/views/modals/create-discard.pug b/server/views/modals/create-discard.pug
deleted file mode 100644
index 7d7270be..00000000
--- a/server/views/modals/create-discard.pug
+++ /dev/null
@@ -1,10 +0,0 @@
-.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
diff --git a/server/views/modals/edit-discard.pug b/server/views/modals/edit-discard.pug
deleted file mode 100644
index 0c9fd684..00000000
--- a/server/views/modals/edit-discard.pug
+++ /dev/null
@@ -1,11 +0,0 @@
-
-.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
diff --git a/server/views/modals/editor-link.pug b/server/views/modals/editor-link.pug
deleted file mode 100644
index e60a8434..00000000
--- a/server/views/modals/editor-link.pug
+++ /dev/null
@@ -1,33 +0,0 @@
-
-//.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://')
diff --git a/server/views/pages/admin/users-edit.pug b/server/views/pages/admin/users-edit.pug
index e48c7ae6..ca69dbd2 100644
--- a/server/views/pages/admin/users-edit.pug
+++ b/server/views/pages/admin/users-edit.pug
@@ -1,7 +1,7 @@
 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)};