tobias/lrc-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tobias
2020-07-30 16:42:32 +02:00
parent 0a885f1750
commit d26cc1492d
23 changed files with 5436 additions and 2354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
babel.config.js
View File

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

7219
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

35
package.json
View File

@@ -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"
}

18
src/$log.d.ts vendored
View File

@@ -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;
};
}
}

2
src/App.vue
View File

@@ -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
}

9
src/api/Repository.js
View File

@@ -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 = '/';
}
});

4
src/api/index.ts
View File

@@ -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}` } });
}

1
src/components/Admin.vue
View File

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

1
src/components/Commands.vue
View File

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

2
src/components/Group.vue
View File

@@ -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();
},

1
src/components/Login.vue
View File

@@ -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) {

1
src/components/OldLogin.vue
View File

@@ -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) {

2
src/components/Permission.vue
View File

@@ -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();
},

313
src/components/Profile.vue
View File

@@ -1,173 +1,182 @@
<!-- components/Profile.vue -->
<template>
<div>
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
<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-else-if="profile.first_name">
{{profile.first_name}}&nbsp;{{profile.last_name}}</h2>
<h2 class="title" v-else>{{profile.email}}</h2>
<div>
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
<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-else-if="profile.first_name">
{{ 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}}
<a class="badge badge-pill badge-info">
<font-awesome-icon icon="pencil-alt"/></a>
</p>
<p>
<font-awesome-icon icon="envelope"/>&nbsp;{{ profile.email }}
<a class="badge badge-pill badge-info">
<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}}
<a class="badge badge-pill badge-info"
@click="()=>{form.nickname=profile.nickname; formEditField['nickname']=true;}">
<font-awesome-icon icon="pencil-alt"/></a>
</p>
<b-input-group style="max-width: 50%;" v-else size="sm">
<b-form-input name="nickname"
v-model="form.nickname"
class="form-control" type="text"
:placeholder="$t('set_your_nickname') + ' ('+profile.nickname +')'"></b-form-input>
<b-input-group-append>
<b-button :disabled="errors.has('nickname')"
@click="updateProfile('nickname')"
variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon>
</b-button>
</b-input-group-append>
</b-input-group>
<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>
</p>
<b-input-group style="max-width: 50%;" v-else size="sm">
<b-form-input name="nickname"
v-model="form.nickname"
class="form-control" type="text"
:placeholder="$t('set_your_nickname') + ' ('+profile.nickname +')'"></b-form-input>
<b-input-group-append>
<b-button :disabled="errors.has('nickname')"
@click="updateProfile('nickname')"
variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon>
</b-button>
</b-input-group-append>
</b-input-group>
<p>
<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>
</p>
<p v-if="profile.external_user">
<span>&f19b;</span>
<font-awesome-icon :icon="['fab', 'openid']"/>&nbsp;{{ $t('external user') }}
</div>
</p>
<p v-else>
<font-awesome-icon icon="pencil-alt"/>&nbsp;{{ $t('internal user') }}
</p>
<hr/>
</div>
<p><strong>{{$t('first_name')}}:&nbsp</strong>{{profile.first_name}}</p>
<p><strong>{{$t('last_name')}}:&nbsp</strong>{{profile.last_name}}</p>
<hr/>
<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('first_name') }}:&nbsp</strong>{{ profile.first_name }}</p>
<p><strong>{{ $t('last_name') }}:&nbsp</strong>{{ profile.last_name }}</p>
<hr/>
<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>
<div>
<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}}
</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="subtitle error-msg">{{ errorMsg }}</p>
</div>
</div>
</section>
{{profile}}
</div>
<hr/>
<div>
<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 }}
</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="subtitle error-msg">{{ errorMsg }}</p>
</div>
</div>
</section>
{{ 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 {
data() {
return {
email: '',
errorMsg: '',
tokenValidity: -1,
refreshTokenValidity: -1,
formEditField: {},
languages: [
{flag: 'us', language: 'en', title: 'English'},
{flag: 'es', language: 'es', title: 'Español'},
{flag: 'de', language: 'de', title: 'Deutsch'},
],
form: {
first_name: '',
last_name: '',
nickname: '',
email: '',
},
};
},
methods: {
authenticate() {
this.$store.dispatch('login', {email: this.email, password: this.password})
.then(() => this.$router.push('/'));
},
updateProfile(fieldName) {
this.$parent.$data.isLoading = true;
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')
.then(() => {
this.$parent.$data.isLoading = false;
});
});
},
changeLocale(locale) {
this.$i18n.locale = locale;
// Vue.$moment.locale(locale);
},
},
mounted() {
this.$log.debug('Profile: mounting...');
EventBus.$on('failedLoadingProfile', (msg) => {
this.errorMsg = msg;
});
this.$store.dispatch('loadProfile');
this.$nextTick(() => {
window.setInterval(() => {
this.tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);
this.refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token);
}, 1000);
});
},
beforeDestroy() {
EventBus.$off('failedLoadingProfile');
},
computed: {
profile() {
return this.$store.state.profile;
},
access_token() {
return this.$store.state.access_token;
},
},
export default {
data() {
return {
email: '',
errorMsg: '',
tokenValidity: -1,
refreshTokenValidity: -1,
formEditField: {},
languages: [
{flag: 'us', language: 'en', title: 'English'},
{flag: 'es', language: 'es', title: 'Español'},
{flag: 'de', language: 'de', title: 'Deutsch'},
],
form: {
first_name: '',
last_name: '',
nickname: '',
email: '',
},
};
},
methods: {
authenticate() {
this.$store.dispatch('login', {email: this.email, password: this.password})
.then(() => this.$router.push('/'));
},
updateProfile(fieldName) {
this.$parent.$data.isLoading = true;
this.$set(this.formEditField, fieldName, false);
const data = {};
data[fieldName] = this.form[fieldName];
userRepository.updateProfile(data)
.then(() => {
this.$store.dispatch('loadProfile')
.then(() => {
this.$parent.$data.isLoading = false;
});
});
},
changeLocale(locale) {
this.$i18n.locale = locale;
// Vue.$moment.locale(locale);
},
},
mounted() {
EventBus.$on('failedLoadingProfile', (msg) => {
this.errorMsg = msg;
});
this.$store.dispatch('loadProfile');
this.$nextTick(() => {
window.setInterval(() => {
this.tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);
this.refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token);
}, 1000);
});
},
beforeDestroy() {
EventBus.$off('failedLoadingProfile');
},
computed: {
profile() {
return this.$store.state.profile;
},
access_token() {
return this.$store.state.access_token;
},
},
};
</script>
<style lang="scss">
.error-msg {
color: red;
font-weight: bold;
}
.lang-btn {
padding: 15px;
border: 2px solid green;
font-size: 18px;
margin: 15px;
}
.error-msg {
color: red;
font-weight: bold;
}
.lang-btn {
padding: 15px;
border: 2px solid green;
font-size: 18px;
margin: 15px;
}
</style>

5
src/components/RecorderState.vue
View File

@@ -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();
}

6
src/components/Recorders.vue
View File

@@ -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) {

1
src/components/Rooms.vue
View File

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

6
src/components/Test.vue
View File

@@ -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');

2
src/components/User.vue
View File

@@ -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();
},

13
src/main.ts
View File

@@ -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,

2
src/router.ts
View File

@@ -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'));

55
src/store.ts
View File

@@ -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;

2
vue.config.js
View File

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