removed vuejs logger completely, upgraded to vue 4.x validation not yet working

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
   ]
 }

package.json

@@ -5,18 +5,19 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "test:unit": "vue-cli-service test:unit"
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/vue-fontawesome": "^0.1.10",
-    "@vue/cli": "^3.12.1",
-    "axios": "^0.18.1",
+    "@vue/cli": "^4.4.6",
+    "axios": "^0.19.2",
     "bootstrap": "^4.5.0",
     "bootstrap-vue": "^2.16.0",
-    "core-js": "^2.5.7",
+    "core-js": "^3.6.5",
     "i": "^0.3.6",
     "jquery": "^3.5.1",
     "js-cookie": "^2.2.1",
@@ -26,35 +27,35 @@
     "popper.js": "^1.16.1",
     "sass": "^1.26.10",
     "socket.io-client": "^2.3.0",
-    "vee-validate": "^2.2.15",
+    "vee-validate": "^3.3.7",
     "vue": "^2.6.11",
     "vue-axios": "^2.1.5",
-    "vue-class-component": "^6.0.0",
+    "vue-class-component": "^7.2.5",
     "vue-cookies": "^1.7.3",
     "vue-flag-icon": "^1.0.6",
     "vue-i18n": "^8.20.0",
     "vue-moment": "^4.1.0",
-    "vue-property-decorator": "^7.0.0",
+    "vue-property-decorator": "^9.0.0",
     "vue-router": "^3.3.4",
     "vue-socket.io-extended": "^4.0.4",
     "vue-spinner": "^1.0.4",
-    "vue-sweetalert2": "^1.6.4",
+    "vue-sweetalert2": "^3.0.6",
     "vuejs-logger": "^1.5.4",
     "vuex": "^3.5.1",
-    "vuex-persistedstate": "^2.7.1",
+    "vuex-persistedstate": "^3.0.1",
     "vuex-typex": "^3.1.5"
   },
   "devDependencies": {
     "@types/chai": "^4.2.12",
-    "@types/mocha": "^5.2.7",
-    "@vue/cli-plugin-babel": "^3.12.1",
-    "@vue/cli-plugin-typescript": "^3.12.1",
-    "@vue/cli-plugin-unit-mocha": "^3.12.1",
-    "@vue/cli-service": "^3.12.1",
+    "@types/mocha": "^8.0.0",
+    "@vue/cli-plugin-babel": "^4.4.6",
+    "@vue/cli-plugin-typescript": "^4.4.6",
+    "@vue/cli-plugin-unit-mocha": "^4.4.6",
+    "@vue/cli-service": "^4.4.6",
     "@vue/test-utils": "^1.0.3",
     "bootstrap-sass": "^3.4.1",
-    "chai": "^4.1.2",
-    "sass-loader": "^7.3.1",
+    "chai": "^4.2.0",
+    "sass-loader": "^9.0.2",
     "typescript": "^3.9.7",
     "vue-template-compiler": "^2.6.11"
   }

src/$log.d.ts

@@ -1,18 +0,0 @@
-import Vue from 'vue';
-/*
-Type augmentation for log plugin for typescript
-https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins
-https://github.com/justinkames/vuejs-logger/issues/24
-Tobias
-*/
-declare module 'vue/types/vue' {
-    export interface VueConstructor<V extends Vue = Vue> {
-        $log: {
-            debug(...args: any[]): void;
-            info(...args: any[]): void;
-            warn(...args: any[]): void;
-            error(...args: any[]): void;
-            fatal(...args: any[]): void;
-        };
-    }
-}

src/App.vue

