feat: GraphQL translations + login form

2017-09-24 23:22:33 -04:00
parent 16a47e46ce
commit 32b7947704
32 changed files with 232 additions and 113 deletions
--- a/client/js/app.js
+++ b/client/js/app.js
@@ -6,10 +6,14 @@
 import Vue from 'vue'
 import VueResource from 'vue-resource'
 import VueClipboards from 'vue-clipboards'
+import { ApolloClient, createBatchingNetworkInterface } from 'apollo-client'
 import store from './store'
-import i18next from 'i18next'
-import i18nextXHR from 'i18next-xhr-backend'
-import VueI18Next from '@panter/vue-i18next'
+
+// ====================================
+// Load Modules
+// ====================================
+
+import localization from './modules/localization'

 // ====================================
 // Load Helpers
@@ -29,6 +33,7 @@ import editorFileComponent from './components/editor-file.vue'
 import editorVideoComponent from './components/editor-video.vue'
 import historyComponent from './components/history.vue'
 import loadingSpinnerComponent from './components/loading-spinner.vue'
+import loginComponent from './components/login.vue'
 import modalCreatePageComponent from './components/modal-create-page.vue'
 import modalCreateUserComponent from './components/modal-create-user.vue'
 import modalDeleteUserComponent from './components/modal-delete-user.vue'
@@ -49,13 +54,24 @@ import contentViewComponent from './pages/content-view.component.js'
 import editorComponent from './components/editor.component.js'
 import sourceViewComponent from './pages/source-view.component.js'

+// ====================================
+// Initialize Apollo Client (GraphQL)
+// ====================================
+
+window.apollo = new ApolloClient({
+  networkInterface: createBatchingNetworkInterface({
+    uri: window.location.protocol + '//' + window.location.host + siteConfig.path + '/graphql'
+  }),
+  connectToDevTools: true
+})
+
 // ====================================
 // Initialize Vue Modules
 // ====================================

 Vue.use(VueResource)
 Vue.use(VueClipboards)
-Vue.use(VueI18Next)
+Vue.use(localization.VueI18Next)
 Vue.use(helpers)

 // ====================================
@@ -76,6 +92,7 @@ Vue.component('editorFile', editorFileComponent)
 Vue.component('editorVideo', editorVideoComponent)
 Vue.component('history', historyComponent)
 Vue.component('loadingSpinner', loadingSpinnerComponent)
+Vue.component('login', loginComponent)
 Vue.component('modalCreatePage', modalCreatePageComponent)
 Vue.component('modalCreateUser', modalCreateUserComponent)
 Vue.component('modalDeleteUser', modalDeleteUserComponent)
@@ -89,20 +106,6 @@ Vue.component('sourceView', sourceViewComponent)
 Vue.component('toggle', toggleComponent)
 Vue.component('tree', treeComponent)

