feat: auth strategies over GraphQL + svg loading

client/js/app.js

@@ -3,6 +3,8 @@
 /* global siteConfig */
 /* eslint-disable no-new */
 
+import CONSTANTS from './constants'
+
 import Vue from 'vue'
 import VueResource from 'vue-resource'
 import VueClipboards from 'vue-clipboards'
@@ -54,11 +56,18 @@ import contentViewComponent from './pages/content-view.component.js'
 import editorComponent from './components/editor.component.js'
 import sourceViewComponent from './pages/source-view.component.js'
 
+// ====================================
+// Initialize Global Vars
+// ====================================
+
+window.wiki = null
+window.CONSTANTS = CONSTANTS
+
 // ====================================
 // Initialize Apollo Client (GraphQL)
 // ====================================
 
-window.apollo = new ApolloClient({
+window.graphQL = new ApolloClient({
   networkInterface: createBatchingNetworkInterface({
     uri: window.location.protocol + '//' + window.location.host + siteConfig.path + '/graphql'
   }),

client/js/components/login.vue

@@ -7,11 +7,8 @@
           | {{ 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
+        button(v-for='strategy in strategies', :class='{ "is-active": strategy.key === selectedStrategy }', @click='selectStrategy(strategy.key, strategy.useForm)', :title='strategy.title')
+          em(v-html='strategy.icon')
           span {{ strategy.title }}
       .login-frame
         h1 {{ siteTitle }}
@@ -32,7 +29,8 @@ export default {
   data() {
     return {
       error: false,
-      strategies: []
+      strategies: [],
+      selectedStrategy: 'local'
     }
   },
   computed: {
@@ -41,9 +39,31 @@ export default {
     }
   },
   methods: {
-    selectProvider(key, useForm) {
-
+    selectStrategy(key, useForm) {
+      this.selectedStrategy = key
+      if (!useForm) {
+        window.location.assign(siteConfig.path + '/login/' + key)
+      }
+    },
+    refreshStrategies() {
+      graphQL.query({
+        query: CONSTANTS.GRAPHQL.GQL_QUERY_AUTHENTICATION,
+        variables: {
+          mode: 'active'
+        }
+      }).then(resp => {
+        if (resp.data.authentication) {
+          this.strategies = resp.data.authentication
+        } else {
+          throw new Error('No authentication providers available!')
+        }
+      }).catch(err => {
+        console.error(err)
+      })
     }
+  },
+  mounted() {
+    this.refreshStrategies()
   }
 }
 </script>

client/js/constants/graphql.js

@@ -0,0 +1,22 @@
+import gql from 'graphql-tag'
+
+export default {
+  GQL_QUERY_AUTHENTICATION: gql`
+    query($mode: String!) {
+      authentication(mode:$mode) {
+        key
+        useForm
+        title
+        icon
+      }
+    }
+  `,
+  GQL_QUERY_TRANSLATIONS: gql`
+    query($locale: String!, $namespace: String!) {
+      translations(locale:$locale, namespace:$namespace) {
+        key
+        value
+      }
+    }
+  `
+}

client/js/constants/index.js

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

client/js/modules/localization.js

@@ -1,11 +1,10 @@
 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 */
+/* global siteConfig, graphQL, CONSTANTS */
 
 module.exports = {
   VueI18Next,
@@ -19,16 +18,12 @@ module.exports = {
           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
-                  }
-                }
-              `
+            graphQL.query({
+              query: CONSTANTS.GRAPHQL.GQL_QUERY_TRANSLATIONS,
+              variables: {
+                locale: langParams[0],
+                namespace: langParams[1]
+              }
             }).then(resp => {
               let ns = {}
               if (resp.data.translations.length > 0) {