@@ -138,13 +138,11 @@
             });
             this.$nextTick(() => {
                 window.setInterval(() => {
-                    // this.$log.debug(getRemainingJwtValiditySeconds(this.$store.state.access_token));
                     const tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);
 
                     // this.tokenValidity = this.tokenValidity.format('mm:ss');
                     const refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token);
 
-                    // this.$log.debug(this.$store.state);
                     if (tokenValidity < 50 && refreshTokenValidity > 30 && this.autoRenewSession && !this.refreshFailed) {
                         this.$store.dispatch('refreshToken');  // renew access token
                     }

src/api/Repository.js

@@ -16,7 +16,6 @@ api.interceptors.request.use(async function(config) {
         const token = store.state.access_token;
         config.headers.Authorization = `Bearer ${token}`;
     } else {
-        Vue.$log.warn("the access_token is not valid anymore.");
         if(store.getters.isRefreshTokenValid){
             await store.dispatch('refreshToken');
             const token = store.state.access_token;
@@ -25,7 +24,6 @@ api.interceptors.request.use(async function(config) {
                     const token = store.state.access_token;
                     config.headers.Authorization = `Bearer ${token}`;
                 }).catch( () => {
-                    Vue.$log.error("Could not refresh tokens!");
                     window.location = '/login';
             });*/
         } else {
@@ -38,10 +36,8 @@ api.interceptors.request.use(async function(config) {
                 confirmButtonText: "Yes",
             }).then( (result) => {
                 if(result.value) {
-                    Vue.$log.info("redirect to login!");
                     window.location = '/login';
                 } else {
-                    Vue.$log.info("redirect to home!");
                     window.location = '/';
                 }
             });
@@ -51,12 +47,9 @@ api.interceptors.request.use(async function(config) {
 });
 
 api.interceptors.response.use(function (response) {
-    Vue.$log.debug("Token OK: " + store.state.access_token);
     return response;
 }, function (error) {
     if (401 === error.response.status || 422 === error.response.status) {
-        Vue.$log.warn("Invalid / no access token?!");
-        Vue.$log.debug(store.state.access_token);
         Vue.swal({
             title: "Session Expired",
             text: "Your token/session has expired. Would you like to be redirected to the login page?",
@@ -66,10 +59,8 @@ api.interceptors.response.use(function (response) {
             confirmButtonText: "Yes",
         }).then( (result) => {
             if(result.value) {
-                Vue.$log.info("redirect to login!");
                 window.location = '/login';
             } else {
-                Vue.$log.info("redirect to home!");
                 window.location = '/';
             }
         });

src/api/index.ts

@@ -24,7 +24,8 @@ export function authenticate(userData: any) {
 }
 
 export function revokeRefreshKey(jwt: any) {
-    return axios.post(`${API_URL}/auth/revokeRefreshToken`, { headers: { Authorization: `Bearer ${jwt}` } });
+    //return axios.post(`${API_URL}/auth/revokeRefreshToken`, { headers: { Authorization: `Bearer ${jwt}` } });
+    return axios.get(`${API_URL}/auth/revokeRefreshToken`, { headers: { Authorization: `Bearer ${jwt}` } });
 }
 
 export function register(userData: any) {
@@ -62,7 +63,6 @@ export function fetchUserGroup(jwt: any, groupId: any) {
 }
 
 export function fetchProfile(jwt: any) {
-    Vue.$log.debug('JWT: ' + jwt);
     return axios.get(`${API_URL}/v1/user/profile`, { headers: { Authorization: `Bearer ${jwt}` } });
 }
 

src/components/Admin.vue

@@ -40,7 +40,6 @@
             },
         },
         mounted() {
-            this.$log.debug('Admin: mounting...');
         },
         beforeDestroy() {
             // todo ...

src/components/Commands.vue

@@ -243,7 +243,6 @@
                             });
                     }).catch((msg) => {
                     this.showErrorMessage('Could not safe command!');
-                    this.$log.warn(msg);
                 });
             },
             initCommandUpdate(command, fieldName) {

src/components/Group.vue

@@ -77,7 +77,6 @@
                     .then((response) => {
                         this.groups = response.data;
                         this.isLoading = false;
-                        this.$log.debug(response);
                     });
 
             },
@@ -112,7 +111,6 @@
                 });
             },
             createGroup() {
-                this.$log.info('Creating new group...');
                 GroupRepository.createGroup(this.group);
                 this.fetch();
             },

src/components/Login.vue

@@ -162,7 +162,6 @@
                 this.$store.dispatch('storeTokens', JSON.parse(atob(this.$cookies.get('tokens'))));
                 this.$cookies.remove('tokens');
             }
-            this.$log.debug(this.$cookies.keys());
 
             this.$nextTick(() => {
                 if (this.authenticated) {

src/components/OldLogin.vue

@@ -112,7 +112,6 @@
                 this.$store.dispatch('storeTokens', JSON.parse(atob(this.$cookies.get('tokens'))));
                 this.$cookies.remove('tokens');
             }
-            this.$log.debug(this.$cookies.keys());
 
             this.$nextTick(() => {
                 if (this.authenticated) {

src/components/Permission.vue

@@ -75,7 +75,6 @@
                     .then((response) => {
                         this.permissions = response.data;
                         this.isLoading = false;
-                        this.$log.debug(response);
                     });
 
             },
@@ -110,7 +109,6 @@
                 });
             },
             createPermission() {
-                this.$log.info('Creating new permission...');
                 PermissionRepository.createPermission(this.permission);
                 this.fetch();
             },

src/components/Profile.vue

@@ -7,21 +7,24 @@
           <div class="clearfix">
             <b-img left style="margin-right: 20px;" src="https://picsum.photos/125/125/?image=58"
                    alt="Left image"></b-img>
-                        <h2 class="title" v-if="profile.nickname">{{profile.nickname}}</h2>
+            <h2 class="title" v-if="profile.nickname">{{ profile.nickname }}</h2>
             <h2 class="title" v-else-if="profile.first_name">
-                            {{profile.first_name}}&nbsp;{{profile.last_name}}</h2>
-                        <h2 class="title" v-else>{{profile.email}}</h2>
+              {{ profile.first_name }}&nbsp;{{ profile.last_name }}</h2>
+            <h2 class="title" v-else>{{ profile.email }}</h2>
 
             <p>
-                            <font-awesome-icon icon="envelope"/>&nbsp;{{profile.email}}
+              <font-awesome-icon icon="envelope"/>&nbsp;{{ profile.email }}
               <a class="badge badge-pill badge-info">
-                            <font-awesome-icon icon="pencil-alt"/></a>
+                <font-awesome-icon icon="pencil-alt"/>
+              </a>
             </p>
 
-                        <p v-if="!formEditField['nickname'] && profile.nickname"><font-awesome-icon v-b-tooltip.hover :title="$t('nickname')" icon="user-tag"/>&nbsp;{{profile.nickname}}
+            <p v-if="!formEditField['nickname'] && profile.nickname">
+              <font-awesome-icon v-b-tooltip.hover :title="$t('nickname')" icon="user-tag"/>&nbsp;{{ profile.nickname }}
               <a class="badge badge-pill badge-info"
                  @click="()=>{form.nickname=profile.nickname; formEditField['nickname']=true;}">
-                                <font-awesome-icon icon="pencil-alt"/></a>
+                <font-awesome-icon icon="pencil-alt"/>
+              </a>
             </p>
             <b-input-group style="max-width: 50%;" v-else size="sm">
               <b-form-input name="nickname"
@@ -37,54 +40,61 @@
               </b-input-group-append>
             </b-input-group>
 
-                      <p>
+            <p v-if="profile.external_user">
               <span>&f19b;</span>
-                        <font-awesome-icon icon="openId"/>&nbsp;{{profile.email}}
-                        <a class="badge badge-pill badge-info">
-                          <font-awesome-icon icon="pencil-alt"/></a>
+              <font-awesome-icon :icon="['fab', 'openid']"/>&nbsp;{{ $t('external user') }}
+
+            </p>
+            <p v-else>
+              <font-awesome-icon icon="pencil-alt"/>&nbsp;{{ $t('internal user') }}
             </p>
 
           </div>
 
           <hr/>
 
-                    <p><strong>{{$t('first_name')}}:&nbsp</strong>{{profile.first_name}}</p>
-                    <p><strong>{{$t('last_name')}}:&nbsp</strong>{{profile.last_name}}</p>
+          <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('role')}}:&nbsp</strong><span v-if="profile.role">{{profile.role}}</span><span v-else>{{$t('no specifc role')}}</span></p>
-                    <p><strong>{{$t('groups')}}:&nbsp</strong><span v-for="g in profile.groups">{{g.name}}, </span></p>
-                    <p><strong>{{$t('permissions')}}:&nbsp</strong></p><ul><li v-for="p in profile.effective_permissions">{{p.name}}</li></ul>
+          <p><strong>{{ $t('role') }}:&nbsp</strong><span v-if="profile.role">{{ profile.role }}</span><span
+              v-else>{{ $t('no specifc role') }}</span></p>
+          <p><strong>{{ $t('groups') }}:&nbsp</strong><span v-for="g in profile.groups">{{ g.name }}, </span></p>
+          <p><strong>{{ $t('permissions') }}:&nbsp</strong></p>
+          <ul>
+            <li v-for="p in profile.effective_permissions">{{ p.name }}</li>
+          </ul>
 
           <hr/>
 
           <div>
-                        <button class="lang-btn" v-for="entry in languages" :key="entry.title" @click="changeLocale(entry.language)">
+            <button class="lang-btn" v-for="entry in languages" :key="entry.title"
+                    @click="changeLocale(entry.language)">
               <flag :iso="entry.flag" v-bind:squared="false"/>
-                            {{entry.title}}
+              {{ entry.title }}
             </button>
           </div>
-                    <p class="title">Token validity ({{tokenValidity}})</p>
-                    <p class="title">Refresh token validity ({{refreshTokenValidity}})</p>
-                    <p class="title">access_token ({{access_token}})</p>
-                    <p>{{profile.id}}</p>
+          <p class="title">Token validity ({{ tokenValidity }})</p>
+          <p class="title">Refresh token validity ({{ refreshTokenValidity }})</p>
+          <p class="title">access_token ({{ access_token }})</p>
+          <p>{{ profile.id }}</p>
           <p class="subtitle error-msg">{{ errorMsg }}</p>
         </div>
       </div>
     </section>
-        {{profile}}
+    {{ profile }}
   </div>
 </template>
 
 <script>
-    import {EventBus} from '@/utils';
-    import {getRemainingJwtValiditySeconds} from '../utils';
-    import getRepository from '@/api/RepositoryFactory';
+import {EventBus} from '@/utils';
+import {getRemainingJwtValiditySeconds} from '../utils';
+import getRepository from '@/api/RepositoryFactory';
 
