misc: deps cleanup + form validation fixes

client/client-app.js

@@ -3,7 +3,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import VueClipboards from 'vue-clipboards'
-import VeeValidate from 'vee-validate'
 import { ApolloClient } from 'apollo-client'
 import { BatchHttpLink } from 'apollo-link-batch-http'
 import { ApolloLink, split } from 'apollo-link'
@@ -18,7 +17,6 @@ import Vuescroll from 'vuescroll/dist/vuescroll-native'
 import Hammer from 'hammerjs'
 import moment from 'moment'
 import VueMoment from 'vue-moment'
-import VueTour from 'vue-tour'
 import store from './store'
 import Cookies from 'js-cookie'
 
@@ -57,15 +55,17 @@ const graphQLWSEndpoint = ((window.location.protocol === 'https:') ? 'wss:' : 'w
 const graphQLLink = ApolloLink.from([
   new ErrorLink(({ graphQLErrors, networkError }) => {
     if (graphQLErrors) {
-      graphQLErrors.map(({ message, locations, path }) =>
-        console.error(
-          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
-        )
-      )
+      let isAuthError = false
+      graphQLErrors.map(({ message, locations, path }) => {
+        if (message === `Forbidden`) {
+          isAuthError = true
+        }
+        console.error(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`)
+      })
       store.commit('showNotification', {
         style: 'red',
-        message: `An unexpected error occured.`,
-        icon: 'warning'
+        message: isAuthError ? `You are not authorized to access this resource.` : `An unexpected error occured.`,
+        icon: 'alert'
       })
     }
     if (networkError) {
@@ -73,7 +73,7 @@ const graphQLLink = ApolloLink.from([
       store.commit('showNotification', {
         style: 'red',
         message: `Network Error: ${networkError.message}`,
-        icon: 'error'
+        icon: 'alert'
       })
     }
   }),
@@ -138,11 +138,9 @@ Vue.use(VueApollo)
 Vue.use(VueClipboards)
 Vue.use(localization.VueI18Next)
 Vue.use(helpers)
-Vue.use(VeeValidate, { mode: 'eager' })
 Vue.use(Vuetify)
 Vue.use(VueMoment, { moment })
 Vue.use(Vuescroll)
-Vue.use(VueTour)
 
 Vue.prototype.Velocity = Velocity
 

client/client-setup.js

 /* eslint-disable import/first */
 import Vue from 'vue'
 import Vuetify from 'vuetify/lib'
-import VeeValidate from 'vee-validate'
 import boot from './modules/boot'
 /* eslint-enable import/first */
 
@@ -9,7 +8,6 @@ window.WIKI = null
 window.boot = boot
 
 Vue.use(Vuetify)
-Vue.use(VeeValidate, { events: '' })
 
 Vue.component('setup', () => import(/* webpackMode: "eager" */ './components/setup.vue'))
 

client/components/admin.vue

@@ -103,10 +103,12 @@
 
               v-list-item(to='/dev-flags')
                 v-list-item-title {{ $t('admin:dev.flags.title') }}
-              v-list-item(to='/dev-graphiql')
+              v-list-item(href='/graphql')
                 v-list-item-title {{ $t('admin:dev.graphiql.title') }}
-              v-list-item(to='/dev-voyager')
-                v-list-item-title {{ $t('admin:dev.voyager.title') }}
+              //- v-list-item(to='/dev-graphiql')
+              //-   v-list-item-title {{ $t('admin:dev.graphiql.title') }}
+              //- v-list-item(to='/dev-voyager')
+              //-   v-list-item-title {{ $t('admin:dev.voyager.title') }}
             v-divider.my-2
           v-list-item(to='/contribute')
             v-list-item-avatar(size='24'): v-icon mdi-heart-outline
@@ -163,8 +165,6 @@ const router = new VueRouter({
     { path: '/utilities', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-utilities.vue') },
     { path: '/webhooks', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-webhooks.vue') },
     { path: '/dev-flags', component: () => import(/* webpackChunkName: "admin-dev" */ './admin/admin-dev-flags.vue') },
-    { path: '/dev-graphiql', component: () => import(/* webpackChunkName: "admin-dev" */ './admin/admin-dev-graphiql.vue') },
-    { path: '/dev-voyager', component: () => import(/* webpackChunkName: "admin-dev" */ './admin/admin-dev-voyager.vue') },
     { path: '/contribute', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-contribute.vue') }
   ]
 })

client/components/admin/admin-dev-graphiql.vue

-<template lang='pug'>
-  v-container(fluid, grid-list-lg)
-    v-layout(row, wrap)
-      v-flex(xs12)
-        .admin-header
-          img(src='/svg/icon-console.svg', alt='Developer Tools', style='width: 80px;')
-          .admin-header-title
-            .headline.primary--text Developer Tools
-            .subtitle-1.grey--text GraphiQL
-
-        v-card.mt-3.white.grey--text.text--darken-3
-          #graphiql
-
-</template>
-
-<script>
-import _ from 'lodash'
-import React from 'react'
-import ReactDOM from 'react-dom'
-import GraphiQL from 'graphiql'
-import 'graphiql/graphiql.css'
-
-const fetcher = (qry, respType) => {
-  return fetch('/graphql', {
-    method: 'post',
-    headers: {
-      'Accept': 'application/json',
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify(qry),
-    credentials: 'include'
-  }).then(response => {
-    if (respType === 'json') {
-      return response.json()
-    } else {
-      return response.text()
-    }
-  }).then(responseBody => {
-    try {
-      return JSON.parse(responseBody)
-    } catch (error) {
-      return responseBody
-    }
-  })
-}
-
-export default {
-  data() {
-    return { }
-  },
-  mounted() {
-    let graphiQLInstance
-    ReactDOM.render(
-      React.createElement(GraphiQL, {
-        ref(el) { graphiQLInstance = el },
-        async fetcher(qry) {
-          let resp = await fetcher(qry, 'text')
-          _.delay(() => {
-            graphiQLInstance.resultComponent.viewer.refresh()
-          }, 500)
-          return resp
-        },
-        response: null,
-        variables: '{}',
-        operationName: null,
-        websocketConnectionParams: null
-      }),
-      document.getElementById('graphiql')
-    )
-    graphiQLInstance.queryEditorComponent.editor.refresh()
-    graphiQLInstance.variableEditorComponent.editor.refresh()
-    graphiQLInstance.state.variableEditorOpen = true
-    graphiQLInstance.state.docExplorerOpen = true
-  }
-}
-</script>
-
-<style lang='scss'>
-#graphiql {
-  height: calc(100vh - 270px);
-
-  .topBar {
-    background-color: mc('grey', '200');
-    background-image: none;
-    padding: 1.5rem 0;
-
-    > .title {
-      display: none;
-    }
-  }
-
-  .toolbar {
-    background-color: initial;
-    box-shadow: initial;
-  }
-
-  .doc-explorer-title-bar, .history-title-bar {
-    height: auto;
-  }
-}
-</style>

client/components/admin/admin-dev-voyager.vue

-<template lang='pug'>
-  v-container(fluid, grid-list-lg)
-    v-layout(row, wrap)
-      v-flex(xs12)
-        .admin-header
-          img(src='/svg/icon-console.svg', alt='Developer Tools', style='width: 80px;')
-          .admin-header-title
-            .headline.primary--text Developer Tools
-            .subtitle-1.grey--text Voyager
-
-        v-card.mt-3.white.grey--text.text--darken-3
-          #voyager
-
-</template>
-
-<script>
-import _ from 'lodash'
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { Voyager } from 'graphql-voyager'
-import 'graphql-voyager/dist/voyager.css'
-
-const fetcher = (qry, respType) => {
-  return fetch('/graphql', {
-    method: 'post',
-    headers: {
-      'Accept': 'application/json',
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify(qry),
-    credentials: 'include'
-  }).then(response => {
-    if (respType === 'json') {
-      return response.json()
-    } else {
-      return response.text()
-    }
-  }).then(responseBody => {
-    try {
-      return JSON.parse(responseBody)
-    } catch (error) {
-      return responseBody
-    }
-  })
-}
-
-export default {
-  data() {
-    return {}
-  },
-  mounted() {
-    _.delay(() => {
-      ReactDOM.render(
-        React.createElement(Voyager, {
-          introspection: qry => fetcher({ query: qry }, 'json'),
-          workerURI: '/js/voyager.worker.js'
-        }),
-        document.getElementById('voyager')
-      )
-    }, 500)
-  }
-}
-</script>
-
-<style lang='scss'>
-#voyager {
-  height: calc(100vh - 270px);
-
-  .title-area {
-    display: none;
-  }
-  .type-doc {
-    margin-top: 5px;
-  }
-
-  .doc-navigation {
-    > span {
-      overflow-y: hidden;
-      display: block;
-    }
-    min-height: 40px;
-  }
-
-  .contents {
-    padding-bottom: 0;
-    color: #666;
-  }
-
-  .type-info-popover {
-    display: none;
-  }
-}
-</style>

client/components/admin/admin-logging-console.vue

@@ -23,12 +23,12 @@
 
 <script>
 import _ from 'lodash'
-import { Terminal } from 'xterm'
-import * as fit from 'xterm/lib/addons/fit/fit'
+// import { Terminal } from 'xterm'
+// import * as fit from 'xterm/lib/addons/fit/fit'
 
 import livetrailSubscription from 'gql/admin/logging/logging-subscription-livetrail.gql'
 
-Terminal.applyAddon(fit)
+// Terminal.applyAddon(fit)
 
 export default {
   term: null,
@@ -48,7 +48,7 @@ export default {
     value(newValue, oldValue) {
       if (newValue) {
         _.delay(() => {
-          this.term = new Terminal()
+          // this.term = new Terminal()
           this.term.open(this.$refs.consoleContainer)
           this.term.writeln('Connecting to \x1B[1;3;31mconsole output\x1B[0m...')
 

client/components/admin/admin-navigation.vue

@@ -70,6 +70,7 @@
                     :label='$t("navigation.label")'
                     prepend-icon='mdi-format-title'
                     v-model='current.label'
+                    counter='255'
                   )
                   v-text-field(
                     outlined

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

@@ -23,11 +23,6 @@
           prepend-icon='mdi-at'
           v-model='email'
           label='Email Address'
-          v-validate='{ required: true, email: true, min: 2, max: 255 }',
-          data-vv-name='email',
-          data-vv-as='Email Address',
-          data-vv-scope='newUser',
-          :error-messages='errors.collect(`newUser.email`)'
           key='newUserEmail'
           persistent-hint
           ref='emailInput'
@@ -41,11 +36,6 @@
           :label='mustChangePwd ? `Temporary Password` : `Password`'
           counter='255'
           @click:append='generatePwd'
-          v-validate='{ required: true, min: 6, max: 255 }',
-          data-vv-name='password',
-          data-vv-as='Password',
-          data-vv-scope='newUser',
-          :error-messages='errors.collect(`newUser.password`)'
           key='newUserPassword'
           persistent-hint
           )
@@ -54,11 +44,6 @@
           prepend-icon='mdi-account-outline'
           v-model='name'
           label='Name'
-          v-validate='{ required: true, min: 2, max: 255 }',
-          data-vv-name='name',
-          data-vv-as='Name',
-          data-vv-scope='newUser',
-          :error-messages='errors.collect(`newUser.name`)'
           :hint='provider === `local` ? `Can be changed by the user.` : `May be overwritten by the provider during login.`'
           key='newUserName'
           persistent-hint
@@ -94,16 +79,17 @@
       v-card-chin
         v-spacer
         v-btn(text, @click='isShown = false') Cancel
-        v-btn.px-3(depressed, color='primary', @click='newUser(false)', :disabled='errors.any(`newUser`)')
+        v-btn.px-3(depressed, color='primary', @click='newUser(false)')
           v-icon(left) mdi-chevron-right
           span Create
-        v-btn.px-3(depressed, color='primary', @click='newUser(true)', :disabled='errors.any(`newUser`)')
+        v-btn.px-3(depressed, color='primary', @click='newUser(true)')
           v-icon(left) mdi-chevron-double-right
           span Create and Close
 </template>
 
 <script>
 import _ from 'lodash'
+import validate from 'validate.js'
 
 import createUserMutation from 'gql/admin/users/users-mutation-create.gql'
 import providersQuery from 'gql/admin/users/users-query-strategies.gql'
@@ -138,20 +124,54 @@ export default {
   watch: {
     value(newValue, oldValue) {
       if (newValue) {
-        this.$validator.reset()
         this.$nextTick(() => {
           this.$refs.emailInput.focus()
         })
       }
-    },
-    provider(newValue, oldValue) {
-      this.$validator.reset()
     }
   },
   methods: {
     async newUser(close = false) {
-      const validationSuccess = await this.$validator.validateAll('newUser')
-      if (!validationSuccess) {
+      let rules = {
+        email: {
+          presence: {
+            allowEmpty: false
+          },
+          email: true
+        },
+        name: {
+          presence: {
+            allowEmpty: false
+          },
+          length: {
+            minimum: 2,
+            maximum: 255
+          }
+        }
+      }
+      if (this.provider === `local`) {
+        rules.password = {
+          presence: {
+            allowEmpty: false
+          },
+          length: {
+            minimum: 6,
+            maximum: 255
+          }
+        }
+      }
+      const validationResults = validate({
+        email: this.email,
+        password: this.password,
+        name: this.name
+      }, rules, { format: 'flat' })
+
+      if (validationResults) {
+        this.$store.commit('showNotification', {
+          style: 'red',
+          message: validationResults[0],
+          icon: 'alert'
+        })
         return
       }
 
@@ -192,7 +212,7 @@ export default {
           this.$store.commit('showNotification', {
             style: 'red',
             message: _.get(resp, 'data.users.create.responseResult.message', 'An unexpected error occured.'),
-            icon: 'warning'
+            icon: 'alert'
           })
         }
       } catch (err) {

client/components/admin/admin-utilities-importv1.vue

 <template lang='pug'>
-  v-card.wiki-form
+  v-card
     v-toolbar(flat, color='primary', dark, dense)
       .subtitle-1 {{ $t('admin:utilities.importv1Title') }}
     v-card-text
-      .text-xs-center
+      .text-center
         img.animated.fadeInUp.wait-p1s(src='/svg/icon-software.svg')
         .body-2 Import from Wiki.js 1.x
       v-divider.my-4
-      .body-1 Data from a Wiki.js 1.x installation can be imported easily using this tool. What do you want to import?
+      .body-2 Data from a Wiki.js 1.x installation can easily be imported using this tool. What do you want to import?
       v-checkbox(
         label='Content'
         value='content'
@@ -29,9 +29,9 @@
         v-model='importFilters'
         hide-details
       )
-      v-divider.my-3
+      v-divider.my-5
       v-text-field.mt-3(
-        outline
+        outlined
         label='MongoDB Connection String'
         hint='The connection string to connect to the Wiki.js 1.x MongoDB database.'
         persistent-hint
@@ -39,7 +39,7 @@
         v-if='needDB'
       )
       v-text-field.mt-3(
-        outline
+        outlined
         label='Content Repo Path'
         hint='The full path to where the Wiki.js 1.x content is stored on disk.'
         persistent-hint
@@ -47,18 +47,39 @@
         v-if='needDisk'
       )
     v-card-chin
-      v-btn(depressed, color='deep-orange darken-2', :disabled='!needDB && !needDisk').ml-0
-        v-icon(left, color='white') label_important
+      v-btn.px-3(depressed, color='deep-orange darken-2', :disabled='!needDB && !needDisk', @click='startImport').ml-0
+        v-icon(left, color='white') mdi-database-import
         span.white--text Start Import
+    v-dialog(
+      v-model='isLoading'
+      persistent
+      max-width='350'
+      )
+      v-card(color='deep-orange darken-2', dark)
+        v-card-text.pa-10.text-center
+          semipolar-spinner.animated.fadeIn(
+            :animation-duration='1500'
+            :size='65'
+            color='#FFF'
+            style='margin: 0 auto;'
+          )
+          .mt-5.body-1.white--text Importing from Wiki.js 1.x...
+          .caption Please wait
 </template>
 
 <script>
+import { SemipolarSpinner } from 'epic-spinners'
+
 export default {
+  components: {
+    SemipolarSpinner
+  },
   data() {
     return {
-      importFilters: ['content', 'uploads'],
+      importFilters: ['content', 'uploads', 'users'],
       dbConnStr: 'mongodb://',
-      contentPath: '/wiki-v1/repo'
+      contentPath: '/wiki-v1/repo',
+      isLoading: false
     }
   },
   computed: {
@@ -68,6 +89,11 @@ export default {
     needDisk() {
       return this.importFilters.indexOf('content') >= 0 || this.importFilters.indexOf('uploads') >= 0
     }
+  },
+  methods: {
+    async startImport () {
+      this.isLoading = true
+    }
   }
 }
 </script>

client/components/admin/admin-utilities.vue

@@ -72,7 +72,7 @@ export default {
           key: 'UtilityImportv1',
           icon: 'mdi-database-import',
           i18nKey: 'importv1',
-          isAvailable: false
+          isAvailable: true
         },
         {
           key: 'UtilityTelemetry',

client/components/common/search-results.vue

@@ -209,6 +209,10 @@ export default {
 
     .highlighted {
       background: #FFF linear-gradient(to bottom, #FFF, mc('orange', '100'));
+
+      @at-root .theme--dark & {
+        background: mc('grey', '900') linear-gradient(to bottom, mc('orange', '900'), darken(mc('orange', '900'), 15%));
+      }
     }
   }
 

client/components/editor.vue

@@ -65,7 +65,6 @@ export default {
     editorCode: () => import(/* webpackChunkName: "editor-code", webpackMode: "lazy" */ './editor/editor-code.vue'),
     editorCkeditor: () => import(/* webpackChunkName: "editor-ckeditor", webpackMode: "lazy" */ './editor/editor-ckeditor.vue'),
     editorMarkdown: () => import(/* webpackChunkName: "editor-markdown", webpackMode: "lazy" */ './editor/editor-markdown.vue'),
-    editorWysiwyg: () => import(/* webpackChunkName: "editor-wysiwyg", webpackMode: "lazy" */ './editor/editor-wysiwyg.vue'),
     editorModalEditorselect: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-editorselect.vue'),
     editorModalProperties: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-properties.vue'),
     editorModalUnsaved: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-unsaved.vue'),

client/components/editor/editor-modal-editorselect.vue

@@ -26,25 +26,15 @@
                         )
                         .body-2.mt-7 Coming Soon
             v-flex(xs4)
-              v-hover
-                template(v-slot:default='{ hover }')
-                  v-card.radius-7.grey.animated.fadeInUp.wait-p1s(
-                    hover
-                    light
-                    ripple
-                    )
-                    v-card-text.text-center(@click='')
-                      img(src='/svg/editor-icon-code.svg', alt='Code', style='width: 36px;')
-                      .body-2.mt-2.grey--text.text--darken-2 Code
-                      .caption.grey--text.text--darken-1 Raw HTML
-                    v-fade-transition
-                      v-overlay(
-                        v-if='hover'
-                        absolute
-                        color='primary'
-                        opacity='.8'
-                        )
-                        .body-2.mt-7 Coming Soon
+              v-card.radius-7.animated.fadeInUp.wait-p1s(
+                hover
+                light
+                ripple
+                )
+                v-card-text.text-center(@click='selectEditor("code")')
+                  img(src='/svg/editor-icon-code.svg', alt='Code', style='width: 36px;')
+                  .body-2.primary--text.mt-2 Code
+                  .caption.grey--text Raw HTML
             v-flex(xs4)
               v-card.radius-7.animated.fadeInUp.wait-p2s(
                 hover
@@ -75,17 +65,6 @@
                         opacity='.8'
                         )
                         .body-2.mt-7 Coming Soon
-            //- v-flex(xs4)
-            //-   v-card.radius-7.grey(
-            //-     hover
-            //-     light
-            //-     ripple
-            //-     disabled
-            //-     )
-            //-     v-card-text.text-center(@click='selectEditor("wysiwyg")')
-            //-       img(src='/svg/icon-open-in-browser.svg', alt='Visual Builder', style='width: 36px;')
-            //-       .body-2.mt-2.grey--text.text--darken-2 Visual Builder
-            //-       .caption.grey--text.text--darken-1 Drag-n-drop
             v-flex(xs4)
               v-card.radius-7.animated.fadeInUp.wait-p4s(
                 hover

client/components/editor/editor-modal-media.vue

@@ -568,6 +568,16 @@ export default {
     }
   }
 
+  &.is-editor-code {
+    top: 64px;
+    height: calc(100vh - 64px - 26px);
+
+    @include until($tablet) {
+      top: 56px;
+      height: calc(100vh - 56px - 24px);
+    }
+  }
+
   .filepond--root {
     margin-bottom: 0;
   }

client/components/editor/editor-wysiwyg.vue

-<template lang='pug'>
-  .editor-wysiwyg
-    div(ref='editor')
-
-</template>
-
-<script>
-import 'grapesjs/dist/css/grapes.min.css'
-import grapesjs from 'grapesjs'
-
-let editor // eslint-disable-line no-unused-vars
-
-export default {
-  mounted() {
-    editor = grapesjs.init({
-      container: this.$refs.editor,
-      width: 'auto',
-      height: 'calc(100vh - 64px)',
-      storageManager: { type: null },
-      // panels: { defaults: [] }
-      blockManager: {
-        blocks: [
-          {
-            id: 'section', // id is mandatory
-            label: '<b>Section</b>', // You can use HTML/SVG inside labels
-            attributes: { class: 'gjs-block-section' },
-            content: `<section>
-              <h1>This is a simple title</h1>
-              <div>This is just a Lorem text: Lorem ipsum dolor sit amet</div>
-            </section>`
-          }, {
-            id: 'text',
-            label: 'Text',
-            content: '<div data-gjs-type="text">Insert your text here</div>'
-          }, {
-            id: 'image',
-            label: 'Image',
-            // Select the component once it's dropped
-            select: true,
-            // You can pass components as a JSON instead of a simple HTML string,
-            // in this case we also use a defined component type `image`
-            content: { type: 'image' },
-            // This triggers `active` event on dropped components and the `image`
-            // reacts by opening the AssetManager
-            activate: true
-          }
-        ]
-      }
-    })
-  }
-}
-</script>
-
-<style lang="scss">
-
-.gjs-block {
-  width: auto;
-  height: auto;
-  min-height: auto;
-}
-
-</style>

client/components/setup.vue

@@ -4,15 +4,16 @@
       v-container
         v-layout
           v-flex(xs12, lg6, offset-lg3)
-            v-card.radius-7
+            v-card.radius-7.animated.fadeInUp
               .text-center
-                img.setup-logo(src='/svg/logo-wikijs.svg', alt='Wiki.js Logo')
-              v-alert(tile, color='indigo lighten-5', :value='true')
+                img.setup-logo.animated.fadeInUp.wait-p2s(src='/svg/logo-wikijs-full.svg', alt='Wiki.js Logo')
+              v-alert(v-model='error', type='error', icon='mdi-alert', tile, dismissible) {{ errorMessage }}
+              v-alert(v-if='!error', tile, color='indigo lighten-5', :value='true')
                 v-icon.mr-3(color='indigo') mdi-package-variant
                 span.indigo--text You are about to install Wiki.js #[strong {{wikiVersion}}].
               v-card-text
-                .overline.pl-3 Create Administrator Account
-                v-container.pa-3(grid-list-xl)
+                .overline.pl-3 Administrator Account
+                v-container.pa-3.mt-3(grid-list-xl)
                   v-layout(row, wrap)
                     v-flex(xs12)
                       v-text-field(
@@ -21,11 +22,7 @@
                         label='Administrator Email',
                         hint='The email address of the administrator account.',
                         persistent-hint
-                        v-validate='{ required: true, email: true }',
-                        data-vv-name='adminEmail',
-                        data-vv-as='Administrator Email',
-                        data-vv-scope='admin',
-                        :error-messages='errors.collect(`admin.adminEmail`)'
+                        required
                         ref='adminEmailInput'
                       )
                     v-flex(xs6)
@@ -40,11 +37,6 @@
                         :type="pwdMode ? 'password' : 'text'"
                         hint='At least 8 characters long.',
                         persistent-hint
-                        v-validate='{ required: true, min: 8 }',
-                        data-vv-name='adminPassword',
-                        data-vv-as='Password',
-                        data-vv-scope='admin',
-                        :error-messages='errors.collect(`admin.adminPassword`)'
                       )
                     v-flex(xs6)
                       v-text-field(
@@ -58,11 +50,6 @@
                         :type="pwdConfirmMode ? 'password' : 'text'"
                         hint='Verify your password again.',
                         persistent-hint
-                        v-validate='{ required: true, min: 8 }',
-                        data-vv-name='adminPasswordConfirm',
-                        data-vv-as='Confirm Password',
-                        data-vv-scope='admin',
-                        :error-messages='errors.collect(`admin.adminPasswordConfirm`)'
                         @keyup.enter='install'
                       )
                 v-divider.mb-4
@@ -73,10 +60,9 @@
                   persistent-hint,
                   hint='Help Wiki.js developers improve this app with anonymized telemetry.'
                 )
-              v-alert(:value='error', type='error', icon='mdi-alert') {{ errorMessage }}
-              v-divider.mt-3(v-if='!error')
+              v-divider.mt-2
               v-card-actions
-                v-btn(color='primary', @click='install', :disabled='loading', x-large, flat, block)
+                v-btn(color='primary', @click='install', :disabled='loading', x-large, depressed, block)
                   v-icon(left) mdi-check
                   span Install
 
@@ -98,8 +84,8 @@
 </template>
 
 <script>
-import axios from 'axios'
 import _ from 'lodash'
+import validate from 'validate.js'
 import { BreedingRhombusSpinner } from 'epic-spinners'
 
 export default {
@@ -135,27 +121,60 @@ export default {
   },
   methods: {
     async install () {
-      const validationSuccess = await this.$validator.validateAll('admin')
-      if (!validationSuccess || this.conf.adminPassword !== this.conf.adminPasswordConfirm) {
+      this.error = false
+
+      const validationResults = validate(this.conf, {
+        adminEmail: {
+          presence: {
+            allowEmpty: false
+          },
+          email: true
+        },
+        adminPassword: {
+          presence: {
+            allowEmpty: false
+          },
+          length: {
+            minimum: 6,
+            maximum: 255
+          }
+        },
+        adminPasswordConfirm: {
+          equality: 'adminPassword'
+        }
+      }, {
+        format: 'flat'
+      })
+      if (validationResults) {
+        this.error = true
+        this.errorMessage = validationResults[0]
+        this.$forceUpdate()
         return
       }
 
       this.loading = true
       this.success = false
-      this.error = false
       this.$forceUpdate()
 
       _.delay(async () => {
         try {
-          const resp = await axios.post('/finalize', this.conf)
-          if (resp.data.ok === true) {
+          const resp = await fetch('/finalize', {
+            method: 'POST',
+            cache: 'no-cache',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(this.conf)
+          }).then(res => res.json())
+
+          if (resp.ok === true) {
             this.success = true
             _.delay(() => {
               window.location.assign('/login')
             }, 3000)
           } else {
             this.error = true
-            this.errorMessage = resp.data.error
+            this.errorMessage = resp.error
             this.loading = false
           }
         } catch (err) {
@@ -178,8 +197,8 @@ export default {
   }
 
   &-logo {
-    width: 300px;
-    margin: 3rem 0 2rem 0;
+    width: 400px;
+    margin: 2rem 0 2rem 0;
   }
 }
 </style>

client/graph/admin/search/search-query-engines.gql

 query {
   search {
-    searchEngines(orderBy: "title ASC") {
+    searchEngines(orderBy: "title") {
       isEnabled
       key
       title

client/scss/app.scss

@@ -14,8 +14,8 @@
 
 // @import '../libs/twemoji/twemoji-awesome';
 // @import '../libs/prism/prism.css';
-@import '~vue-tour/dist/vue-tour.css';
-@import '~xterm/dist/xterm.css';
+// @import '~vue-tour/dist/vue-tour.css';
+// @import '~xterm/dist/xterm.css';
 // @import 'node_modules/diff2html/dist/diff2html.min';
 
 @import 'pages/new';

client/store/index.js

@@ -54,7 +54,7 @@ export default new Vuex.Store({
       WIKI.$store.commit('showNotification', {
         style: 'red',
         message: _.get(err, 'graphQLErrors[0].message', err.message),
-        icon: 'warning'
+        icon: 'alert'
       })
     }
   },

dev/webpack/webpack.dev.js

@@ -173,18 +173,6 @@ module.exports = {
             outputPath: 'fonts/'
           }
         }]
-      },
-      {
-        test: /.jsx$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/,
-        options: {
-          presets: ['es2015', 'react']
-        }
-      },
-      {
-        test: /\.flow$/,
-        loader: 'ignore-loader'
       }
     ]
   },
@@ -193,8 +181,7 @@ module.exports = {
     new VuetifyLoaderPlugin(),
     new CopyWebpackPlugin([
       { from: 'client/static' },
-      { from: './node_modules/prismjs/components', to: 'js/prism' },
-      { from: './node_modules/graphql-voyager/dist/voyager.worker.js', to: 'js/' }
+      { from: './node_modules/prismjs/components', to: 'js/prism' }
     ], {}),
     new HtmlWebpackPlugin({
       template: 'dev/templates/master.pug',
@@ -227,8 +214,7 @@ module.exports = {
     }),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('development'),
-      'process.env.CURRENT_THEME': JSON.stringify(_.defaultTo(yargs.theme, 'default')),
-      '__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
+      'process.env.CURRENT_THEME': JSON.stringify(_.defaultTo(yargs.theme, 'default'))
     }),
     new WriteFilePlugin(),
     new webpack.HotModuleReplacementPlugin(),
@@ -270,7 +256,6 @@ module.exports = {
     extensions: [
       '.js',
       '.json',
-      '.jsx',
       '.vue'
     ],
     modules: [

dev/webpack/webpack.prod.js

@@ -177,18 +177,6 @@ module.exports = {
             outputPath: 'fonts/'
           }
         }]
-      },
-      {
-        test: /.jsx$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/,
-        options: {
-          presets: ['es2015', 'react']
-        }
-      },
-      {
-        test: /\.flow$/,
-        loader: 'ignore-loader'
       }
     ]
   },
@@ -198,8 +186,7 @@ module.exports = {
     new webpack.BannerPlugin('Wiki.js - wiki.js.org - Licensed under AGPL'),
     new CopyWebpackPlugin([
       { from: 'client/static' },
-      { from: './node_modules/prismjs/components', to: 'js/prism' },
-      { from: './node_modules/graphql-voyager/dist/voyager.worker.js', to: 'js/' }
+      { from: './node_modules/prismjs/components', to: 'js/prism' }
     ], {}),
     new MiniCssExtractPlugin({
       filename: 'css/bundle.[hash].css',
@@ -245,8 +232,7 @@ module.exports = {
     }),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
-      'process.env.CURRENT_THEME': JSON.stringify(_.defaultTo(yargs.theme, 'default')),
-      '__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
+      'process.env.CURRENT_THEME': JSON.stringify(_.defaultTo(yargs.theme, 'default'))
     })
   ],
   optimization: {
@@ -273,7 +259,6 @@ module.exports = {
     extensions: [
       '.js',
       '.json',
-      'jsx',
       '.vue'
     ],
     modules: [

package.json

@@ -42,8 +42,7 @@
     "apollo-server": "2.9.3",
     "apollo-server-express": "2.9.3",
     "auto-load": "3.0.4",
-    "aws-sdk": "2.524.0",
-    "axios": "0.19.0",
+    "aws-sdk": "2.528.0",
     "azure-search-client": "3.1.5",
     "bcryptjs-then": "1.0.1",
     "bluebird": "3.5.5",
@@ -69,27 +68,27 @@
     "express-brute": "1.0.1",
     "express-session": "1.16.2",
     "file-type": "12.3.0",
-    "filesize": "4.1.2",
+    "filesize": "4.2.0",
     "fs-extra": "8.1.0",
     "getos": "3.1.1",
-    "graphql": "14.5.4",
+    "graphql": "14.5.6",
     "graphql-list-fields": "2.0.2",
     "graphql-rate-limit-directive": "1.1.0",
     "graphql-subscriptions": "1.1.0",
     "graphql-tools": "4.0.5",
     "highlight.js": "9.15.10",
-    "i18next": "17.0.13",
+    "i18next": "17.0.15",
     "i18next-express-middleware": "1.8.2",
     "i18next-node-fs-backend": "2.1.3",
-    "image-size": "0.7.4",
+    "image-size": "0.7.5",
     "js-base64": "2.5.1",
     "js-binary": "1.2.0",
     "js-yaml": "3.13.1",
     "jsonwebtoken": "8.5.1",
     "klaw": "3.0.0",
-    "knex": "0.19.3",
+    "knex": "0.19.4",
     "lodash": "4.17.15",
-    "markdown-it": "9.1.0",
+    "markdown-it": "10.0.0",
     "markdown-it-abbr": "1.0.4",
     "markdown-it-anchor": "5.2.4",
     "markdown-it-attrs": "3.0.1",
@@ -98,7 +97,7 @@
     "markdown-it-external-links": "0.0.6",
     "markdown-it-footnote": "3.0.2",
     "markdown-it-imsize": "2.0.1",
-    "markdown-it-mark": "2.0.0",
+    "markdown-it-mark": "3.0.0",
     "markdown-it-mathjax": "2.0.0",
     "markdown-it-sub": "1.0.0",
     "markdown-it-sup": "1.0.0",
@@ -111,7 +110,7 @@
     "mssql": "5.1.0",
     "multer": "1.4.2",
     "mysql2": "1.7.0",
-    "nanoid": "2.1.0",
+    "nanoid": "2.1.1",
     "node-2fa": "1.1.2",
     "node-cache": "4.2.1",
     "nodemailer": "6.3.0",
@@ -133,7 +132,7 @@
     "passport-oauth2": "1.5.0",
     "passport-okta-oauth": "0.0.1",
     "passport-openidconnect": "0.0.2",
-    "passport-saml": "1.1.0",
+    "passport-saml": "1.2.0",
     "passport-twitch": "1.0.3",
     "pem-jwk": "2.0.0",
     "pg": "7.12.1",
@@ -148,7 +147,7 @@
     "request-promise": "4.2.4",
     "safe-regex": "2.0.2",
     "sanitize-filename": "1.6.3",
-    "scim-query-filter-parser": "1.1.1",
+    "scim-query-filter-parser": "2.0.0",
     "semver": "6.3.0",
     "serve-favicon": "2.5.0",
     "simple-git": "1.126.0",
@@ -161,8 +160,6 @@
     "uslug": "1.0.4",
     "uuid": "3.3.3",
     "validate.js": "0.13.1",
-    "validator": "11.1.0",
-    "validator-as-promised": "1.0.2",
     "winston": "3.2.1",
     "yargs": "14.0.0"
   },
@@ -180,7 +177,7 @@
     "@babel/plugin-syntax-import-meta": "^7.2.0",
     "@babel/polyfill": "^7.6.0",
     "@babel/preset-env": "^7.6.0",
-    "@mdi/font": "4.3.95",
+    "@mdi/font": "4.4.95",
     "@panter/vue-i18next": "0.15.1",
     "@requarks/ckeditor5": "12.4.0-wiki.14",
     "@vue/babel-preset-app": "3.11.0",
@@ -203,7 +200,6 @@
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-prismjs": "1.1.1",
     "babel-plugin-transform-imports": "2.0.0",
-    "brace": "0.11.1",
     "cache-loader": "4.1.0",
     "chart.js": "2.8.0",
     "clean-webpack-plugin": "3.0.0",
@@ -214,7 +210,7 @@
     "cssnano": "4.1.10",
     "duplicate-package-checker-webpack-plugin": "3.0.0",
     "epic-spinners": "1.1.0",
-    "eslint": "6.3.0",
+    "eslint": "6.4.0",
     "eslint-config-requarks": "1.0.7",
     "eslint-config-standard": "14.1.0",
     "eslint-plugin-import": "2.18.2",
@@ -224,14 +220,12 @@
     "eslint-plugin-vue": "5.2.3",
     "fibers": "4.0.1",
     "file-loader": "4.2.0",
-    "filepond": "4.6.1",
+    "filepond": "4.7.1",
     "filepond-plugin-file-validate-type": "1.2.4",
     "filesize.js": "1.0.2",
-    "grapesjs": "0.15.5",
     "graphiql": "0.14.2",
     "graphql-persisted-document-loader": "1.0.1",
     "graphql-tag": "^2.10.1",
-    "graphql-voyager": "1.0.0-rc.28",
     "hammerjs": "2.0.8",
     "html-webpack-plugin": "4.0.0-beta.8",
     "html-webpack-pug-plugin": "2.0.0",
@@ -257,45 +251,39 @@
     "pug-loader": "2.4.0",
     "pug-plain-loader": "1.0.0",
     "raw-loader": "3.1.0",
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
     "resolve-url-loader": "3.1.0",
-    "sass": "1.22.10",
+    "sass": "1.22.12",
     "sass-loader": "8.0.0",
     "sass-resources-loader": "2.0.1",
     "script-ext-html-webpack-plugin": "2.1.4",
     "simple-progress-webpack-plugin": "1.1.2",
     "style-loader": "1.0.0",
-    "terser": "4.3.0",
+    "terser": "4.3.1",
     "twemoji-awesome": "1.0.6",
     "url-loader": "2.1.0",
-    "vee-validate": "2.2.15",
     "velocity-animate": "1.5.2",
     "viz.js": "2.1.2",
     "vue": "2.6.10",
-    "vue-apollo": "3.0.0-rc.2",
+    "vue-apollo": "3.0.0-rc.4",
     "vue-chartjs": "3.4.2",
     "vue-clipboards": "1.3.0",
     "vue-filepond": "5.1.3",
-    "vue-hot-reload-api": "2.3.3",
+    "vue-hot-reload-api": "2.3.4",
     "vue-loader": "15.7.1",
-    "vue-material-design-icons": "3.4.0",
     "vue-moment": "4.0.0",
     "vue-router": "3.1.3",
-    "vue-simple-breakpoints": "1.0.3",
     "vue-status-indicator": "1.2.1",
     "vue-template-compiler": "2.6.10",
-    "vue-tour": "1.1.0",
     "vue2-animate": "2.1.2",
     "vuedraggable": "2.23.0",
-    "vuescroll": "4.14.3",
-    "vuetify": "2.0.15",
+    "vuescroll": "4.14.4",
+    "vuetify": "2.0.17",
     "vuetify-loader": "1.3.0",
     "vuex": "3.1.1",
     "vuex-pathify": "1.4.0",
     "vuex-persistedstate": "2.5.4",
-    "webpack": "4.39.3",
-    "webpack-bundle-analyzer": "3.4.1",
+    "webpack": "4.40.2",
+    "webpack-bundle-analyzer": "3.5.0",
     "webpack-cli": "3.3.8",
     "webpack-dev-middleware": "3.7.1",
     "webpack-hot-middleware": "2.25.0",
@@ -304,7 +292,7 @@
     "webpackbar": "4.0.0",
     "whatwg-fetch": "3.0.0",
     "write-file-webpack-plugin": "4.5.1",
-    "xterm": "3.14.5",
+    "xterm": "4.0.1",
     "zxcvbn": "4.4.2"
   },
   "browserslist": [

server/core/telemetry.js

 const _ = require('lodash')
-const axios = require('axios')
+const request = require('request-promise')
 const bugsnag = require('@bugsnag/node')
 const uuid = require('uuid/v4')
 const qs = require('querystring')
@@ -65,13 +65,13 @@ module.exports = {
   },
   sendBatchEvents(events) {
     if (!this.enabled || WIKI.IS_DEBUG) { return false }
-    axios({
-      method: 'post',
+    request({
+      method: 'POST',
       url: WIKI.data.telemetry.GA_REMOTE,
       headers: {
         'Content-type': 'text/plain'
       },
-      data: events.map(ev => {
+      body: events.map(ev => {
         return qs.stringify({
           v: 1, // API version
           tid: WIKI.data.telemetry.GA_ID, // Tracking ID

server/graph/resolvers/logging.js

@@ -35,8 +35,8 @@ module.exports = {
           }, []), 'key')
         }
       })
-      if (args.filter) { loggers = graphHelper.filter(loggers, args.filter) }
-      if (args.orderBy) { loggers = graphHelper.orderBy(loggers, args.orderBy) }
+      // if (args.filter) { loggers = graphHelper.filter(loggers, args.filter) }
+      if (args.orderBy) { loggers = _.sortBy(loggers, [args.orderBy]) }
       return loggers
     }
   },

server/graph/resolvers/rendering.js

@@ -30,8 +30,8 @@ module.exports = {
           }, []), 'key')
         }
       })
-      if (args.filter) { renderers = graphHelper.filter(renderers, args.filter) }
-      if (args.orderBy) { renderers = graphHelper.orderBy(renderers, args.orderBy) }
+      // if (args.filter) { renderers = graphHelper.filter(renderers, args.filter) }
+      if (args.orderBy) { renderers = _.sortBy(renderers, [args.orderBy]) }
       return renderers
     }
   },

server/graph/resolvers/search.js

@@ -32,8 +32,8 @@ module.exports = {
           }, []), 'key')
         }
       })
-      if (args.filter) { searchEngines = graphHelper.filter(searchEngines, args.filter) }
-      if (args.orderBy) { searchEngines = graphHelper.orderBy(searchEngines, args.orderBy) }
+      // if (args.filter) { searchEngines = graphHelper.filter(searchEngines, args.filter) }
+      if (args.orderBy) { searchEngines = _.sortBy(searchEngines, [args.orderBy]) }
       return searchEngines
     }
   },

server/graph/resolvers/storage.js

@@ -35,8 +35,8 @@ module.exports = {
           }, []), 'key')
         }
       })
-      if (args.filter) { targets = graphHelper.filter(targets, args.filter) }
-      if (args.orderBy) { targets = graphHelper.orderBy(targets, args.orderBy) }
+      // if (args.filter) { targets = graphHelper.filter(targets, args.filter) }
+      if (args.orderBy) { targets = _.sortBy(targets, [args.orderBy]) }
       return targets
     },
     async status(obj, args, context, info) {

server/helpers/graph.js

 const _ = require('lodash')
-const Filter = require('scim-query-filter-parser')
 
 module.exports = {
   generateSuccess (msg) {
@@ -18,13 +17,5 @@ module.exports = {
       message: err.message || 'An unexpected error occured.'
     }
     return (complete) ? { responseResult: error } : error
-  },
-  filter (arr, filterString) {
-    const prvFilter = new Filter(_.toString(filterString).replace(/'/g, `"`))
-    return arr.filter(prvFilter.test)
-  },
-  orderBy (arr, orderString) {
-    let orderParams = _.zip(...orderString.split(',').map(ord => _.trim(ord).split(' ').map(_.trim)))
-    return _.orderBy(arr, orderParams[0], orderParams[1])
   }
 }

server/modules/editor/code/definition.yml

+key: code
+title: Code
+description: Raw HTML editor
+contentType: html
+author: requarks.io
+props: {}