feat: user edit UI + admin UI improvements + fixes

client/components/admin/admin-api.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') call_split
+          img(src='/svg/icon-rest-api.svg', alt='API', style='width: 80px;')
           .admin-header-title
             .headline.blue--text.text--darken-2 API
             .subheading.grey--text Manage keys to access the API

client/components/admin/admin-auth.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') lock_outline
+          img(src='/svg/icon-unlock.svg', alt='Authentication', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Authentication
             .subheading.grey--text Configure the authentication settings of your wiki

client/components/admin/admin-contribute.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') favorite
+          img(src='/svg/icon-heart-health.svg', alt='Contribute', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{ $t('admin:contribute.title') }}
             .subheading.grey--text {{ $t('admin:contribute.subtitle') }}

client/components/admin/admin-dashboard.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') dashboard
+          img(src='/svg/icon-browse-page.svg', alt='Dashboard', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{ $t('admin:dashboard.title') }}
             .subheading.grey--text {{ $t('admin:dashboard.subtitle') }}
@@ -92,8 +92,7 @@
 
 <script>
 import AnimatedNumber from 'animated-number-vue'
-
-import statsQuery from 'gql/admin/dashboard/dashboard-query-stats.gql'
+import { get } from 'vuex-pathify'
 
 export default {
   components: {
@@ -101,13 +100,6 @@ export default {
   },
   data() {
     return {
-      info: {
-        currentVersion: 'n/a',
-        latestVersion: 'n/a',
-        groupsTotal: 0,
-        pagesTotal: 0,
-        usersTotal: 0
-      },
       recentPages: [],
       popularPages: []
     }
@@ -115,20 +107,11 @@ export default {
   computed: {
     isLatestVersion() {
       return this.info.currentVersion === this.info.latestVersion
-    }
+    },
+    info: get('admin/info')
   },
   methods: {
     round(val) { return Math.round(val) }
-  },
-  apollo: {
-    info: {
-      query: statsQuery,
-      fetchPolicy: 'network-only',
-      update: (data) => data.system.info,
-      watchLoading (isLoading) {
-        this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-system-refresh')
-      }
-    }
   }
 }
 </script>

client/components/admin/admin-dev.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') weekend
+          img(src='/svg/icon-console.svg', alt='Developer Tools', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Developer Tools
             .subheading.grey--text ¯\_(ツ)_/¯

client/components/admin/admin-editor.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') transform
+          img(src='/svg/icon-web-design.svg', alt='Editor', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Editor
             .subheading.grey--text Configure the content editor

client/components/admin/admin-general.vue

@@ -3,7 +3,7 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') widgets
+          img(src='/svg/icon-categorize.svg', alt='General', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{ $t('admin:general.title') }}
             .subheading.grey--text {{ $t('admin:general.subtitle') }}
@@ -60,7 +60,7 @@
                       outline
                       label='Google Analytics ID'
                       :counter='255'
-                      prepend-icon='public'
+                      prepend-icon='timeline'
                       persistent-hint
                       hint='Property tracking ID for Google Analytics.'
                       )
@@ -72,7 +72,7 @@
                       label='Company / Organization Name'
                       v-model='company'
                       :counter='255'
-                      prepend-icon='public'
+                      prepend-icon='business'
                       persistent-hint
                       hint='Name to use when displaying copyright notice in the footer. Leave empty to hide.'
                       )

client/components/admin/admin-groups-edit.vue

@@ -3,11 +3,13 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') people
+          img(src='/svg/icon-social-group.svg', alt='Edit Group', style='width: 80px;')
           .admin-header-title
             .headline.blue--text.text--darken-2 Edit Group
             .subheading.grey--text {{name}}
           v-spacer
+          .caption.grey--text ID #[strong {{group.id}}]
+          v-divider.mx-3(vertical)
           v-btn(color='indigo', large, outline, to='/groups')
             v-icon arrow_back
           v-dialog(v-model='deleteGroupDialog', max-width='500', v-if='!group.isSystem')
@@ -24,7 +26,7 @@
             v-icon(left) check
             span Update Group
         v-card.mt-3
-          v-tabs(v-model='tab', :color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
+          v-tabs(v-model='tab', :color='$vuetify.dark ? "primary" : "grey darken-2"', fixed-tabs, slider-color='white', show-arrows, dark)
             v-tab(key='properties') Properties
             v-tab(key='permissions') Permissions
             v-tab(key='rules') Page Rules
@@ -41,8 +43,6 @@
                     counter='255'
                     prepend-icon='people'
                     )
-                  v-divider
-                  .caption.mt-3.grey--text ID: {{group.id}}
 
             v-tab-item(key='permissions', :transition='false', :reverse-transition='false')
               v-container.pa-3(fluid, grid-list-md)

client/components/admin/admin-groups.vue

@@ -3,7 +3,7 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') people
+          img(src='/svg/icon-people.svg', alt='Groups', style='width: 80px;')
           .admin-header-title
             .headline.blue--text.text--darken-2 Groups
             .subheading.grey--text Manage groups and their permissions

client/components/admin/admin-locale.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') language
+          img(src='/svg/icon-globe-earth.svg', alt='Locale', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{ $t('admin:locale.title') }}
             .subheading.grey--text {{ $t('admin:locale.subtitle') }}

client/components/admin/admin-logging.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') graphic_eq
+          img(src='/svg/icon-registry-editor.svg', alt='Logging', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Logging
             .subheading.grey--text Configure the system logger(s)

client/components/admin/admin-navigation.vue

@@ -3,7 +3,7 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') near_me
+          img(src='/svg/icon-triangle-arrow.svg', alt='Navigation', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{$t('navigation.title')}}
             .subheading.grey--text {{$t('navigation.subtitle')}}

client/components/admin/admin-pages.vue

@@ -3,7 +3,7 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') insert_drive_file
+          img(src='/svg/icon-file.svg', alt='Page', style='width: 80px;')
           .admin-header-title
             .headline.blue--text.text--darken-2 Pages
             .subheading.grey--text Manage pages

client/components/admin/admin-rendering.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') system_update_alt
+          img(src='/svg/icon-process.svg', alt='Rendering', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Rendering
             .subheading.grey--text Configure how content is rendered

client/components/admin/admin-search.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') search
+          img(src='/svg/icon-search.svg', alt='Search Engine', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Search Engine
             .subheading.grey--text Configure the search capabilities of your wiki

client/components/admin/admin-storage.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') storage
+          img(src='/svg/icon-cloud-storage.svg', alt='Storage', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Storage
             .subheading.grey--text Set backup and sync targets for your content

client/components/admin/admin-system.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') tune
+          img(src='/svg/icon-tune.svg', alt='System Info', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{ $t('admin:system.title') }}
             .subheading.grey--text {{ $t('admin:system.subtitle') }}

client/components/admin/admin-theme.vue

@@ -3,7 +3,7 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') palette
+          img(src='/svg/icon-paint-palette.svg', alt='Theme', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Theme
             .subheading.grey--text Modify the look & feel of your wiki

client/components/admin/admin-users-edit.vue

@@ -3,148 +3,193 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') perm_identity
+          img(src='/svg/icon-male-user.svg', alt='Edit User', style='width: 80px;')
           .admin-header-title
-            .headline.blue--text.text--darken-2 Users
-            .subheading.grey--text Manage users
+            .headline.blue--text.text--darken-2 Edit User
+            .subheading.grey--text {{user.name}}
           v-spacer
-          v-btn(outline, color='grey', large, @click='refresh')
-            v-icon refresh
-          v-btn(color='primary', large, depressed, @click='authorizeUser')
-            v-icon(left) lock_outline
-            span Authorize Social User
-          v-btn(color='primary', large, depressed, @click='createUser')
-            v-icon(left) add
-            span New Local User
+          .caption.grey--text ID #[strong {{user.id}}]
+          v-divider.mx-3(vertical)
+          v-btn(color='indigo', large, outline, to='/users')
+            v-icon arrow_back
+          v-dialog(v-model='deleteUserDialog', max-width='500', v-if='user.id !== currentUserId && !user.isSystem')
+            v-btn(color='red', large, outline, slot='activator')
+              v-icon(color='red') delete
+            v-card
+              .dialog-header.is-red Delete User?
+              v-card-text Are you sure you want to delete user #[strong {{ user.name }}]?
+              v-card-actions
+                v-spacer
+                v-btn(flat, @click='deleteUserDialog = false') Cancel
+                v-btn(color='red', dark, @click='deleteUser') Delete
+          v-btn(color='primary', large, depressed, @click='updateUser')
+            v-icon(left) check
+            span Update User
+      v-flex(xs5)
+        v-card
+          v-toolbar(color='primary', dense, dark, flat)
+            v-icon.mr-2 directions_run
+            span Basic Info
+          v-list.py-0(two-line, dense)
+            v-list-tile
+              v-list-tile-avatar
+                v-icon alternate_email
+              v-list-tile-content
+                v-list-tile-title Email
+                v-list-tile-sub-title {{ user.email }}
+              v-list-tile-action
+                  v-btn(icon, color='grey', flat)
+                    v-icon edit
+            v-divider
+            v-list-tile
+              v-list-tile-avatar
+                v-icon person
+              v-list-tile-content
+                v-list-tile-title Display Name
+                v-list-tile-sub-title {{ user.name }}
+              v-list-tile-action
+                  v-btn(icon, color='grey', flat)
+                    v-icon edit
         v-card.mt-3
-          v-data-table(
-            v-model='selected'
-            :items='users',
-            :headers='headers',
-            :search='search',
-            :pagination.sync='pagination',
-            :rows-per-page-items='[15]'
-            hide-actions,
-            disable-initial-sort
-          )
-            template(slot='headers', slot-scope='props')
-              tr
-                th.text-xs-left(
-                  v-for='header in props.headers'
-                  :key='header.text'
-                  :width='header.width'
-                  :class='[`column`, header.sortable ? `sortable` : ``, pagination.descending ? `desc` : `asc`, header.value === pagination.sortBy ? `active` : ``]'
-                  @click='changeSort(header.value)'
-                )
-                  | {{ header.text }}
-                  v-icon(small, v-if='header.sortable') arrow_upward
-            template(slot='items', slot-scope='props')
-              tr.is-clickable(:active='props.selected', @click='$router.push("/users/" + props.item.id)')
-                //- td
-                  v-checkbox(hide-details, :input-value='props.selected', color='blue darken-2', @click='props.selected = !props.selected')
-                td.text-xs-right {{ props.item.id }}
-                td: strong {{ props.item.name }}
-                td {{ props.item.email }}
-                td {{ props.item.providerKey }}
-                td {{ props.item.createdAt | moment('from') }}
-                td
-                  v-menu(bottom, right, min-width='200')
-                    v-btn(icon, slot='activator'): v-icon.grey--text.text--darken-1 more_horiz
-                    v-list
-                      v-list-tile(@click='')
-                        v-list-tile-action
-                          v-icon(color='primary') edit
-                        v-list-tile-content
-                          v-list-tile-title Edit
-                      v-list-tile(@click='')
-                        v-list-tile-action
-                          v-icon(color='red') block
-                        v-list-tile-content
-                          v-list-tile-title Block
-            template(slot='no-data')
-              .pa-3
-                v-alert(icon='warning', :value='true', outline) No users to display!
-          .text-xs-center.py-2
-            v-pagination(v-model='pagination.page', :length='pages')
+          v-toolbar(color='primary', dense, dark, flat)
+            v-icon.mr-2 lock_outline
+            span Authentication
+          v-list.py-0(two-line, dense)
+            v-list-tile
+              v-list-tile-avatar
+                v-icon business
+              v-list-tile-content
+                v-list-tile-title Provider
+                v-list-tile-sub-title {{ user.providerKey }}
+              v-list-tile-action
+                v-img(src='https://static.requarks.io/logo/wikijs.svg', alt='')
+            template(v-if='user.providerKey === `local`')
+              v-divider
+              v-list-tile
+                v-list-tile-avatar
+                  v-icon security
+                v-list-tile-content
+                  v-list-tile-title Password
+                  v-list-tile-sub-title ********
+                v-list-tile-action
+                    v-btn(icon, color='grey', flat)
+                      v-icon cached
+                v-list-tile-action
+                    v-btn(icon, color='grey', flat)
+                      v-icon email
+              v-divider
+              v-list-tile
+                v-list-tile-avatar
+                  v-icon screen_lock_portrait
+                v-list-tile-content
+                  v-list-tile-title Two Factor Authentication (2FA)
+                  v-list-tile-sub-title.red--text Inactive
+                v-list-tile-action
+                    v-btn(icon, color='grey', flat)
+                      v-icon power_settings_new
+              template(v-if='user.providerId')
+                v-divider
+                v-list-tile
+                  v-list-tile-avatar
+                    v-icon person
+                  v-list-tile-content
+                    v-list-tile-title Provider Id
+                    v-list-tile-sub-title {{ user.providerId }}
+        v-card.mt-3
+          v-toolbar(color='primary', dense, dark, flat)
+            v-icon.mr-2 people
+            span User Groups
+          v-list(dense)
+            template(v-for='(group, idx) in user.groups')
+              v-list-tile
+                v-list-tile-avatar
+                  v-icon people_outline
+                v-list-tile-content
+                  v-list-tile-title {{group.name}}
+                v-list-tile-action
+                  v-btn(icon, color='red', flat)
+                    v-icon clear
+              v-divider(v-if='idx < user.groups.length - 1')
+          v-card-chin
+            v-spacer
+            v-btn(small, color='primary', flat)
+              v-icon(left) how_to_reg
+              span Assign to group
+      v-flex(xs7)
+        v-card
+          v-toolbar(color='primary', dense, dark, flat)
+            v-icon.mr-2 directions_walk
+            span Extended Metadata
+          v-list.py-0(two-line, dense)
+            v-list-tile
+              v-list-tile-avatar
+                v-icon public
+              v-list-tile-content
+                v-list-tile-title Location
+                v-list-tile-sub-title {{ user.location }}
+              v-list-tile-action
+                  v-btn(icon, color='grey', flat)
+                    v-icon edit
+            v-divider
+            v-list-tile
+              v-list-tile-avatar
+                v-icon local_library
+              v-list-tile-content
+                v-list-tile-title Job Title
+                v-list-tile-sub-title {{ user.jobTitle }}
+              v-list-tile-action
+                  v-btn(icon, color='grey', flat)
+                    v-icon edit
+            v-divider
+            v-list-tile
+              v-list-tile-avatar
+                v-icon map
+              v-list-tile-content
+                v-list-tile-title Timezone
+                v-list-tile-sub-title {{ user.timezone }}
+              v-list-tile-action
+                  v-btn(icon, color='grey', flat)
+                    v-icon edit
+        v-card.mt-3
+          v-toolbar(color='primary', dense, dark, flat)
+            v-icon.mr-2 insert_drive_file
+            span Content
+          v-card-text
+            em.caption.grey--text Coming soon
 
-    user-authorize(v-model='isAuthorizeDialogShown')
-    user-create(v-model='isCreateDialogShown')
 </template>
-
 <script>
-import usersQuery from 'gql/admin/users/users-query-list.gql'
+import _ from 'lodash'
+import { get } from 'vuex-pathify'
 
-import UserAuthorize from './admin-users-authorize.vue'
-import UserCreate from './admin-users-create.vue'
+import userQuery from 'gql/admin/users/users-query-single.gql'
 
 export default {
-  components: {
-    UserAuthorize,
-    UserCreate
-  },
   data() {
     return {
-      selected: [],
-      pagination: {},
-      users: [],
-      headers: [
-        { text: 'ID', value: 'id', width: 80, sortable: true },
-        { text: 'Name', value: 'name', sortable: true },
-        { text: 'Email', value: 'email', sortable: true },
-        { text: 'Provider', value: 'provider', sortable: true },
-        { text: 'Created', value: 'createdAt', sortable: true },
-        { text: '', value: 'actions', sortable: false, width: 50 }
-      ],
-      search: '',
-      isAuthorizeDialogShown: false,
-      isCreateDialogShown: false
+      deleteUserDialog: false,
+      user: {
+
+      }
     }
   },
   computed: {
-    pages () {
-      if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null) {
-        return 0
-      }
-
-      return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
-    }
+    currentUserId: get('user/id')
   },
   methods: {
-    authorizeUser() {
-      this.isAuthorizeDialogShown = true
-    },
-    createUser() {
-      this.isCreateDialogShown = true
-    },
-    async refresh() {
-      await this.$apollo.queries.users.refetch()
-      this.$store.commit('showNotification', {
-        message: 'Users list has been refreshed.',
-        style: 'success',
-        icon: 'cached'
-      })
-    },
-    changeSort (column) {
-      if (this.pagination.sortBy === column) {
-        this.pagination.descending = !this.pagination.descending
-      } else {
-        this.pagination.sortBy = column
-        this.pagination.descending = false
-      }
-    },
-    toggleAll () {
-      if (this.selected.length) {
-        this.selected = []
-      } else {
-        this.selected = this.items.slice()
-      }
-    }
+    deleteUser() {},
+    updateUser() {}
   },
   apollo: {
-    users: {
-      query: usersQuery,
+    user: {
+      query: userQuery,
+      variables() {
+        return {
+          id: _.toSafeInteger(this.$route.params.id)
+        }
+      },
       fetchPolicy: 'network-only',
-      update: (data) => data.users.list,
+      update: (data) => data.users.single,
       watchLoading (isLoading) {
         this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-users-refresh')
       }

client/components/admin/admin-users.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') perm_identity
+          img(src='/svg/icon-customer.svg', alt='Users', style='width: 80px;')
           .admin-header-title
             .headline.blue--text.text--darken-2 Users
             .subheading.grey--text Manage users
@@ -48,24 +48,16 @@
                 td {{ props.item.providerKey }}
                 td {{ props.item.createdAt | moment('from') }}
                 td
-                  v-menu(bottom, right, min-width='200')
-                    v-btn(icon, slot='activator'): v-icon.grey--text.text--darken-1 more_horiz
-                    v-list
-                      v-list-tile(@click='')
-                        v-list-tile-action
-                          v-icon(color='primary') edit
-                        v-list-tile-content
-                          v-list-tile-title Edit
-                      v-list-tile(@click='')
-                        v-list-tile-action
-                          v-icon(color='red') block
-                        v-list-tile-content
-                          v-list-tile-title Block
+                  v-tooltip(left, v-if='props.item.isSystem')
+                    v-icon(slot='activator') lock_outline
+                    span System User
             template(slot='no-data')
               .pa-3
                 v-alert(icon='warning', :value='true', outline) No users to display!
-          .text-xs-center.py-2
+          v-card-chin
+            v-spacer
             v-pagination(v-model='pagination.page', :length='pages')
+            v-spacer
 
     user-authorize(v-model='isAuthorizeDialogShown')
     user-create(v-model='isCreateDialogShown')

client/components/admin/admin-utilities.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') build
+          img(src='/svg/icon-maintenance.svg', alt='Utilities', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Utilities
             .subheading.grey--text Maintenance and troubleshooting tools