added admin groups and working user deletion, etc.

src/App.vue

@@ -4,6 +4,7 @@
             <img src="./assets/lens.jpg" alt="">
         </div>
         <sync-loader :loading="isLoading"></sync-loader>
+      <!--
         <b-alert
                 :show="dismissCountDown"
                 dismissible
@@ -19,6 +20,22 @@
                     height="4px"
             ></b-progress>
         </b-alert>
+      <b-alert
+          :show="messageDismissCountDown"
+          dismissible
+          variant="info"
+          @dismissed="messageDismissCountDown=0"
+          @dismiss-count-down="messageCountDownChanged"
+      >
+        {{message}}
+        <b-progress
+            variant="info"
+            :max="messageDismissSecs"
+            :value="messageDismissCountDown"
+            height="4px"
+        ></b-progress>
+      </b-alert>-->
+
         <div id="nav">
             <b-navbar toggleable="lg" type="dark" variant="dark">
                 <b-navbar-brand to="/">
@@ -47,7 +64,8 @@
 
                         <b-nav-item-dropdown split split-to="admin" v-if="authenticated" variant="outline-danger" :text="$t('admin')">
                             <b-dropdown-item :to="{name: 'admin.users'}">{{ $t('users') }}</b-dropdown-item>
-                            <b-dropdown-item :to="{name: 'admin.group'}">{{ $t('group') }}</b-dropdown-item>
+                            <b-dropdown-item :to="{name: 'admin.group'}">{{ $t('groups') }}</b-dropdown-item>
+                            <b-dropdown-item :to="{name: 'admin.permission'}">{{ $t('permissions') }}</b-dropdown-item>
                             <b-dropdown-item href="#">Something else here...</b-dropdown-item>
                         </b-nav-item-dropdown>
 
@@ -78,6 +96,9 @@
             </span>
             <span v-else>{{$t('Can\'t renew session – please login again!')}}</span>
         </div>
+    <div>
+
+    </div>
         <div id="content_frame">
             <router-view :style="main_style"/>
         </div>
@@ -102,9 +123,12 @@
                 refreshTokenValidity: -1,
                 showAlert: true,
                 alertMessage: 'NO MESSAGE PROVIDED',
+                message: 'NO MESSAGE PROVIDED',
                 langs: ['de', 'en', 'es'],
                 dismissSecs: 5,
                 dismissCountDown: 0,
+                messageDismissSecs: 5,
+                messageDismissCountDown: 0,
                 autoRenewSession: true,
                 main_style: {}
             };
@@ -114,10 +138,31 @@
                 this.isLoading = false;
                 this.dismissCountDown = this.dismissSecs;
                 this.alertMessage = msg;
+                this.makeToast(msg, 'error')
             },
             countDownChanged(dismissCountDown) {
                 this.dismissCountDown = dismissCountDown;
             },
+          showMessage(msg, dismissTime=null) {
+            this.isLoading = false;
+            if(dismissTime == null) this.messageDismissCountDown = this.messageDismissSecs;
+            else {
+              this.messageDismissSecs = dismissTime;
+              this.messageDismissCountDown = dismissTime;
+            }
+            if(typeof msg === 'object' && msg !== null){
+              if("time" in msg) {
+                this.messageDismissCountDown = msg['time'];
+                this.messageDismissSecs = msg['time'];
+              }
+              if("msg" in msg) msg = msg['msg'];
+            }
+            this.message = msg;
+            this.makeToast(msg, 'info')
+          },
+          messageCountDownChanged(dismissCountDown) {
+            this.messageDismissCountDown = dismissCountDown;
+          },
 
             logout() {
                 this.$store.dispatch('logout', {revokeRefreshToken: true});
@@ -130,6 +175,24 @@
                 this.$i18n.locale=lang;
                 localize(lang);
             },
+            makeToast(message, variant = null, hide_time=5000, title = null) {
+              if(title == null){
+                let now = new Date();
+                if(variant == null){
+                  title = this.$t('message from') + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
+                } else {
+                  title = this.$t(variant) + " (" + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() + ")";
+                }
+              }
+              if(variant === 'error') variant = 'danger';
+              this.$bvToast.toast(message, {
+                title: title,
+                toaster: 'b-toaster-bottom-right',
+                autoHideDelay: hide_time,
+                variant: variant,
+                appendToast: false
+              })
+            },
         },
         mounted() {
             EventBus.$on('failedLoadingRecorders', (msg) => {
@@ -141,6 +204,12 @@
             EventBus.$on('failedRefreshingToken', (msg) => {
                 this.refreshFailed = true;
             });
+            EventBus.$on('errorMessage', (msg)=> {
+              this.showErrorMessage(msg);
+            })
+            EventBus.$on('normalMessage', (msg)=> {
+              this.showMessage(msg);
+            })
             this.$nextTick(() => {
                 window.setInterval(() => {
                     const tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);