misc: deps cleanup + form validation fixes

2019-09-15 23:20:40 -04:00
parent 1717f7a8d3
commit 309de5bc17
32 changed files with 761 additions and 1193 deletions
--- a/client/components/admin/admin-dev-graphiql.vue
+++ b/client/components/admin/admin-dev-graphiql.vue
@@ -1,101 +0,0 @@
-<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>
--- a/client/components/admin/admin-dev-voyager.vue
+++ b/client/components/admin/admin-dev-voyager.vue
@@ -1,93 +0,0 @@
-<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>
--- a/client/components/admin/admin-logging-console.vue
+++ b/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...')

--- a/client/components/admin/admin-navigation.vue
+++ b/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
--- a/client/components/admin/admin-users-create.vue
+++ b/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) {
--- a/client/components/admin/admin-utilities-importv1.vue
+++ b/client/components/admin/admin-utilities-importv1.vue
@@ -1,13 +1,13 @@
 <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>
--- a/client/components/admin/admin-utilities.vue
+++ b/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',