diff --git a/src/plugins/user/components/settings/Main.vue b/src/plugins/user/components/settings/Main.vue
new file mode 100644
index 0000000..7e9d1d7
--- /dev/null
+++ b/src/plugins/user/components/settings/Main.vue
@@ -0,0 +1,15 @@
+
+
+
+ Test
+
+
+
+
+
diff --git a/src/plugins/user/components/settings/Sessions.vue b/src/plugins/user/components/settings/Sessions.vue
new file mode 100644
index 0000000..dfaaff7
--- /dev/null
+++ b/src/plugins/user/components/settings/Sessions.vue
@@ -0,0 +1,83 @@
+
+
+
+ Diese Session.
+
+
+
+
+ Browser:
+
+ {{ session.browser }}
+
+
+ Plattform:
+
+ {{ session.platform }}
+
+
+
+
+ Lebenszeit:
+ {{ session.lifetime }}
+
+
Läuft aus: {{ session.expires }}
+
+
+
+
+
+
+
+
+
diff --git a/src/plugins/user/pages/Settings.vue b/src/plugins/user/pages/Settings.vue
index 79c51b3..76d7126 100644
--- a/src/plugins/user/pages/Settings.vue
+++ b/src/plugins/user/pages/Settings.vue
@@ -4,62 +4,22 @@
padding
class="fit row justify-center content-center items-center q-gutter-sm"
>
-
- Deine Sessions:
-
-
+
-
+ Allgemeine Einstellungen:
+
+
+
+ Aktive Sessions:
+
+
-
- Diese Session.
-
-
-
-
- Browser:
-
- {{ session.browser }}
-
-
- Plattform:
-
- {{ session.platform }}
-
-
-
-
- Lebenszeit:
- {{ session.lifetime }}
-
-
- Läuft aus: {{ session.expires }}
-
-
-
-
-
-
-
+ :session="session"
+ />
import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
import CircularProgress from 'components/loading/CircularProgress.vue';
+import Sessions from '../components/settings/Sessions.vue';
+import Main from '../components/settings/Main.vue';
export default defineComponent({
// name: 'PageName'
- components: { CircularProgress },
+ components: { CircularProgress, Sessions, Main },
setup(_, { root }) {
onBeforeMount(() => {
root.$store.dispatch('sessions/getSessions');
});
-
const sessions = computed(() => root.$store.getters['sessions/sessions']);
+
function showRootGetters() {
//ctx.root.$store.dispatch('sessions/getSessions');
console.log(sessions.value);
}
- function getBrowserIcon(browser: string) {
- return browser == 'firefox'
- ? 'mdi-firefox'
- : browser == 'chrome'
- ? 'mdi-google-chrome'
- : browser == 'safari'
- ? 'mdi-apple-safari'
- : 'mdi-help';
- }
- function getPlatformIcon(platform: string) {
- return platform == 'linux'
- ? 'mdi-linux'
- : platform == 'windows'
- ? 'mdi-microsoft-windows'
- : platform == 'apple'
- ? 'mdi-apple'
- : 'mdi-help';
- }
-
- function deleteSession(token: string) {
- root.$store.dispatch('sessions/deleteSession', token);
- }
- function isThisSession(token: string) {
- return root.$store.getters['user/session'].token == token;
- }
const sessionsLoading = computed(() => {
return root.$store.getters['sessions/loading'];
@@ -119,12 +56,8 @@ export default defineComponent({
return {
showRootGetters,
- sessions,
- getBrowserIcon,
- getPlatformIcon,
- isThisSession,
- deleteSession,
- sessionsLoading
+ sessionsLoading,
+ sessions
};
}
});
diff --git a/src/plugins/user/store/user.ts b/src/plugins/user/store/user.ts
index d1e984e..40dd2e0 100644
--- a/src/plugins/user/store/user.ts
+++ b/src/plugins/user/store/user.ts
@@ -18,7 +18,11 @@ export interface LoginResponse {
const state: UserStateInterface = {
permissions: [],
session: {
- browser: '', expires: new Date(), lifetime: -1, platform: '', token: '',
+ browser: '',
+ expires: new Date(),
+ lifetime: -1,
+ platform: '',
+ token: '',
user: {
display_name: '',
firstname: '',
@@ -32,22 +36,22 @@ const state: UserStateInterface = {
};
const mutations: MutationTree = {
- setPermissions (state, data: []) {
+ setPermissions(state, data: []) {
state.permissions = data;
},
- setSession (state, data: Session) {
+ setSession(state, data: Session) {
state.session = data;
},
- setLoginLoading (state, data: boolean) {
+ setLoginLoading(state, data: boolean) {
state.loginLoading = data;
},
- showState (state) {
+ showState(state) {
console.log(state);
}
};
const actions: ActionTree = {
- login ({ commit }, data: LoginData) {
+ login({ commit }, data: LoginData) {
commit('setLoginLoading', true);
Loading.show({ message: 'Du wirst eingeloggt' });
void axios
@@ -70,7 +74,19 @@ const actions: ActionTree = {
Loading.hide();
});
},
- loadFromLocalStorage ({ commit }) {
+ logout({ commit }, token) {
+ void axios.delete(`/auth/${token}`).then(() => {
+ commit('setPermissions', []);
+ commit('setToken', {
+ browser: '',
+ expires: '',
+ lifetime: '',
+ platform: '',
+ token: ''
+ });
+ });
+ },
+ loadFromLocalStorage({ commit }) {
console.log('load from store');
let data = LocalStorage.getItem('permissions');
commit('setPermissions', data ? data : []);
@@ -79,23 +95,29 @@ const actions: ActionTree = {
'setSession',
data
? data
- : { browser: '', expires: new Date(), lifetime: -1, platform: '', token: '' }
+ : {
+ browser: '',
+ expires: new Date(),
+ lifetime: -1,
+ platform: '',
+ token: ''
+ }
);
commit('showState');
}
};
const getters: GetterTree = {
- permissions ({ permissions }) {
+ permissions({ permissions }) {
return permissions;
},
- session ({ session }) {
+ session({ session }) {
return session;
},
- loginLoading ({ loginLoading }) {
+ loginLoading({ loginLoading }) {
return loginLoading;
},
- displayName({ user }) {
+ displayName({ session: { user } }) {
return `${user.firstname} ${user.lastname}`;
}
};