Commit c6e0b9f0 authored by Andrea Ida Malkah Klaura's avatar Andrea Ida Malkah Klaura
Browse files

added oidc client and implemented login

parent 70b73845
......@@ -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"'
})
......@@ -15,6 +15,7 @@
},
"dependencies": {
"axios": "^0.17.1",
"oidc-client": "^1.4.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
......
......@@ -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>
......
......@@ -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>
......
<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:
......
<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>
......@@ -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 },
......
../node_modules/oidc-client/dist/oidc-client.js
\ No newline at end of file
<!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>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment