Merge branch 'master' of ubkavh-192.ubka.uni-karlsruhe.de:kbtoku/lrc-frontend

.env

@@ -1 +1 @@
-API_URL="http://localhost:5000s"
+API_URL="http://localhost:5000"

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="{name: 'admin.user'}">{{ $t('user') }}</b-dropdown-item>
-                            <b-dropdown-item to="group">{{ $t('group') }}</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

@@ -1,6 +1,18 @@
-<!-- components/Profile.vue -->
+<!-- components/Test.vue -->
 <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>
         <h1>Toller Test</h1>
         <span>{{ $socket.connected ? 'Connected' : 'Disconnected' }}</span>
         <button v-if="$socket.connected" @click="disconnectWebsocket">Disconnect</button>
@@ -9,16 +21,20 @@
             <button v-if="$socket.connected" @click="sendWsMessage('Tolle Test Nachricht')">Send Message</button>
         </p>
 
+
     </div>
 </template>
 
 <script>
+
     import {EventBus} from '@/utils';
 
     export default {
         data() {
             return {
                 email: '',
+                dismissSecs: 5,
+                dismissCountDown: 0,
 
             };
         },
@@ -27,18 +43,24 @@
                 this.$i18n.locale = locale;
                 // Vue.$moment.locale(locale);
             },
-            sendWsMessage(msg){
+            sendWsMessage(msg) {
-                console.log("sending msg: "+ msg);
+                console.log("sending msg: " + msg);
                 this.$socket.client.emit('my_event', msg, (resp) => {
                     console.log(resp);
                 });
             },
-            connectWebsocket(){
+            connectWebsocket() {
                 this.$socket.client.connect();
             },
-            disconnectWebsocket(){
+            disconnectWebsocket() {
                 this.$socket.client.disconnect();
-            }
+            },
+            countDownChanged(dismissCountDown) {
+                this.dismissCountDown = dismissCountDown;
+            },
+            showAlert() {
+                this.dismissCountDown = this.dismissSecs;
+            },
         },
         mounted() {
             this.$socket.client.on('my_event', (msg) => {
@@ -71,6 +93,7 @@
         color: red;
         font-weight: bold;
     }
+
     .lang-btn {
         padding: 15px;
         border: 2px solid green;

src/router.ts

@@ -8,11 +8,11 @@ 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';
 import Commands from '@/components/Commands.vue';
-import Test from '@/components/Test.vue';
 import store from '@/store';
 
 
@@ -28,11 +28,6 @@ export const router = new Router({
             name: 'home',
             component: Home,
         },
-        {
-            path: '/test',
-            name: 'test',
-            component: Test,
-        },
         {
             path: '/login',
             name: 'login',
@@ -74,6 +69,10 @@ export const router = new Router({
             path: '/recorders',
             name: 'recorders',
             component: Recorders,
+        }, {
+            path: '/test',
+            name: 'test',
+            component: Test,
         }, {
             path: '/commands',
             name: 'commands',
@@ -91,7 +90,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({