Skip to content
GitLab
Commit 8970142c authored by Richard Blechinger's avatar Richard Blechinger
Browse files

Auth wall and permission implementation. Minor cleanups in design

parent 8ba13dab
Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ 8970142c
......@@ -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",
......
public/index.html
View file @ 8970142c
......@@ -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>
......
src/App.vue
View file @ 8970142c
<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>
src/Pages/AddOrEditPlaylist.vue
View file @ 8970142c
......@@ -488,7 +488,6 @@
editPlaylist() {
let playlist = this.getPlaylistById(this.id);
console.log("AAAAA", playlist);
if (!playlist) {
this.$router.push({ name: 'addPlaylist' })
......
src/Pages/EmissionManager.vue
View file @ 8970142c
<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()
......
src/Pages/Home.vue
View file @ 8970142c
<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>
......
src/Pages/Settings.vue
View file @ 8970142c
<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>
......
src/components/AuthWall.vue 0 → 100644
View file @ 8970142c
<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>
src/components/Footer.vue
View file @ 8970142c
<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>
src/components/Header.vue
View file @ 8970142c
<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"