src/boot/login.ts

@@ -1,39 +1,70 @@
 import { boot } from 'quasar/wrappers';
 import { RouteRecord } from 'vue-router';
-import { Store } from 'vuex'
+import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
+import { UserStateInterface } from 'src/plugins/user/store/user';
 
 export default boot<Store<StateInterface>>(({ router, store }) => {
   router.beforeEach((to, from, next) => {
-    store.dispatch('user/loadFromLocalStorage').then(() => {
-      const user: User = store.getters['user/user'];
+    store
+      .dispatch('user/loadFromLocalStorage')
+      .then(() => {
+        const user: FG.User = <FG.User>store.getters['user/user'];
+        const session: FG.Session = <FG.Session>store.getters['user/session'];
         let permissions: string[] = [];
         user.roles.forEach(role => {
-        permissions = permissions.concat(role.permissions)
+          permissions = permissions.concat(role.permissions);
         });
-
+        console.log('route to', to);
+        console.log('route from', from);
+        if (to.name != 'login') {
+          console.log(new Date(session.expires), new Date());
+          console.log(new Date(session.expires) >= new Date());
           if (
-        to.matched.some((record: RouteRecord) => {
-          // permissions is set AND has NO matching permission
-          return (
-            "permissions" in record.meta &&
-            (
-              record.meta.permissions.filter((value: string) =>
-                permissions.includes(value)
-              ).length == 0
-            )
+            new Date(session.expires) >= new Date() &&
+            to.matched.every((record: RouteRecord) => {
+              const checkedPerimssions:
+                | boolean
+                | undefined = record.meta?.permissions?.every(
+                (permission: FG.Permission) => {
+                  return permissions.includes(permission);
+                }
               );
+
+              return checkedPerimssions === undefined
+                ? true
+                : checkedPerimssions;
             })
           ) {
-        next({
-          path: '/login',
-          query: { redirect: to.fullPath }
-        });
+            next();
+          } else {
+            next({ name: 'login', query: { redirect: to.fullPath } });
+          }
         } else {
           next();
         }
-    }).catch(error => {
+
+        // if (
+        //   to.matched.some((record: RouteRecord) => {
+        //     // permissions is set AND has NO matching permission
+        //     return (
+        //       'permissions' in record.meta &&
+        //       record.meta.permissions.filter((value: string) =>
+        //         permissions.includes(value)
+        //       ).length == 0
+        //     );
+        //   })
+        // ) {
+        //   next({
+        //     path: '/login',
+        //     query: { redirect: to.fullPath }
+        //   });
+        // } else {
+        //   next();
+        // }
+      })
+      .catch(error => {
         console.exception(error);
       });
-  })
+  });
 });

src/pages/about/About.vue

@@ -38,11 +38,14 @@
         <q-chip
           v-for="(plugin, index) in $flaschengeistPlugins.plugins"
           :key="'plugin' + index"
+          square
+          class="q-my-none q-ml-xs q-mr-none q-pr-none"
         >
           {{ plugin.name }}
-          <q-separator vertical color="black" class="q-ma-xs" />
+          <q-chip dense square color="green" class="q-pa-sm, q-mr-none">
             {{ plugin.version }}
           </q-chip>
+        </q-chip>
       </q-card-section>
       <q-separator />
       <q-card-section class="text-h6">

src/plugins/user/components/settings/Main.vue

@@ -39,11 +39,32 @@
       >
         <template v-slot:selected-item="scope">
           <q-chip v-for="(item, index) in scope.opt" :key="'item' + index">
-            {{ item }}
+            {{ item.name }}
           </q-chip>
         </template>
       </q-select>
     </q-card-section>
+    <q-separator />
+    <q-card-section class="fit row justify-start content-center items-center">
+      <q-input
+        class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
+        label="Password"
+        type="password"
+        filled
+      />
+      <q-input
+        class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
+        label="Neues Password"
+        type="password"
+        filled
+      />
+      <q-input
+        class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
+        label="Wiederhole neues Password"
+        type="password"
+        filled
+      />
+    </q-card-section>
   </q-card>
 </template>
 
@@ -53,7 +74,7 @@ export default defineComponent({
   name: 'Main',
   setup(_, { root: { $store } }) {
     const user = computed(() => {
-      return $store.getters['user/session'].user;
+      return $store.getters['user/user'];
     });
     return { user };
   }

src/plugins/user/store/session.ts

@@ -2,9 +2,8 @@ import { Module, MutationTree, ActionTree, GetterTree } from 'vuex';
 import { StateInterface } from 'src/store';
 import { axios } from 'src/boot/axios';
 
-
 export interface SessionInterface {
-  sessions: Session[];
+  sessions: FG.Session[];
   loading: boolean;
 }
 
@@ -14,16 +13,16 @@ const state: SessionInterface = {
 };
 
 const mutations: MutationTree<SessionInterface> = {
-  setSessions (state, sessions: Session[]) {
+  setSessions(state, sessions: FG.Session[]) {
     state.sessions = sessions;
   },
-  setLoading (state, value: boolean) {
+  setLoading(state, value: boolean) {
     state.loading = value;
   }
 };
 
 const actions: ActionTree<SessionInterface, StateInterface> = {
-  getSessions ({ commit, rootGetters }) {
+  getSessions({ commit, rootGetters }) {
     console.log(rootGetters);
     commit('setLoading', true);
     axios
@@ -39,7 +38,7 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
         commit('setLoading', false);
       });
   },
-  deleteSession ({ commit, dispatch }, token: string) {
+  deleteSession({ commit, dispatch }, token: string) {
     commit('setLoading', true);
     console.log('axios', axios);
     axios
@@ -57,10 +56,10 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
 };
 
 const getters: GetterTree<SessionInterface, StateInterface> = {
-  sessions (state) {
+  sessions(state) {
     return state.sessions;
   },
-  loading (state) {
+  loading(state) {
     return state.loading;
   }
 };