feat: authentication improvements

client/components/admin.vue

@@ -76,7 +76,9 @@
         router-view
 
     v-footer.py-2.justify-center(app, absolute, :color='darkMode ? "" : "grey lighten-3"', inset, height='auto')
-      .caption.grey--text.text--darken-1 {{ $t('common:footer.poweredBy') }} Wiki.js
+      .caption.grey--text.text--darken-1
+        span(v-if='company && company.length > 0') {{ $t('common:footer.copyright', { company: company, year: currentYear }) }} | 
+        span {{ $t('common:footer.poweredBy') }} Wiki.js
 
     v-snackbar(
       :color='notification.style'
@@ -92,11 +94,11 @@
 
 <script>
 import VueRouter from 'vue-router'
-import { mapState } from 'vuex'
+import { get, sync } from 'vuex-pathify'
 
 import adminStore from '@/store/admin'
 
-/* global WIKI, siteConfig */
+/* global WIKI */
 
 WIKI.$store.registerModule('admin', adminStore)
 
@@ -131,23 +133,17 @@ export default {
   i18nOptions: { namespaces: 'admin' },
   data() {
     return {
+      currentYear: (new Date()).getFullYear(),
       adminDrawerShown: true
     }
   },
   computed: {
-    ...mapState({
-      notification: state => state.notification,
-      darkMode: state => state.admin.theme.dark
-    }),
-    notificationState: {
-      get() { return this.notification.isActive },
-      set(newState) { this.$store.commit('updateNotificationState', newState) }
-    }
+    company: get('site/company'),
+    notification: get('notification'),
+    darkMode: get('admin/theme@dark'),
+    notificationState: sync('notification@isActive')
   },
-  router,
-  mounted() {
-    this.$store.commit('admin/setThemeDarkMode', siteConfig.darkMode)
-  }
+  router
 }
 </script>
 

client/components/admin/admin-auth.vue

@@ -25,31 +25,49 @@
       v-tab-item(v-for='(strategy, n) in activeStrategies', :key='strategy.key', :transition='false', :reverse-transition='false')
         v-card.pa-3(flat, tile)
           v-form
+            .authlogo
+              img(:src='strategy.logo', :alt='strategy.title')
+            v-subheader.pl-0 {{strategy.title}}
+            .caption {{strategy.description}}
+            .caption: a(:href='strategy.website') {{strategy.website}}
+            v-divider.mt-3
             v-subheader.pl-0 Strategy Configuration
             .body-1.ml-3(v-if='!strategy.config || strategy.config.length < 1') This strategy has no configuration options you can modify.
             template(v-else, v-for='cfg in strategy.config')
               v-select(
                 v-if='cfg.value.type === "string" && cfg.value.enum'
+                outline
+                background-color='grey lighten-2'
                 :items='cfg.value.enum'
                 :key='cfg.key'
-                :label='cfg.key | startCase'
+                :label='cfg.value.title'
                 v-model='cfg.value.value'
                 prepend-icon='settings_applications'
+                :hint='cfg.value.hint ? cfg.value.hint : ""'
+                persistent-hint
+                :class='cfg.value.hint ? "mb-2" : ""'
               )
               v-switch(
                 v-else-if='cfg.value.type === "boolean"'
                 :key='cfg.key'
-                :label='cfg.key | startCase'
+                :label='cfg.value.title'
                 v-model='cfg.value.value'
                 color='primary'
                 prepend-icon='settings_applications'
+                :hint='cfg.value.hint ? cfg.value.hint : ""'
+                persistent-hint
                 )
               v-text-field(
                 v-else
+                outline
+                background-color='grey lighten-2'
                 :key='cfg.key'
-                :label='cfg.key | startCase'
+                :label='cfg.value.title'
                 v-model='cfg.value.value'
                 prepend-icon='settings_applications'
+                :hint='cfg.value.hint ? cfg.value.hint : ""'
+                persistent-hint
+                :class='cfg.value.hint ? "mb-2" : ""'
                 )
             v-divider.mt-3
             v-subheader.pl-0 Registration
@@ -61,18 +79,21 @@
                 hint='Allow any user successfully authorized by the strategy to access the wiki.'
                 persistent-hint
               )
-              v-select.ml-3(
+              v-combobox.ml-3.mt-3(
                 label='Limit to specific email domains'
                 v-model='strategy.domainWhitelist'
                 prepend-icon='mail_outline'
+                outline
+                background-color='grey lighten-2'
                 persistent-hint
                 deletable-chips
                 clearable
                 multiple
                 chips
-                tags
                 )
-              v-select.ml-3(
+              v-autocomplete.ml-3(
+                outline
+                background-color='grey lighten-2'
                 :items='groups'
                 item-text='name'
                 item-value='id'
@@ -82,7 +103,6 @@
                 hint='Automatically assign new users to these groups.'
                 persistent-hint
                 deletable-chips
-                autocomplete
                 clearable
                 multiple
                 chips
@@ -173,6 +193,20 @@ export default {
 }
 </script>
 
-<style lang='scss'>
+<style lang='scss' scoped>
+
+.authlogo {
+  width: 250px;
+  height: 85px;
+  float:right;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  img {
+    max-width: 100%;
+    max-height: 50px;
+  }
+}
 
 </style>

client/components/admin/admin-general.vue

@@ -36,6 +36,7 @@
                   .px-3.pb-3
                     v-text-field(
                       label='Company / Organization Name'
+                      v-model='company'
                       :counter='255'
                       prepend-icon='public'
                       persistent-hint
@@ -89,15 +90,20 @@
 
 <script>
 
+import { sync } from 'vuex-pathify'
+
 export default {
   data() {
     return {
-      siteTitle: 'Wiki.js',
       metaRobotsSelection: ['Index', 'Follow'],
       metaRobots: ['Index', 'Follow', 'No Index', 'No Follow'],
       useSquareLogo: false,
       displayMascot: true
     }
+  },
+  computed: {
+    siteTitle: sync('site/title'),
+    company: sync('site/company')
   }
 }
 </script>

client/components/common/nav-header.vue

@@ -83,9 +83,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-
-/* global siteConfig */
+import { get } from 'vuex-pathify'
 
 export default {
   props: {
@@ -107,8 +105,8 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['isLoading']),
-    title() { return siteConfig.title }
+    isLoading: get('isLoading'),
+    title: get('site/title')
   },
   created() {
     if (this.hideSearch || this.dense) {