-    const userRepository = getRepository('user');
+const userRepository = getRepository('user');
 
-    export default {
+export default {
   data() {
     return {
       email: '',
@@ -115,7 +125,6 @@
       this.$set(this.formEditField, fieldName, false);
       const data = {};
       data[fieldName] = this.form[fieldName];
-                this.$log.debug(this.form);
       userRepository.updateProfile(data)
           .then(() => {
             this.$store.dispatch('loadProfile')
@@ -130,7 +139,6 @@
     },
   },
   mounted() {
-            this.$log.debug('Profile: mounting...');
     EventBus.$on('failedLoadingProfile', (msg) => {
       this.errorMsg = msg;
     });
@@ -156,18 +164,19 @@
       return this.$store.state.access_token;
     },
   },
-    };
+};
 </script>
 
 <style lang="scss">
-    .error-msg {
+.error-msg {
   color: red;
   font-weight: bold;
-    }
-    .lang-btn {
+}
+
+.lang-btn {
   padding: 15px;
   border: 2px solid green;
   font-size: 18px;
   margin: 15px;
-    }
+}
 </style>

src/components/RecorderState.vue

@@ -58,8 +58,6 @@
 
         mounted() {
             this.$socket.client.on('connect', (msg) => {
-                this.$log.debug('We are connected!');
-                this.$log.debug(msg);
                 this.$socket.client.emit('request_recorder_state_updates', this.recorder.id);
                 this.$socket.client.emit('', "unnamed msg!?!");
                 console.log('recorder_state_update_' + this.recorder.id);
@@ -67,9 +65,7 @@
                     this.handleReply(payload);
                 });
             });
