diff --git a/quasar.conf.js b/quasar.conf.js
index e6f0708..f503dd4 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -103,7 +103,7 @@ module.exports = configure(function(ctx) {
// directives: [],
// Quasar plugins
- plugins: ['LocalStorage']
+ plugins: ['LocalStorage', 'Loading']
},
// animations: 'all', // --- includes all animations
diff --git a/src/components/loading/CircularProgress.vue b/src/components/loading/CircularProgress.vue
new file mode 100644
index 0000000..b59b9d9
--- /dev/null
+++ b/src/components/loading/CircularProgress.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/plugins/user/pages/Settings.vue b/src/plugins/user/pages/Settings.vue
index 0146030..e0f0bf9 100644
--- a/src/plugins/user/pages/Settings.vue
+++ b/src/plugins/user/pages/Settings.vue
@@ -7,6 +7,8 @@
+
+
tada:: {{ sessionsLoading }}
import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
-import { mainLink } from '../plugin';
-import { platform } from 'os';
+import CircularProgress from 'components/loading/CircularProgress.vue';
export default defineComponent({
// name: 'PageName'
+ components: { CircularProgress },
setup(_, { root }) {
onBeforeMount(() => {
root.$store.dispatch('sessions/getSessions');
@@ -101,13 +103,19 @@ export default defineComponent({
function isThisSession(token: string) {
return root.$store.getters['user/token'].token == token;
}
+
+ const sessionsLoading = computed(() => {
+ return root.$store.getters['sessions/loading'];
+ });
+
return {
showRootGetters,
sessions,
getBrowserIcon,
getPlatformIcon,
isThisSession,
- deleteSession
+ deleteSession,
+ sessionsLoading
};
}
});
diff --git a/src/plugins/user/store/session.ts b/src/plugins/user/store/session.ts
index 8cd8e05..da47218 100644
--- a/src/plugins/user/store/session.ts
+++ b/src/plugins/user/store/session.ts
@@ -26,7 +26,7 @@ const mutations: MutationTree = {
setSessions(state, sessions: Session[]) {
state.sessions = sessions;
},
- setLoading(state, value) {
+ setLoading(state, value: boolean) {
state.loading = value;
}
};
@@ -71,6 +71,9 @@ const actions: ActionTree = {
const getters: GetterTree = {
sessions(state) {
return state.sessions;
+ },
+ loading(state) {
+ return state.loading;
}
};
diff --git a/src/plugins/user/store/user.ts b/src/plugins/user/store/user.ts
index a721d6b..1f6cdc2 100644
--- a/src/plugins/user/store/user.ts
+++ b/src/plugins/user/store/user.ts
@@ -3,7 +3,7 @@ import { StateInterface } from 'src/store';
import { axios } from 'boot/axios';
import { LoginData } from 'src/plugins/user/models';
import { AxiosResponse } from 'axios';
-import { LocalStorage } from 'quasar';
+import { LocalStorage, Loading } from 'quasar';
import { Router } from 'src/router';
export interface Token {
@@ -72,6 +72,7 @@ const actions: ActionTree = {
login({ commit }, data: LoginData) {
console.log('bla');
commit('setLoginLoading', true);
+ Loading.show({ message: 'Du wirst eingeloggt' });
void axios
.post('http://localhost:5000/auth', data)
.then((response: AxiosResponse) => {
@@ -93,6 +94,7 @@ const actions: ActionTree = {
})
.finally(() => {
commit('setLoginLoading', false);
+ Loading.hide();
});
}
};