slight changes to Profile.vue to display role, groups, etc.

src/App.vue

@@ -1,12 +1,23 @@
 <template>
     <div id="app">
         <sync-loader :loading="isLoading"></sync-loader>
-        <b-alert v-model="showAlert" variant="danger" dismissible>
+        <b-alert
+                :show="dismissCountDown"
+                dismissible
+                variant="danger"
+                @dismissed="dismissCountDown=0"
+                @dismiss-count-down="countDownChanged"
+        >
             {{alertMessage}}
+            <b-progress
+                    variant="error"
+                    :max="dismissSecs"
+                    :value="dismissCountDown"
+                    height="4px"
+            ></b-progress>
         </b-alert>
-
         <div id="nav">
-            <b-navbar toggleable="lg" type="dark" variant="info">
+            <b-navbar toggleable="lg" type="dark" variant="dark">
                 <b-navbar-brand to="/">
                     <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten">
                     LRC - <strong>L</strong>ecture <strong>R</strong>ecord <strong>C</strong>ontrol
@@ -17,11 +28,13 @@
                 <b-collapse id="nav-collapse" is-nav>
                     <b-navbar-nav>
                         <b-nav-item to="/about">About</b-nav-item>
-                        <b-nav-item to="/login" >Login</b-nav-item>
+                        <b-nav-item v-if="authenticated" to="/logout">Logout</b-nav-item>
+                        <b-nav-item v-else="authenticated" to="/login">Login</b-nav-item>
 
                         <b-nav-item :to="{name: 'rooms'}">{{ $t('Rooms') }}</b-nav-item>
                         <b-nav-item :to="{name: 'recorders'}">{{ $t('Recorders') }}</b-nav-item>
                         <b-nav-item :to="{name: 'commands'}">{{ $t('Commands') }}</b-nav-item>
+                        <b-nav-item :to="{name: 'test'}">{{ $t('Test') }}</b-nav-item>
                     </b-navbar-nav>
 
                     <!-- Right aligned nav items -->
@@ -32,21 +45,22 @@
                         </b-nav-form>
 
                         <b-nav-item-dropdown split split-to="admin" variant="outline-danger" :text="$t('admin')">
-                            <b-dropdown-item to="user">{{ $t('user') }}</b-dropdown-item>
-                            <b-dropdown-item to="group">{{ $t('group') }}</b-dropdown-item>
+                            <b-dropdown-item :to="{name: 'admin.user'}">{{ $t('user') }}</b-dropdown-item>
+                            <b-dropdown-item :to="{name: 'admin.group'}">{{ $t('group') }}</b-dropdown-item>
                             <b-dropdown-item href="#">Something else here...</b-dropdown-item>
                         </b-nav-item-dropdown>
 
                         <b-nav-item-dropdown text="Lang" right>
                             <b-dropdown-item v-for="(lang, i) in langs"
                                              v-bind:key="lang"
-                                             @click="$i18n.locale=lang">{{ lang }}</b-dropdown-item>
+                                             @click="$i18n.locale=lang">{{ lang }}
+                            </b-dropdown-item>
                         </b-nav-item-dropdown>
 
                         <b-nav-item-dropdown right>
                             <!-- Using 'button-content' slot -->
                             <template slot="button-content"><em>User</em></template>
-                            <b-dropdown-item to="/profile">Profile</b-dropdown-item>
+                            <b-dropdown-item :to="{name: 'profile'}">Profile</b-dropdown-item>
                             <b-dropdown-item to="/logout">Sign Out</b-dropdown-item>
                         </b-nav-item-dropdown>
                     </b-navbar-nav>
@@ -77,14 +91,19 @@
                 showAlert: true,
                 alertMessage: 'NO MESSAGE PROVIDED',
                 langs: ['de', 'en', 'es'],