-            this.$log.info('mounted called');
             if (!this.$socket.connected) {
-                this.$log.info('connecting websocket...');
                 this.connectWebsocket();
                 this.connectedWebsocket = true;
             } else {
@@ -84,7 +80,6 @@
         },
 
         beforeDestroy() {
-            this.$log.info('beforeDestroy called');
             if (this.connectedWebsocket) {
                 this.disconnectWebsocket();
             }

src/components/Recorders.vue

@@ -679,18 +679,13 @@
         },
         methods: {
             initRecorderUpdate(recorder, fieldName) {
-                this.$log.debug(recorder[fieldName]); // THIS SHOULD BE TRUE, NOT FALSE!! grml
                 this.$set(this.formEditField, recorder.id + '_' + fieldName, true);
                 this.$set(this.updateValues, recorder.id + '_' + fieldName, recorder[fieldName]);
             },
             updateRecorder(id, fieldName) {
-                this.$log.debug(id);
-                this.$log.debug(fieldName);
                 this.$parent.$data.isLoading = true;
                 const data = {};
-                this.$log.debug(this.updateValues[id + '_' + fieldName]);
                 data[fieldName] = this.updateValues[id + '_' + fieldName];
-                this.$log.debug(data);
                 recorderRepository.updateRecorder(id, data)
                     .then(() => {
                         this.$store.dispatch('loadRecorders')
@@ -711,7 +706,6 @@
                             });
                     }).catch((msg) => {
                     this.showErrorMessage('Could not safe recorder!');
-                    this.$log.warn(msg);
                 });
             },
             deleteRecorder(id) {

src/components/Rooms.vue

@@ -397,7 +397,6 @@
                             });
                     }).catch((msg) => {
                     this.showErrorMessage('Could not safe room!');
-                    this.$log.warn(msg);
                 });
             },
             initRoomUpdate(room, fieldName) {

src/components/Test.vue

@@ -44,7 +44,6 @@
                 // Vue.$moment.locale(locale);
             },
             sendWsMessage(msg) {
-                this.$log.debug('sending msg: ' + msg);
                 this.$socket.client.emit('my_event', msg);
             },
             connectWebsocket() {
@@ -62,15 +61,10 @@
         },
         mounted() {
             this.$socket.client.on('my_response', function(msg) {
-                this.$log.debug(msg);
             });
             this.$socket.client.on('server_event', function(msg) {
-                this.$log.debug('get server_event:');
-                this.$log.debug(msg);
             });
             this.$socket.client.on('connect', function(msg) {
-                this.$log.debug('We are connected!');
-                this.$log.debug(msg);
             });
 
             // this.$socket.$unsubscribe('even_name');

src/components/User.vue

@@ -81,7 +81,6 @@
                     .then((response) => {
                         this.users = response.data;
                         this.isLoading = false;
-                        this.$log.debug(response);
                     });
 
             },
@@ -116,7 +115,6 @@
                 });
             },
             createUser() {
-                this.$log.info('Creating new user...');
                 UserRepository.createUser(this.user);
                 this.fetch();
             },

src/main.ts

@@ -11,7 +11,7 @@ import VueLogger from 'vuejs-logger';
 import VueSocketIOExt from 'vue-socket.io-extended';
 import io from 'socket.io-client';
 import i18n from '@/plugins/i18n';
-import VeeValidate from 'vee-validate';
+import { ValidationProvider } from 'vee-validate';
 // @ts-ignore
 import FlagIcon from 'vue-flag-icon';
 // @ts-ignore
@@ -55,7 +55,8 @@ import {
   faThumbsDown,
 } from '@fortawesome/free-solid-svg-icons';
 
-// import { faOpenId } from '@fortawesome/free-brands-svg-icons';
+import { faOpenid,
+} from '@fortawesome/free-brands-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 
 
