refactor: vue fixes + modal-upgrade-system.vue

client/js/app.js

@@ -70,6 +70,7 @@ 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 modalUpgradeSystemComponent from './components/modal-upgrade-system.vue'
 import pageLoaderComponent from './components/page-loader.vue'
 import searchComponent from './components/search.vue'
 import treeComponent from './components/tree.vue'
@@ -180,6 +181,7 @@ $(() => {
       modalDeleteUser: modalDeleteUserComponent,
       modalDiscardPage: modalDiscardPageComponent,
       modalMovePage: modalMovePageComponent,
+      modalUpgradeSystem: modalUpgradeSystemComponent,
       pageLoader: pageLoaderComponent,
       search: searchComponent,
       sourceView: sourceViewComponent,

client/js/components/anchor.vue

@@ -32,7 +32,7 @@
     },
     methods: {
       cancel () {
-        this.$store.dispatch('anchorClose')
+        this.$store.dispatch('anchor/close')
       },
       clipboardSuccess () {
         this.$store.dispatch('alert', {
@@ -40,7 +40,7 @@
           icon: 'clipboard',
           msg: this.$t('modal.anchorsuccess')
         })
-        this.$store.dispatch('anchorClose')
+        this.$store.dispatch('anchor/close')
       },
       clipboardError () {
         this.$store.dispatch('alert', {

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

@@ -28,7 +28,7 @@
               p.control.is-fullwidth
                 input.input(type='password', placeholder='', v-model='password')
             section(v-if='provider=="local"')
-              label.label {{ $t('modal.createuserfullname') }}
+              label.label {{ $t('modal.createusername') }}
               p.control.is-fullwidth
                 input.input(type='text', :placeholder='$t("modal.createusernameplaceholder")', v-model='name')
             footer

client/js/components/modal-upgrade-system.vue

@@ -0,0 +1,70 @@
+<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')
+            template(v-if='step === "running"')
+              header.is-blue Install
+              section.modal-loading
+                i
+                span Wiki.js {{ mode }} in progress...
+                em Please wait
+            template(v-if='step === "error"')
+              header.is-red Installation Error
+              section.modal-loading
+                span {{ error }}
+              footer
+                a.button.is-grey.is-outlined(@click='upgradeCancel') Abort
+                a.button.is-deep-orange(@click='upgradeStart') Try Again
+            template(v-if='step === "confirm"')
+              header.is-deep-orange Are you sure?
+              section
+                label.label You are about to {{ mode }} Wiki.js.
+                span.note You will not be able to access your wiki during the operation. Content will not be affected. However, it is your responsability to ensure you have a backup in the unexpected event content gets lost or corrupted.
+              footer
+                a.button.is-grey.is-outlined(@click='upgradeCancel') Abort
+                a.button.is-deep-orange(@click='upgradeStart') Start
+
+</template>
+
+<script>
+export default {
+  name: 'modal-upgrade-system',
+  data() {
+    return {
+      isLoading: false
+    }
+  },
+  computed: {
+    isShown() {
+      return this.$store.state.modalUpgradeSystem.shown
+    },
+    mode() {
+      return this.$store.state.modalUpgradeSystem.mode
+    },
+    step() {
+      return this.$store.state.modalUpgradeSystem.step
+    }
+  },
+  methods: {
+    upgradeCancel() {
+      this.isLoading = false
+      this.$store.dispatch('modalUpgradeSystem/close')
+    },
+    upgradeStart() {
+      this.$store.commit('modalUpgradeSystem/stepChange', 'running')
+      this.$http.post('/admin/settings/install', {
+        mode: this.mode
+      }).then(resp => {
+        // todo
+      }).catch(err => {
+        this.$store.commit('modalUpgradeSystem/stepChange', 'error')
+        this.error = err.body
+      })
+    }
+  }
+}
+</script>

client/js/pages/admin-settings.component.js

@@ -1,44 +1,11 @@
 'use strict'
 
-import * as $ from 'jquery'
-
 export default {
   name: 'admin-settings',
   data() {
-    return {
+    return {}
-      upgradeModal: {
-        state: false,
-        step: 'confirm',
-        mode: 'upgrade',
-        error: 'Something went wrong.'
-      }
-    }
   },
   methods: {
-    upgrade() {
-      this.upgradeModal.mode = 'upgrade'
-      this.upgradeModal.step = 'confirm'
-      this.upgradeModal.state = true
-    },
-    reinstall() {
-      this.upgradeModal.mode = 're-install'
-      this.upgradeModal.step = 'confirm'
-      this.upgradeModal.state = true
-    },
-    upgradeCancel() {
-      this.upgradeModal.state = false
-    },
-    upgradeStart() {
-      this.upgradeModal.step = 'running'
-      $.post('/admin/settings/install', {
-        mode: this.upgradeModal.mode
-      }).done((resp) => {
-        // todo
-      }).fail((jqXHR, txtStatus, resp) => {
-        this.upgradeModal.step = 'error'
-        this.upgradeModal.error = jqXHR.responseText
-      })
-    },
     flushcache() {
       window.alert('Coming soon!')
     },

client/js/pages/content-view.component.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import MathJax from 'mathjax'
+import $ from 'jquery'
 
 export default {
   name: 'content-view',
@@ -8,6 +9,15 @@ export default {
     return {}
   },
   mounted() {
+    let self = this
+    $('a.toc-anchor').each((i, elm) => {
+      let hashText = $(elm).attr('href').slice(1)
+      $(elm).on('click', (ev) => {
+        ev.stopImmediatePropagation()
+        self.$store.dispatch('anchor/open', hashText)
+        return false
+      })
+    })
     MathJax.Hub.Config({
       jax: ['input/TeX', 'input/MathML', 'output/SVG'],
       extensions: ['tex2jax.js', 'mml2jax.js'],
@@ -28,11 +38,3 @@ export default {
     MathJax.Hub.Configured()
   }
 }
-
-// module.exports = (alerts) => {
-//   if ($('#page-type-view').length) {
-//     let currentBasePath = ($('#page-type-view').data('entrypath') !== 'home') ? $('#page-type-view').data('entrypath') : ''
-//     require('../modals/create.js')(currentBasePath)
-//     require('../modals/move.js')(currentBasePath, alerts)
-//   }
-// }

client/js/store/index.js

@@ -12,6 +12,7 @@ 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 modalUpgradeSystem from './modules/modal-upgrade-system'
 import pageLoader from './modules/page-loader'
 
 Vue.use(Vuex)
@@ -40,6 +41,7 @@ export default new Vuex.Store({
     modalDeleteUser,
     modalDiscardPage,
     modalMovePage,
+    modalUpgradeSystem,
     pageLoader
   }
 })

client/js/store/modules/anchor.js

@@ -1,6 +1,7 @@
 'use strict'
 
 export default {
+  namespaced: true,
   state: {
     shown: false,
     hash: ''
@@ -13,10 +14,11 @@ export default {
     }
   },
   actions: {
-    anchorOpen({ commit, dispatch }, hash) {
+    open({ commit }, hash) {
+      console.info('MIGUEL!')
       commit('anchorChange', { shown: true, hash })
     },
-    anchorClose({ commit, dispatch }) {
+    close({ commit }) {
       commit('anchorChange', { shown: false })
     }
   }

client/js/store/modules/modal-upgrade-system.js

@@ -0,0 +1,24 @@
+'use strict'
+
+export default {
+  namespaced: true,
+  state: {
+    shown: false,
+    mode: 'upgrade',
+    step: 'confirm'
+  },
+  getters: {},
+  mutations: {
+    shownChange: (state, shownState) => { state.shown = shownState },
+    modeChange: (state, modeState) => { state.mode = modeState },
+    stepChange: (state, stepState) => { state.step = stepState }
+  },
+  actions: {
+    open({ commit }, opts) {
+      commit('shownChange', true)
+      commit('modeChange', opts.mode)
+      commit('stepChange', 'confirm')
+    },
+    close({ commit }) { commit('shownChange', false) }
+  }
+}

server/controllers/admin.js

@@ -105,6 +105,8 @@ router.get('/users/:id', (req, res) => {
       }
 
       res.render('pages/admin/users-edit', { adminTab: 'users', usr, usrOpts })
+    }).catch(err => { // eslint-disable-line handle-callback-err
+      return res.status(404).end() || true
     })
 })
 
@@ -218,9 +220,9 @@ router.delete('/users/:id', (req, res) => {
   }
 
   return db.User.findByIdAndRemove(req.params.id).then(() => {
-    return res.json({ msg: 'OK' })
+    return res.json({ ok: true })
   }).catch((err) => {
-    res.status(500).json({ msg: err.message })
+    res.status(500).json({ ok: false, msg: err.message })
   })
 })
 

server/libs/markdown.js

@@ -206,13 +206,6 @@ const parseContent = (content) => {
     cr(elm).replaceWith(txtLink)
   })
 
-  // -> Add anchor handler
-
-  cr('a.toc-anchor').each((i, elm) => {
-    let hashText = cr(elm).attr('href').slice(1)
-    cr(elm).attr('v-on:click.stop.prevent', "$store.dispatch('anchorOpen', '" + hashText + "')")
-  })
-
   // -> Re-attach blockquote styling classes to their parents
 
   cr.root().children('blockquote').each((i, elm) => {

server/locales/en/admin.json

@@ -1,8 +1,14 @@
 {
   "profile": {
+    "displayname": "Display Name",
+    "displaynameexample": "John Smith",
+    "email": "Email",
     "lastprofileupdate": "Last Profile Update",
     "membersince": "Member since",
+    "password": "Password",
+    "passwordverify": "Verify Password",
     "provider": "Provider",
+    "savechanges": "Save Changes",
     "subtitle": "Profile and authentication info"
   },
   "stats": {
@@ -42,4 +48,4 @@
     "edituser": "Edit User",
     "uniqueid": "Unique ID"
   }
-}
+}

server/locales/en/browser.json

@@ -97,14 +97,6 @@
   "nav": {
     "home": "Home"
   },
-  "profile": {
-    "displayname": "Display Name",
-    "displaynameexample": "John Smith",
-    "email": "Email",
-    "password": "Password",
-    "passwordverify": "Verify Password",
-    "savechanges": "Save Changes"
-  },
   "search": {
     "didyoumean": "Did you mean...?",
     "nomatch": "No results matching your query",

server/views/pages/admin/settings.pug

@@ -15,10 +15,10 @@ block adminContent
             p #{t('admin:settings.latestversion')}: #[strong= sysversion.latest] #[em (Published #{moment(sysversion.latestPublishedAt).fromNow()})]
             p
               if sysversion.current !== sysversion.latest
-                button.button.is-deep-orange(v-on:click='upgrade')= t('admin:settings.upgrade')
+                button.button.is-deep-orange(@click='$store.dispatch("modalUpgradeSystem/open", { mode: "upgrade"})')= t('admin:settings.upgrade')
               else
                 button.button.is-disabled= t('admin:settings.upgrade')
-              button.button.is-deep-orange.is-outlined(v-on:click='reinstall')= t('admin:settings.reinstall')
+              button.button.is-deep-orange.is-outlined(@click='$store.dispatch("modalUpgradeSystem/open", { mode: "reinstall"})')= t('admin:settings.reinstall')
           else
             p: em= t('admin:settings.versioncheckfailed')
       section
@@ -34,4 +34,4 @@ block adminContent
           p.is-small= t('admin:settings.flushsessionstext')
           p: button.button.is-teal.is-outlined(v-on:click='flushsessions')= t('admin:settings.flushsessionsbtn')
 
-      include ../../modals/admin-upgrade.pug
+  modal-upgrade-system