feat: timezone + dateFOrmat + appearance profile settings

client/client-app.js

@@ -15,7 +15,7 @@ import Vuetify from 'vuetify/lib'
 import Velocity from 'velocity-animate'
 import Vuescroll from 'vuescroll/dist/vuescroll-native'
 import Hammer from 'hammerjs'
-import moment from 'moment'
+import moment from 'moment-timezone'
 import VueMoment from 'vue-moment'
 import store from './store'
 import Cookies from 'js-cookie'
@@ -189,6 +189,12 @@ let bootstrap = () => {
   // ====================================
 
   const i18n = localization.init()
+
+  let darkModeEnabled = siteConfig.darkMode
+  if ((store.get('user/appearance') || '').length > 0) {
+    darkModeEnabled = (store.get('user/appearance') === 'dark')
+  }
+
   window.WIKI = new Vue({
     el: '#root',
     components: {},
@@ -199,9 +205,22 @@ let bootstrap = () => {
     vuetify: new Vuetify({
       rtl: siteConfig.rtl,
       theme: {
-        dark: siteConfig.darkMode
+        dark: darkModeEnabled
       }
-    })
+    }),
+    mounted () {
+      this.$moment.locale(siteConfig.lang)
+      if ((store.get('user/dateFormat') || '').length > 0) {
+        this.$moment.updateLocale(this.$moment.locale(), {
+          longDateFormat: {
+            'L': store.get('user/dateFormat')
+          }
+        })
+      }
+      if ((store.get('user/timezone') || '').length > 0) {
+        this.$moment.tz.setDefault(store.get('user/timezone'))
+      }
+    }
   })
 
   // ----------------------------------

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

@@ -133,7 +133,7 @@
               v-divider
               v-list-item
                 v-list-item-avatar(size='32')
-                  v-icon mdi-textbox-password
+                  v-icon mdi-form-textbox-password
                 v-list-item-content
                   v-list-item-title {{$t('admin:users.password')}}
                   v-list-item-subtitle ••••••••

client/components/profile.vue

@@ -22,7 +22,7 @@
         //-     v-list-item-title {{$t('profile:comments.title')}}
         //-     v-list-item-subtitle.caption.grey--text.text--lighten-1 Coming soon
 
-    v-content(:class='darkMode ? "grey darken-4" : "grey lighten-5"')
+    v-content(:class='$vuetify.theme.dark ? "grey darken-4" : "grey lighten-5"')
       transition(name='profile-router')
         router-view
 
