src/boot/axios.ts

@@ -1,7 +1,7 @@
 import axios, { AxiosInstance } from 'axios';
 import { boot } from 'quasar/wrappers';
 import { StateInterface } from '../store';
-import config from '../config'
+import config from '../config';
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -14,8 +14,7 @@ export default boot(({ Vue, store }) => {
   Vue.prototype.$axios = axios;
   axios.defaults.baseURL = config.baseURL;
 
-  axios.interceptors.request.use(
-    config => {
+  axios.interceptors.request.use(config => {
     const token = (<StateInterface>store.state).user.token;
     if (token) {
       config.headers['Authorization'] = 'Token ' + token.token;
@@ -23,3 +22,5 @@ export default boot(({ Vue, store }) => {
     return config;
   });
 });
+
+export { axios };

src/boot/login.ts

@@ -4,14 +4,18 @@ import { StateInterface } from '../store';
 export default boot(({ Vue, router, store }) => {
   router.beforeEach((to, from, next) => {
     let user = (<StateInterface>store.state).user;
-
-        if (to.matched.some(record => {
+    console.log('login_boot', user);
+    if (
+      to.matched.some(record => {
         // permissions is set AND has NO matching permission
-            return record.meta.permissions !== undefined &&
-                !(record.meta.permissions.filter(
-                    (value: string) =>
+        return (
+          record.meta.permissions !== undefined &&
+          !(
+            record.meta.permissions.filter((value: string) =>
               user.permissions.includes(value)
-                ).length > 0);
+            ).length > 0
+          )
+        );
       })
     ) {
       next({
@@ -21,5 +25,5 @@ export default boot(({ Vue, router, store }) => {
     } else {
       next();
     }
-    })
+  });
 });

src/boot/plugins.ts

@@ -1,12 +1,12 @@
 import { boot } from 'quasar/wrappers';
 import { RouteConfig } from 'vue-router';
-import { Module } from 'vuex';
+import { Module, Store } from 'vuex';
 
 const config = {
   // Do not change required Modules !!
   requiredModules: ['user'],
   // here you can import plugins.
-  loadModules: ['plugin1', 'user-plugin']
+  loadModules: []
 };
 
 // do not change anything here !!
@@ -19,7 +19,7 @@ interface ShortCutLink {
 interface Plugin {
   name: string;
   routes: RouteConfig[];
-  store?: Module<never, never>[];
+  store?: Map<string, Module<any, any>>;
   mainLink: PluginMainLink;
   requiredModules: string[];
   shortcuts: ShortCutLink[];
@@ -65,7 +65,7 @@ function combineRoutes(
   target: RouteConfig[],
   source: RouteConfig[]
 ): RouteConfig[] {
-  // iterate first layer e.g. /main, /login etc.
+  // iterate first layer e.g. /main, / etc.
   source.forEach((sourceRouteConfig: RouteConfig) => {
     const targetRouteConfig: RouteConfig | undefined = target.find(
       (routeConfig: RouteConfig) => {
@@ -138,7 +138,7 @@ function loadPlugin(
   loadedPlugins: LoadedPlugins,
   modules: string[],
   plugins: Plugin[],
-  store: any
+  store: Store<any>
 ): LoadedPlugins {
   modules.forEach(requiredModule => {
     const plugin = plugins.find(plugin => {
@@ -147,10 +147,15 @@ function loadPlugin(
     if (plugin) {
       loadedPlugins.routes = combineRoutes(loadedPlugins.routes, plugin.routes);
       if (plugin.store) {
-        plugin.store.forEach(store_module => {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-          store.registerModule(store_module);
+        console.log(plugin.store);
+        console.log(plugin.store.keys());
+        plugin.store.forEach((store_plugin, store_namespace) => {
+          store.registerModule(store_namespace, store_plugin);
         });
+        //.forEach(store_key => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+        //store.registerModule(store_key, plugin.store.get(store_key));
+        //});
       }
       loadedPlugins.mainLinks = combineMainLinks(
         loadedPlugins.mainLinks,

src/pages/Login.vue

@@ -1,9 +1,8 @@
 <template>
-  <q-page
-    padding
-    class="fit row  justify-center items-center content-center"
+  <q-page padding class="fit row  justify-center items-center content-center">
+    <q-card
+      class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center"
     >
-    <q-card class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center">
       <q-toolbar class="bg-primary text-white">
         <q-toolbar-title>
           Login
@@ -11,11 +10,7 @@
       </q-toolbar>
 
       <q-card-section>
-        <q-form
-          ref="LoginForm"
-          @submit="doLogin"
-          class="q-gutter-md"
-        >
+        <q-form ref="LoginForm" @submit="doLogin" class="q-gutter-md">
           <q-input
             filled
             v-model="userid"
@@ -30,11 +25,7 @@
             :rules="rules"
           />
           <div class="row justify-end">
-            <q-btn
-              label="Login"
-              type="submit"
-              color="primary"
-            />
+            <q-btn label="Login" type="submit" color="primary" />
           </div>
         </q-form>
       </q-card-section>
@@ -51,19 +42,19 @@ export default defineComponent({
     const userid = ref('');
     const password = ref('');
     const rules = [
-      (val: string) => (val && val.length > 0) || 'Feld darf nicht leer sein!',
+      (val: string) => (val && val.length > 0) || 'Feld darf nicht leer sein!'
     ];
 
     function doLogin() {
+      console.log(userid.value, password.value);
       ctx.root.$store.dispatch('user/login', {
         userid: userid.value,
-        password: password.value,
+        password: password.value
       });
-
-      void ctx.root.$router.push({ name: 'user' });
+      //ctx.root.$router.push({ name: 'main' });
     }
 
     return { userid, password, doLogin, rules };
-  },
+  }
 });
 </script>

src/plugins/user/models.ts

@@ -0,0 +1,4 @@
+export interface LoginData {
+  userid: string;
+  password: string;
+}

src/plugins/user/pages/Settings.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <q-page padding class="fit row justify-center content-center items-center">
+      <div class="text-h5 row">
+        Deine Sessions:
+      </div>
+      <!--<div class="fit row justify-center content-center items-center">
+        <q-card
+          class="col-4"
+          height=""
+          v-for="(session, index) in sessions"
+          :key="'session' + index"
+        >
+          <q-card-section>
+            {{ session }}
+          </q-card-section>
+        </q-card>
+      </div> -->
+      <div class="row">
+        <q-btn label="show sessions" @click="showRootGetters" />
+      </div>
+    </q-page>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, reactive, ref } from '@vue/composition-api';
+import { mainLink } from '../plugin';
+export default defineComponent({
+  // name: 'PageName'
+  setup(_, ctx) {
+    const sessions = computed(
+      () => ctx.root.$store.getters['sessions/sessions']
+    );
+    function showRootGetters() {
+      //ctx.root.$store.dispatch('sessions/getSessions');
+      console.log(sessions.value);
+    }
+    return { showRootGetters, sessions };
+  }
+});
+</script>

src/plugins/user/pages/User.vue

@@ -3,22 +3,18 @@
     <q-page
       padding
       class="fit row justify-center content-center items-center"
-      v-if="true"
-    >
-      <q-card
-        class="col-4"
-        height=""
+      v-if="checkMain"
     >
+      <q-card class="col-4" height="">
         <q-card-section>
-          Name: {{ userState.user.firstname }} {{ userState.user.lastname }}<br />
-          E-Mail: {{ userState.user.mail }}<br />
-          Roles: <ul
-            v-for="role in userState.user.roles"
-            v-bind:key="role"
-          >
+          Name: {{ userState.firstname }} {{ userState.lastname }}<br />
+          E-Mail: {{ userState.mail }}<br />
+          Roles:
+          <ul v-for="role in userState.roles" v-bind:key="role">
             <li>{{ role }}</li>
-          </ul><br />
-          Token expires: {{ userState.token.expires }}
+          </ul>
+          <br />
+          Token expires: {{ userToken.expires }}
         </q-card-section>
       </q-card>
     </q-page>
@@ -28,16 +24,25 @@
 
 <script lang="ts">
 import { defineComponent, computed } from '@vue/composition-api';
-import { UserStateInterface } from '../../../store/module-user/state';
+import { UserStateInterface } from '../store/user';
+import { mainLink } from '../plugin';
 
 export default defineComponent({
   // name: 'PageName'
   setup(_, { root }) {
     const userState = computed(
-      () => <UserStateInterface>root.$store.state.user
+      () => <UserStateInterface>root.$store.getters['user/user']
     );
-    const a = ctx.root.$flaschengeistPlugins.mainLinks;
-    return { a, userState };
-  },
+    const userPermissions = computed(
+      () => <UserStateInterface>root.$store.getters['user/permissions']
+    );
+    const userToken = computed(
+      () => <UserStateInterface>root.$store.getters['user/token']
+    );
+    const checkMain = computed(() => {
+      return mainLink.name == root.$route.name;
+    });
+    return { userState, userPermissions, userToken, checkMain };
+  }
 });
 </script>

src/plugins/user/plugin.ts

@@ -1,4 +1,7 @@
 import { Plugin, PluginMainLink } from 'boot/plugins';
+import { Module } from 'vuex';
+import userStore from './store/user';
+import sessionsStore from './store/session';
 import routes from './routes';
 
 const mainLink: PluginMainLink = {
@@ -6,7 +9,14 @@ const mainLink: PluginMainLink = {
   title: 'User',
   link: 'user',
   icon: 'mdi-account',
-  children: []
+  children: [
+    {
+      name: 'user',
+      title: 'Einstellungen',
+      link: 'user-settings',
+      icon: 'mdi-cog'
+    }
+  ]
 };
 
 const plugin: Plugin = {
@@ -16,7 +26,11 @@ const plugin: Plugin = {
   requiredModules: [],
   shortcutsOut: [],
   shortcuts: [],
-  version: '0.0.1'
+  version: '0.0.1',
+  store: new Map<string, Module<any, any>>([
+    ['user', userStore],
+    ['sessions', sessionsStore]
+  ])
 };
 
 export { mainLink };

src/plugins/user/routes/index.ts

@@ -8,7 +8,16 @@ const routes: RouteConfig[] = [
       {
         path: 'user',
         name: 'user',
-        component: () => import('../pages/User.vue')
+        component: () => import('../pages/User.vue'),
+        meta: { permissions: ['user'] },
+        children: [
+          {
+            path: 'settings',
+            name: 'user-settings',
+            meta: { permissions: ['user'] },
+            component: () => import('../pages/Settings.vue')
+          }
+        ]
       }
     ]
   }

src/plugins/user/store/session.ts

@@ -0,0 +1,68 @@
+import { Module, MutationTree, ActionTree, GetterTree } from 'vuex';
+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 { Router } from 'src/router';
+
+export interface SessionInterface {
+  sessions: Session[];
+  loading: boolean;
+}
+export interface Session {
+  browser: string;
+  expires: string;
+  lifetime: number;
+  platform: string;
+  token: string;
+}
+const state: SessionInterface = {
+  sessions: [],
+  loading: false
+};
+
+const mutations: MutationTree<SessionInterface> = {
+  setSessions(state, sessions: Session[]) {
+    state.sessions = sessions;
+  },
+  setLoading(state, value) {
+    state.loading = value;
+  }
+};
+
+const actions: ActionTree<SessionInterface, StateInterface> = {
+  getSessions({ commit, rootGetters }) {
+    console.log(rootGetters);
+    commit('setLoading', true);
+    axios
+      .get('http://localhost:5000/auth', {
+        headers: { Token: rootGetters['user/token'].token }
+      })
+      .then(response => {
+        commit('setSessions', response.data);
+      })
+      .catch(error => {
+        console.exception(error);
+      })
+      .finally(() => {
+        commit('setLoading', false);
+      });
+  }
+};
+
+const getters: GetterTree<SessionInterface, StateInterface> = {
+  sessions(state) {
+    return state.sessions;
+  }
+};
+
+const sessions: Module<SessionInterface, StateInterface> = {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+};
+
+export default sessions;

src/plugins/user/store/user.ts

@@ -0,0 +1,126 @@
+import { Module, MutationTree, ActionTree, GetterTree } from 'vuex';
+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 { Router } from 'src/router';
+
+export interface Token {
+  browser: string;
+  expires: string;
+  lifetime: number;
+  platform: string;
+  token: string;
+}
+
+export interface User {
+  display_name: string | null;
+  firstname: string;
+  lastname: string;
+  mail: string;
+  roles: string[];
+}
+
+export interface UserStateInterface extends LoginResponse {
+  loginLoading: boolean;
+}
+
+export interface LoginResponse {
+  permissions: string[];
+  token: Token;
+  user: User;
+  userid: string;
+}
+
+const state: UserStateInterface = {
+  permissions: [],
+  token: { browser: '', expires: '', lifetime: -1, platform: '', token: '' },
+  user: {
+    display_name: '',
+    firstname: '',
+    lastname: '',
+    mail: '',
+    roles: []
+  },
+  userid: '',
+  loginLoading: false
+};
+
+const mutations: MutationTree<UserStateInterface> = {
+  setPermissions(state, data: []) {
+    state.permissions = data;
+  },
+  setToken(state, data: Token) {
+    state.token = data;
+  },
+  setUser(state, data: User) {
+    state.user = data;
+  },
+  setUserId(state, data: string) {
+    state.userid = data;
+  },
+  setLoginLoading(state, data: boolean) {
+    state.loginLoading = data;
+  },
+  showState(state) {
+    console.log(state);
+  }
+};
+
+const actions: ActionTree<UserStateInterface, StateInterface> = {
+  login({ commit }, data: LoginData) {
+    console.log('bla');
+    commit('setLoginLoading', true);
+    void axios
+      .post('http://localhost:5000/auth', data)
+      .then((response: AxiosResponse<LoginResponse>) => {
+        commit('setPermissions', response.data.permissions);
+        console.log('saved permisisons');
+        commit('setToken', response.data.token);
+        commit('setUser', response.data.user);
+        commit('setUserId', response.data.userid);
+        commit('showState');
+        //LocalStorage.set('permissions', response.data.permissions);
+        //LocalStorage.set('token', response.data.token);
+        //LocalStorage.set('user', response.data.user);
+        //LocalStorage.set('userid', response.data.userid);
+
+        void Router.push({ name: 'user' });
+      })
+      .catch(error => {
+        console.exception(error);
+      })
+      .finally(() => {
+        commit('setLoginLoading', false);
+      });
+  }
+};
+
+const getters: GetterTree<UserStateInterface, StateInterface> = {
+  permissions({ permissions }) {
+    return permissions;
+  },
+  token({ token }) {
+    return token;
+  },
+  user({ user }) {
+    return user;
+  },
+  userid({ userid }) {
+    return userid;
+  },
+  loginLoading({ loginLoading }) {
+    return loginLoading;
+  }
+};
+
+const userStore: Module<UserStateInterface, StateInterface> = {
+  namespaced: true,
+  actions,
+  getters,
+  mutations,
+  state
+};
+
+export default userStore;

src/router/index.ts

@@ -8,11 +8,7 @@ import routes from './routes';
  * If not building with SSR mode, you can
  * directly export the Router instantiation
  */
-
-export default route<Store<StateInterface>>(function ({ Vue }) {
-  Vue.use(VueRouter);
-
-  const Router = new VueRouter({
+export const Router: VueRouter = new VueRouter({
   scrollBehavior: () => ({ x: 0, y: 0 }),
   routes,
 
@@ -23,5 +19,8 @@ export default route<Store<StateInterface>>(function ({ Vue }) {
   base: process.env.VUE_ROUTER_BASE
 });
 
+export default route<Store<StateInterface>>(function({ Vue }) {
+  Vue.use(VueRouter);
+
   return Router;
-})
+});

src/store/index.ts

@@ -11,16 +11,14 @@ import { UserStateInterface } from './module-user/state';
 
 export interface StateInterface {
   // Define your own store structure, using submodules if needed
-  user: UserStateInterface;
+  example: unknown;
 }
 
 export default store(function({ Vue }) {
   Vue.use(Vuex);
 
   const Store = new Vuex.Store<StateInterface>({
-    modules: {
-      user
-    },
+    modules: {},
 
     // enable strict mode (adds overhead!)
     // for dev mode only