feat: vue-apollo + auth providers resolver (wip)

client/app.js

@@ -10,10 +10,9 @@ import VueClipboards from 'vue-clipboards'
 import VueSimpleBreakpoints from 'vue-simple-breakpoints'
 import VeeValidate from 'vee-validate'
 import { ApolloClient } from 'apollo-client'
-import { ApolloLink } from 'apollo-link'
-import { createApolloFetch } from 'apollo-fetch'
 import { BatchHttpLink } from 'apollo-link-batch-http'
 import { InMemoryCache } from 'apollo-cache-inmemory'
+import VueApollo from 'vue-apollo'
 import Vuetify from 'vuetify'
 import Velocity from 'velocity-animate'
 import Hammer from 'hammerjs'
@@ -36,7 +35,7 @@ import helpers from './helpers'
 // Initialize Global Vars
 // ====================================
 
-window.wiki = null
+window.WIKI = null
 window.boot = boot
 window.CONSTANTS = CONSTANTS
 window.Hammer = Hammer
@@ -47,31 +46,11 @@ window.Hammer = Hammer
 
 const graphQLEndpoint = window.location.protocol + '//' + window.location.host + siteConfig.path + 'graphql'
 
-const apolloFetch = createApolloFetch({
-  uri: graphQLEndpoint,
-  constructOptions: (requestOrRequests, options) => ({
-    ...options,
-    method: 'POST',
-    body: JSON.stringify(requestOrRequests),
-    credentials: 'include'
-  })
-})
-
 window.graphQL = new ApolloClient({
-  link: ApolloLink.from([
-    new ApolloLink((operation, forward) => {
-      operation.setContext({
-        headers: {
-          'Content-Type': 'application/json'
-        }
-      })
-
-      return forward(operation)
-    }),
-    new BatchHttpLink({
-      fetch: apolloFetch
-    })
-  ]),
+  link: new BatchHttpLink({
+    uri: graphQLEndpoint,
+    credentials: 'include'
+  }),
   cache: new InMemoryCache(),
   connectToDevTools: (process.env.node_env === 'development')
 })
@@ -81,6 +60,7 @@ window.graphQL = new ApolloClient({
 // ====================================
 
 Vue.use(VueRouter)
+Vue.use(VueApollo)
 Vue.use(VueClipboards)
 Vue.use(VueSimpleBreakpoints)
 Vue.use(localization.VueI18Next)
@@ -121,15 +101,20 @@ let bootstrap = () => {
     store.dispatch('startLoading')
   })
 
+  const apolloProvider = new VueApollo({
+    defaultClient: window.graphQL
+  })
+
   // ====================================
   // Bootstrap Vue
   // ====================================
 
   const i18n = localization.init()
-  window.wiki = new Vue({
+  window.WIKI = new Vue({
     el: '#app',
     components: {},
     mixins: [helpers],
+    provide: apolloProvider.provide(),
     store,
     i18n
   })

client/components/admin-api.vue

@@ -5,6 +5,9 @@
       .subheading.grey--text Manage keys to access the API
     v-card
       v-card-title
+        v-btn(color='green', dark)
+          v-icon(left) power_settings_new
+          | Enable API
         v-btn(color='primary', dark)
           v-icon(left) add
           | New API Key

client/components/admin-auth.vue

@@ -6,24 +6,12 @@
         .subheading.grey--text Configure the authentication settings of your wiki
       v-tabs(color='grey lighten-4', grow, slider-color='primary', show-arrows)
         v-tab(key='settings'): v-icon settings
-        v-tab(key='db') Local
-        v-tab(key='algolia') Auth0
-        v-tab(key='elasticsearch') Azure AD
-        v-tab(key='solr') Discord
-        v-tab(key='solr') Dropbox
-        v-tab(key='solr') Facebook
-        v-tab(key='solr') GitHub
-        v-tab(key='solr') Google
-        v-tab(key='solr') LDAP
-        v-tab(key='solr') Microsoft
-        v-tab(key='solr') OAuth2 Generic
-        v-tab(key='solr') Slack
-        v-tab(key='solr') Twitch
+        v-tab(v-for='provider in providers', :key='provider.key') {{ provider.title }}
 
         v-tab-item(key='settings')
           v-card.pa-3
             v-form
-              v-checkbox(v-for='(engine, n) in engines', v-model='auths', :key='n', :label='engine.text', :value='engine.value', color='primary')
+              v-checkbox(v-for='(provider, n) in providers', v-model='auths', :key='provider.key', :label='provider.title', :value='provider.key', color='primary')
               v-divider
               v-btn(color='primary')
                 v-icon(left) chevron_right
@@ -34,18 +22,20 @@
 </template>
 
 <script>
+/* global CONSTANTS */
+
 export default {
   data() {
     return {
-      engines: [
-        { text: 'Local', value: 'local' },
-        { text: 'Auth0', value: 'auth0' },
-        { text: 'Algolia', value: 'algolia' },
-        { text: 'Elasticsearch', value: 'elasticsearch' },
-        { text: 'Solr', value: 'solr' }
-      ],
+      providers: [],
       auths: ['local']
     }
+  },
+  apollo: {
+    providers: {
+      query: CONSTANTS.GRAPH.AUTHENTICATION.QUERY_PROVIDERS,
+      update: (data) => data.authentication.providers
+    }
   }
 }
 </script>

client/components/nav-header.vue

@@ -4,7 +4,7 @@
     v-toolbar-title
       span.subheading Wiki.js
     v-spacer
-    v-progress-circular.mr-3(indeterminate, color='blue')
+    v-progress-circular.mr-3(indeterminate, color='blue', v-if='$apollo.loading')
     v-btn(icon)
       v-icon(color='grey') search
     v-btn(icon, @click.native='darkTheme = !darkTheme')

client/constants/graphql.js

@@ -1,16 +1,26 @@
 import gql from 'graphql-tag'
 
 export default {
-  GQL_QUERY_AUTHENTICATION: gql`
-    query($mode: String!) {
-      authentication(mode:$mode) {
-        key
-        useForm
-        title
-        icon
+  AUTHENTICATION: {
+    QUERY_PROVIDERS: gql`
+      query {
+        authentication {
+          providers {
+            isEnabled
+            key
+            props
+            title
+            useForm
+            icon
+            config {
+              key
+              value
+            }
+          }
+        }
       }
-    }
-  `,
+    `
+  },
   GQL_QUERY_TRANSLATIONS: gql`
     query($locale: String!, $namespace: String!) {
       translations(locale:$locale, namespace:$namespace) {

client/constants/index.js

@@ -1,5 +1,5 @@
-import GRAPHQL from './graphql'
+import GRAPH from './graphql'
 
 export default {
-  GRAPHQL
+  GRAPH
 }