+                dismissSecs: 5,
+                dismissCountDown: 0,
             };
         },
         methods: {
             showErrorMessage(msg) {
                 this.isLoading = false;
-                this.showAlert = true;
+                this.dismissCountDown = this.dismissSecs;
                 this.alertMessage = msg;
             },
+            countDownChanged(dismissCountDown) {
+                this.dismissCountDown = dismissCountDown;
+            },
         },
         mounted() {
             EventBus.$on('failedLoadingRecorders', (msg) => {
@@ -107,6 +126,14 @@
 
 
         },
+        computed: {
+            authenticated() {
+                return this.$store.getters.isAuthenticated;
+            },
+            profile() {
+                return this.$store.state.profile;
+            },
+        }
     };
 </script>
 
@@ -121,11 +148,12 @@
     }
 
     #nav {
-        padding: 30px;
+        padding: 0px;
         text-align: center;
+
         a {
             font-weight: bold;
-            color: #2c3e50;
+            color: #7ea8d6;
 
             &.router-link-exact-active {
                 color: #42b983;
@@ -156,6 +184,6 @@
         left: 0;
         width: 100%;
         height: 100%;
-        background-color: rgba(0,0,0,0.2);
+        background-color: rgba(0, 0, 0, 0.2);
     }
 </style>

src/components/Login.vue

@@ -88,6 +88,7 @@
             });
             EventBus.$on('storedTokens', () => {
                 this.$store.dispatch('loadUsers');
+                this.$store.dispatch('loadProfile');
             });
 
             this.$store.dispatch('loadLoginProviders');

src/components/Profile.vue

@@ -39,12 +39,15 @@
 
                     </div>
 
-
                     <hr/>
 
                     <p><strong>{{$t('first_name')}}:&nbsp</strong>{{profile.first_name}}</p>
                     <p><strong>{{$t('last_name')}}:&nbsp</strong>{{profile.last_name}}</p>
 
+                    <hr/>
+                    <p v-if="profile.role"><strong>{{$t('role')}}:&nbsp</strong>{{profile.role}}</p>
+                    <p><strong>{{$t('groups')}}:&nbsp</strong><span v-for="g in profile.groups">{{g.name}}, </span></p>
+                    <p><strong>{{$t('permissions')}}:&nbsp</strong><span v-for="p in profile.effective_permissions">{{p}}</span></p>
 
                     <hr/>
 

src/components/Test.vue

@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <b-alert
+                :show="dismissCountDown"
+                dismissible
+                variant="warning"
+                @dismissed="dismissCountDown=0"
+                @dismiss-count-down="countDownChanged"
+        >
+            This alert will dismiss after {{ dismissCountDown }} seconds...
+        </b-alert>
+        <b-button @click="showAlert" variant="info" class="m-1">
+            Show alert with count-down timer
+        </b-button>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                dismissSecs: 5,
+                dismissCountDown: 0,
+            }
+        },
+        methods: {
+            countDownChanged(dismissCountDown) {
+                this.dismissCountDown = dismissCountDown;
+            },
+            showAlert() {
+                this.dismissCountDown = this.dismissSecs;
+            },
+        }
+    }
+</script>

src/router.ts

@@ -8,6 +8,7 @@ import Login from '@/components/Login.vue';
 import Admin from '@/components/Admin.vue';
 import Profile from '@/components/Profile.vue';
 import User from '@/components/User.vue';
+import Test from '@/components/Test.vue';
 import Group from '@/components/Group.vue';
 import Rooms from '@/components/Rooms.vue';
 import Recorders from '@/components/Recorders.vue';
@@ -67,6 +68,10 @@ export const router = new Router({
             path: '/recorders',
             name: 'recorders',
             component: Recorders,
+        }, {
+            path: '/test',
+            name: 'test',
+            component: Test,
         }, {
             path: '/commands',
             name: 'commands',
@@ -84,7 +89,7 @@ export const router = new Router({
             },
         }, {
             path: '/profile',
-            name: 'Profile',
+            name: 'profile',
             component: Profile,
             beforeEnter(to, from, next) {
                 if (!store.getters.isAuthenticated) {

src/store.ts

@@ -313,6 +313,13 @@ const getters = {
     getLoginProviders(sState: any) {
         return sState.loginProviders;
     },
+    hasAccessRight(sState: any) {
+        (requested_permission: string) => {
+            return sState.profile.effective_permissions.find((permission: any) => {
+                permission.name === requested_permission
+            });
+        };
+    },
 };
 
 const store = new Vuex.Store({