@@ -70,7 +71,7 @@ Vue.prototype.$isProduction = isProduction;
 
 library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList, faPlus, faDoorOpen, faCogs, faAt,
   faUser, faEnvelope, faUserTag, faExternalLinkAlt, faSync, faHome, faCode, faBarcode, faTag, faTags, faVideo, faLock,
-  faLockOpen, faArrowCircleLeft, faArrowCircleRight, faWrench, faPlay, faFrown, faSmile, faThumbsUp, faThumbsDown);
+  faLockOpen, faArrowCircleLeft, faArrowCircleRight, faWrench, faPlay, faFrown, faSmile, faThumbsUp, faThumbsDown, faOpenid);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 
@@ -85,15 +86,17 @@ const loggerOptions = {
   showConsoleColors: true,
 };
 
-Vue.use(VueLogger, loggerOptions);
+//Vue.use(VueLogger, loggerOptions);
 Vue.use(VueAxios, axios);
 Vue.use(BootstrapVue);
 Vue.use(FlagIcon);
 Vue.use(VueCookies);
 Vue.use(VueSweetalert2);
-Vue.use(VeeValidate);
+// Vue.use(VeeValidate);
 Vue.use(VueMoment);
 
+Vue.component('ValidationProvider', ValidationProvider);
+
 // const socket = io('ws://localhost:5000',{autoConnect: false, reconnectionAttempts: 3});
 const socket = io('ws://localhost:5443', {
   autoConnect: false,

src/router.ts

@@ -106,9 +106,7 @@ export const router = new Router({
             component: Profile,
             beforeEnter(to, from, next) {
                 if (!store.getters.isAuthenticated) {
-                    Vue.$log.debug('not authenticated!');
                     if (store.getters.isRefreshTokenValid) {
-                        Vue.$log.debug('refresh token is still valid :)');
                         store.dispatch('refreshToken')
                             .then(() => next())
                             .catch(() => next('/login'));

src/store.ts

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import { createLogger } from 'vuex';
 import createPersistedState from 'vuex-persistedstate';
 import getRepository from '@/api/RepositoryFactory';
 import RoomRepository from '@/api/roomRepository';
@@ -49,92 +50,70 @@ const actions = {
   loadRooms(context: any) {
     return RoomRepository.getRooms()
       .then((response: any) => {
-        Vue.$log.debug(response);
-        Vue.$log.debug(response.data);
         context.commit('setRooms', {rooms: response.data});
         EventBus.$emit('roomsLoaded', response.data);
       })
       .catch((error: any) => {
-        Vue.$log.warn('Error loading rooms!', error);
         EventBus.$emit('failedLoadingRooms', error);
       });
   },
   loadRecorders(context: any) {
     return RecordRepository.getRecorders()
       .then((response: any) => {
-        Vue.$log.debug(response);
-        Vue.$log.debug(response.data);
         context.commit('setRecorders', {recorders: response.data});
         EventBus.$emit('recordersLoaded', response.data);
       })
       .catch((error: any) => {
-        Vue.$log.warn('Error loading recorders!', error);
         EventBus.$emit('failedLoadingRecorders', error);
       });
   },
   loadRecorderStates(context: any) {
     return StateRepository.getRecordersStates()
         .then((response: any) => {
-          Vue.$log.debug(response);
-          Vue.$log.debug(response.data);
           context.commit('setRecorderStates', {recorderStates: response.data});
           EventBus.$emit('recorderStatesLoaded', response.data);
         })
         .catch((error: any) => {
-          Vue.$log.warn('Error loading recorders states!', error);
           EventBus.$emit('failedLoadingRecorderStates', error);
         });
   },
   loadRecorderState(context: any, recorder_id: number) {
     return StateRepository.getRecorderState(recorder_id)
         .then((response: any) => {
-          Vue.$log.debug(response);
-          Vue.$log.debug(response.data);
           context.commit('setRecorderState', {recorderState: response.data});
           EventBus.$emit('recorderStateLoaded', response.data);
         })
         .catch((error: any) => {
-          Vue.$log.warn('Error loading recorders states!', error);
           EventBus.$emit('failedLoadingRecorderStates', error);
         });
   },
   loadRecorderModels(context: any) {
     return RecordRepository.getRecorderModels()
       .then((response: any) => {
-        Vue.$log.debug(response);
-        Vue.$log.debug(response.data);
-        Vue.$log.debug('Loaded recorder models');
         context.commit('setRecorderModels', {recorderModels: response.data});
         EventBus.$emit('recorderModelsLoaded', response.data);
       })
       .catch((error: any) => {
-        Vue.$log.warn('Error loading recorder models!', error);
         EventBus.$emit('failedLoadingRecorderModels', error);
       });
   },
   loadRecorderCommands(context: any) {
     return RecordRepository.getRecorderCommands()
         .then((response: any) => {
-          Vue.$log.debug(response);
-          Vue.$log.debug(response.data);
           context.commit('setRecorderCommands', {recorderCommands: response.data});
           EventBus.$emit('recorderCommandsLoaded', response.data);
         })
         .catch((error: any) => {
-          Vue.$log.warn('Error loading recorder commands!', error);
           EventBus.$emit('failedLoadingRecorderCommands', error);
         });
   },
   loadVirtualCommands(context: any) {
     return VirtualCommandRepository.getVirtualCommands()
       .then((response: any) => {
-        Vue.$log.debug(response);
-        Vue.$log.debug(response.data);
         context.commit('setVirtualCommands', {virtualCommands: response.data});
         EventBus.$emit('virtualCommandsLoaded', response.data);
       })
       .catch((error: any) => {
-        Vue.$log.warn('Error loading virtual commands!', error);
         EventBus.$emit('failedLoadingVirtualCommands', error);
       });
   },
@@ -146,26 +125,20 @@ const actions = {
   loadUsers(context: any) {
     return fetchUsers(context.state.access_token)
       .then((response) => {
-        Vue.$log.debug(response);
-        Vue.$log.debug(response.data);
         context.commit('setUsers', {users: response.data});
         EventBus.$emit('usersLoaded', response.data);
       })
       .catch((error) => {
-        Vue.$log.warn('Error loading users!', error);
         EventBus.$emit('failedLoadingUsers', error);
       });
   },
   loadUserGroups(context: any) {
     return fetchUserGroups(context.state.access_token)
       .then((response) => {
-        Vue.$log.debug(response);
-        Vue.$log.debug(response.data);
         context.commit('setUserGroups', {groups: response.data});
         EventBus.$emit('groupsLoaded', response.data);
       })
       .catch((error) => {
-        Vue.$log.warn('Error loading user groups!', error);
         EventBus.$emit('failedLoadingUserGroups', error);
       });
   },
@@ -173,7 +146,6 @@ const actions = {
     if (!getters.isAuthenticated) {
       EventBus.$emit('accessTokenInvalid');
       if (!getters.isRefreshTokenValid) {
-        Vue.$log.warn('Access and refresh token invalid! User must login again!');
         EventBus.$emit('refreshTokenInvalid');
         EventBus.$emit('accessAndRefreshTokenInvalid');
       } else {
@@ -188,13 +160,10 @@ const actions = {
   loadProfile(context: any) {
     return fetchProfile(context.state.access_token)
       .then((response) => {
-        Vue.$log.debug(response);
-        Vue.$log.debug(response.data);
         context.commit('setProfile', {profile: response.data});
         EventBus.$emit('profileLoaded', response.data);
       })
       .catch((error) => {
-        Vue.$log.warn('Error loading profile!', error);
         EventBus.$emit('failedLoadingProfile', error);
       });
   },
@@ -210,7 +179,6 @@ const actions = {
     return authenticate(userData)
       .then((response) => context.commit('setJwtToken', {tokens: response.data}))
       .catch((error) => {
-        Vue.$log.warn('Error Authenticating: ', error);
         EventBus.$emit('failedAuthentication', error);
       });
   },
@@ -219,7 +187,6 @@ const actions = {
     if (revokeRefreshToken) {
       return revokeRefreshKey(context.state.access_token)
           .catch((error) => {
-            Vue.$log.warn('Error Authenticating (Could not revoke refresh token): ', error);
             EventBus.$emit('failedRevokingRefreshToken', error);
           });
     }
@@ -230,29 +197,23 @@ const actions = {
     return oidc_login(redirectionUrl)
       .then((response) => context.commit('setJwtToken', {tokens: response.data}))
       .catch((error) => {
-        Vue.$log.warn('Error Authenticating: ', error);
         EventBus.$emit('failedAuthentication', error);
       });
   },
   refreshToken(context: any) {
     EventBus.$emit('refreshingToken');
-    Vue.$log.debug('Refreshing tokens!');
     return getFreshToken(context.state.refresh_token)
       .then((response) => {
         context.commit('setTokens', {tokens: response.data});
-        Vue.$log.debug('Tokens refreshed!');
       })
       .catch((error) => {
-        Vue.$log.warn('Error Refreshing token: ', error);
         EventBus.$emit('failedRefreshingToken', error);
       });
   },
   resetToken(context: any) {
     EventBus.$emit('resettingTokens');
-    Vue.$log.debug('Resetting tokens!');
     context.commit('setTokens', {tokens: {access_token: '', refresh_token: ''}});
     EventBus.$emit('tokensReset');
-    Vue.$log.debug('Tokens reset!');
   },
   storeTokens(context: any, tokens: any) {
     context.commit('setTokens', {tokens});
@@ -263,7 +224,6 @@ const actions = {
     return register(userData)
       .then(context.dispatch('login', userData))
       .catch((error) => {
-        Vue.$log.warn('Error Registering: ', error);
         EventBus.$emit('failedRegistering: ', error);
       });
   },
@@ -334,34 +294,27 @@ const mutations = {
     }
   },
   setLoginProviderData(sState: any, payload: any) {
-    Vue.$log.debug('got loginProviders = ', payload);
     sState.loginProviders = payload.providers;
   },
   // probably old ...
   setUserData(sState: any, payload: any) {
-    Vue.$log.debug('setUserData payload = ', payload);
     sState.userData = payload.userData;
   },
   setProfile(sState: any, payload: any) {
-    Vue.$log.debug('setProfile payload = ', payload);
     sState.profile = payload.profile;
   },
   setJwtToken(sState: any, payload: any) {
-    Vue.$log.debug('setJwtToken payload = ', payload);
     localStorage.tokens = payload.tokens;
     sState.access_token = payload.tokens.access_token;
     sState.refresh_token = payload.tokens.refresh_token;
   },
   setTokens(sState: any, payload: any) {
-    Vue.$log.debug('setTokens payload = ', payload);
     if ('access_token' in payload.tokens) {
       sState.access_token = payload.tokens.access_token;
     }
     if ('refresh_token' in payload.tokens) {
       sState.refresh_token = payload.tokens.refresh_token;
     }
-    Vue.$log.debug('access_token: ' + sState.access_token);
-    Vue.$log.debug('refresh_token: ' + sState.refresh_token);
   },
 };
 
@@ -369,14 +322,10 @@ const getters = {
   // reusable data accessors
   isAuthenticated(sState: any) {
     const valid = isValidJwt(sState.access_token);
-    Vue.$log.debug('Access token is valid?: ', valid);
-    Vue.$log.debug(sState.access_token);
     return valid;
   },
   isRefreshTokenValid(sState: any) {
     const valid = isValidJwt(sState.refresh_token);
-    Vue.$log.debug('Refresh token is valid?: ', valid);
-    Vue.$log.debug('sState.refresh_token');
     return valid;
   },
   getLoginProviders(sState: any) {
@@ -406,7 +355,7 @@ const store = new Vuex.Store({
   actions,
   mutations,
   getters,
-  plugins: [createPersistedState()],
+  plugins: [createPersistedState(), createLogger()],
 });
 
 export default store;

vue.config.js

@@ -5,7 +5,7 @@ module.exports = {
     css: {
         loaderOptions: {
             sass: {
-                data: `
+                additionalData: `
                 @import "@/scss/_variables.scss";
                 @import "@/scss/_base.scss";
                 `,