@@ -42,7 +42,6 @@ const router = new VueRouter({
   routes: [
     { path: '/', redirect: '/profile' },
     { path: '/profile', component: () => import(/* webpackChunkName: "profile" */ './profile/profile.vue') },
-    // { path: '/preferences', component: () => import(/* webpackChunkName: "profile" */ './profile/preferences.vue') },
     { path: '/pages', component: () => import(/* webpackChunkName: "profile" */ './profile/pages.vue') },
     { path: '/comments', component: () => import(/* webpackChunkName: "profile" */ './profile/comments.vue') }
   ]

client/components/profile/preferences.vue

-<template lang='pug'>
-  v-container(fluid, fill-height, grid-list-lg)
-    v-layout(row wrap)
-      v-flex(xs12)
-        .headline.primary--text Preferences
-        .subheading.grey--text Site settings
-        v-form.pt-3
-          v-layout(row wrap)
-            v-flex(lg6 xs12)
-              v-form
-                v-card
-                  v-toolbar(color='primary', dark, dense, flat)
-                    v-toolbar-title
-                      .subheading Display
-                  v-card-text
-                    v-subheader.pl-0 Locale
-                    v-select(
-                      outline
-                      background-color='grey lighten-2'
-                      hide-details
-                      )
-                    v-divider.mt-3
-                    v-subheader.pl-0 Timezone
-                    v-select(
-                      outline
-                      background-color='grey lighten-2'
-                      hide-details
-                      )
-                  v-card-chin
-                    v-spacer
-                    v-btn(color='primary')
-                      v-icon(left) chevron_right
-                      span Save
-            v-flex(lg6 xs12)
-              v-card
-                v-toolbar(color='primary', dark, dense, flat)
-                  v-toolbar-title
-                    .subheading Editing
-                v-card-text
-                  v-subheader.pl-0 Default Editor
-                  v-select(
-                    outline
-                    background-color='grey lighten-2'
-                    hide-details
-                    )
-                v-card-chin
-                  v-spacer
-                  v-btn(color='primary')
-                    v-icon(left) chevron_right
-                    span Save
-
-</template>
-
-<script>
-/* global siteConfig */
-
-export default {
-  data() {
-    return { }
-  },
-  computed: {
-    darkMode() { return siteConfig.darkMode }
-  }
-}
-</script>
-
-<style lang='scss'>
-
-</style>

client/store/user.js

@@ -9,6 +9,9 @@ const state = {
   pictureUrl: '',
   localeCode: '',
   defaultEditor: '',
+  timezone: '',
+  dateFormat: '',
+  appearance: '',
   permissions: [],
   iat: 0,
   exp: 0,
@@ -28,9 +31,12 @@ export default {
           st.id = jwtData.id
           st.email = jwtData.email
           st.name = jwtData.name
-          st.pictureUrl = jwtData.pictureUrl
-          st.localeCode = jwtData.localeCode
-          st.defaultEditor = jwtData.defaultEditor
+          st.pictureUrl = jwtData.av
+          st.localeCode = jwtData.lc
+          st.timezone = jwtData.tz || Intl.DateTimeFormat().resolvedOptions().timeZone || ''
+          st.dateFormat = jwtData.df || ''
+          st.appearance = jwtData.ap || ''
+          // st.defaultEditor = jwtData.defaultEditor
           st.permissions = jwtData.permissions
           st.iat = jwtData.iat
           st.exp = jwtData.exp

dev/webpack/webpack.dev.js

@@ -8,6 +8,7 @@ const { VueLoaderPlugin } = require('vue-loader')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin')
+const MomentTimezoneDataPlugin = require('moment-timezone-data-webpack-plugin')
 const SriWebpackPlugin = require('webpack-subresource-integrity')
 const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
 const WriteFilePlugin = require('write-file-webpack-plugin')
@@ -179,6 +180,10 @@ module.exports = {
   plugins: [
     new VueLoaderPlugin(),
     new VuetifyLoaderPlugin(),
+    new MomentTimezoneDataPlugin({
+      startYear: 2017,
+      endYear: (new Date().getFullYear()) + 5
+    }),
     new CopyWebpackPlugin([
       { from: 'client/static' },
       { from: './node_modules/prismjs/components', to: 'js/prism' }

dev/webpack/webpack.prod.js

@@ -10,6 +10,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const MomentTimezoneDataPlugin = require('moment-timezone-data-webpack-plugin')
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
 const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
@@ -184,6 +185,10 @@ module.exports = {
     new VueLoaderPlugin(),
     new VuetifyLoaderPlugin(),
     new webpack.BannerPlugin('Wiki.js - wiki.js.org - Licensed under AGPL'),
+    new MomentTimezoneDataPlugin({
+      startYear: 2017,
+      endYear: (new Date().getFullYear()) + 5
+    }),
     new CopyWebpackPlugin([
       { from: 'client/static' },
       { from: './node_modules/prismjs/components', to: 'js/prism' }

package.json

@@ -254,6 +254,7 @@
     "mermaid": "8.5.0",
     "mini-css-extract-plugin": "0.9.0",
     "moment-duration-format": "2.3.2",
+    "moment-timezone-data-webpack-plugin": "1.3.0",
     "offline-plugin": "5.0.7",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "postcss-cssnext": "3.1.0",

server/db/migrations-sqlite/2.4.13.js

+exports.up = knex => {
+  return knex.schema
+    .alterTable('pages', table => {
+      table.json('extra').notNullable().defaultTo('{}')
+    })
+    .alterTable('pageHistory', table => {
+      table.json('extra').notNullable().defaultTo('{}')
+    })
+    .alterTable('users', table => {
+      table.string('dateFormat').notNullable().defaultTo('')
+      table.string('appearance').notNullable().defaultTo('')
+    })
+}
+
+exports.down = knex => { }

server/db/migrations/2.4.13.js

+exports.up = knex => {
+  return knex.schema
+    .alterTable('pages', table => {
+      table.json('extra').notNullable().defaultTo('{}')
+    })
+    .alterTable('pageHistory', table => {
+      table.json('extra').notNullable().defaultTo('{}')
+    })
+    .alterTable('users', table => {
+      table.string('dateFormat').notNullable().defaultTo('')
+      table.string('appearance').notNullable().defaultTo('')
+    })
+}
+
+exports.down = knex => { }

server/graph/resolvers/user.js

@@ -147,12 +147,22 @@ module.exports = {
           throw new WIKI.Error.AuthAccountNotVerified()
         }
 
+        if (!['', 'DD/MM/YYYY', 'DD.MM.YYYY', 'MM/DD/YYYY', 'YYYY-MM-DD', 'YYYY/MM/DD'].includes(args.dateFormat)) {
+          throw new WIKI.Error.InputInvalid()
+        }
+
+        if (!['', 'light', 'dark'].includes(args.appearance)) {
+          throw new WIKI.Error.InputInvalid()
+        }
+
         await WIKI.models.users.updateUser({
           id: usr.id,
           name: _.trim(args.name),
           jobTitle: _.trim(args.jobTitle),
           location: _.trim(args.location),
-          timezone: args.timezone
+          timezone: args.timezone,
+          dateFormat: args.dateFormat,
+          appearance: args.appearance
         })
 
         const newToken = await WIKI.models.users.refreshToken(usr.id)

server/graph/schemas/user.graphql

@@ -57,6 +57,8 @@ type UserMutation {
     location: String
     jobTitle: String
     timezone: String
+    dateFormat: String
+    appearance: String
   ): DefaultResponse @auth(requires: ["manage:users", "manage:system"])
 
   delete(
@@ -84,6 +86,8 @@ type UserMutation {
     location: String!
     jobTitle: String!
     timezone: String!
+    dateFormat: String!
+    appearance: String!
   ): UserTokenResponse
 
   changePassword(
@@ -128,6 +132,8 @@ type User {
   location: String!
   jobTitle: String!
   timezone: String!
+  dateFormat: String!
+  appearance: String!
   createdAt: Date!
   updatedAt: Date!
   lastLoginAt: Date
@@ -145,6 +151,8 @@ type UserProfile {
   location: String!
   jobTitle: String!
   timezone: String!
+  dateFormat: String!
+  appearance: String!
   createdAt: Date!
   updatedAt: Date!
   lastLoginAt: Date

server/models/users.js

@@ -350,10 +350,12 @@ module.exports = class User extends Model {
         id: user.id,
         email: user.email,
         name: user.name,
-        pictureUrl: user.pictureUrl,
-        timezone: user.timezone,
-        localeCode: user.localeCode,
-        defaultEditor: user.defaultEditor,
+        av: user.pictureUrl,
+        tz: user.timezone,
+        lc: user.localeCode,
+        df: user.dateFormat,
+        ap: user.appearance,
+        // defaultEditor: user.defaultEditor,
         permissions: user.getGlobalPermissions(),
         groups: user.getGroups()
       }, {
@@ -548,7 +550,7 @@ module.exports = class User extends Model {
    *
    * @param {Object} param0 User ID and fields to update
    */
-  static async updateUser ({ id, email, name, newPassword, groups, location, jobTitle, timezone }) {
+  static async updateUser ({ id, email, name, newPassword, groups, location, jobTitle, timezone, dateFormat, appearance }) {
     const usr = await WIKI.models.users.query().findById(id)
     if (usr) {
       let usrData = {}
@@ -594,6 +596,12 @@ module.exports = class User extends Model {
       if (!_.isEmpty(timezone) && timezone !== usr.timezone) {
         usrData.timezone = timezone
       }
+      if (!_.isNil(dateFormat) && dateFormat !== usr.dateFormat) {
+        usrData.dateFormat = dateFormat
+      }
+      if (!_.isNil(appearance) && appearance !== usr.appearance) {
+        usrData.appearance = appearance
+      }
       await WIKI.models.users.query().patch(usrData).findById(id)
     } else {
       throw new WIKI.Error.UserNotFound()