refactor: admin-edit-user -> vue + fixes

client/js/app.js

@@ -74,6 +74,7 @@ import pageLoaderComponent from './components/page-loader.vue'
 import searchComponent from './components/search.vue'
 import treeComponent from './components/tree.vue'
 
+import adminEditUserComponent from './pages/admin-edit-user.component.js'
 import adminProfileComponent from './pages/admin-profile.component.js'
 import adminSettingsComponent from './pages/admin-settings.component.js'
 import contentViewComponent from './pages/content-view.component.js'
@@ -163,6 +164,7 @@ $(() => {
     mixins: [helpers],
     components: {
       alert: alertComponent,
+      adminEditUser: adminEditUserComponent,
       adminProfile: adminProfileComponent,
       adminSettings: adminSettingsComponent,
       anchor: anchorComponent,

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

@@ -8,11 +8,11 @@
           .modal-content(v-show='isShown')
             header.is-blue
               span {{ $t('modal.createusertitle') }}
-              p.modal-notify(v-bind:class='{ "is-active": isLoading }'): i
+              p.modal-notify(:class='{ "is-active": isLoading }'): i
             section
               label.label {{ $t('modal.createuseremail') }}
               p.control.is-fullwidth
-                input.input(type='text', v-bind:placeholder='$t("modal.createuseremailplaceholder")', v-model='email', ref='createUserEmailInput')
+                input.input(type='text', :placeholder='$t("modal.createuseremailplaceholder")', v-model='email', ref='createUserEmailInput')
             section
               label.label {{ $t('modal.createuserprovider') }}
               p.control.is-fullwidth
@@ -30,76 +30,76 @@
             section(v-if='provider=="local"')
               label.label {{ $t('modal.createuserfullname') }}
               p.control.is-fullwidth
-                input.input(type='text', v-bind:placeholder='$t("modal.createusernameplaceholder")', v-model='name')
+                input.input(type='text', :placeholder='$t("modal.createusernameplaceholder")', v-model='name')
             footer
-              a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.discard') }}
-              a.button(v-on:click='create', v-if='provider=="local"', v-bind:disabled='isLoading', v-bind:class='{ "is-disabled": isLoading, "is-blue": !loading }') {{ $t('modal.createuser') }}
-              a.button(v-on:click='create', v-if='provider!="local"', v-bind:disabled='isLoading', v-bind:class='{ "is-disabled": isLoading, "is-blue": !loading }') {{ $t('modal.createuserauthorize') }}
+              a.button.is-grey.is-outlined(@click='cancel') {{ $t('modal.discard') }}
+              a.button(@click='create', v-if='provider=="local"', :disabled='isLoading', :class='{ "is-disabled": isLoading, "is-blue": !loading }') {{ $t('modal.createuser') }}
+              a.button(@click='create', v-if='provider!="local"', :disabled='isLoading', :class='{ "is-disabled": isLoading, "is-blue": !loading }') {{ $t('modal.createuserauthorize') }}
 </template>
 
 <script>
-  export default {
-    name: 'modal-create-user',
-    data () {
-      return {
-        email: '',
-        provider: 'local',
-        password: '',
-        name: '',
-        isLoading: false
-      }
+export default {
+  name: 'modal-create-user',
+  data() {
+    return {
+      email: '',
+      provider: 'local',
+      password: '',
+      name: '',
+      isLoading: false
+    }
+  },
+  computed: {
+    isShown() {
+      return this.$store.state.modalCreateUser.shown
+    }
+  },
+  methods: {
+    init() {
+      let self = this
+      self._.delay(() => {
+        self.$refs.createUserEmailInput.focus()
+      }, 100)
     },
-    computed: {
-      isShown () {
-        return this.$store.state.modalCreateUser.shown
-      }
+    cancel() {
+      this.$store.dispatch('modalCreateUser/close')
+      this.email = ''
+      this.provider = 'local'
     },
-    methods: {
-      init () {
-        let self = this
-        self._.delay(() => {
-          self.$refs.createUserEmailInput.focus()
-        }, 100)
-      },
-      cancel () {
-        this.$store.dispatch('modalCreateUser/close')
-        this.email = ''
-        this.provider = 'local'
-      },
-      create () {
-        let self = this
-        this.isLoading = true
-        this.$http.post('/admin/users/create', {
-          email: this.email,
-          provider: this.provider,
-          password: this.password,
-          name: this.name
-        }).then(resp => {
-          return resp.json()
-        }).then(resp => {
-          this.isLoading = false
-          if (resp.ok) {
-            this.cancel()
-            window.location.reload(true)
-          } else {
-            self.$store.dispatch('alert', {
-              style: 'red',
-              icon: 'square-cross',
-              msg: resp.msg
-            })
-          }
-        }).catch(err => {
-          this.isLoading = false
+    create() {
+      let self = this
+      this.isLoading = true
+      this.$http.post('/admin/users/create', {
+        email: this.email,
+        provider: this.provider,
+        password: this.password,
+        name: this.name
+      }).then(resp => {
+        return resp.json()
+      }).then(resp => {
+        this.isLoading = false
+        if (resp.ok) {
+          this.cancel()
+          window.location.reload(true)
+        } else {
           self.$store.dispatch('alert', {
             style: 'red',
             icon: 'square-cross',
-            msg: 'Error: ' + err.body.msg
+            msg: resp.msg
           })
+        }
+      }).catch(err => {
+        this.isLoading = false
+        self.$store.dispatch('alert', {
+          style: 'red',
+          icon: 'square-cross',
+          msg: 'Error: ' + err.body.msg
         })
-      },
-      mounted () {
-        this.$root.$on('modalCreateUser/init', this.init)
-      }
+      })
     }
+  },
+  mounted() {
+    this.$root.$on('modalCreateUser/init', this.init)
   }
+}
 </script>

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

@@ -12,54 +12,54 @@
             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') }}
+              a.button.is-grey.is-outlined(@click='cancel') {{ $t('modal.abort') }}
+              a.button.is-red(@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
-      }
+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')
     },
-    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 => {
+    deleteUser: 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: 'Error: ' + err.body.msg
+            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/pages/admin-edit-user.component.js

@@ -0,0 +1,74 @@
+'use strict'
+
+export default {
+  name: 'admin-edit-user',
+  props: ['usrdata'],
+  data() {
+    return {
+      id: '',
+      email: '',
+      password: '********',
+      name: '',
+      rights: [],
+      roleoverride: 'none'
+    }
+  },
+  methods: {
+    addRightsRow() {
+      this.rights.push({
+        role: 'write',
+        path: '/',
+        exact: false,
+        deny: false
+      })
+    },
+    removeRightsRow(idx) {
+      this._.pullAt(this.rights, idx)
+      this.$forceUpdate()
+    },
+    saveUser() {
+      let self = this
+      let formattedRights = this._.cloneDeep(this.rights)
+      switch (this.roleoverride) {
+        case 'admin':
+          formattedRights.push({
+            role: 'admin',
+            path: '/',
+            exact: false,
+            deny: false
+          })
+          break
+      }
+      this.$http.post(window.location.href, {
+        password: this.password,
+        name: this.name,
+        rights: JSON.stringify(formattedRights)
+      }).then(resp => {
+        self.$store.dispatch('alert', {
+          style: 'green',
+          icon: 'check',
+          msg: 'Changes have been applied successfully.'
+        })
+      }).catch(err => {
+        self.$store.dispatch('alert', {
+          style: 'red',
+          icon: 'square-cross',
+          msg: 'Error: ' + err.body.msg
+        })
+      })
+    }
+  },
+  mounted() {
+    let usr = JSON.parse(this.usrdata)
+    this.id = usr._id
+    this.email = usr.email
+    this.name = usr.name
+
+    if (this._.find(usr.rights, { role: 'admin' })) {
+      this.rights = this._.reject(usr.rights, ['role', 'admin'])
+      this.roleoverride = 'admin'
+    } else {
+      this.rights = usr.rights
+    }
+  }
+}

client/js/pages/admin.js

@@ -1,72 +0,0 @@
-'use strict'
-
-/* global usrData */
-
-import $ from 'jquery'
-import _ from 'lodash'
-import Vue from 'vue'
-
-module.exports = (alerts) => {
-  if ($('#page-type-admin-users-edit').length) {
-    let vueEditUser = new Vue({
-      el: '#page-type-admin-users-edit',
-      data: {
-        id: '',
-        email: '',
-        password: '********',
-        name: '',
-        rights: [],
-        roleoverride: 'none'
-      },
-      methods: {
-        addRightsRow: (ev) => {
-          vueEditUser.rights.push({
-            role: 'write',
-            path: '/',
-            exact: false,
-            deny: false
-          })
-        },
-        removeRightsRow: (idx) => {
-          _.pullAt(vueEditUser.rights, idx)
-          vueEditUser.$forceUpdate()
-        },
-        saveUser: (ev) => {
-          let formattedRights = _.cloneDeep(vueEditUser.rights)
-          switch (vueEditUser.roleoverride) {
-            case 'admin':
-              formattedRights.push({
-                role: 'admin',
-                path: '/',
-                exact: false,
-                deny: false
-              })
-              break
-          }
-          $.post(window.location.href, {
-            password: vueEditUser.password,
-            name: vueEditUser.name,
-            rights: JSON.stringify(formattedRights)
-          }).done((resp) => {
-            alerts.pushSuccess('Saved successfully', 'Changes have been applied.')
-          }).fail((jqXHR, txtStatus, resp) => {
-            alerts.pushError('Error', resp)
-          })
-        }
-      },
-      created: function () {
-        this.id = usrData._id
-        this.email = usrData.email
-        this.name = usrData.name
-
-        if (_.find(usrData.rights, { role: 'admin' })) {
-          this.rights = _.reject(usrData.rights, ['role', 'admin'])
-          this.roleoverride = 'admin'
-        } else {
-          this.rights = usrData.rights
-        }
-      }
-    })
-    require('../modals/admin-users-delete.js')(alerts)
-  }
-}

server/locales/en/common.json

@@ -22,6 +22,7 @@
     "discard": "Discard",
     "edit": "Edit",
     "history": "History",
+    "home": "Home",
     "login": "Login",
     "logout": "Logout",
     "move": "Move",
@@ -46,4 +47,4 @@
     "source": "Loading source...",
     "editor": "Loading editor..."
   }
-}
+}

server/views/pages/admin/_layout.pug

@@ -1,7 +1,7 @@
 extends ../../layout.pug
 
 block rootNavCenter
-  h2.nav-item= t('nav.account')
+  h2.nav-item= t('nav.settings')
 
 block rootNavRight
   loading-spinner
@@ -48,7 +48,7 @@ block content
                   a(href='/admin/settings')
                     i.icon-cog
                     span= t('nav.syssettings')
-                li
+                //-li
                   a(href='/admin/theme')
                     i.icon-drop
                     span= t('nav.theme')

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

@@ -8,116 +8,114 @@ block rootNavRight
       span= t('admin:users.returntousers')
 
 block adminContent
-  #page-type-admin-users-edit
-    .hero
-      h1.title#title= t('admin:users.edituser')
-      h2.subtitle= usr.email
-    table.table
-      thead
-        tr
-          th= t('admin:users.uniqueid')
-          th= t('admin:users.provider')
-          th= t('admin:users.createdon')
-          th= t('admin:users.updatedon')
-      tbody
-        tr
-          td.is-centered= usr._id
-          td.is-centered.has-icons
-            case usr.provider
-              when 'local': i.icon-server
-              when 'windowslive': i.icon-windows2.is-blue
-              when 'azure': i.icon-windows2.is-blue
-              when 'google': i.icon-google.is-blue
-              when 'facebook': i.icon-facebook.is-indigo
-              when 'github': i.icon-github.is-grey
-              when 'slack': i.icon-slack.is-purple
-              when 'ldap': i.icon-arrow-repeat-outline
-              default: i.icon-warning
-            = t('auth:providers.' + usr.provider)
-          td.is-centered= moment(usr.createdAt).format('lll')
-          td.is-centered= moment(usr.updatedAt).format('lll')
-    .form-sections
-      section
-        label.label= t('admin:profile.email')
-        p.control.is-fullwidth
-          input.input(type='text', placeholder='john.smith@example.com', v-model='email', disabled=!usrOpts.canChangeEmail)
-      section
-        label.label= t('admin:profile.displayname')
-        p.control.is-fullwidth
-          input.input(type='text', placeholder=t('admin:profile.displaynameexample'), v-model='name', disabled=!usrOpts.canChangeName)
-      if usrOpts.canChangePassword
+  admin-edit-user(inline-template, usrdata=JSON.stringify(usr))
+    div
+      .hero
+        h1.title= t('admin:users.edituser')
+        h2.subtitle= usr.email
+      table.table
+        thead
+          tr
+            th= t('admin:users.uniqueid')
+            th= t('admin:users.provider')
+            th= t('admin:users.createdon')
+            th= t('admin:users.updatedon')
+        tbody
+          tr
+            td.is-centered= usr._id
+            td.is-centered.has-icons
+              case usr.provider
+                when 'local': i.icon-server
+                when 'windowslive': i.icon-windows2.is-blue
+                when 'azure': i.icon-windows2.is-blue
+                when 'google': i.icon-google.is-blue
+                when 'facebook': i.icon-facebook.is-indigo
+                when 'github': i.icon-github.is-grey
+                when 'slack': i.icon-slack.is-purple
+                when 'ldap': i.icon-arrow-repeat-outline
+                default: i.icon-warning
+              = t('auth:providers.' + usr.provider)
+            td.is-centered= moment(usr.createdAt).format('lll')
+            td.is-centered= moment(usr.updatedAt).format('lll')
+      .form-sections
         section
-          label.label= t('admin:profile.password')
+          label.label= t('admin:profile.email')
           p.control.is-fullwidth
-            input.input(type='password', placeholder=t('admin:profile.password'), v-model='password', value='********')
-      section
-        label.label Access Rights
-        table.table
-          thead.is-teal
-            tr
-              th
-              th(style={width: '200px'}) Permission(s)
-              th Path
-              th(style={width: '150px'}) Access
-              th(style={width: '50px'})
-          tbody
-            tr(v-for='(right, idx) in rights', v-cloak)
-              td.is-icon
-                i.icon-marquee-plus.is-green(v-if='right.deny === false || right.deny === "false"')
-                i.icon-marquee-minus.is-red(v-if='right.deny === true || right.deny === "true"')
-              td
-                p.control.is-fullwidth
-                  select(v-model='right.role')
-                    option(value='write') Read and Write
-                    option(value='read') Read Only
-              td
-                .columns
-                  .column.is-narrow
-                    p.control
-                      select(v-model='right.exact')
-                        option(value='false') Path starts with:
-                        option(value='true') Path match exactly:
-                  .column
-                    p.control.is-fullwidth
-                      input.input(type='text', placeholder='/', v-model='right.path')
-              td
-                p.control.is-fullwidth
-                  select(v-model='right.deny')
-                    option(value='false') Allow
-                    option(value='true') Deny
-              td.is-centered.has-action-icons
-                i.icon-delete.is-red(v-on:click='removeRightsRow(idx)')
-            tr(v-if='rights.length < 1', v-cloak)
-              td.is-icon
-              td.is-centered(colspan='3'): em No additional access rights
-              td.is-centered.has-action-icons
-        .table-actions
-          button.button.is-blue(v-on:click='addRightsRow')
-            i.icon-plus
-            span Add New Row
-      section
-        label.label Role Override
-        p.control.is-fullwidth
-          select(v-model='roleoverride', disabled=!usrOpts.canChangeRole)
-            option(value='none') None
-            option(value='admin') Global Administrator
-      .columns.is-gapless
-        .column
-          section
-            button.button.is-green(v-on:click='saveUser')
-              i.icon-check
-              span Save Changes
-            a.button.button.is-grey.is-outlined(href='/admin/users')
-              i.icon-cancel
-              span Discard
-        .column.is-narrow
+            input.input(type='text', placeholder='john.smith@example.com', v-model='email', disabled=!usrOpts.canChangeEmail)
+        section
+          label.label= t('admin:profile.displayname')
+          p.control.is-fullwidth
+            input.input(type='text', placeholder=t('admin:profile.displaynameexample'), v-model='name', disabled=!usrOpts.canChangeName)
+        if usrOpts.canChangePassword
           section
-            if usrOpts.canBeDeleted
-              button.button.is-red(v-on:click='$store.dispatch("modalDeleteUser/open")')
-                i.icon-trash2
-                span Delete Account
+            label.label= t('admin:profile.password')
+            p.control.is-fullwidth
+              input.input(type='password', placeholder=t('admin:profile.password'), v-model='password', value='********')
+        section
+          label.label Access Rights
+          table.table
+            thead.is-teal
+              tr
+                th
+                th(style={width: '200px'}) Permission(s)
+                th Path
+                th(style={width: '150px'}) Access
+                th(style={width: '50px'})
+            tbody
+              tr(v-for='(right, idx) in rights', v-cloak)
+                td.is-icon
+                  i.icon-marquee-plus.is-green(v-if='right.deny === false || right.deny === "false"')
+                  i.icon-marquee-minus.is-red(v-if='right.deny === true || right.deny === "true"')
+                td
+                  p.control.is-fullwidth
+                    select(v-model='right.role')
+                      option(value='write') Read and Write
+                      option(value='read') Read Only
+                td
+                  .columns
+                    .column.is-narrow
+                      p.control
+                        select(v-model='right.exact')
+                          option(value='false') Path starts with:
+                          option(value='true') Path match exactly:
+                    .column
+                      p.control.is-fullwidth
+                        input.input(type='text', placeholder='/', v-model='right.path')
+                td
+                  p.control.is-fullwidth
+                    select(v-model='right.deny')
+                      option(value='false') Allow
+                      option(value='true') Deny
+                td.is-centered.has-action-icons
+                  i.icon-delete.is-red(v-on:click='removeRightsRow(idx)')
+              tr(v-if='rights.length < 1', v-cloak)
+                td.is-icon
+                td.is-centered(colspan='3'): em No additional access rights
+                td.is-centered.has-action-icons
+          .table-actions
+            button.button.is-blue(v-on:click='addRightsRow')
+              i.icon-plus
+              span Add New Row
+        section
+          label.label Role Override
+          p.control.is-fullwidth
+            select(v-model='roleoverride', disabled=!usrOpts.canChangeRole)
+              option(value='none') None
+              option(value='admin') Global Administrator
+        .columns.is-gapless
+          .column
+            section
+              button.button.is-green(v-on:click='saveUser')
+                i.icon-check
+                span Save Changes
+              a.button.button.is-grey.is-outlined(href='/admin/users')
+                i.icon-cancel
+                span Discard
+          .column.is-narrow
+            section
+              if usrOpts.canBeDeleted
+                button.button.is-red(v-on:click='$store.dispatch("modalDeleteUser/open")')
+                  i.icon-trash2
+                  span Delete Account
 
   modal-delete-user(current-user=usr._id)
-
-  script(type='text/javascript').
-    var usrData = !{JSON.stringify(usr)};