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>
 
@@ -77,6 +95,9 @@
                 <label for="auto_renew_cb">{{$t('auto renew session')}}</label>
             </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"/>
@@ -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);

src/api/Repository.js

@@ -50,6 +50,9 @@ api.interceptors.response.use(function (response) {
     return response;
 }, function (error) {
     if (401 === error.response.status || 422 === error.response.status) {
+        if(store.getters.isAuthenticated){  // if 401 even though the token is valid, the user might have been deleted, etc.
+            store.dispatch('resetToken');
+        }
         Vue.swal({
             title: "Session Expired",
             text: "Your token/session has expired. Would you like to be redirected to the login page?",
@@ -65,8 +68,11 @@ api.interceptors.response.use(function (response) {
             }
         });
     } else {
-        console.error(error);
+        //console.error(error);
-        return Promise.reject(error);
+        //console.error(error.response);
+        console.error(error.response.data.message);
+        //return Promise.reject(error);
+        return Promise.reject(error.response);
     }
 });
 

src/api/userRepository.ts

@@ -17,6 +17,10 @@ export default {
     return Repository.get(`${resource}/${userId}`);
   },
 
+  deleteUser(userId: number) {
+    return Repository.delete(`${resource}/${userId}`);
+  },
+
   createUser(userData: any) {
     return Repository.post(`${resource}`, userData);
   },

src/components/Admin.vue

@@ -6,16 +6,16 @@
                 <div class="container has-text-centered">
                     <h2 class="title">Admin Tools</h2>
                     <p class="subtitle error-msg">{{ errorMsg }}</p>
-                    <router-link :to="{ name: 'admin.group'}">{{ $t('group') }}</router-link>
+                    <router-link :to="{ name: 'admin.groups'}">{{ $t('groups') }}</router-link>
                     <br>
-                    <router-link :to="{ name: 'admin.users'}">{{ $t('user') }}</router-link>
+                    <router-link :to="{ name: 'admin.users'}">{{ $t('users') }}</router-link>
                     <br>
-                    <router-link :to="{ name: 'admin.permission'}">{{ $t('permission') }}</router-link>
+                    <router-link :to="{ name: 'admin.permission'}">{{ $t('permissions') }}</router-link>
                 </div>
             </div>
         </section>
 
-        <hr/>
+        <br/>
         <section>
             <router-view></router-view>
         </section>

src/components/Admin/Group.vue

@@ -1,48 +1,42 @@
-<!-- components/Group.vue -->
+<!-- components/groups.vue -->
 <template>
   <div>
     <section class="hero is-primary">
       <div class="hero-body">
         <div class="container has-text-centered">
-                    <h2 class="title">Groups</h2>
+          <h3>
+            <div class="text-center">
+              <font-awesome-icon class="float-left" icon="arrow-circle-left" @click="previousgroup()"/>
+              <input type="number" style="font-size: small; max-width: 48px; text-align: center;"
+                     v-model="new_group_id" @blur="manually_set_group_id()"
+                     @input="manually_set_group_id()">
+              <font-awesome-icon class="float-right" icon="arrow-circle-right" @click="nextgroup()"/>
+            </div>
+          </h3>
 
+          <h3 class="title">{{ group.id }} – {{ group.name }}</h3>
 
-                    <div id="groupTable">
+          <p><strong>{{ $t('nickname') }}:&nbsp</strong>{{ group.nickname }}</p>
-                        <table>
+          <p><strong>{{ $t('first_name') }}:&nbsp</strong>{{ group.first_name }}</p>
-                            <thead>
+          <p><strong>{{ $t('last_name') }}:&nbsp</strong>{{ group.last_name }}</p>
-                            <tr>
+
-                                <th v-for="col in group_columns" v-on:click="sortTable(col)">{{col}}
+          <hr/>
-                                    <div class="arrow" v-if="col == sortColumn"
+          <!--<p v-if="profile.role"><strong>{{$t('role')}}:&nbsp</strong>{{profile.role}}</p>-->
-                                         v-bind:class="[ascending ? 'arrow_up' : 'arrow_down']"></div>
+          <p><strong>{{ $t('role') }}:&nbsp</strong><span v-if="group.role">{{ group.role }}</span><span
-                                </th>
+              v-else>{{ $t('no specific role') }}</span></p>
-                            </tr>
+          <p><strong>{{ $t('groups') }}:&nbsp</strong><span v-for="g in group.groups">{{ g.name }}, </span></p>
-                            </thead>
+          <p><strong>{{ $t('permissions') }}:&nbsp</strong></p>
-                            <tbody>
+          <ul>
-                            <tr v-for="row in get_group_rows()">
+            <li v-for="p in group.effective_permissions">{{ p.name }}</li>
-                                <td v-for="col in group_columns">{{row[col]}}</td>
+          </ul>
-                            </tr>
+
-                            </tbody>
+          <hr/>
-                        </table>
-                        <div class="pagination">
-                            <div class="number"
-                                 v-for="i in num_group_pages()"
-                                 v-bind:class="[i == currentPage ? 'active' : '']"
-                                 v-on:click="change_page(i)">{{i}}
-                            </div>
-                        </div>
-                    </div>
 
           <p class="subtitle error-msg">{{ errorMsg }}</p>
-                    <h3 class="title">Add Group</h3>
+          <b-form inline @submit="delete_group">
-                    <label>
+            <b-button style="margin-right: 5px;" type="submit" :disabled="!delete_checked" variant="danger">{{ $t('delete.group') }}</b-button>
-                        <input v-model="group.name" placeholder="Group name">
+            <b-form-checkbox v-model="delete_checked">{{ $t('check.to.allow.deletion') }}</b-form-checkbox>
-                    </label>
+          </b-form>
-                    <p>Name is: {{ group.name }}</p>
-                    <span>Multiline message is:</span>
-                    <p style="white-space: pre-line;">{{ group.description }}</p>
-                    <br>
-                    <textarea v-model="group.description" placeholder="Description for group"></textarea>
-                    <button v-on:click="createGroup">{{$t('create_group')}}</button>
 
         </div>
       </div>
@@ -52,199 +46,127 @@
 </template>
 
 <script>
-    import {EventBus} from '@/utils';
+import {EventBus} from '@/utils';
-    import getRepository from '@/api/RepositoryFactory';
+import {getRemainingJwtValiditySeconds} from '@/utils';
+import getRepository from '@/api/RepositoryFactory';
 
-    const GroupRepository = getRepository('group');
+const groupRepository = getRepository('group');
 
-    export default {
+export default {
+  props: ['group_id'],
   data() {
     return {
+      current_group_id: this.group_id == null ? 1 : parseInt(this.group_id),
+      current_group_index: null,
+      new_group_id: this.current_group_id,
       isLoading: false,
       groups: [],
+      delete_checked: false,
       errorMsg: '',
-                group: {name: '', description: ''},
-                sortColumn: '',
-                currentPage: 1,
-                elementsPerPage: 5,
     };
   },
   methods: {
     fetch() {
       this.isLoading = true;
       // const { data } = await GroupRepository.get();
-                GroupRepository.getGroups()
+      groupRepository.getgroups()
           .then((response) => {
             this.groups = response.data;
             this.isLoading = false;
           });
 
     },
-            get_group_rows() {
+    calculate_current_group_index() {
-                const start = (this.currentPage - 1) * this.elementsPerPage;
+      this.current_group_index = this.groupIds.findIndex((id) => {
-                const end = start + this.elementsPerPage;
+        return id === this.current_group_id;
-                return this.groups.slice(start, end);
-            },
-            num_group_pages() {
-                return Math.ceil(this.groups.length / this.elementsPerPage);
-            },
-            change_page(page) {
-                this.currentPage = page;
-            },
-            sortTable(col) {
-                if (this.sortColumn === col) {
-                    this.ascending = !this.ascending;
-                } else {
-                    this.ascending = true;
-                    this.sortColumn = col;
-                }
-
-                const ascending = this.ascending;
-
-                this.groups.sort((a, b) => {
-                    if (a[col] > b[col]) {
-                        return ascending ? 1 : -1;
-                    } else if (a[col] < b[col]) {
-                        return ascending ? -1 : 1;
-                    }
-                    return 0;
       });
     },
-            createGroup() {
+    previousgroup() {
-                GroupRepository.createGroup(this.group);
+      if (null == this.current_group_index) {
-                this.fetch();
+        this.calculate_current_group_index();
+      }
+      if (this.current_group_index === 0) this.current_group_index = this.groupIds.length - 1;
+      else this.current_group_index = this.current_group_index - 1;
+      this.current_group_id = this.groupIds[this.current_group_index];
+      this.new_group_id = this.current_group_id;
     },
+    nextgroup() {
+      if (null == this.current_group_index) {
+        this.calculate_current_group_index();
+      }
+      if (this.current_group_index === this.groupIds.length - 1) this.current_group_index = 0;
+      else this.current_group_index = this.current_group_index + 1;
+      this.current_group_id = this.groupIds[this.current_group_index];
+      this.new_group_id = this.current_group_id;
+    },
+    manually_set_group_id() {
+      if (this.new_group_id == null || this.new_group_id === '') {
+        this.new_group_id = this.current_group_id;
+        return;
+      }
+      if (this.groupIds.includes(parseInt(this.new_group_id))) {
+        this.current_group_id = parseInt(this.new_group_id);
+      }
+      this.new_group_id = this.current_group_id;
+    },
+    delete_group(e){
+      e.preventDefault();
+      this.delete_checked = false;
+      groupRepository.deletegroup(this.current_group_id)
+          .then(()=>{
+            this.fetch();
+            this.nextgroup();
+            EventBus.$emit('normalMessage', this.$t('group.deleted'));
+          })
+          .catch((error)=>{
+            EventBus.$emit('errorMessage', this.$t('unable.to.delete.group') + ": "+ error.data.message);
+          })
+    },
+    test(e){
+      e.preventDefault();
+      this.delete_checked = false;
+      this.fetch();
+      this.nextGroup();
+      EventBus.$emit('normalMessage', 'test.msg');
+    }
   },
   mounted() {
     this.fetch();
   },
   beforeDestroy() {
-            // todo....or not
+    // todo
   },
   computed: {
-            group_columns() {
+    columns() {
       if (this.groups.length === 0) {
         return [];
       }
-                return Object.keys(this.groups[0]);
+      let columns = Object.keys(this.groups[0]);
+      columns = columns.filter((value) => {  // filter to only show some fields
+        return ["id", "first_name", "last_name", "email", "nickname", "role"].includes(value);
+      });
+      return columns;
+    },
+    group() {
+      if (this.groups.length === 0) {
+        return [];
+      }
+      return this.groups.filter((value) => value.id.toString() === this.current_group_id.toString()).pop();
+    },
+    groupIds() {
+      let ids = [];
+      this.groups.forEach((elem) => {
+        ids.push(parseInt(elem.id));
+      });
+      return ids;
     },
   },
-    };
+};
 </script>
 
 <style lang="scss">
-    .error-msg {
+.error-msg {
   color: red;
   font-weight: bold;
-    }
+}
-
-    table {
-        font-family: 'Open Sans', sans-serif;
-        width: 750px;
-        border-collapse: collapse;
-        border: 3px solid #44475C;
-        margin: 10px 10px 0 10px;
-    }
-
-    table th {
-        text-transform: uppercase;
-        text-align: left;
-        background: #44475C;
-        color: #FFF;
-        cursor: pointer;
-        padding: 8px;
-        min-width: 30px;
-    }
-
-    table th:hover {
-        background: #717699;
-    }
-
-    table td {
-        text-align: left;
-        padding: 8px;
-        border-right: 2px solid #7D82A8;
-    }
-
-    table td:last-child {
-        border-right: none;
-    }
-
-    table tbody tr:nth-child(2n) td {
-        background: #D4D8F9;
-    }
-
-    table {
-        font-family: 'Open Sans', sans-serif;
-        width: 750px;
-        border-collapse: collapse;
-        border: 3px solid #44475C;
-        margin: 10px 10px 0 10px;
-    }
-
-    table th {
-        text-transform: uppercase;
-        text-align: left;
-        background: #44475C;
-        color: #FFF;
-        cursor: pointer;
-        padding: 8px;
-        min-width: 30px;
-    }
-
-    table th:hover {
-        background: #717699;
-    }
-
-    table td {
-        text-align: left;
-        padding: 8px;
-        border-right: 2px solid #7D82A8;
-    }
-
-    table td:last-child {
-        border-right: none;
-    }
-
-    table tbody tr:nth-child(2n) td {
-        background: #D4D8F9;
-    }
-
-    .pagination {
-        font-family: 'Open Sans', sans-serif;
-        text-align: right;
-        width: 750px;
-        padding: 8px;
-    }
-
-    .arrow_down {
-        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAaCAYAAABPY4eKAAAAAXNSR0IArs4c6QAAAvlJREFUSA29Vk1PGlEUHQaiiewslpUJiyYs2yb9AyRuJGm7c0VJoFXSX9A0sSZN04ULF12YEBQDhMCuSZOm1FhTiLY2Rky0QPlQBLRUsICoIN/0PCsGyox26NC3eTNn3r3n3TvnvvsE1PkwGo3yUqkkEQqFgw2Mz7lWqwng7ztN06mxsTEv8U0Aam5u7r5EInkplUol/f391wAJCc7nEAgE9Uwmkzo4OPiJMa1Wq6cFs7Ozt0H6RqlUDmJXfPIx+qrX69Ti4mIyHA5r6Wq1egND+j+IyW6QAUoul18XiUTDNHaSyGazKcZtdgk8wqhUKh9o/OMvsVgsfHJy0iWqVrcQNRUMBnd6enqc9MjISAmRP3e73T9al3XnbWNjIw2+KY1Gc3imsNHR0YV4PP5+d3e32h3K316TySQFoX2WyWR2glzIO5fLTSD6IElLNwbqnFpbWyO/96lCoai0cZjN5kfYQAYi5H34fL6cxWIZbya9iJyAhULBHAqFVlMpfsV/fHxMeb3er+Vy+VUzeduzwWC45XA4dlD/vEXvdDrj8DvURsYEWK3WF4FA4JQP9mg0WrHZbEYmnpa0NxYgPVObm5teiLABdTQT8a6vrwdRWhOcHMzMzCiXlpb2/yV6qDttMpkeshEzRk4Wo/bfoe4X9vb2amzGl+HoXNT29vZqsVi0sK1jJScG+Xx+HGkL4Tew2TPi5zUdQQt9otPpuBk3e0TaHmMDh1zS7/f780S0zX6Yni+NnBj09fUZUfvudDrNZN+GkQbl8Xi8RLRtHzsB9Hr9nfn5+SjSeWUCXC7XPq5kw53wsNogjZNohYXL2EljstvtrAL70/mVaW8Y4OidRO1/gwgbUMvcqGmcDc9aPvD1gnTeQ+0nmaInokRj0nHh+uvIiVOtVvt2a2vLv7Ky0tL3cRTXIcpPAwMDpq6R4/JXE4vFQ5FI5CN+QTaRSFCYc8vLy1l0rge4ARe5kJ/d27kYkLXoy2Jo4C7K8CZOsEBvb+9rlUp1xNXPL7v3IDwxvPD6AAAAAElFTkSuQmCC')
-    }
-
-    .arrow_up {
-        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAAXNSR0IArs4c6QAAAwpJREFUSA21Vt1PUmEYP4dvkQ8JFMwtBRocWAkDbiqXrUWXzU1rrTt0bdVqXbb1tbW16C9IBUSmm27cODdneoXjputa6069qwuW6IIBIdLvdaF4OAcOiGeDc87zPs/vd57P96WpFq7p6enbGo1mjKZpeTabjU1MTCRagGnOZHFxcXxtbe1XKpUq7+zslJeXl//Mz8+Hy+Uy3RxSE9qTk5M3otFooVQqgef4Wl9f343FYoEmoISrxuNxFX5f9vb2jhn/PxUKhfLS0tIPfFifUESRUMV8Pv/M6XReRm5rTGQyGeXxeGxYe1ezeBpBOBx2rKysbO7v79d4Wy3Y2Nj4GQqFbgnhaugxwiuGJx99Pp9FLBbXxYTXvTqd7v3MzIy6riIWGxJnMpl7AwMD14xGYyMsSq1WUyQdUqn0eSPlusQIsbGrq+vl4OCgvhFQZd1utyv1en0gEolcqsi47nWJlUrlG5fLZVcoFFy2nDKSDpIWlUoVTCQSEk4lCHmJMZ2GTCbTiMVikfIZ88l7enoos9l8dXt7+z6fDicxSJUokqDX6xXcl2wCROoc0vQCWL3sNfLOSdzR0fHY4XC4tVotl40gmVwup9xuN4OQv+UyqCFGH9rg7SOGYVRcBs3IEG4J0nVnamrqOtvuBDGGgQg9+wHFcVEi4a0LNkbdd6TrPKo8ODc311mteIIYjT/a398/jK+s1jnVM0kXoufCFvq0GuiIGEVgQIhfoygM1QrteEa9dAL7ITiYCt4RMabOK5AyKKzKWtvupLcRciu8D5J0EuDDPyT/Snd39yh6VtY2NhYQSR9G79Ds7OxdskRjEyAufvb7/cPoO5Z6e1+xtVKrq6vfcFzyi/A3ZrPZ3GdNSlwgo5ekE4X2RIQGf2C1WlufFE0GBeGWYQ8YERWLxQtnUVB830MKLZfL9RHir8lkssCn2G751tZWEWe03zTKm15YWPiEiXXTYDB0Ig/t7yd8PRws4EicwWHxO4jHD8/C5HiTTqd1BwcHFozKU89origB+y/kmzgYpgOBQP4fGmUiZmJ+WNgAAAAASUVORK5CYII=')
-    }
-
-    .arrow {
-        float: right;
-        width: 12px;
-        height: 15px;
-        background-repeat: no-repeat;
-        background-size: contain;
-        background-position-y: bottom;
-    }
-
-    .number {
-        display: inline-block;
-        padding: 4px 10px;
-        color: #FFF;
-        border-radius: 4px;
-        background: #44475C;
-        margin: 0px 5px;
-        cursor: pointer;
-    }
-
-    .number:hover, .number.active {
-        background: #717699;
-    }
 </style>

src/components/Admin/Groups.vue

@@ -0,0 +1,259 @@
+<!-- components/Groups.vue -->
+<template>
+    <div>
+        <section class="hero is-primary">
+            <div class="hero-body">
+                <div class="container has-text-centered">
+                    <h2 class="title">Groups</h2>
+
+
+                    <div id="groupTable">
+                        <table>
+                            <thead>
+                            <tr>
+                                <th v-for="col in group_columns" v-on:click="sortTable(col)">{{col}}
+                                    <div class="arrow" v-if="col == sortColumn"
+                                         v-bind:class="[ascending ? 'arrow_up' : 'arrow_down']"></div>
+                                </th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            <tr v-for="row in get_group_rows()">
+                              <td v-for="(col, index) in group_columns">
+                                <router-link v-if="index < 2" :to="{name: 'admin.group', params: {group_id: row[col]}}">{{row[col]}}
+                                </router-link>
+                                <span v-else>{{row[col]}}</span>
+                              </td>
+                            </tr>
+                            </tbody>
+                        </table>
+                        <div class="pagination">
+                            <div class="number"
+                                 v-for="i in num_group_pages()"
+                                 v-bind:class="[i == currentPage ? 'active' : '']"
+                                 v-on:click="change_page(i)">{{i}}
+                            </div>
+                        </div>
+                    </div>
+
+                    <p class="subtitle error-msg">{{ errorMsg }}</p>
+                    <h3 class="title">Add Group</h3>
+                    <label>
+                        <input v-model="group.name" placeholder="Group name">
+                    </label>
+                    <p>Name is: {{ group.name }}</p>
+                    <span>Multiline message is:</span>
+                    <p style="white-space: pre-line;">{{ group.description }}</p>
+                    <br>
+                    <textarea v-model="group.description" placeholder="Description for group"></textarea>
+                    <button v-on:click="createGroup">{{$t('create_group')}}</button>
+
+                </div>
+            </div>
+        </section>
+
+    </div>
+</template>
+
+<script>
+    import {EventBus} from '@/utils';
+    import getRepository from '@/api/RepositoryFactory';
+
+    const GroupRepository = getRepository('group');
+
+    export default {
+        data() {
+            return {
+                isLoading: false,
+                groups: [],
+                errorMsg: '',
+                group: {name: '', description: ''},
+                sortColumn: '',
+                currentPage: 1,
+                elementsPerPage: 5,
+            };
+        },
+        methods: {
+            fetch() {
+                this.isLoading = true;
+                // const { data } = await GroupRepository.get();
+                GroupRepository.getGroups()
+                    .then((response) => {
+                        this.groups = response.data;
+                        console.error(this.groups);
+                        this.isLoading = false;
+                    });
+
+            },
+            get_group_rows() {
+                const start = (this.currentPage - 1) * this.elementsPerPage;
+                const end = start + this.elementsPerPage;
+                return this.groups.slice(start, end);
+            },
+            num_group_pages() {
+                return Math.ceil(this.groups.length / this.elementsPerPage);
+            },
+            change_page(page) {
+                this.currentPage = page;
+            },
+            sortTable(col) {
+                if (this.sortColumn === col) {
+                    this.ascending = !this.ascending;
+                } else {
+                    this.ascending = true;
+                    this.sortColumn = col;
+                }
+
+                const ascending = this.ascending;
+
+                this.groups.sort((a, b) => {
+                    if (a[col] > b[col]) {
+                        return ascending ? 1 : -1;
+                    } else if (a[col] < b[col]) {
+                        return ascending ? -1 : 1;
+                    }
+                    return 0;
+                });
+            },
+            createGroup() {
+                GroupRepository.createGroup(this.group);
+                this.fetch();
+            },
+        },
+        mounted() {
+            this.fetch();
+        },
+        beforeDestroy() {
+            // todo....or not
+        },
+        computed: {
+            group_columns() {
+                if (this.groups.length === 0) {
+                    return [];
+                }
+              let columns = Object.keys(this.groups[0]);
+              columns = columns.filter((value) => {  // filter to only show some fields
+                return ["id", "name", "description", "users"].includes(value);
+              });
+              return columns;
+            },
+        },
+    };
+</script>
+
+<style lang="scss">
+    .error-msg {
+        color: red;
+        font-weight: bold;
+    }
+
+    table {
+        font-family: 'Open Sans', sans-serif;
+        width: 750px;
+        border-collapse: collapse;
+        border: 3px solid #44475C;
+        margin: 10px 10px 0 10px;
+    }
+
+    table th {
+        text-transform: uppercase;
+        text-align: left;
+        background: #44475C;
+        color: #FFF;
+        cursor: pointer;
+        padding: 8px;
+        min-width: 30px;
+    }
+
+    table th:hover {
+        background: #717699;
+    }
+
+    table td {
+        text-align: left;
+        padding: 8px;
+        border-right: 2px solid #7D82A8;
+    }
+
+    table td:last-child {
+        border-right: none;
+    }
+
+    table tbody tr:nth-child(2n) td {
+        background: #D4D8F9;
+    }
+
+    table {
+        font-family: 'Open Sans', sans-serif;
+        width: 750px;
+        border-collapse: collapse;
+        border: 3px solid #44475C;
+        margin: 10px 10px 0 10px;
+    }
+
+    table th {
+        text-transform: uppercase;
+        text-align: left;
+        background: #44475C;
+        color: #FFF;
+        cursor: pointer;
+        padding: 8px;
+        min-width: 30px;
+    }
+
+    table th:hover {
+        background: #717699;
+    }
+
+    table td {
+        text-align: left;
+        padding: 8px;
+        border-right: 2px solid #7D82A8;
+    }
+
+    table td:last-child {
+        border-right: none;
+    }
+
+    table tbody tr:nth-child(2n) td {
+        background: #D4D8F9;
+    }
+
+    .pagination {
+        font-family: 'Open Sans', sans-serif;
+        text-align: right;
+        width: 750px;
+        padding: 8px;
+    }
+
+    .arrow_down {
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAaCAYAAABPY4eKAAAAAXNSR0IArs4c6QAAAvlJREFUSA29Vk1PGlEUHQaiiewslpUJiyYs2yb9AyRuJGm7c0VJoFXSX9A0sSZN04ULF12YEBQDhMCuSZOm1FhTiLY2Rky0QPlQBLRUsICoIN/0PCsGyox26NC3eTNn3r3n3TvnvvsE1PkwGo3yUqkkEQqFgw2Mz7lWqwng7ztN06mxsTEv8U0Aam5u7r5EInkplUol/f391wAJCc7nEAgE9Uwmkzo4OPiJMa1Wq6cFs7Ozt0H6RqlUDmJXfPIx+qrX69Ti4mIyHA5r6Wq1egND+j+IyW6QAUoul18XiUTDNHaSyGazKcZtdgk8wqhUKh9o/OMvsVgsfHJy0iWqVrcQNRUMBnd6enqc9MjISAmRP3e73T9al3XnbWNjIw2+KY1Gc3imsNHR0YV4PP5+d3e32h3K316TySQFoX2WyWR2glzIO5fLTSD6IElLNwbqnFpbWyO/96lCoai0cZjN5kfYQAYi5H34fL6cxWIZbya9iJyAhULBHAqFVlMpfsV/fHxMeb3er+Vy+VUzeduzwWC45XA4dlD/vEXvdDrj8DvURsYEWK3WF4FA4JQP9mg0WrHZbEYmnpa0NxYgPVObm5teiLABdTQT8a6vrwdRWhOcHMzMzCiXlpb2/yV6qDttMpkeshEzRk4Wo/bfoe4X9vb2amzGl+HoXNT29vZqsVi0sK1jJScG+Xx+HGkL4Tew2TPi5zUdQQt9otPpuBk3e0TaHmMDh1zS7/f780S0zX6Yni+NnBj09fUZUfvudDrNZN+GkQbl8Xi8RLRtHzsB9Hr9nfn5+SjSeWUCXC7XPq5kw53wsNogjZNohYXL2EljstvtrAL70/mVaW8Y4OidRO1/gwgbUMvcqGmcDc9aPvD1gnTeQ+0nmaInokRj0nHh+uvIiVOtVvt2a2vLv7Ky0tL3cRTXIcpPAwMDpq6R4/JXE4vFQ5FI5CN+QTaRSFCYc8vLy1l0rge4ARe5kJ/d27kYkLXoy2Jo4C7K8CZOsEBvb+9rlUp1xNXPL7v3IDwxvPD6AAAAAElFTkSuQmCC')
+    }
+
+    .arrow_up {
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAAXNSR0IArs4c6QAAAwpJREFUSA21Vt1PUmEYP4dvkQ8JFMwtBRocWAkDbiqXrUWXzU1rrTt0bdVqXbb1tbW16C9IBUSmm27cODdneoXjputa6069qwuW6IIBIdLvdaF4OAcOiGeDc87zPs/vd57P96WpFq7p6enbGo1mjKZpeTabjU1MTCRagGnOZHFxcXxtbe1XKpUq7+zslJeXl//Mz8+Hy+Uy3RxSE9qTk5M3otFooVQqgef4Wl9f343FYoEmoISrxuNxFX5f9vb2jhn/PxUKhfLS0tIPfFifUESRUMV8Pv/M6XReRm5rTGQyGeXxeGxYe1ezeBpBOBx2rKysbO7v79d4Wy3Y2Nj4GQqFbgnhaugxwiuGJx99Pp9FLBbXxYTXvTqd7v3MzIy6riIWGxJnMpl7AwMD14xGYyMsSq1WUyQdUqn0eSPlusQIsbGrq+vl4OCgvhFQZd1utyv1en0gEolcqsi47nWJlUrlG5fLZVcoFFy2nDKSDpIWlUoVTCQSEk4lCHmJMZ2GTCbTiMVikfIZ88l7enoos9l8dXt7+z6fDicxSJUokqDX6xXcl2wCROoc0vQCWL3sNfLOSdzR0fHY4XC4tVotl40gmVwup9xuN4OQv+UyqCFGH9rg7SOGYVRcBs3IEG4J0nVnamrqOtvuBDGGgQg9+wHFcVEi4a0LNkbdd6TrPKo8ODc311mteIIYjT/a398/jK+s1jnVM0kXoufCFvq0GuiIGEVgQIhfoygM1QrteEa9dAL7ITiYCt4RMabOK5AyKKzKWtvupLcRciu8D5J0EuDDPyT/Snd39yh6VtY2NhYQSR9G79Ds7OxdskRjEyAufvb7/cPoO5Z6e1+xtVKrq6vfcFzyi/A3ZrPZ3GdNSlwgo5ekE4X2RIQGf2C1WlufFE0GBeGWYQ8YERWLxQtnUVB830MKLZfL9RHir8lkssCn2G751tZWEWe03zTKm15YWPiEiXXTYDB0Ig/t7yd8PRws4EicwWHxO4jHD8/C5HiTTqd1BwcHFozKU89origB+y/kmzgYpgOBQP4fGmUiZmJ+WNgAAAAASUVORK5CYII=')
+    }
+
+    .arrow {
+        float: right;
+        width: 12px;
+        height: 15px;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position-y: bottom;
+    }
+
+    .number {
+        display: inline-block;
+        padding: 4px 10px;
+        color: #FFF;
+        border-radius: 4px;
+        background: #44475C;
+        margin: 0px 5px;
+        cursor: pointer;
+    }
+
+    .number:hover, .number.active {
+        background: #717699;
+    }
+</style>

src/components/Admin/Permission.vue

@@ -64,7 +64,7 @@
                 permission: {name: '', description: ''},
                 sortColumn: '',
                 currentPage: 1,
-                elementsPerPage: 5,
+                elementsPerPage: 10,
             };
         },
         methods: {

src/components/Admin/User.vue

@@ -23,7 +23,7 @@
           <hr/>
           <!--<p v-if="profile.role"><strong>{{$t('role')}}:&nbsp</strong>{{profile.role}}</p>-->
           <p><strong>{{ $t('role') }}:&nbsp</strong><span v-if="user.role">{{ user.role }}</span><span
-              v-else>{{ $t('no specifc role') }}</span></p>
+              v-else>{{ $t('no specific role') }}</span></p>
           <p><strong>{{ $t('groups') }}:&nbsp</strong><span v-for="g in user.groups">{{ g.name }}, </span></p>
           <p><strong>{{ $t('permissions') }}:&nbsp</strong></p>
           <ul>
@@ -47,7 +47,7 @@
 
 <script>
 import {EventBus} from '@/utils';
-import {getRemainingJwtValiditySeconds} from '../../utils';
+import {getRemainingJwtValiditySeconds} from '@/utils';
 import getRepository from '@/api/RepositoryFactory';
 
 const UserRepository = getRepository('user');
@@ -87,7 +87,7 @@ export default {
           display_name = this.user.last_name;
         }
       if (this.user.nickname != null && this.user.nickname !== "") {
-        if (display_name.trim() === "") {
+        if (display_name != null && display_name.trim() === "") {
           display_name = this.user.nickname;
         } else {
           display_name += " (" + this.user.nickname + ")";
@@ -132,8 +132,25 @@ export default {
       }
       this.new_user_id = this.current_user_id;
     },
-    delete_user(){
+    delete_user(e){
-      alert("Not implemented!");
+      e.preventDefault();
+      this.delete_checked = false;
+      UserRepository.deleteUser(this.current_user_id)
+          .then(()=>{
+            this.fetch();
+            this.nextUser();
+            EventBus.$emit('normalMessage', this.$t('user.deleted'));
+          })
+          .catch((error)=>{
+            EventBus.$emit('errorMessage', this.$t('unable.to.delete.user') + ": "+ error.data.message);
+          })
+    },
+    test(e){
+      e.preventDefault();
+      this.delete_checked = false;
+      this.fetch();
+      this.nextUser();
+      EventBus.$emit('normalMessage', 'test.msg');
     }
   },
   mounted() {

src/components/Admin/Users.vue

@@ -6,13 +6,6 @@
                 <div class="container has-text-centered">
                     <h3 class="title">Manage users</h3>
                     <h3>Users</h3>
-                    <ul>
-                        <li v-for="(user) in users">
-                          <router-link :to="{name: 'admin.user', params: {user_id: user.id}}">
-                            ({{user.id}}) {{user.first_name}}
-                          </router-link>
-                        </li>
-                    </ul>
 
                     <div id="userTable">
                         <table>
@@ -26,7 +19,11 @@
                             </thead>
                             <tbody>
                             <tr v-for="row in get_rows()">
-                                <td v-for="col in columns">{{row[col]}}</td>
+                              <td v-for="(col, index) in columns">
+                                <router-link v-if="index < 1" :to="{name: 'admin.user', params: {user_id: row[col]}}">{{row[col]}}
+                                </router-link>
+                                  <span v-else>{{row[col]}}</span>
+                                </td>
                             </tr>
                             </tbody>
                         </table>

src/components/Profile.vue

@@ -152,6 +152,9 @@ export default {
   mounted() {
     EventBus.$on('failedLoadingProfile', (msg) => {
       this.errorMsg = msg;
+      EventBus.$emit('errorMessage', this.$t('unable.to.load.profile') + ": "+ msg);
+      this.$store.dispatch('resetToken');
+      EventBus.$emit('normalMessage', this.$t('credentials.reset!'));
     });
     this.$store.dispatch('loadProfile');
 

src/components/Recorders.vue

@@ -747,8 +747,7 @@
                                 this.tabIndex = 0;
                             });
                     }).catch((error) => {
-                        console.error("could not safe recorder! ("+error.data+")");
+                        EventBus.$emit('errorMessage', 'Could not safe recorder: '+error.data.message+'!');
-                    this.$parent.showErrorMessage('Could not safe recorder!');
                 });
             },
             deleteRecorder(id) {

src/components/Test.vue

@@ -1,6 +1,9 @@
 <!-- components/Test.vue -->
 <template>
     <div>
+      <section class="hero is-primary">
+        <div class="hero-body">
+          <div class="container has-text-centered">
         <b-alert
                 :show="dismissCountDown"
                 dismissible
@@ -16,6 +19,9 @@
         <b-button @click="$parent.showErrorMessage('tolle error message')" variant="warning" class="m-1">
           Show error message
         </b-button>
+        <b-button @click="showTestMessageLonger" variant="danger" class="m-1">
+          Show test message longer
+        </b-button>
         <h1>Toller Test</h1>
         <span>{{ $socket.connected ? 'Connected' : 'Disconnected' }}</span>
         <button v-if="$socket.connected" @click="disconnectWebsocket">Disconnect</button>
@@ -27,6 +33,9 @@
 
       <router-link :to="{name: 'recorder', params: {recorder_id: 1}}">rec 1</router-link>
           </div>
+        </div>
+      </section>
+    </div>
 </template>
 
 <script>
@@ -62,6 +71,9 @@
             showAlert() {
                 this.dismissCountDown = this.dismissSecs;
             },
+            showTestMessageLonger(){
+                EventBus.$emit('normalMessage', {msg: 'message', time:100})
+            },
         },
         mounted() {
             this.$socket.client.on('my_response', function(msg) {

src/router.ts

@@ -10,6 +10,7 @@ import Profile from '@/components/Profile.vue';
 import Users from '@/components/Admin/Users.vue';
 import User from '@/components/Admin/User.vue';
 import Test from '@/components/Test.vue';
+import Groups from '@/components/Admin/Groups.vue';
 import Group from '@/components/Admin/Group.vue';
 import Permission from '@/components/Admin/Permission.vue';
 import Rooms from '@/components/Rooms.vue';
@@ -52,9 +53,15 @@ export const router = new Router({
                     props: true,
                     component: User,
                 },
+                {
+                    name: 'admin.groups',
+                    path: 'groups',
+                    component: Groups,
+                },
                 {
                     name: 'admin.group',
-                    path: 'group',
+                    path: 'group/:group_id?',
+                    props: true,
                     component: Group,
                 },
                 {

src/store.ts

@@ -77,8 +77,8 @@ const actions = {
           EventBus.$emit('failedLoadingRecorderStates', error);
         });
   },
-  loadRecorderState(context: any, recorder_id: number) {
+  loadRecorderState(context: any, recorderId: number) {
-    return StateRepository.getRecorderState(recorder_id)
+    return StateRepository.getRecorderState(recorderId)
         .then((response: any) => {
           context.commit('setRecorderState', {recorderState: response.data});
           EventBus.$emit('recorderStateLoaded', response.data);
@@ -322,12 +322,10 @@ const mutations = {
 const getters = {
   // reusable data accessors
   isAuthenticated(sState: any) {
-    const valid = isValidJwt(sState.access_token);
+    return isValidJwt(sState.access_token);
-    return valid;
   },
   isRefreshTokenValid(sState: any) {
-    const valid = isValidJwt(sState.refresh_token);
+    return isValidJwt(sState.refresh_token);
-    return valid;
   },
   getLoginProviders(sState: any) {
     return sState.loginProviders;