feat: auth jwt, permissions, login ui (wip)

Makefile

@@ -9,7 +9,7 @@ stop: ## Stop Wiki.js
 restart: ## Restart Wiki.js
 	node wiki restart
 
-dev: ## Start Wiki.js in development mode
+dev-up: ## Start Wiki.js in development mode
 	node wiki dev
 
 build: ## Build Wiki.js client assets

client/client-app.js

@@ -22,6 +22,7 @@ import VueMoment from 'vue-moment'
 import VueTour from 'vue-tour'
 import VueTreeNavigation from 'vue-tree-navigation'
 import store from './store'
+import Cookies from 'js-cookie'
 
 // ====================================
 // Load Modules
@@ -74,7 +75,10 @@ const graphQLLink = createPersistedQueryLink().concat(
       options.body = JSON.stringify(body)
 
       // Inject authentication token
-      options.headers.Authorization = `Bearer TODO`
+      const jwtToken = Cookies.get('jwt')
+      if (jwtToken) {
+        options.headers.Authorization = `Bearer ${jwtToken}`
+      }
 
       return fetch(uri, options)
     }

client/components/common/nav-footer.vue

@@ -1,14 +1,14 @@
 <template lang="pug">
-  v-footer.justify-center(:color='color', inset)
+  v-footer.justify-center(:color='bgColor', inset)
     .caption.grey--text.text--darken-1
       span(v-if='company && company.length > 0') {{ $t('common:footer.copyright', { company: company, year: currentYear, interpolation: { escapeValue: false } }) }} |&nbsp;
       span {{ $t('common:footer.poweredBy') }} #[a(href='https://wiki.js.org', ref='nofollow') Wiki.js]
 
     v-snackbar(
       :color='notification.style'
-      bottom,
-      right,
-      multi-line,
+      bottom
+      right
+      multi-line
       v-model='notificationState'
     )
       .text-xs-left
@@ -21,9 +21,13 @@ import { get, sync } from 'vuex-pathify'
 
 export default {
   props: {
-    altbg: {
-      type: Boolean,
-      default: false
+    color: {
+      type: String,
+      default: 'grey lighten-3'
+    },
+    darkColor: {
+      type: String,
+      default: 'grey darken-3'
     }
   },
   data() {
@@ -36,13 +40,11 @@ export default {
     notification: get('notification'),
     darkMode: get('site/dark'),
     notificationState: sync('notification@isActive'),
-    color() {
-      if (this.altbg) {
-        return 'altbg'
-      } else if (!this.darkMode) {
-        return 'grey lighten-3'
+    bgColor() {
+      if (!this.darkMode) {
+        return this.color
       } else {
-        return ''
+        return this.darkColor
       }
     }
   }

client/components/common/nav-header.vue

@@ -103,14 +103,15 @@
         v-list-tile(href='/p')
           v-list-tile-action: v-icon(color='red') person
           v-list-tile-title Profile
-        v-list-tile(href='/logout')
+        v-list-tile(@click='logout')
           v-list-tile-action: v-icon(color='red') exit_to_app
           v-list-tile-title Logout
 </template>
 
 <script>
 import { get } from 'vuex-pathify'
 import _ from 'lodash'
+import Cookies from 'js-cookie'
 
 export default {
   props: {
@@ -169,6 +170,10 @@ export default {
     },
     pageDelete () {
 
+    },
+    logout () {
+      Cookies.remove('jwt')
+      window.location.assign('/')
     }
   }
 }