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

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>