Add support for basic authentication (#15)

- Currently there is no support for using authorized endpoints.
- Basic authentication is only used until a proper login server is implemented.

config/locale.json

@@ -160,7 +160,11 @@
       "version": "Version",
       "currentCommit": "Current Commit",
       "buildDate": "Build Date",
-      "impressum": "Impressum"
+      "impressum": "Impressum",
+      "creatorUri": "Creator URI (e.g. ORCID)",
+      "creatorCredentials": "Creator Credentials",
+      "credentialsCorrect": "Credentials successfully validated.",
+      "credentialsIncorrect": "Credentials could not be validated."
     },
     "alerts": {
       "mappingDeleted": "Mapping was deleted.",
@@ -270,7 +274,11 @@
       "version": "Version",
       "currentCommit": "Aktueller Commit",
       "buildDate": "Build-Datum",
-      "impressum": "Impressum"
+      "impressum": "Impressum",
+      "creatorUri": "Ersteller-URI (z.B. ORCID)",
+      "creatorCredentials": "Ersteller-Zugang",
+      "credentialsCorrect": "Zugang erfolgreich bestätigt.",
+      "credentialsIncorrect": "Zugang konnte nicht bestätigt werden."
     },
     "conceptDetail": {
       "showAllAncestors": "zeige alle übergeordneten Konzepte",

src/components/TheNavbar.vue

@@ -67,6 +67,12 @@
       <b-nav-item @click="$refs.settings.show()">
         <font-awesome-icon icon="cog" />
         {{ creatorName || $t("navbar.settings") }}
+        <!-- Login status -->
+        <span
+          v-if="$store.getters.authAvailable"
+          :style="`color: ${$store.state.authorized ? 'green' : 'red'} !important;`">
+          <font-awesome-icon icon="user" />
+        </span>
       </b-nav-item>
       <!-- Settings modal -->
       <the-settings ref="settings" />

src/components/TheSettings.vue

@@ -30,6 +30,30 @@
               placeholder="https://"
               type="text" />
           </p>
+          <p v-if="localSettings">
+            <b>{{ $t("settings.creatorUri") }}</b>
+            <b-form-input
+              v-model="localSettings.creatorUri"
+              placeholder="https://"
+              type="text"
+              @input="checkCredentials" />
+          </p>
+          <p v-if="localSettings && $store.getters.authAvailable">
+            <b>{{ $t("settings.creatorCredentials") }}</b>
+            <b-form-input
+              v-model="localSettings.creatorCredentials"
+              :state="$store.state.authorized"
+              type="password"
+              @input="checkCredentials" />
+            <span
+              v-if="$store.state.authorized != null"
+              :class="{
+                'text-success': $store.state.authorized,
+                'text-danger': !$store.state.authorized
+            }" >
+              {{ $store.state.authorized ? $t("settings.credentialsCorrect") : $t("settings.credentialsIncorrect") }}
+            </span>
+          </p>
         </b-tab>
         <b-tab
           :title="$t('settings.tabLayout')" >
@@ -295,6 +319,10 @@ export default {
       }
     },
   },
+  created() {
+    // Debounce checkCredentials by 350 ms
+    this.checkCredentials = _.debounce(this._checkCredentials, 350)
+  },
   methods: {
     show() {
       this.$refs.settingsModal.show()
@@ -438,6 +466,9 @@ export default {
         })
       })
     },
+    _checkCredentials() {
+      this.$store.dispatch("checkAuth")
+    },
   }
 }
 </script>

src/store/actions.js

@@ -1,5 +1,7 @@
 import jskos from "jskos-tools"
 import _ from "lodash"
+import util from "../util"
+import axios from "axios"
 
 export default {
 
@@ -45,4 +47,41 @@ export default {
       value: getters.favoriteConcepts.filter(other => !jskos.compare(concept, other))
     })
   },
+
+  checkAuth({ state, commit }) {
+    // Currently only use the first registry that provides authentication.
+    // TODO: Update this as soon as proper authorization is implemented.
+    let registry = state.config.registries.find(registry => registry.auth)
+    if (!registry) {
+      commit({
+        type: "setAuthorized",
+        value: null
+      })
+      return
+    }
+    let loadingId = util.generateID()
+    commit({
+      type: "setAuthorizedLoadingId",
+      value: loadingId
+    })
+    let username = Buffer.from(state.settings.settings.creatorUri).toString("base64")
+    let password = Buffer.from(state.settings.settings.creatorCredentials).toString("base64")
+    axios.get(registry.auth, {
+      auth: { username, password }
+    }).then(() => {
+      // If there is no error, authorization was successful
+      return true
+    }).catch(() => {
+      // If there is an error, authorization was not successful
+      return false
+    }).then(result => {
+      if (state.authorizedLoadingId == loadingId) {
+        commit({
+          type: "setAuthorized",
+          value: result
+        })
+      }
+    })
+  },
+
 }

src/store/index.js

@@ -21,7 +21,9 @@ const state = {
   mousePosition: {
     x: 0,
     y: 0
-  }
+  },
+  authorized: null,
+  authorizedLoadingId: null,
 }
 
 const getters = {
@@ -31,6 +33,9 @@ const getters = {
   favoriteConcepts: (state) => {
     return state.settings.settings.favoriteConcepts || state.config.favoriteConcepts
   },
+  authAvailable: (state) => {
+    return state.config.registries.find(registry => registry.auth) != null
+  },
 }
 
 const mutations = {
@@ -58,7 +63,13 @@ const mutations = {
   },
   setMousePosition(state, { x, y }) {
     state.mousePosition = { x, y }
-  }
+  },
+  setAuthorized(state, { value }) {
+    state.authorized = value
+  },
+  setAuthorizedLoadingId(state, { value }) {
+    state.authorizedLoadingId = value
+  },
 }
 
 const store = new Vuex.Store({
@@ -73,6 +84,14 @@ const store = new Vuex.Store({
 })
 
 // Load settings on first launch.
-store.dispatch("settings/load")
+store.dispatch("settings/load").then(() => {
+  // Check auth once after loading
+  store.dispatch("checkAuth")
+})
+
+// Check auth every 15 seconds
+setInterval(() => {
+  store.dispatch("checkAuth")
+}, 15000)
 
 export default store

src/store/modules/settings.js

@@ -74,7 +74,7 @@ const mutations = {
 // actions
 const actions = {
   load({ commit }) {
-    localforage.getItem("settings").then(settings => {
+    return localforage.getItem("settings").then(settings => {
       let newSettings = Object.assign({}, defaultSettings, settings || {})
       commit({
         type: "loaded"
@@ -83,6 +83,7 @@ const actions = {
         type: "save",
         settings: newSettings
       })
+      return
     })
   }
 }