-// ====================================
-// Load Localization strings
-// ====================================
-
-i18next
-  .use(i18nextXHR)
-  .init({
-    backend: {
-      loadPath: siteConfig.path + '/js/i18n/{{lng}}.json'
-    },
-    lng: siteConfig.lang,
-    fallbackLng: siteConfig.lang
-  })
-
 document.addEventListener('DOMContentLoaded', ev => {
  // ====================================
  // Notifications
@@ -116,13 +119,13 @@ document.addEventListener('DOMContentLoaded', ev => {
  // Bootstrap Vue
  // ====================================

-  const i18n = new VueI18Next(i18next)
+  const i18n = localization.init()
  window.wiki = new Vue({
    mixins: [helpers],
    components: {},
    store,
    i18n,
-    el: '#root',
+    el: '#app',
    methods: {
      changeTheme(opts) {
        this.$el.className = `has-stickynav is-primary-${opts.primary} is-alternate-${opts.alt}`
--- a/client/js/components/login.vue
+++ b/client/js/components/login.vue
@@ -0,0 +1,50 @@
+<template lang="pug">
+  .login(:class='{ "is-error": error }')
+    .login-container(:class='{ "is-expanded": strategies.length > 1 }')
+      .login-error(v-if='error')
+        strong
+          i.icon-warning-outline
+          | {{ error.title }}
+        span {{ error.message }}
+      .login-providers(v-show='strategies.length > 1')
+        button.is-active(:title='$t("auth:providers.local")')
+          i.nc-icon-outline.ui-1_database
+          span {{ $t('auth:providers.local') }}
+        button(v-for='strategy in strategies', @onclick='selectProvider(strategy.key, strategy.useForm)', :title='strategy.title')
+          //-!= strategy.icon
+          span {{ strategy.title }}
+      .login-frame
+        h1 {{ siteTitle }}
+        h2 {{ $t('auth:loginrequired') }}
+        form(method='post', action='/login')
+          input#login-user(type='text', name='email', :placeholder='$t("auth:fields.emailuser")')
+          input#login-pass(type='password', name='password', :placeholder='$t("auth:fields.password")')
+          button.button.is-light-blue.is-fullwidth(type='submit')
+            span {{ $t('auth:actions.login') }}
+    .login-copyright
+      span {{ $t('footer.poweredby') }}
+      a(href='https://wiki.js.org', rel='external', title='Wiki.js') Wiki.js
+</template>
+
+<script>
+export default {
+  name: 'login',
+  data() {
+    return {
+      error: false,
+      strategies: []
+    }
+  },
+  computed: {
+    siteTitle() {
+      return siteConfig.title
+    }
+  }
+  methods: {
+    selectProvider(key, useForm) {
+
+    }
+  }
+}
+</script>
+
--- a/client/js/modules/localization.js
+++ b/client/js/modules/localization.js
@@ -0,0 +1,57 @@
+import i18next from 'i18next'
+import i18nextXHR from 'i18next-xhr-backend'
+import i18nextCache from 'i18next-localstorage-cache'
+import gql from 'graphql-tag'
+import VueI18Next from '@panter/vue-i18next'
+import loSet from 'lodash/set'
+
+/* global siteConfig */
+
+module.exports = {
+  VueI18Next,
+  init() {
+    i18next
+      .use(i18nextXHR)
+      .use(i18nextCache)
+      .init({
+        backend: {
+          loadPath: '{{lng}}/{{ns}}',
+          parse: (data) => data,
+          ajax: (url, opts, cb, data) => {
+            let langParams = url.split('/')
+            console.info(langParams)
+            window.apollo.query({
+              query: gql`
+                {
+                  translations(locale:"${langParams[0]}", namespace:"${langParams[1]}") {
+                    key
+                    value
+                  }
+                }
+              `
+            }).then(resp => {
+              let ns = {}
+              if (resp.data.translations.length > 0) {
+                resp.data.translations.forEach(entry => {
+                  loSet(ns, entry.key, entry.value)
+                })
+              }
+              return cb(ns, {status: '200'})
+            }).catch(err => {
+              console.error(err)
+              return cb(null, {status: '404'})
+            })
+          }
+        },
+        cache: {
+          enabled: true,
+          expiration: 60 * 60 * 1000
+        },
+        defaultNS: 'common',
+        lng: siteConfig.lang,
+        fallbackLng: siteConfig.lang,
+        ns: ['common', 'admin', 'auth']
+      })
+    return new VueI18Next(i18next)
+  }
+}
--- a/client/scss/base/base.scss
+++ b/client/scss/base/base.scss
@@ -11,10 +11,15 @@ [v-cloak], .is-hidden {
  display: none;
 }

-#root {
+#app {
  padding-bottom: 67px;
  position: relative;
  min-height: 100%;
+
+  &.is-fullscreen {
+    width: 100vw;
+    height: 100vh;
+  }
 }

 body {
--- a/client/scss/pages/_login.scss
+++ b/client/scss/pages/_login.scss
@@ -81,7 +81,6 @@ .login {

    border-right: none;
    border-radius: 6px 0 0 6px;
-    background-color: mc('grey', '900');
    z-index: 1;
    overflow: hidden;

@@ -94,8 +93,8 @@ .login {
      padding: 5px 15px;
      border: none;
      color: #FFF;
-      background-color: mc('light-blue', '800');
-      border-top: 1px solid mc('light-blue', '900');
+      background: linear-gradient(to right, rgba(mc('light-blue', '800'), .7), rgba(mc('light-blue', '800'), 1));
+      border-top: 1px solid rgba(mc('light-blue', '900'), .5);
      font-family: $core-font-standard;
      font-weight: 600;
      text-align: left;
@@ -110,7 +109,7 @@ .login {
      }

      &:hover {
-        background-color: mc('light-blue', '600');
+        background-color: mc('light-blue', '900');
      }

      &:first-child {
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
    "connect-redis": "3.3.0",
    "cookie-parser": "1.4.3",
    "diff2html": "2.3.0",
+    "dotize": "^0.2.0",
    "execa": "0.8.0",
    "express": "4.15.4",
    "express-brute": "1.0.1",
@@ -68,6 +69,7 @@
    "highlight.js": "9.12.0",
    "i18next": "9.0.0",
    "i18next-express-middleware": "1.0.5",
+    "i18next-localstorage-cache": "^1.1.1",
    "i18next-node-fs-backend": "1.0.0",
    "image-size": "0.6.1",
    "ioredis": "3.1.4",
@@ -105,7 +107,6 @@
    "passport-local": "1.0.0",
    "passport-slack": "0.0.7",
    "passport-windowslive": "1.0.2",
-    "passport.socketio": "3.7.0",
    "pg": "7.3.0",
    "pg-hstore": "2.3.2",
    "pg-promise": "6.5.2",
@@ -120,7 +121,6 @@
    "sequelize": "4.8.2",
    "serve-favicon": "2.4.3",
    "simplemde": "1.11.2",
-    "socket.io": "2.0.3",
    "stopword": "0.1.7",
    "stream-to-promise": "2.2.0",
    "tar": "4.0.1",
@@ -133,6 +133,7 @@
  "devDependencies": {
    "@glimpse/glimpse": "0.22.15",
    "@panter/vue-i18next": "0.5.1",
+    "apollo-client": "^1.9.3",
    "babel-cli": "6.26.0",
    "babel-jest": "21.0.2",
    "babel-plugin-transform-object-assign": "6.22.0",
@@ -147,6 +148,7 @@
    "eslint-plugin-promise": "3.5.0",
    "eslint-plugin-standard": "3.0.1",
    "fuse-box": "^2.2.31",
+    "graphql-tag": "^2.4.2",
    "i18next-xhr-backend": "1.4.2",
    "jest": "21.0.2",
    "jquery": "3.2.1",
@@ -166,6 +168,7 @@
    "vue": "2.4.2",
    "vue-clipboards": "1.1.0",
    "vue-lodash": "1.0.3",
+    "vue-material": "^0.7.5",
    "vue-resource": "1.3.4",
    "vue-template-compiler": "2.4.2",
    "vue-template-es2015-compiler": "1.5.3",
--- a/server/authentication/azure.js
+++ b/server/authentication/azure.js
@@ -11,6 +11,7 @@ const AzureAdOAuth2Strategy = require('passport-azure-ad-oauth2').Strategy
 module.exports = {
  key: 'azure',
  title: 'Azure Active Directory',
+  useForm: false,
  props: ['clientId', 'clientSecret', 'callbackURL', 'resource', 'tenant'],
  init (passport, conf) {
    const jwt = require('jsonwebtoken')
--- a/server/authentication/facebook.js
+++ b/server/authentication/facebook.js
@@ -11,6 +11,7 @@ const FacebookStrategy = require('passport-facebook').Strategy
 module.exports = {
  key: 'facebook',
  title: 'Facebook',
+  useForm: false,
  props: ['clientId', 'clientSecret', 'callbackURL'],
  init (passport, conf) {
    passport.use('facebook',
--- a/server/authentication/github.js
+++ b/server/authentication/github.js
@@ -11,6 +11,7 @@ const GitHubStrategy = require('passport-github2').Strategy
 module.exports = {
  key: 'github',
  title: 'GitHub',
+  useForm: false,
  props: ['clientId', 'clientSecret', 'callbackURL'],
  init (passport, conf) {
    passport.use('github',
--- a/server/authentication/google.js
+++ b/server/authentication/google.js
@@ -11,6 +11,7 @@ const GoogleStrategy = require('passport-google-oauth20').Strategy
 module.exports = {
  key: 'google',
  title: 'Google ID',
+  useForm: false,
  props: ['clientId', 'clientSecret', 'callbackURL'],
  init (passport, conf) {
    passport.use('google',
--- a/server/authentication/ldap.js
+++ b/server/authentication/ldap.js
@@ -12,6 +12,7 @@ const fs = require('fs')
 module.exports = {
  key: 'ldap',
  title: 'LDAP / Active Directory',
+  useForm: true,
  props: ['url', 'bindDn', 'bindCredentials', 'searchBase', 'searchFilter', 'tlsEnabled', 'tlsCertPath'],
  init (passport, conf) {
    passport.use('ldapauth',
--- a/server/authentication/local.js
+++ b/server/authentication/local.js
@@ -11,6 +11,7 @@ const LocalStrategy = require('passport-local').Strategy
 module.exports = {
  key: 'local',
  title: 'Local',
+  useForm: true,
  props: [],
  init (passport, conf) {
    passport.use('local',
--- a/server/authentication/microsoft.js
+++ b/server/authentication/microsoft.js
@@ -11,6 +11,7 @@ const WindowsLiveStrategy = require('passport-windowslive').Strategy
 module.exports = {
  key: 'microsoft',
  title: 'Microsoft Account',
+  useForm: false,
  props: ['clientId', 'clientSecret', 'callbackURL'],
  init (passport, conf) {
    passport.use('windowslive',
--- a/server/authentication/slack.js
+++ b/server/authentication/slack.js
@@ -11,6 +11,7 @@ const SlackStrategy = require('passport-slack').Strategy
 module.exports = {
  key: 'slack',
  title: 'Slack',
+  useForm: false,
  props: ['clientId', 'clientSecret', 'callbackURL'],
  init (passport, conf) {
    passport.use('slack',
--- a/server/master.js
+++ b/server/master.js
@@ -20,7 +20,7 @@ module.exports = Promise.join(
  wiki.disk = require('./modules/disk').init()
  wiki.docs = require('./modules/documents').init()
  wiki.git = require('./modules/git').init(false)
-  wiki.lang = require('i18next')
+  wiki.lang = require('./modules/localization').init()
  wiki.mark = require('./modules/markdown')
  wiki.search = require('./modules/search').init()
  wiki.upl = require('./modules/uploads').init()
@@ -37,13 +37,10 @@ module.exports = Promise.join(
  const favicon = require('serve-favicon')
  const flash = require('connect-flash')
  const http = require('http')
-  const i18nBackend = require('i18next-node-fs-backend')
  const path = require('path')
-  const passportSocketIo = require('passport.socketio')
  const session = require('express-session')
  const SessionRedisStore = require('connect-redis')(session)
  const graceful = require('node-graceful')
-  const socketio = require('socket.io')
  const graphqlApollo = require('apollo-server-express')
  const graphqlSchema = require('./modules/graphql')

@@ -100,23 +97,6 @@ module.exports = Promise.join(

  app.use(mw.seo)

-  // ----------------------------------------
-  // Localization Engine
-  // ----------------------------------------
-
-  wiki.lang.use(i18nBackend).init({
-    load: 'languageOnly',
-    ns: ['common', 'admin', 'auth', 'errors', 'git'],
-    defaultNS: 'common',
-    saveMissing: false,
-    preload: [wiki.config.site.lang],
-    lng: wiki.config.site.lang,
-    fallbackLng: 'en',
-    backend: {
-      loadPath: path.join(wiki.SERVERPATH, 'locales/{{lng}}/{{ns}}.json')
-    }
-  })
-
  // ----------------------------------------
  // View Engine Setup
  // ----------------------------------------
@@ -133,7 +113,7 @@ module.exports = Promise.join(

  app.locals.basedir = wiki.ROOTPATH
  app.locals._ = require('lodash')
-  app.locals.t = wiki.lang.t.bind(wiki.lang)
+  app.locals.t = wiki.lang.engine.t.bind(wiki.lang)
  app.locals.moment = require('moment')
  app.locals.moment.locale(wiki.config.site.lang)
  app.locals.config = wiki.config
@@ -173,11 +153,10 @@ module.exports = Promise.join(
  // Start HTTP server
  // ----------------------------------------

-  wiki.logger.info(`HTTP/WS Server on port: ${wiki.config.port}`)
+  wiki.logger.info(`HTTP Server on port: ${wiki.config.port}`)

  app.set('port', wiki.config.port)
-  var server = http.createServer(app)
-  var io = socketio(server)
+  let server = http.createServer(app)

  server.listen(wiki.config.port)
  server.on('error', (error) => {
@@ -199,35 +178,14 @@ module.exports = Promise.join(
  })

  server.on('listening', () => {
-    wiki.logger.info('HTTP/WS Server: RUNNING')
+    wiki.logger.info('HTTP Server: RUNNING')
  })

-  // ----------------------------------------
-  // WebSocket
-  // ----------------------------------------
-
-  io.use(passportSocketIo.authorize({
-    key: 'wikijs.sid',
-    store: sessionStore,
-    secret: wiki.config.site.sessionSecret,
-    cookieParser,
-    success: (data, accept) => {
-      accept()
-    },
-    fail: (data, message, error, accept) => {
-      accept()
-    }
-  }))
-
-  io.on('connection', ctrl.ws)
-
  // ----------------------------------------
  // Graceful shutdown
  // ----------------------------------------

  graceful.on('exit', () => {
-    // wiki.logger.info('- SHUTTING DOWN - Terminating Background Agent...')
-    // bgAgent.kill()
    wiki.logger.info('- SHUTTING DOWN - Performing git sync...')
    return global.git.resync().then(() => {
      wiki.logger.info('- SHUTTING DOWN - Git sync successful. Now safe to exit.')
--- a/server/modules/graphql.js
+++ b/server/modules/graphql.js
@@ -17,6 +17,7 @@ const FolderResolvers = require('../schemas/resolvers-folder')
 const GroupResolvers = require('../schemas/resolvers-group')
 const SettingResolvers = require('../schemas/resolvers-setting')
 const TagResolvers = require('../schemas/resolvers-tag')
+const TranslationResolvers = require('../schemas/resolvers-translation')
 const UserResolvers = require('../schemas/resolvers-user')

 const resolvers = _.merge(
@@ -27,6 +28,7 @@ const resolvers = _.merge(
  GroupResolvers,
  SettingResolvers,
  TagResolvers,
+  TranslationResolvers,
  UserResolvers,
  DateScalar
 )
--- a/server/modules/localization.js
+++ b/server/modules/localization.js
@@ -0,0 +1,52 @@
+const _ = require('lodash')
+const dotize = require('dotize')
+const i18nBackend = require('i18next-node-fs-backend')
+const i18next = require('i18next')
+const path = require('path')
+const Promise = require('bluebird')
+
+/* global wiki */
+
+module.exports = {
+  engine: null,
+  namespaces: ['common', 'admin', 'auth', 'errors', 'git'],
+  init() {
+    this.engine = i18next
+    this.engine.use(i18nBackend).init({
+      load: 'languageOnly',
+      ns: this.namespaces,
+      defaultNS: 'common',
+      saveMissing: false,
+      preload: [wiki.config.site.lang],
+      lng: wiki.config.site.lang,
+      fallbackLng: 'en',
+      backend: {
+        loadPath: path.join(wiki.SERVERPATH, 'locales/{{lng}}/{{ns}}.json')
+      }
+    })
+    return this
+  },
+  getByNamespace(locale, namespace) {
+    if (this.engine.hasResourceBundle(locale, namespace)) {
+      let data = this.engine.getResourceBundle(locale, namespace)
+      return _.map(dotize.convert(data), (value, key) => {
+        return {
+          key,
+          value
+        }
+      })
+    } else {
+      throw new Error('Invalid locale or namespace')
+    }
+  },
+  loadLocale(locale) {
+    return Promise.fromCallback(cb => {
+      return this.engine.loadLanguages(locale, cb)
+    })
+  },
+  setCurrentLocale(locale) {
+    return Promise.fromCallback(cb => {
+      return this.engine.changeLanguage(locale, cb)
+    })
+  }
+}
--- a/server/schemas/resolvers-comment.js
+++ b/server/schemas/resolvers-comment.js
@@ -1,4 +1,3 @@
-'use strict'

 /* global wiki */

--- a/server/schemas/resolvers-document.js
+++ b/server/schemas/resolvers-document.js
@@ -1,4 +1,3 @@
-'use strict'

 /* global wiki */

--- a/server/schemas/resolvers-file.js
+++ b/server/schemas/resolvers-file.js
@@ -1,4 +1,3 @@
-'use strict'

 /* global wiki */

--- a/server/schemas/resolvers-folder.js
+++ b/server/schemas/resolvers-folder.js
@@ -1,4 +1,3 @@
-'use strict'

 /* global wiki */

--- a/server/schemas/resolvers-group.js
+++ b/server/schemas/resolvers-group.js
@@ -1,4 +1,3 @@
-'use strict'

 /* global wiki */

--- a/server/schemas/resolvers-right.js
+++ b/server/schemas/resolvers-right.js
@@ -1,4 +1,3 @@
-'use strict'

 /* global wiki */

--- a/server/schemas/resolvers-setting.js
+++ b/server/schemas/resolvers-setting.js
@@ -1,4 +1,3 @@
-'use strict'

 /* global wiki */

--- a/server/schemas/resolvers-tag.js
+++ b/server/schemas/resolvers-tag.js
@@ -1,4 +1,3 @@
-'use strict'

 /* global wiki */

--- a/server/schemas/resolvers-translation.js
+++ b/server/schemas/resolvers-translation.js
@@ -0,0 +1,12 @@
+
+/* global wiki */
+
+module.exports = {
+  Query: {
+    translations (obj, args, context, info) {
+      return wiki.lang.getByNamespace(args.locale, args.namespace)
+    }
+  },
+  Mutation: {},
+  Translation: {}
+}
--- a/server/schemas/resolvers-user.js
+++ b/server/schemas/resolvers-user.js
@@ -1,4 +1,3 @@
-'use strict'

 /* global wiki */

--- a/server/schemas/scalar-date.js
+++ b/server/schemas/scalar-date.js
@@ -1,4 +1,3 @@
-'use strict'

 const gql = require('graphql')

--- a/server/schemas/types.graphql
+++ b/server/schemas/types.graphql
@@ -114,6 +114,11 @@ type Tag implements Base {
  documents: [Document]
 }

+type Translation {
+  key: String!
+  value: String!
+}
+
 # A User
 type User implements Base {
  id: Int!
@@ -142,6 +147,7 @@ type Query {
  rights(id: Int): [Right]
  settings(key: String): [Setting]
  tags(key: String): [Tag]
+  translations(locale: String!, namespace: String!): [Translation]
  users(id: Int, email: String, provider: String, providerId: String, role: UserRole): [User]
 }

--- a/server/views/auth/login.pug
+++ b/server/views/auth/login.pug
@@ -2,31 +2,5 @@ extends ../master.pug

 block body
  body
-    .login#root(class={ "is-error": flash.length > 0 })
-      .login-container(class={ "is-expanded": hasMultipleStrategies })
-        if flash.length > 0
-          .login-error
-            strong
-              i.icon-warning-outline
-              = flash[0].title
-            span= flash[0].message
-        if hasMultipleStrategies
-          .login-providers
-            button.is-active(title=t('auth:providers.local'))
-              i.nc-icon-outline.ui-1_database
-              span= t('auth:providers.local')
-            each strategy in authStrategies
-              button(onclick='window.location.assign("/login/' + strategy.key + '")', title=strategy.title)
-                != strategy.icon
-                span= strategy.title
-        .login-frame
-          h1= config.site.title
-          h2= t('auth:loginrequired')
-          form(method='post', action='/login')
-            input#login-user(type='text', name='email', placeholder=t('auth:fields.emailuser'))
-            input#login-pass(type='password', name='password', placeholder=t('auth:fields.password'))
-            button.button.is-light-blue.is-fullwidth(type='submit')
-              span= t('auth:actions.login')
-      .login-copyright
-        = t('footer.poweredby')
-        a(href='https://wiki.js.org', rel='external', title='Wiki.js') Wiki.js
+    #app.is-fullscreen
+      login
--- a/server/views/layout.pug
+++ b/server/views/layout.pug
@@ -2,7 +2,7 @@ extends ./master.pug

 block body
  body
-    #root.has-stickynav(class=['is-primary-' + appconfig.theme.primary, 'is-alternate-' + appconfig.theme.alt])
+    #app.has-stickynav(class=['is-primary-' + appconfig.theme.primary, 'is-alternate-' + appconfig.theme.alt])
      include ./common/header.pug
      alert
      main
--- a/yarn.lock
+++ b/yarn.lock