added oidc client and implemented login

config/dev.env.js

@@ -5,5 +5,11 @@ const prodEnv = require('./prod.env')
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
   API_STEERING: '"http://127.0.0.1:8000/api/v1/"',
-  API_STEERING_SHOWS: '"http://127.0.0.1:8000/api/v1/shows/"'
+  API_STEERING_SHOWS: '"http://127.0.0.1:8000/api/v1/shows/"',
+  // OIDC endpoint of the pv/steering module
+  API_STEERING_OIDC_URI: '"http://localhost:8000/openid"',
+  // local callback handler that is called by the pv/steering OIDC module after login
+  API_STEERING_OIDC_REDIRECT_URI: '"http://localhost:8080/static/oidc_callback.html"',
+  // address that is called by the pv/steering OIDC module after logout - should be the dashboard entry point
+  API_STEERING_OIDC_REDIRECT_URI_POSTLOGOUT: '"http://localhost:8080"'
 })

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "axios": "^0.17.1",
+    "oidc-client": "^1.4.1",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"
   },

src/App.vue

@@ -9,6 +9,7 @@
 <script>
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
+import oidc from 'oidc-client'
 import header from './components/Header.vue'
 import footer from './components/Footer.vue'
 
@@ -20,7 +21,12 @@ export default {
   },
   data () {
     return {
-      'modules': [
+      modules_logged_out: [
+        { slug: 'home', title: 'Home' },
+        { slug: 'credits', title: 'Credits' },
+        { slug: 'debug', title: 'Debug' }
+      ],
+      modules_logged_in: [
         { slug: 'home', title: 'Home' },
         { slug: 'shows', title: 'Sendungen verwalten' },
         { slug: 'files', title: 'Dateien und Playlists' },
@@ -28,11 +34,69 @@ export default {
         { slug: 'credits', title: 'Credits' },
         { slug: 'debug', title: 'Debug' }
       ],
-      'user': {
-        name: 'jackie',
-        logged_in: true
+      user: {
+        name: '',
+        email: '',
+        access_token: '',
+        logged_in: false
+      },
+      userOIDC: null,
+      mgr: new oidc.UserManager({
+        userStore: new oidc.WebStorageStateStore(),
+        authority: process.env.API_STEERING_OIDC_URI,
+        client_id: '174626',
+        redirect_uri: process.env.API_STEERING_OIDC_REDIRECT_URI,
+        // redirect_uri: process.env.API_STEERING_OIDC_REDIRECT_URI,
+        response_type: 'id_token token',
+        scope: 'openid profile email',
+        post_logout_redirect_uri: process.env.API_STEERING_OIDC_REDIRECT_URI_POSTLOGOUT,
+        loadUserInfo: true
+      })
+    }
+  },
+  computed: {
+    modules: function () {
+      if (this.user.logged_in === true) return this.modules_logged_in
+      else return this.modules_logged_out
+    }
+  },
+  methods: {
+    signIn () {
+      this.mgr.signinRedirect().catch(function (err) {
+        console.log(err)
+      })
+    },
+    signOut () {
+      let self = this
+      this.mgr.signoutRedirect().then(function (resp) {
+        self.user.logged_in = false
+        console.log('signed out', resp)
+      }).catch(function (err) {
+        console.log(err)
+      })
+    },
+    getUser () {
+      let self = this
+      this.mgr.getUser().then(function (u) {
+        if (u == null) {
+          self.user.logged_in = false
+          self.user.name = ''
+          self.user.email = ''
+          self.user.access_token = ''
+        } else {
+          self.userOIDC = u
+          self.user.logged_in = true
+          self.user.name = u.profile.nickname
+          self.user.email = u.profile.email
+          self.user.access_token = u.access_token
         }
+      }).catch(function (err) {
+        console.log(err)
+      })
     }
+  },
+  mounted () {
+    this.getUser()
   }
 }
 </script>

src/components/Header.vue

@@ -34,9 +34,9 @@
                 </template>
                 <b-dropdown-item href="#">Settings</b-dropdown-item>
                 <b-dropdown-item href="#">Profile</b-dropdown-item>
-                <b-dropdown-item href="#">Signout</b-dropdown-item>
+                <b-dropdown-item @click='$parent.signOut'>Signout</b-dropdown-item>
               </b-nav-item-dropdown>
-              <b-nav-item v-if="! user.logged_in" href="login"><img src="../assets/16x16/system-users.png" alt="log-in symbol" title="Log in" v-on:click="user.logged_in = !user.logged_in"></b-nav-item>
+              <b-nav-item v-if="! user.logged_in" to="login"><img src="../assets/16x16/system-users.png" alt="log-in symbol" title="Log in"></b-nav-item>
               <div class="help-image-container">
                 <b-nav-item>
                   <router-link to="help"><img class="help-image" src="../assets/help-browser-32x32.png" alt="Help symbol" title="Go to help pages"></router-link>

src/components/Home.vue

 <template>
   <b-container>
+    <div v-if="$parent.user.logged_in === true">
       <div align="center">
         <h1>Welcome to the Dashboard!</h1>
         <p>Here are some infos for you on how to use this interface...</p>
@@ -31,6 +32,11 @@
           </router-link>
         </b-col>
       </b-row>
+    </div>
+    <div v-else align="center">
+      <p>You are not logged in yet.</p>
+      <b-button size="lg" variant="outline-secondary" @click="$parent.signIn">Log in</b-button>
+    </div>
   </b-container>
   <!--
   All icons used are taken from the Tango Project, which put them into public domain:

src/components/LogIn.vue

-<template>
-  <b-container align="center">
-    <h1>Log in</h1>
-    <br /><br />
-    <div style="border: 5px dotted #5c3566;">
-      <br /><br />
-      <p><b>By the mighty witchcraftry of the mother of time!</b></p>
-      <p>This feature is not implemented yet.</p>
-      <p style="color: #ad7fa8;">But we are nice, we've logged you in automatically</p>
-      <br /><br />
-    </div>
-  </b-container>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-
-    }
-  }
-}
-</script>
-
-<style>
-
-</style>

src/router/index.js

@@ -2,7 +2,6 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Home from '@/components/Home'
 import Help from '@/components/Help'
-import LogIn from '@/components/LogIn'
 import Credits from '@/components/Credits'
 import Settings from '@/components/Settings'
 import ShowManager from '@/components/ShowManager'
@@ -16,7 +15,6 @@ export default new Router({
     { path: '/', alias: '/home', name: 'home', component: Home },
     { path: '/shows', name: 'shows', component: ShowManager },
     { path: '/files', name: 'files', component: FileManager },
-    { path: '/login', name: 'login', component: LogIn },
     { path: '/help', name: 'help', component: Help },
     { path: '/settings', name: 'settings', component: Settings },
     { path: '/credits', name: 'credits', component: Credits },

static/oidc-client.js

+../node_modules/oidc-client/dist/oidc-client.js
\ No newline at end of file

static/oidc_callback.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Waiting...</title>
+</head>
+
+<body>
+  <script src="oidc-client.js"></script>
+  <script>
+    var mgr = new Oidc.UserManager({userStore: new Oidc.WebStorageStateStore()})
+    mgr.signinRedirectCallback().then(function (user) {
+      window.location.href = '../'
+    }).catch(function (err) {
+      console.log(err)
+    })
+  </script>
+</body>
+
+</html>