login

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

@@ -25,6 +25,7 @@
             :rules="rules"
           />
           <div class="row justify-end">
+            <q-btn label="test" @click="showStore" />
             <q-btn label="Login" type="submit" color="primary" />
           </div>
         </q-form>
@@ -47,10 +48,18 @@ export default defineComponent({
 
     function doLogin() {
       console.log(username.value, password.value);
-      void ctx.root.$router.push({ name: 'main' });
+      ctx.root.$store.dispatch('user/login', {
+        userid: username.value,
+        password: password.value
+      });
+      //ctx.root.$router.push({ name: 'main' });
     }
 
-    return { username, password, doLogin, rules };
+    function showStore() {
+      console.log(ctx.root.$store);
+    }
+
+    return { username, password, doLogin, rules, showStore };
   }
 });
 </script>

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

@@ -7,22 +7,33 @@
     >
       <q-card class="col-4" height="">
         <q-card-section>
-          {{ mainLink.title }}
+          {{ `Hallo ${firstname} ${lastname}` }}
         </q-card-section>
       </q-card>
+      <q-btn label="test" @click="showStore" />
     </q-page>
     <router-view />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { computed, defineComponent, reactive, ref } from '@vue/composition-api';
 import { mainLink } from '../plugin';
 export default defineComponent({
   // name: 'PageName'
   setup(_, ctx) {
     const a = ctx.root.$flaschengeistPlugins.mainLinks;
-    return { a, mainLink };
+    const firstname = computed(
+      () => ctx.root.$store.getters['user/user'].firstname
+    );
+    const lastname = computed(
+      () => ctx.root.$store.getters['user/user'].lastname
+    );
+
+    function showStore() {
+      console.log(ctx.root.$store.getters);
+    }
+    return { a, mainLink, firstname, lastname, showStore };
   }
 });
 </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,14 @@ const routes: RouteConfig[] = [
       {
         path: 'user',
         name: 'user',
-        component: () => import('../pages/User.vue')
+        component: () => import('../pages/User.vue'),
+        children: [
+          {
+            path: 'settings',
+            name: 'user-settings',
+            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

@@ -1,7 +1,10 @@
-import { Module, MutationTree, ActionTree, Commit } from 'vuex';
+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 { LoginData } from 'src/plugins/user/models';
+import { AxiosResponse } from 'axios';
+import { LocalStorage } from 'quasar';
+import { Router } from 'src/router';
 
 export interface Token {
   browser: string;
@@ -19,7 +22,11 @@ export interface User {
   roles: string[];
 }
 
-export interface UserStateInterface {
+export interface UserStateInterface extends LoginResponse {
+  loginLoading: boolean;
+}
+
+export interface LoginResponse {
   permissions: string[];
   token: Token;
   user: User;
@@ -36,17 +43,84 @@ const state: UserStateInterface = {
     mail: '',
     roles: []
   },
-  userid: ''
+  userid: '',
+  loginLoading: false
 };
 
-const mutation: MutationTree<UserStateInterface> = {
-  setState(state: UserStateInterface, data: UserStateInterface) {
-    state = data;
+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> = {
-  async = login({ commit: Commit }, data: LoginData) {
-    axios
+  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,20 +8,19 @@ import routes from './routes';
  * If not building with SSR mode, you can
  * directly export the Router instantiation
  */
+export const Router: VueRouter = new VueRouter({
+  scrollBehavior: () => ({ x: 0, y: 0 }),
+  routes,
 
-export default route<Store<StateInterface>>(function ({ Vue }) {
+  // Leave these as is and change from quasar.conf.js instead!
+  // quasar.conf.js -> build -> vueRouterMode
+  // quasar.conf.js -> build -> publicPath
+  mode: process.env.VUE_ROUTER_MODE,
+  base: process.env.VUE_ROUTER_BASE
+});
+
+export default route<Store<StateInterface>>(function({ Vue }) {
   Vue.use(VueRouter);
 
-  const Router = new VueRouter({
-    scrollBehavior: () => ({ x: 0, y: 0 }),
-    routes,
-
-    // Leave these as is and change from quasar.conf.js instead!
-    // quasar.conf.js -> build -> vueRouterMode
-    // quasar.conf.js -> build -> publicPath
-    mode: process.env.VUE_ROUTER_MODE,
-    base: process.env.VUE_ROUTER_BASE
-  });
-
   return Router;
-})
+});