refactor: Migrate to Vue components

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

@@ -0,0 +1,30 @@
+'use strict'
+
+import * as $ from 'jquery'
+
+export default {
+  name: 'admin-profile',
+  props: ['email', 'name', 'provider'],
+  data() {
+    return {
+      password: '********',
+      passwordVerify: '********'
+    }
+  },
+  methods: {
+    saveUser() {
+      if (this.password !== this.passwordVerify) {
+        //alerts.pushError('Error', "Passwords don't match!")
+        return
+      }
+      $.post(window.location.href, {
+        password: this.password,
+        name: this.name
+      }).done((resp) => {
+        //alerts.pushSuccess('Saved successfully', 'Changes have been applied.')
+      }).fail((jqXHR, txtStatus, resp) => {
+        //alerts.pushError('Error', resp)
+      })
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+'use strict'
+
+import * as $ from 'jquery'
+
+export default {
+  name: 'admin-settings',
+  data() {
+    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!')
+    },
+    resetaccounts() {
+      window.alert('Coming soon!')
+    },
+    flushsessions() {
+      window.alert('Coming soon!')
+    }
+  }
+}

client/js/pages/admin.js

@@ -1,41 +1,13 @@
 'use strict'
 
-/* global usrData, usrDataName */
+/* global usrData */
 
 import $ from 'jquery'
 import _ from 'lodash'
 import Vue from 'vue'
 
 module.exports = (alerts) => {
-  if ($('#page-type-admin-profile').length) {
-    let vueProfile = new Vue({
-      el: '#page-type-admin-profile',
-      data: {
-        password: '********',
-        passwordVerify: '********',
-        name: ''
-      },
-      methods: {
-        saveUser: (ev) => {
-          if (vueProfile.password !== vueProfile.passwordVerify) {
-            alerts.pushError('Error', "Passwords don't match!")
-            return
-          }
-          $.post(window.location.href, {
-            password: vueProfile.password,
-            name: vueProfile.name
-          }).done((resp) => {
-            alerts.pushSuccess('Saved successfully', 'Changes have been applied.')
-          }).fail((jqXHR, txtStatus, resp) => {
-            alerts.pushError('Error', resp)
-          })
-        }
-      },
-      created: function () {
-        this.name = usrDataName
-      }
-    })
-  } else if ($('#page-type-admin-users').length) {
+  if ($('#page-type-admin-users').length) {
     require('../modals/admin-users-create.js')(alerts)
   } else if ($('#page-type-admin-users-edit').length) {
     let vueEditUser = new Vue({
@@ -98,52 +70,5 @@ module.exports = (alerts) => {
       }
     })
     require('../modals/admin-users-delete.js')(alerts)
-  } else if ($('#page-type-admin-settings').length) {
-    let vueSettings = new Vue({ // eslint-disable-line no-unused-vars
-      el: '#page-type-admin-settings',
-      data: {
-        upgradeModal: {
-          state: false,
-          step: 'confirm',
-          mode: 'upgrade',
-          error: 'Something went wrong.'
-        }
-      },
-      methods: {
-        upgrade: (ev) => {
-          vueSettings.upgradeModal.mode = 'upgrade'
-          vueSettings.upgradeModal.step = 'confirm'
-          vueSettings.upgradeModal.state = true
-        },
-        reinstall: (ev) => {
-          vueSettings.upgradeModal.mode = 're-install'
-          vueSettings.upgradeModal.step = 'confirm'
-          vueSettings.upgradeModal.state = true
-        },
-        upgradeCancel: (ev) => {
-          vueSettings.upgradeModal.state = false
-        },
-        upgradeStart: (ev) => {
-          vueSettings.upgradeModal.step = 'running'
-          $.post('/admin/settings/install', {
-            mode: vueSettings.upgradeModal.mode
-          }).done((resp) => {
-            // todo
-          }).fail((jqXHR, txtStatus, resp) => {
-            vueSettings.upgradeModal.step = 'error'
-            vueSettings.upgradeModal.error = jqXHR.responseText
-          })
-        },
-        flushcache: (ev) => {
-          window.alert('Coming soon!')
-        },
-        resetaccounts: (ev) => {
-          window.alert('Coming soon!')
-        },
-        flushsessions: (ev) => {
-          window.alert('Coming soon!')
-        }
-      }
-    })
   }
 }

client/js/pages/view.js

@@ -4,7 +4,7 @@
 
 import $ from 'jquery'
 import MathJax from 'mathjax'
-import * as CopyPath from '../components/copy-path.vue'
+// import * as CopyPath from '../components/copy-path.vue'
 import Vue from 'vue'
 
 module.exports = (alerts) => {
@@ -13,10 +13,10 @@ module.exports = (alerts) => {
 
     // Copy Path
 
-    new Vue({
-      el: '.modal-copypath',
-      render: h => h(CopyPath)
-    })
+    // new Vue({
+    //   el: '.modal-copypath',
+    //   render: h => h(CopyPath)
+    // })
 
     // MathJax Render