feat: admin auth - UI + form fields per provider + refresh

client/components/admin-api.vue

@@ -68,9 +68,9 @@ export default {
       selected: [],
       pagination: {},
       items: [
-        { id: 1, key: 'user@test.com' },
-        { id: 2, key: 'dude@test.com' },
-        { id: 3, key: 'dude@test.com' }
+        { id: 1, key: 'xxxxxxxxxxxxx' },
+        { id: 2, key: 'xxxxxxxxxxxxy' },
+        { id: 3, key: 'xxxxxxxxxxxxz' }
       ],
       headers: [
         { text: 'Name', value: 'name' },

client/components/admin-auth.vue

@@ -8,10 +8,20 @@
         v-tab(key='settings'): v-icon settings
         v-tab(v-for='provider in providers', :key='provider.key') {{ provider.title }}
 
-        v-tab-item(key='settings')
+        v-tab-item(key='settings', :transition='false', :reverse-transition='false')
           v-card.pa-3
+            .body-2.pb-2 Select which authentication providers are enabled:
             v-form
-              v-checkbox(v-for='(provider, n) in providers', v-model='auths', :key='provider.key', :label='provider.title', :value='provider.key', color='primary')
+              v-checkbox(
+                v-for='(provider, n) in providers',
+                v-model='auths',
+                :key='provider.key',
+                :label='provider.title',
+                :value='provider.key',
+                color='primary',
+                :disabled='provider.key === `local`'
+                hide-details
+              )
               v-divider
               v-btn(color='primary')
                 v-icon(left) chevron_right
@@ -19,6 +29,26 @@
               v-btn(color='black', dark)
                 v-icon(left) layers_clear
                 | Flush Sessions
+              v-btn(icon, @click='refresh')
+                v-icon.grey--text refresh
+
+        v-tab-item(v-for='(provider, n) in providers', :key='provider.key', :transition='false', :reverse-transition='false')
+          v-card.pa-3
+            .body-1(v-if='!provider.props || provider.props.length < 1') This provider has no configuration options you can modify.
+            v-form(v-else)
+              v-text-field(v-for='prop in provider.props', :key='prop', :label='prop', prepend-icon='mode_edit')
+              v-divider
+              v-btn(color='primary')
+                v-icon(left) chevron_right
+                | Save Configuration
+
+    v-snackbar(
+      color='success'
+      top
+      v-model='refreshCompleted'
+    )
+      v-icon.mr-3(dark) cached
+      | List of providers has been refreshed.
 </template>
 
 <script>
@@ -28,7 +58,8 @@ export default {
   data() {
     return {
       providers: [],
-      auths: ['local']
+      auths: ['local'],
+      refreshCompleted: false
     }
   },
   apollo: {
@@ -36,6 +67,12 @@ export default {
       query: CONSTANTS.GRAPH.AUTHENTICATION.QUERY_PROVIDERS,
       update: (data) => data.authentication.providers
     }
+  },
+  methods: {
+    async refresh() {
+      await this.$apollo.queries.providers.refetch()
+      this.refreshCompleted = true
+    }
   }
 }
 </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-if='$apollo.loading')
+    v-progress-circular.mr-3(indeterminate, color='blue', v-show='$apollo.loading')
     v-btn(icon)
       v-icon(color='grey') search
     v-btn(icon, @click.native='darkTheme = !darkTheme')
@@ -27,7 +27,9 @@
 
 <script>
 export default {
-
+  data() {
+    return {}
+  }
 }
 </script>
 

server/graph/resolvers/authentication.js

@@ -17,8 +17,10 @@ module.exports = {
         return {
           isEnabled: true,
           key: str.key,
+          props: str.props,
           title: str.title,
-          useForm: str.useForm
+          useForm: str.useForm,
+          config: []
         }
       }).sortBy(['title']).value()
     }

wiki.js

@@ -90,8 +90,8 @@ const init = {
             console.warn('--- >>>>>>>>>>>>>>>>>>>>>>>>>>>> ---')
             console.warn('--- Changes detected: Restarting ---')
             console.warn('--- <<<<<<<<<<<<<<<<<<<<<<<<<<<< ---')
-            global.wiki.server.destroy(() => {
-              global.wiki = {}
+            global.WIKI.server.destroy(() => {
+              global.WIKI = {}
               for (const workerId in cluster.workers) {
                 cluster.workers[workerId].kill()
               }