Commit 8970142c authored by Richard Blechinger's avatar Richard Blechinger
Browse files

Auth wall and permission implementation. Minor cleanups in design

parent 8ba13dab
......@@ -8077,9 +8077,9 @@
}
},
"jquery": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
"integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
"integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
},
"js-levenshtein": {
"version": "1.1.6",
......@@ -13548,6 +13548,11 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"vue-toast-notification": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/vue-toast-notification/-/vue-toast-notification-0.6.0.tgz",
"integrity": "sha512-GSXLTemx/+YLDpeObuMcz+gQ6NxvBcJxGhj5PB8CZDDBUQWbeAp0ZUPZEixDun/GtbxBOA9jLxo4MFPHTbIBYw=="
},
"vuejs-logger": {
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/vuejs-logger/-/vuejs-logger-1.5.4.tgz",
......
......@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>dboard</title>
<title>AURA Dashboard</title>
</head>
<body>
<noscript>
......
<template>
<div id="app" class="tw-flex tw-flex-col tw-min-h-screen" :key="localeKey">
<app-header
:modules="modules"
:user="user"
/>
<div class="tw-flex-1 tw-flex tw-my-8">
<router-view/>
</div>
<div id="app" class="tw-flex tw-flex-col tw-min-h-screen" :key="localeKey">
<app-header
:modules="modules"
:user="user"
/>
<div class="tw-flex-1 tw-flex tw-my-8">
<router-view :modules="modules" :user="user"/>
</div>
<app-footer />
</div>
<app-footer :modules="modules"/>
</div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { translationVm } from '@/plugins/translation'
import header from './components/Header.vue'
import footer from './components/Footer.vue'
export default {
name: 'App',
components: {
'app-header': header,
'app-footer': footer
},
computed: {
userOIDC () { return this.$store.state.auth.userOIDC },
user () { return this.$store.state.auth.user },
localeKey: () => translationVm.activeLocale,
modules: function () {
// Logged out
let modules = [
{ slug: 'home', title: this.$t('navigation.home') },
]
if (this.user.logged_in === true) {
modules = (this.user.steeringUser && this.user.steeringUser.is_superuser)
// Super user
? [ { slug: 'home', title: this.$t('navigation.home') },
{ slug: 'shows', title: this.$t('navigation.shows') },
{ slug: 'files', title: this.$t('navigation.filesPlaylists') },
{ slug: 'calendar', title: this.$t('navigation.calendar') }, ]
// Regular user
: [ { slug: 'home', title: this.$t('navigation.home') },
{ slug: 'shows', title: this.$t('navigation.shows') },
{ slug: 'files', title: this.$t('navigation.filesPlaylists') }, ]
}
return modules
},
},
created () {
this.$store.dispatch('auth/oidcInit')
},
methods: {
signIn () {
this.$store.dispatch('auth/signinRedirect')
},
signOut () {
this.$store.dispatch('auth/signoutRedirect')
},
}
}
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import {translationVm} from '@/plugins/translation'
import header from './components/Header.vue'
import footer from './components/Footer.vue'
export default {
name: 'App',
components: {
'app-header': header,
'app-footer': footer
},
computed: {
userOIDC() {
return this.$store.state.auth.userOIDC
},
user() {
return this.$store.state.auth.user
},
localeKey: () => translationVm.activeLocale,
modules: function () {
// Logged out
let modules = []
// All icons used are taken from the Tango Project, which put them into public domain:
// http://tango.freedesktop.org
if (this.user.logged_in === true) {
modules = (this.user.steeringUser && this.user.steeringUser.is_superuser)
// Super user
? {
main: [
{
icon: '/assets/applications-multimedia.png',
slug: 'shows',
title: this.$t('navigation.shows')
},
{
icon: '/assets/audio-x-generic.png',
slug: 'files',
title: this.$t('navigation.filesPlaylists')
},
{
icon: '/assets/x-office-calendar.png',
slug: 'calendar',
title: this.$t('navigation.calendar')
},
],
footer: [
{
slug: 'settings',
title: this.$t('navigation.settings'),
},
{
slug: 'help',
title: this.$t('navigation.help'),
}
]
}
// Regular user
: {
main: [
{
icon: '/assets/applications-multimedia.png',
slug: 'shows',
title: this.$t('navigation.shows')
},
{
icon: '/assets/audio-x-generic.png',
slug: 'files',
title: this.$t('navigation.filesPlaylists')
},
],
footer: [
{
slug: 'help',
title: this.$t('navigation.help'),
}
]
}
}
return modules
},
},
created() {
this.$store.dispatch('auth/oidcInit')
},
methods: {
signIn() {
this.$store.dispatch('auth/signinRedirect')
},
signOut() {
this.$store.dispatch('auth/signoutRedirect')
},
}
}
</script>
<style>
html, body {
min-height: 100vh;
}
#app {
color: #2e3436;
}
/*
#app .content-width {
margin: auto;
width: 920px;
max-width: 920px;
}
*/
html, body {
min-height: 100vh;
}
#app {
color: #2e3436;
}
/*
#app .content-width {
margin: auto;
width: 920px;
max-width: 920px;
}
*/
</style>
......@@ -488,7 +488,6 @@
editPlaylist() {
let playlist = this.getPlaylistById(this.id);
console.log("AAAAA", playlist);
if (!playlist) {
this.$router.push({ name: 'addPlaylist' })
......
<template>
<auth-wall>
<b-container>
<show-selector
ref="showSelector"
......@@ -92,21 +93,25 @@
ref="appModalEmissionManagerEdit"
/>
</b-container>
</auth-wall>
</template>
<script>
import { mapGetters } from 'vuex'
import { FullCalendar } from 'vue-full-calendar'
import 'fullcalendar/dist/fullcalendar.css'
import showSelector from '../components/ShowSelector.vue'
import modalEmissionManagerCreate from '../components/emissions/ModalCreate.vue'
import modalEmissionManagerResolve from '../components/emissions/ModalResolve.vue'
import modalEmissionManagerEdit from '../components/emissions/ModalEdit.vue'
import rrules from '../mixins/rrules'
import showSelector from '@/components/ShowSelector.vue'
import modalEmissionManagerCreate from '@/components/emissions/ModalCreate.vue'
import modalEmissionManagerResolve from '@/components/emissions/ModalResolve.vue'
import modalEmissionManagerEdit from '@/components/emissions/ModalEdit.vue'
import AuthWall from '@/components/AuthWall.vue'
import rrules from '@/mixins/rrules'
export default {
components: {
FullCalendar,
AuthWall,
'show-selector': showSelector,
'app-modalEmissionManagerCreate': modalEmissionManagerCreate,
'app-modalEmissionManagerResolve': modalEmissionManagerResolve,
......@@ -177,6 +182,8 @@ export default {
},
created () {
this.$store.dispatch('shows/fetchShows', {
callback: () => {
this.showHasSwitched()
......
<template>
<b-container class="tw-self-center">
<div v-if="$parent.user.logged_in === true">
<div align="center">
<h1>{{ $t('home.welcome') }}</h1>
<p>Here are some infos for you on how to use this interface...</p>
<br>
</div>
<b-container class="tw-self-center">
<div v-if="$parent.user.logged_in === true">
<div align="center">
<h1>{{ $t('home.welcome') }}</h1>
<p>Here are some infos for you on how to use this interface...</p>
<br>
</div>
<div class="tw-mx-auto tw-max-w-4xl tw-grid sm:tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-8 tw-text-center">
<router-link to="shows">
<img src="/assets/applications-multimedia.png">
<p>Schedule your shows</p>
</router-link>
<router-link to="files">
<img src="/assets/audio-x-generic.png">
<p>Manage files and playlists</p>
</router-link>
<router-link to="settings">
<img src="/assets/applications-system.png">
<p>Settings</p>
</router-link>
<router-link to="help">
<img src="/assets/help-browser.png">
<p>Help pages</p>
</router-link>
</div>
</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:
http://tango.freedesktop.org
-->
<div :class="{
'tw-mx-auto tw-grid sm:tw-grid-cols-2 tw-gap-8 tw-text-center': true,
'md:tw-grid-cols-3 tw-max-w-3xl': $parent.user.steeringUser.is_superuser,
'md:tw-grid-cols-2 tw-max-w-lg': !$parent.user.steeringUser.is_superuser
}">
<router-link v-for="mod in modules.main" :to="mod.slug" :key="mod.slug">
<img :src="mod.icon">
<p>{{ mod.title }}</p>
</router-link>
</div>
</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>
</template>
<script>
export default {}
export default {
props: ['user', 'modules']
}
</script>
<style>
......
<template>
<b-container align="center">
<h1>Dashboard Settings</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>
<br><br>
</div>
</b-container>
<auth-wall>
<b-container align="center">
<h1>Dashboard Settings</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>
<br><br>
</div>
</b-container>
</auth-wall>
</template>
<script>
export default {}
import AuthWall from '@/components/AuthWall'
export default {
components: { AuthWall }
}
</script>
<style>
......
<template>
<div v-if="$store.state.auth.user.steeringUser" class="tw-w-full">
<slot></slot>
</div>
<div v-else class="tw-w-full tw-text-center">
{{ $t('loading') }}
</div>
</template>
<script>
export default {
created() {
const user = this.$store.state.auth.user.steeringUser;
// We might not have a user at load-time.
// In this case wait until the store gives us one.
if (user === null) {
this.$store.watch(
(state) => state.auth.user.steeringUser,
(user) => this.redirectToHome(user)
)
return;
}
this.redirectToHome(user);
},
methods: {
redirectToHome(user) {
if (!user.is_superuser) {
this.$toast.error(this.$t('auth.permissionError'), { position: 'bottom-left' })
this.$router.push({ name: 'home' })
}
}
}
}
</script>
<template>
<footer class="tw-p-2 tw-bg-gray-800">
<b-container>
<b-row>
<b-col>
aura/<b>dashboard v{{ version }}</b> |
<router-link to="/credits">
Credits
</router-link>
</b-col>
<b-col align="right">
{{ $t('footer.tagline') }}
</b-col>
</b-row>
</b-container>
</footer>
<footer class="tw-p-2 tw-bg-gray-800">
<b-container>
<b-row>
<b-col>
aura/<b>dashboard v{{ version }}</b>
<span v-for="mod in modules.footer" :key="mod.slug">
| <router-link :to="mod.slug">
{{ mod.title }}
</router-link>
</span>
| <router-link to="/credits">
Credits
</router-link>
</b-col>
<b-col align="right">
{{ $t('footer.tagline') }}
</b-col>
</b-row>
</b-container>
</footer>
</template>
<script>
export default {
computed: {
version() {
console.log(process.env)
return process.env.VUE_APP_VERSION
export default {
props: ["modules"],
computed: {
version() {
return process.env.VUE_APP_VERSION
}
}
}
}
}
</script>
<style scoped>
footer {
border-top: 1px solid #2e3436;
color: rgba(255, 255, 255, 0.5);
width: 100%;
margin-top: auto;
}
footer {
border-top: 1px solid #2e3436;
color: rgba(255, 255, 255, 0.5);
width: 100%;
margin-top: auto;
}
a {
color: #cc149e;
}
a {
color: #cc149e;
}
</style>
<template>
<header class="tw-bg-gray-800">
<div>
<b-container>
<b-navbar
toggleable="lg"
type="dark"
class="tw-text-white tw-flex"
>
<span class="d-none d-sm-inline d-lg-none menu-context-info">For more options tap the menu button on the right:</span>
<span class="d-sm-none menu-context-info">Hit menu button for more:</span>
<b-navbar-toggle target="nav_collapse" />
<b-collapse
id="nav_collapse"
is-nav
class="tw-flex tw-items-center tw-justify-between"
>
<b-navbar-nav class="tw-flex tw-items-center">
<b-nav-item to="/home">
<img
class="header-logo tw-h-12"
src="/assets/aura-dashboard-200-nobackground.png"
>
</b-nav-item>
<header class="tw-bg-gray-800">
<div>
<b-container>
<b-navbar
toggleable="lg"
type="dark"
class="tw-text-white tw-flex"
>
<span class="d-none d-sm-inline d-lg-none menu-context-info">For more options tap the menu button on the right:</span>
<span class="d-sm-none menu-context-info">Hit menu button for more:</span>
<b-navbar-toggle target="nav_collapse"/>
<b-collapse
id="nav_collapse"
is-nav
class="tw-flex tw-items-center tw-justify-between"
>
<b-navbar-nav class="tw-flex tw-items-center">
<b-nav-item to="/home">
<img
class="header-logo tw-h-12"
src="/assets/aura-dashboard-200-nobackground.png"
>
</b-nav-item>
<b-nav-item
v-for="mod in modules"
:key="mod.slug"
:active="mod.slug === $route.name"
:to="'/' + mod.slug"
>
{{ mod.title }}