Skip to content

GitLab

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

added oidc client and implemented login

parent 70b73845
Hide whitespace changes
Inline Side-by-side
config/dev.env.js
View file @ c6e0b9f0
......@@ -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
View file @ c6e0b9f0
......@@ -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
View file @ c6e0b9f0
......@@ -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
View file @ c6e0b9f0
......@@ -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
View file @ c6e0b9f0
<template>
<b-container>
<div align="center">
<h1>Welcome to the Dashboard!</h1>
<p>Here are some infos for you on how to use this interface...</p>
<br />
<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>
<br />
</div>
<b-row align="center">
<b-col sm="3">
<router-link to="shows">
<img src="../assets/applications-multimedia.png">
<p>Schedule your shows</p>
</router-link>
</b-col>
<b-col sm="3">
<router-link to="files">
<img src="../assets/audio-x-generic.png">
<p>Manage files and playlists</p>
</router-link>
</b-col>
<b-col sm="3">
<router-link to="settings">
<img src="../assets/applications-system.png">
<p>Settings</p>
</router-link>
</b-col>
<b-col sm="3">
<router-link to="help">
<img src="../assets/help-browser.png">
<p>Help pages</p>
</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-row align="center">
<b-col sm="3">
<router-link to="shows">
<img src="../assets/applications-multimedia.png">
<p>Schedule your shows</p>
</router-link>
</b-col>
<b-col sm="3">
<router-link to="files">
<img src="../assets/audio-x-generic.png">
<p>Manage files and playlists</p>
</router-link>
</b-col>
<b-col sm="3">
<router-link to="settings">
<img src="../assets/applications-system.png">
<p>Settings</p>
</router-link>
</b-col>
<b-col sm="3">
<router-link to="help">
<img src="../assets/help-browser.png">
<p>Help pages</p>
</router-link>
</b-col>
</b-row>
</b-container>
<!--
All icons used are taken from the Tango Project, which put them into public domain:
......
src/components/LogIn.vue deleted 100644 → 0
View file @ 70b73845
<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
View file @ c6e0b9f0
......@@ -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 0 → 120000
View file @ c6e0b9f0
../node_modules/oidc-client/dist/oidc-client.js
\ No newline at end of file
static/oidc_callback.html 0 → 100644
View file @ c6e0b9f0
<!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>
Markdown is supported
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