refactor: Migrate to Vue components

.eslintrc.json

 {
   "extends": "standard",
-
   "env": {
     "node": true,
     "es6": true,
     "jest": true
   },
-
   "globals": {
     "document": false,
     "navigator": false,
@@ -16,5 +14,8 @@
     "ROOTPATH": true,
     "SERVERPATH": true,
     "IS_DEBUG": true
+  },
+  "rules": {
+    "space-before-function-paren": 0
   }
 }

client/js/app.js

 'use strict'
 
-/* global alertsData */
+/* global alertsData, siteLang */
+/* eslint-disable no-new */
 
 import $ from 'jquery'
 import _ from 'lodash'
+import Vue from 'vue'
+import Vuex from 'vuex'
 import io from 'socket.io-client'
+import i18next from 'i18next'
+import i18nextXHR from 'i18next-xhr-backend'
+import VueI18Next from '@panter/vue-i18next'
 import Alerts from './components/alerts.js'
 import 'jquery-smooth-scroll'
 import 'jquery-sticky'
 
+// ====================================
+// Load Vue Components
+// ====================================
+
+import anchorComponent from './components/anchor.vue'
+import colorPickerComponent from './components/color-picker.vue'
+import loadingSpinnerComponent from './components/loading-spinner.vue'
+import searchComponent from './components/search.vue'
+
+import adminProfileComponent from './pages/admin-profile.component.js'
+import adminSettingsComponent from './pages/admin-settings.component.js'
+
+// ====================================
+// Initialize i18next
+// ====================================
+
+Vue.use(VueI18Next)
+
+i18next
+  .use(i18nextXHR)
+  .init({
+    backend: {
+      loadPath: '/js/i18n/{{lng}}.json'
+    },
+    lng: siteLang,
+    fallbackLng: siteLang
+  })
+
+// ====================================
+// Initialize Vuex
+// ====================================
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  state: {
+    loading: false
+  },
+  mutations: {
+    startLoading: state => { state.loading = true },
+    stopLoading: state => { state.loading = false }
+  }
+})
+
 $(() => {
   // ====================================
   // Scroll
@@ -27,28 +77,47 @@ $(() => {
   // ====================================
 
   $(window).bind('beforeunload', () => {
-    $('#notifload').addClass('active')
+    store.commit('startLoading')
   })
   $(document).ajaxSend(() => {
-    $('#notifload').addClass('active')
+    store.commit('startLoading')
   }).ajaxComplete(() => {
-    $('#notifload').removeClass('active')
+    store.commit('stopLoading')
   })
 
-  var alerts = new Alerts()
+  var alerts = {}
+  /*var alerts = new Alerts()
   if (alertsData) {
     _.forEach(alertsData, (alertRow) => {
       alerts.push(alertRow)
     })
-  }
+  }*/
 
   // ====================================
   // Establish WebSocket connection
   // ====================================
 
-  var socket = io(window.location.origin)
+  let socket = io(window.location.origin)
+  window.socket = socket
 
-  require('./components/search.js')(socket)
+  // ====================================
+  // Bootstrap Vue
+  // ====================================
+
+  const i18n = new VueI18Next(i18next)
+  new Vue({
+    components: {
+      adminProfile: adminProfileComponent,
+      adminSettings: adminSettingsComponent,
+      anchor: anchorComponent,
+      colorPicker: colorPickerComponent,
+      loadingSpinner: loadingSpinnerComponent,
+      search: searchComponent
+    },
+    store,
+    i18n,
+    el: '#root'
+  })
 
   // ====================================
   // Pages logic

client/js/components/copy-path.vue → client/js/components/anchor.vue

@@ -7,7 +7,7 @@
 
 <script>
   export default {
-        name: 'app',
+    name: 'anchor',
     data () {
       return {
           msg: 'Welcome to Your Vue.js App'

client/js/components/color-picker.vue

+<template lang="pug">
+  p.control
+    input.input(type='text', placeholder='#F0F0F0', v-model='color')
+</template>
+
+<script>
+  export default {
+    name: 'color-picker',
+    data () {
+      return {
+        color: '000000'
+      }
+    }
+  }
+</script>

client/js/components/loading-spinner.vue

+<template lang="pug">
+  i.nav-item#notifload(v-bind:class='{ "is-active": loading }')
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+
+  export default {
+    name: 'loading-spinner',
+    computed: mapState(['loading'])
+  }
+</script>

client/js/components/search.js

-'use strict'
-
-import $ from 'jquery'
-import _ from 'lodash'
-import Vue from 'vue'
-
-module.exports = (socket) => {
-  if ($('#search-input').length) {
-    $('#search-input').focus()
-
-    $('.searchresults').css('display', 'block')
-
-    var vueHeader = new Vue({
-      el: '#header-container',
-      data: {
-        searchq: '',
-        searchres: [],
-        searchsuggest: [],
-        searchload: 0,
-        searchactive: false,
-        searchmoveidx: 0,
-        searchmovekey: '',
-        searchmovearr: []
-      },
-      watch: {
-        searchq: (val, oldVal) => {
-          vueHeader.searchmoveidx = 0
-          if (val.length >= 3) {
-            vueHeader.searchactive = true
-            vueHeader.searchload++
-            socket.emit('search', { terms: val }, (data) => {
-              vueHeader.searchres = data.match
-              vueHeader.searchsuggest = data.suggest
-              vueHeader.searchmovearr = _.concat([], vueHeader.searchres, vueHeader.searchsuggest)
-              if (vueHeader.searchload > 0) { vueHeader.searchload-- }
-            })
-          } else {
-            vueHeader.searchactive = false
-            vueHeader.searchres = []
-            vueHeader.searchsuggest = []
-            vueHeader.searchmovearr = []
-            vueHeader.searchload = 0
-          }
-        },
-        searchmoveidx: (val, oldVal) => {
-          if (val > 0) {
-            vueHeader.searchmovekey = (vueHeader.searchmovearr[val - 1])
-              ? 'res.' + vueHeader.searchmovearr[val - 1].entryPath
-              : 'sug.' + vueHeader.searchmovearr[val - 1]
-          } else {
-            vueHeader.searchmovekey = ''
-          }
-        }
-      },
-      methods: {
-        useSuggestion: (sug) => {
-          vueHeader.searchq = sug
-        },
-        closeSearch: () => {
-          vueHeader.searchq = ''
-        },
-        moveSelectSearch: () => {
-          if (vueHeader.searchmoveidx < 1) { return }
-          let i = vueHeader.searchmoveidx - 1
-
-          if (vueHeader.searchmovearr[i]) {
-            window.location.assign('/' + vueHeader.searchmovearr[i].entryPath)
-          } else {
-            vueHeader.searchq = vueHeader.searchmovearr[i]
-          }
-        },
-        moveDownSearch: () => {
-          if (vueHeader.searchmoveidx < vueHeader.searchmovearr.length) {
-            vueHeader.searchmoveidx++
-          }
-        },
-        moveUpSearch: () => {
-          if (vueHeader.searchmoveidx > 0) {
-            vueHeader.searchmoveidx--
-          }
-        }
-      }
-    })
-
-    $('main').on('click', vueHeader.closeSearch)
-  }
-}

client/js/components/search.vue

+<template lang="pug">
+  .nav-item
+    p.control(v-bind:class='{ "is-loading": searchload > 0 }')
+      input.input#search-input(type='text', v-model='searchq', autofocus, @keyup.esc='closeSearch', @keyup.down='moveDownSearch', @keyup.up='moveUpSearch', @keyup.enter='moveSelectSearch', debounce='400', v-bind:placeholder='$t("search.placeholder")')
+
+    transition(name='searchresults')
+      .searchresults(v-show='searchactive', v-cloak)
+        p.searchresults-label {{ $t('search.results') }}
+        ul.searchresults-list
+          li(v-if='searchres.length === 0')
+            a: em {{ $t('search.nomatch') }}
+          li(v-for='sres in searchres', v-bind:class='{ "is-active": searchmovekey === "res." + sres.entryPath }')
+            a(v-bind:href='"/" + sres.entryPath') {{ sres.title }}
+        p.searchresults-label(v-if='searchsuggest.length > 0') {{ $t('search.didyoumean') }}
+        ul.searchresults-list(v-if='searchsuggest.length > 0')
+          li(v-for='sug in searchsuggest', v-bind:class='{ "is-active": searchmovekey === "sug." + sug }')
+            a(v-on:click='useSuggestion(sug)') {{ sug }}
+</template>
+
+<script>
+  import * as _ from 'lodash'
+  import * as $ from 'jquery'
+
+  export default {
+    data () {
+      return {
+        searchq: '',
+        searchres: [],
+        searchsuggest: [],
+        searchload: 0,
+        searchactive: false,
+        searchmoveidx: 0,
+        searchmovekey: '',
+        searchmovearr: []
+      }
+    },
+    watch: {
+      searchq: function (val, oldVal) {
+        let self = this
+        self.searchmoveidx = 0
+        if (val.length >= 3) {
+          self.searchactive = true
+          self.searchload++
+          socket.emit('search', { terms: val }, (data) => {
+            self.searchres = data.match
+            self.searchsuggest = data.suggest
+            self.searchmovearr = _.concat([], self.searchres, self.searchsuggest)
+            if (self.searchload > 0) { self.searchload-- }
+          })
+        } else {
+          self.searchactive = false
+          self.searchres = []
+          self.searchsuggest = []
+          self.searchmovearr = []
+          self.searchload = 0
+        }
+      },
+      searchmoveidx: function (val, oldVal) {
+        if (val > 0) {
+          this.searchmovekey = (this.searchmovearr[val - 1])
+            ? 'res.' + this.searchmovearr[val - 1].entryPath
+            : 'sug.' + this.searchmovearr[val - 1]
+        } else {
+          this.searchmovekey = ''
+        }
+      }
+    },
+    methods: {
+      useSuggestion: function (sug) {
+        this.searchq = sug
+      },
+      closeSearch: function() {
+        this.searchq = ''
+      },
+      moveSelectSearch: function () {
+        if (this.searchmoveidx < 1) { return }
+        let i = this.searchmoveidx - 1
+
+        if (this.searchmovearr[i]) {
+          window.location.assign('/' + this.searchmovearr[i].entryPath)
+        } else {
+          this.searchq = this.searchmovearr[i]
+        }
+      },
+      moveDownSearch: function () {
+        if (this.searchmoveidx < this.searchmovearr.length) {
+          this.searchmoveidx++
+        }
+      },
+      moveUpSearch: function () {
+        if (this.searchmoveidx > 0) {
+          this.searchmoveidx--
+        }
+      }
+    },
+    mounted: function () {
+      let self = this
+      $('main').on('click', self.closeSearch)
+    }
+  }
+</script>

client/js/modals/create.vue

+<template lang="pug">
+  .modal(v-if='isShown')
+    .modal-background
+    .modal-container
+      .modal-content
+        header.is-light-blue Create New Document
+        section
+          label.label Enter the new document path:
+          p.control.is-fullwidth(v-class='{ "is-loading": isLoading }')
+            input.input(type='text', placeholder='page-name', v-model='entrypath', autofocus)
+            span.help.is-danger(v-show='isInvalid') This document path is invalid!
+        footer
+          a.button.is-grey.is-outlined(v-on:click='hide') Discard
+          a.button.is-light-blue(v-on:click='create') Create
+</template>
+
+<script>
+  import * as _ from 'lodash'
+  import { makeSafePath } from '../helpers/pages'
+
+  export default {
+    name: 'modal-create',
+    data () {
+      return {
+        entrypath: ''
+        isInvalid: false,
+        isLoading: false,
+        isShown: false
+      }
+    },
+    methods: {
+      show: function () {
+        this.isInvalid = false
+        this.shown = true
+      },
+      hide: function () {
+        this.shown = false
+      },
+      create: function () {
+        this.isInvalid = false
+        let newDocPath = makeSafePath(this.entrypath)
+        if (_.isEmpty(newDocPath)) {
+          this.isInvalid = true
+        } else {
+          $('#txt-create-prompt').parent().addClass('is-loading')
+          window.location.assign('/create/' + newDocPath)
+        }
+      }
+    },
+    mounted () {
+      this.entrypath = currentBasePath + '/new-page'
+    }
+  }
+</script>

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

+'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

+'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

 '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
 

client/scss/components/search.scss

 .searchresults {
 	position: fixed;
-	top: 45px;
+	top: 50px;
 	left: 0;
 	right: 0;
 	margin: 0 auto;
 	width: 500px;
 	z-index: 1;
-	background-color: mc($primary, '700');
-	border-bottom: 5px solid mc($primary, '800');
-	box-shadow: 0 0 5px mc($primary, '500');
+	background-color: darken(mc('blue-grey', '900'), 2%);
+  border: 1px solid mc('blue-grey', '900');
+	box-shadow: 0 0 5px mc('blue-grey', '500');
 	color: #FFF;
+  transition: max-height 1s ease;
 
-	&.slideInDown {
-		@include prefix(animation-duration, .6s);
+	&-enter-active, &-leave-active {
+    overflow: hidden;
+  }
+  &-enter-to, &-leave {
+    max-height: 500px;
+  }
+  &-enter, &-leave-to {
+    max-height: 0px;
   }
 
 	.searchresults-label {
-		color: mc($primary, '200');
-		padding: 15px 10px 10px;
+    background-color: mc('blue-grey', '800');
+		color: mc('blue-grey', '300');
+		padding: 8px;
 		font-size: 13px;
+    letter-spacing: 1px;
     text-transform: uppercase;
-		border-bottom: 1px dotted mc($primary, '400');
+    box-shadow: 0 0 5px rgba(0,0,0,0.3);
 	}
 
 	.searchresults-list {
+    padding-bottom: 5px;
 
 		> li {
 			display: flex;
 			font-size: 14px;
-			transition: background-color .3s linear;
+			transition: background-color .2s linear;
 
 			&:nth-child(odd) {
-				background-color: mc($primary, '600');
+				background-color: mc('blue-grey', '900');
 			}
 
 			&.is-active, &:hover {
-				background-color: mc($primary, '400');
+				background-color: mc('blue-grey', '600');
 				color: #FFF;
-				border-left: 5px solid mc($primary, '200');
 			}
 
 			a {
-				color: mc($primary, '50');
+				color: mc('blue-grey', '50');
 				display: flex;
 				align-items: center;
 				height: 30px;

client/scss/layout/_header.scss

@@ -24,7 +24,7 @@
 		@include spinner(mc('indigo', '100'),0.5s,24px);
 	}
 
-	&.active {
+	&.is-active {
 		opacity: 1;
 	}
 

fuse.js

@@ -88,10 +88,11 @@ let globalTasks = Promise.mapSeries([
       if (err.code === 'ENOENT') {
         console.info(colors.white('  └── ') + colors.green('Copy MathJax dependencies to assets...'))
         return fs.ensureDirAsync('./assets/js/mathjax').then(() => {
-          return fs.copyAsync('./node_modules/mathjax', './assets/js/mathjax', { filter: (src, dest) => {
+          return fs.copyAsync('./node_modules/mathjax', './assets/js/mathjax', {
+            filter: (src, dest) => {
               let srcNormalized = src.replace(/\\/g, '/')
               let shouldCopy = false
-            console.log(srcNormalized)
+              console.info(colors.white('      ' + srcNormalized))
               _.forEach([
                 '/node_modules/mathjax',
                 '/node_modules/mathjax/jax',
@@ -118,7 +119,8 @@ let globalTasks = Promise.mapSeries([
                 shouldCopy = false
               }
               return shouldCopy
-          }})
+            }
+          })
         })
       } else {
         throw err
@@ -126,6 +128,27 @@ let globalTasks = Promise.mapSeries([
     })
   },
   /**
+   * i18n
+   */
+  () => {
+    console.info(colors.white('  └── ') + colors.green('Copying i18n client files...'))
+    return fs.ensureDirAsync('./assets/js/i18n').then(() => {
+      return fs.readJsonAsync('./server/locales/en/browser.json').then(enContent => {
+        return fs.readdirAsync('./server/locales').then(langs => {
+          return Promise.map(langs, lang => {
+            console.info(colors.white('      ' + lang + '.json'))
+            let outputPath = path.join('./assets/js/i18n', lang + '.json')
+            return fs.readJsonAsync(path.join('./server/locales', lang + '.json'), 'utf8').then((content) => {
+              return fs.outputJsonAsync(outputPath, _.defaultsDeep(content, enContent))
+            }).catch(err => { // eslint-disable-line handle-callback-err
+              return fs.outputJsonAsync(outputPath, enContent)
+            })
+          })
+        })
+      })
+    })
+  },
+  /**
    * Bundle pre-init scripts
    */
   () => {
@@ -144,6 +167,7 @@ let globalTasks = Promise.mapSeries([
    * Delete Fusebox cache
    */
   () => {
+    console.info(colors.white('  └── ') + colors.green('Clearing fuse-box cache...'))
     return fs.emptyDirAsync('./.fusebox')
   }
 ], f => { return f() })
@@ -156,7 +180,7 @@ const ALIASES = {
   'brace-ext-modelist': 'brace/ext/modelist.js',
   'simplemde': 'simplemde/dist/simplemde.min.js',
   'socket.io-client': 'socket.io-client/dist/socket.io.js',
-  'vue': 'vue/dist/vue.min.js'
+  'vue': (dev) ? 'vue/dist/vue.js' : 'vue/dist/vue.min.js'
 }
 const SHIMS = {
   _preinit: {
@@ -182,7 +206,7 @@ globalTasks.then(() => {
     plugins: [
       fsbx.EnvPlugin({ NODE_ENV: (dev) ? 'development' : 'production' }),
       fsbx.VuePlugin(),
-      [ '.scss', fsbx.SassPlugin({ outputStyle: (dev) ? 'nested' : 'compressed' }), fsbx.CSSPlugin() ],
+      ['.scss', fsbx.SassPlugin({ outputStyle: (dev) ? 'nested' : 'compressed' }), fsbx.CSSPlugin()],
       fsbx.BabelPlugin({ comments: false, presets: ['es2015'] }),
       fsbx.JSONPlugin(),
       !dev && fsbx.UglifyJSPlugin({

package.json

@@ -65,7 +65,7 @@
     "fs-extra": "^3.0.1",
     "git-wrapper2-promise": "^0.2.9",
     "highlight.js": "^9.11.0",
-    "i18next": "^8.2.0",
+    "i18next": "^8.3.0",
     "i18next-express-middleware": "^1.0.5",
     "i18next-node-fs-backend": "^1.0.0",
     "image-size": "^0.5.4",
@@ -78,7 +78,7 @@
     "markdown-it": "^8.3.1",
     "markdown-it-abbr": "^1.0.4",
     "markdown-it-anchor": "^4.0.0",
-    "markdown-it-attrs": "^0.8.0",
+    "markdown-it-attrs": "^0.9.0",
     "markdown-it-emoji": "^1.3.0",
     "markdown-it-expand-tabs": "^1.0.12",
     "markdown-it-external-links": "0.0.6",
@@ -126,11 +126,13 @@
   },
   "devDependencies": {
     "@glimpse/glimpse": "^0.20.9",
+    "@panter/vue-i18next": "^0.4.1",
     "babel-cli": "latest",
     "babel-jest": "latest",
     "babel-preset-es2015": "latest",
     "brace": "^0.10.0",
     "colors": "^1.1.2",
+    "consolidate": "^0.14.5",
     "eslint": "latest",
     "eslint-config-standard": "latest",
     "eslint-plugin-import": "latest",
@@ -138,6 +140,7 @@
     "eslint-plugin-promise": "latest",
     "eslint-plugin-standard": "latest",
     "fuse-box": "^2.0.0",
+    "i18next-xhr-backend": "^1.4.1",
     "jest": "latest",
     "jquery": "^3.2.1",
     "jquery-contextmenu": "^2.4.5",
@@ -155,7 +158,8 @@
     "vee-validate": "^2.0.0-rc.3",
     "vue": "^2.3.3",
     "vue-template-compiler": "^2.3.3",
-    "vue-template-es2015-compiler": "^1.5.2"
+    "vue-template-es2015-compiler": "^1.5.2",
+    "vuex": "^2.3.1"
   },
   "jest": {
     "collectCoverage": false,

server/controllers/admin.js

@@ -255,4 +255,11 @@ router.post('/settings/install', (req, res) => {
   res.status(400).send('Sorry, Upgrade/Re-Install via the web UI is not yet ready. You must use the npm upgrade method in the meantime.').end()
 })
 
+router.get('/theme', (req, res) => {
+  if (!res.locals.rights.manage) {
+    return res.render('error-forbidden')
+  }
+  res.render('pages/admin/theme', { adminTab: 'theme' })
+})
+
 module.exports = router

server/locales/en/browser.json

+{
+  "profile": {
+    "displayname": "Display Name",
+    "displaynameexample": "John Smith",
+    "email": "Email",
+    "password": "Password",
+    "passwordverify": "Verify Password",
+    "savechanges": "Save Changes"
+  },
+  "search": {
+    "placeholder": "Search...",
+    "results": "Search Results",
+    "nomatch": "No results matching your query",
+    "didyoumean": "Did you mean...?"
+  }
+}

server/locales/en/common.json

@@ -9,12 +9,6 @@
     "home": "Home",
     "top": "Return to top"
   },
-  "search": {
-    "placeholder": "Search...",
-    "results": "Search Results",
-    "nomatch": "No results matching your query",
-    "didyoumean": "Did you mean...?"
-  },
   "sidebar": {
     "nav": "NAV",
     "navigation": "Navigation",
@@ -24,9 +18,11 @@
   "nav": {
     "home": "Home",
     "account": "Account",
+    "settings": "Settings",
     "myprofile": "My Profile",
     "stats": "Stats",
     "syssettings": "System Settings",
+    "theme": "Color Theme",
     "users": "Users",
     "logout": "Logout",
     "create": "Create",

server/locales/fr/common.json

@@ -24,9 +24,11 @@
   "nav": {
     "home": "Accueil",
     "account": "Compte",
+    "settings": "Paramètres",
     "myprofile": "Mon Profil",
     "stats": "Statistiques",
     "syssettings": "Paramètres système",
+    "theme": "Thème de couleur",
     "users": "Utilisateurs",
     "logout": "Se Déconnecter",
     "create": "Créer",

server/views/common/header.pug

@@ -9,26 +9,11 @@
             = appconfig.title
     .nav-center
       block rootNavCenter
-        .nav-item
-          p.control(v-bind:class='{ "is-loading": searchload > 0 }')
-            input.input#search-input(type='text', v-model='searchq', @keyup.esc='closeSearch', @keyup.down='moveDownSearch', @keyup.up='moveUpSearch', @keyup.enter='moveSelectSearch', debounce='400', placeholder=t('search.placeholder'))
+        search
     span.nav-toggle
       span
       span
       span
     .nav-right
       block rootNavRight
-        i.nav-item#notifload
-
-  transition(name='searchresults-anim', enter-active-class='slideInDown', leave-active-class='fadeOutUp')
-    .searchresults.animated(v-show='searchactive', v-cloak, style={'display':'none'})
-      p.searchresults-label= t('search.results')
-      ul.searchresults-list
-        li(v-if='searchres.length === 0')
-          a: em= t('search.nomatch')
-        li(v-for='sres in searchres', v-bind:class='{ "is-active": searchmovekey === "res." + sres.entryPath }')
-          a(v-bind:href='"/" + sres.entryPath') {{ sres.title }}
-      p.searchresults-label(v-if='searchsuggest.length > 0')= t('search.didyoumean')
-      ul.searchresults-list(v-if='searchsuggest.length > 0')
-        li(v-for='sug in searchsuggest', v-bind:class='{ "is-active": searchmovekey === "sug." + sug }')
-          a(v-on:click='useSuggestion(sug)') {{ sug }}
+        loading-spinner

server/views/layout.pug

@@ -9,7 +9,7 @@ html
     meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png')
     title= appconfig.title
 
-    // Favicon
+    //- Favicon
     each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
       link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href='/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
     link(rel='icon', type='image/png', sizes='192x192', href='/favicons/android-icon-192x192.png')
@@ -17,7 +17,10 @@ html
       link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png')
     link(rel='manifest', href='/manifest.json')
 
-    // JS / CSS
+    //- Site Lang
+    script var siteLang = '!{appconfig.lang}';
+
+    //- JS / CSS
     script(type='text/javascript', src='/js/libs.min.js')
     script(type='text/javascript', src='/js/app.min.js')
 
@@ -26,7 +29,7 @@ html
   body
     #root.has-stickynav
       include ./common/header.pug
-      include ./common/alerts.pug
+      //-include ./common/alerts.pug
       main
         block content
       include ./common/footer.pug

server/views/pages/admin/_layout.pug

@@ -4,7 +4,7 @@ block rootNavCenter
   h2.nav-item= t('nav.account')
 
 block rootNavRight
-  i.nav-item#notifload
+  loading-spinner
   .nav-item
     a.button.btn-edit-discard(href='/')
       i.icon-home
@@ -49,6 +49,10 @@ block content
                     i.icon-cog
                     span= t('nav.syssettings')
                 li
+                  a(href='/admin/theme')
+                    i.icon-drop
+                    span= t('nav.theme')
+              li
                 a(href='/logout')
                   i.icon-delete2
                   span= t('nav.logout')

server/views/pages/admin/profile.pug

 extends ./_layout.pug
 
 block adminContent
-  #page-type-admin-profile
   .hero
     h1.title#title= t('nav.myprofile')
     h2.subtitle= t('admin:profile.subtitle')
   .form-sections
     .columns.is-gapless
       .column.is-two-thirds
+        admin-profile(inline-template, email=user.email, name=user.name, provider=user.provider)
+          div
             section
               label.label= t('admin:profile.email')
               p.control.is-fullwidth
@@ -48,6 +49,3 @@ block adminContent
           p.control= moment(user.createdAt).format('LL')
           label.label= t('admin:profile.lastprofileupdate')
           p.control= moment(user.updatedAt).format('LL')
-
-  script(type='text/javascript').
-    var usrDataName = "!{user.name}";

server/views/pages/admin/settings.pug

 extends ./_layout.pug
 
 block adminContent
-  #page-type-admin-settings
   .hero
     h1.title#title= t('nav.syssettings')
     h2.subtitle= t('admin:settings.subtitle')
+  admin-settings(inline-template)
     .form-sections
       section
         img(src='/images/logo.png', style={width:'200px', float:'right'})

server/views/pages/admin/theme.pug

+extends ./_layout.pug
+
+block adminContent
+  #page-type-admin-settings
+    .hero
+      h1.title#title= t('nav.theme')
+      h2.subtitle= t('admin:theme.subtitle')
+    .form-sections
+      section
+        label.label= t('admin:theme.primarycolor')
+        color-picker

server/views/pages/view.pug

@@ -57,8 +57,8 @@ block content
               if !isGuest
                 li
                   a(href='/admin')
-                    i.icon-head
-                    span= t('nav.account')
+                    i.icon-cog
+                    span= t('nav.settings')
               else
                 li
                   a(href='/login')