chore(seaside): #195 refactor security domain with pages and router

seaside/src/App.vue

@@ -27,8 +27,8 @@ import { registerNotificationListener, unregisterNotificationListener } from '@/
 import notificationService from '@/services/notification/NotificationService';
 import { Store, useStore } from 'vuex';
 import { UPDATE_MUTATION as STATS_UPDATE_MUTATION } from '@/techwatch/store/statistics/StatisticsConstants';
-import { HAS_ROLE_USER_GETTER } from '@/store/user/UserConstants';
-import { UserState } from '@/store/user/user';
+import { HAS_ROLE_USER_GETTER } from '@/security/store/UserConstants';
+import { UserState } from '@/security/store/user';
 import { defineAsyncComponent } from 'vue';
 
 const CreateAccountComponent = defineAsyncComponent(() => import('@/security/components/CreateAccountComponent.vue'));

seaside/src/configuration/components/feedslist/FeedsList.vue

@@ -88,7 +88,7 @@ import { defineAsyncComponent } from 'vue';
 import { AlertResponse, AlertType } from '@/common/components/alertdialog/AlertDialog.types';
 import FeedActions from '@/configuration/components/feedslist/FeedActions.vue';
 import { Store, useStore } from 'vuex';
-import { UserState } from '@/store/user/user';
+import { UserState } from '@/security/store/user';
 import { NEWS_FILTER_FEED_MUTATION } from '@/common/model/store/NewsStore.type';
 import { Router, useRouter } from 'vue-router';
 

seaside/src/configuration/components/profile/ProfileTab.vue

@@ -45,10 +45,10 @@
 import { Component, Vue } from 'vue-facing-decorator';
 import { Store, useStore } from 'vuex';
 import { MD5 } from 'md5-js-tools';
-import { UserState } from '@/store/user/user';
+import { UserState } from '@/security/store/user';
 import ChangePasswordModal from '@/configuration/components/profile/ChangePasswordModal.vue';
 import { userUpdate } from '@/security/services/UserService';
-import { UPDATE_MUTATION as USER_UPDATE_MUTATION } from '@/store/user/UserConstants';
+import { UPDATE_MUTATION as USER_UPDATE_MUTATION } from '@/security/store/UserConstants';
 import notificationService from '@/services/notification/NotificationService';
 import { User } from '@/security/model/User';
 

seaside/src/configuration/services/FeedService.ts

@@ -1,7 +1,7 @@
 import { map, switchMap, take } from 'rxjs/operators';
 import { HttpStatusError } from '@/common/errors/HttpStatusError';
 import { Feed } from '@/configuration/model/Feed.type';
-import { Page } from '@/services/model/Page';
+import { Page } from '@/common/model/Page';
 import { from, Observable, of, throwError } from 'rxjs';
 import rest from '@/common/services/RestWrapper';
 import { OpPatch } from 'json-patch';

seaside/src/layout/components/sidenav/SideNav.vue

@@ -19,11 +19,11 @@ import {Component, Vue} from 'vue-facing-decorator';
 import SideNavHeader from "./SideNavHeader.vue";
 import SideNavManagement from './SideNavManagement.vue';
 
-import {LOGOUT_MUTATION} from "@/store/user/UserConstants";
+import {LOGOUT_MUTATION} from "@/security/store/UserConstants";
 import {SidenavState} from "@/store/sidenav/sidenav";
 import SideNavUserInfo from "@/layout/components/sidenav/SideNavUserInfo.vue";
 import SideNavFilters from "@/layout/components/sidenav/SideNavFilters.vue";
-import {UserState} from "@/store/user/user";
+import {UserState} from "@/security/store/user";
 import {useStore} from "vuex";
 import {switchMap} from "rxjs/operators";
 import {Router, useRouter} from "vue-router";

seaside/src/layout/components/sidenav/SideNavManagement.vue

@@ -41,7 +41,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-facing-decorator';
 import { useStore } from 'vuex';
-import { UserState } from '@/store/user/user';
+import { UserState } from '@/security/store/user';
 import {
   AcademicCapIcon,
   AdjustmentsVerticalIcon,

seaside/src/layout/components/sidenav/SideNavUserInfo.vue

@@ -21,9 +21,9 @@
 import {Component, Vue} from 'vue-facing-decorator';
 import {MD5} from 'md5-js-tools';
 import {useStore} from "vuex";
-import {UserState} from "@/store/user/user";
+import {UserState} from "@/security/store/user";
 import {IdentificationIcon, TrophyIcon, UsersIcon} from "@heroicons/vue/20/solid";
-import {HAS_ROLE_ADMIN_GETTER, HAS_ROLE_MANAGER_GETTER} from "@/store/user/UserConstants";
+import {HAS_ROLE_ADMIN_GETTER, HAS_ROLE_MANAGER_GETTER} from "@/security/store/UserConstants";
 
 @Component({
     name: 'SideNavUserInfo',

seaside/src/router.ts

@@ -3,12 +3,7 @@ import { routes as adminRoutes } from '@/administration/router';
 import { routes as configRoutes } from '@/configuration/router';
 import { routes as teamsRoutes } from '@/teams/router';
 import { routes as techwatchRoutes } from '@/techwatch/router';
-import { Store, useStore } from 'vuex';
-import { UserState } from '@/store/user/user';
-import { refresh } from '@/security/services/AuthenticationService';
-import { LOGOUT_MUTATION, UPDATE_MUTATION as USER_UPDATE_MUTATION } from '@/store/user/UserConstants';
-
-const LoginPage = () => import('@/pages/LoginPage.vue');
+import { requireAuthNavGuard, routes as securityRoutes } from '@/security/router';
 
 const router = createRouter({
     history: createWebHashHistory(),
@@ -17,38 +12,11 @@ const router = createRouter({
         ...teamsRoutes,
         ...configRoutes,
         ...techwatchRoutes,
-        { path: '/login', component: LoginPage, name: 'LoginPage' },
+        ...securityRoutes,
         { path: '/:catchAll(.*)*', redirect: '/news' },
     ],
 } as RouterOptions);
 
-function refreshSession(store: Store<UserState>): Promise<boolean> {
-    const isAuthenticated = useStore<UserState>().state.user.isAuthenticated;
-    if (isAuthenticated === undefined) {
-        return new Promise(resolve => {
-            refresh().subscribe({
-                next: session => {
-                    store.commit(USER_UPDATE_MUTATION, session.user);
-                    resolve(true);
-                },
-                error: () => {
-                    store.commit(LOGOUT_MUTATION);
-                    resolve(false);
-                },
-            });
-        });
-    } else {
-        return Promise.resolve(true);
-    }
-}
-
-router.beforeEach(async to => {
-    const isAuthenticated = await refreshSession(useStore<UserState>());
-    if (to.matched.some(record => record.meta.requiresAuth)) {
-        if (!isAuthenticated) {
-            return { name: 'LoginPage', query: { redirect: to.path } };
-        }
-    }
-});
+router.beforeEach(requireAuthNavGuard);
 
 export default router;

seaside/src/security/components/CreateAccountComponent.vue

@@ -33,8 +33,8 @@ import { Component, Vue } from 'vue-facing-decorator';
 import CurtainModal from '@/common/components/CurtainModal.vue';
 import { User } from '@/security/model/User';
 import { Store, useStore } from 'vuex';
-import { UserState } from '@/store/user/user';
-import { CLOSE_CREATE_ACCOUNT_MUTATION } from '@/store/user/UserConstants';
+import { UserState } from '@/security/store/user';
+import { CLOSE_CREATE_ACCOUNT_MUTATION } from '@/security/store/UserConstants';
 
 const CLOSE_EVENT: string = 'close';
 

seaside/src/pages/LoginPage.vue → seaside/src/security/pages/LoginPage.vue

@@ -34,7 +34,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-facing-decorator';
 import { useStore } from 'vuex';
-import { UPDATE_MUTATION } from '@/store/user/UserConstants';
+import { UPDATE_MUTATION } from '@/security/store/UserConstants';
 
 import authenticationService from '@/security/services/AuthenticationService';
 import notificationService from '@/services/notification/NotificationService';

seaside/src/security/router/index.ts

@@ -0,0 +1,40 @@
+import { NavigationGuardWithThis, RouteRecordRaw } from 'vue-router';
+import { Store, useStore } from 'vuex';
+import { UserState } from '@/security/store/user';
+import { refresh } from '@/security/services/AuthenticationService';
+import { LOGOUT_MUTATION, UPDATE_MUTATION as USER_UPDATE_MUTATION } from '@/security/store/UserConstants';
+
+const LoginPage = () => import('@/security/pages/LoginPage.vue');
+
+export const routes: RouteRecordRaw[] = [
+    { path: '/login', component: LoginPage, name: 'LoginPage' },
+];
+
+function refreshSession(store: Store<UserState>): Promise<boolean> {
+    const isAuthenticated = useStore<UserState>().state.user.isAuthenticated;
+    if (isAuthenticated === undefined) {
+        return new Promise(resolve => {
+            refresh().subscribe({
+                next: session => {
+                    store.commit(USER_UPDATE_MUTATION, session.user);
+                    resolve(true);
+                },
+                error: () => {
+                    store.commit(LOGOUT_MUTATION);
+                    resolve(false);
+                },
+            });
+        });
+    } else {
+        return Promise.resolve(true);
+    }
+}
+
+export const requireAuthNavGuard: NavigationGuardWithThis<NavigationGuardWithThis<boolean>> = async to => {
+    const isAuthenticated = await refreshSession(useStore<UserState>());
+    if (to.matched.some(record => record.meta.requiresAuth)) {
+        if (!isAuthenticated) {
+            return { name: 'LoginPage', query: { redirect: to.path } };
+        }
+    }
+};

seaside/src/security/services/UserService.ts

@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
-import { Page } from '@/services/model/Page';
+import { Page } from '@/common/model/Page';
 import { ConstantFilters } from '@/constants';
 import { User } from '@/security/model/User';
 import { send } from '@/common/services/GraphQLClient';

seaside/src/store/user/user.ts → seaside/src/security/store/user.ts

@@ -9,7 +9,7 @@ import {
     LOGOUT,
     OPEN_CREATE_ACCOUNT,
     UPDATE,
-} from '@/store/user/UserConstants';
+} from '@/security/store/UserConstants';
 import { GetterTree } from 'vuex';
 
 export type UserState = {

seaside/src/store.ts

@@ -1,10 +1,10 @@
-import {createLogger, createStore} from "vuex";
-import sidenav from '@/store/sidenav/sidenav'
-import statistics from '@/techwatch/store/statistics/statistics'
-import user from '@/store/user/user'
-import news from '@/techwatch/store/news'
+import { createLogger, createStore } from 'vuex';
+import sidenav from '@/store/sidenav/sidenav';
+import statistics from '@/techwatch/store/statistics/statistics';
+import user from '@/security/store/user';
+import news from '@/techwatch/store/news';
 
-const debug = process.env.NODE_ENV !== 'production'
+const debug = process.env.NODE_ENV !== 'production';
 
 export default createStore({
     modules: {

seaside/src/teams/pages/TeamsPage.vue

@@ -52,7 +52,7 @@ import { AlertResponse, AlertType } from '@/common/components/alertdialog/AlertD
 import { ArrowLeftOnRectangleIcon, InformationCircleIcon } from '@heroicons/vue/24/outline';
 import { MemberPending } from '@/teams/model/MemberPending.enum';
 import { teamMemberAdd, teamMemberDelete } from '@/teams/services/TeamMembers.service';
-import { UserState } from '@/store/user/user';
+import { UserState } from '@/security/store/user';
 
 @Component({
   name: 'TeamsPage',

seaside/src/teams/services/Teams.service.ts

@@ -1,12 +1,12 @@
 import {ConstantFilters} from "@/constants";
 import {Observable, of} from "rxjs";
-import {Page} from "@/services/model/Page";
+import {Page} from "@/common/model/Page";
 import {send} from "@/common/services/GraphQLClient";
 import {map, take, tap} from "rxjs/operators";
 import {Team} from "@/teams/model/Team.type";
 import {TeamsSearchResponse} from "@/teams/model/TeamsSearchResponse";
 import store from '@/store';
-import {USER_ADD_ROLE_MUTATION} from "@/store/user/UserConstants";
+import {USER_ADD_ROLE_MUTATION} from "@/security/store/UserConstants";
 
 const DEFAULT_PER_PAGE: number = 20;
 const DEFAULT_QUERY: string = `?${ConstantFilters.PER_PAGE}=${DEFAULT_PER_PAGE}&_s=name`;

seaside/src/techwatch/components/newslist/NewsList.vue

@@ -52,7 +52,7 @@ import {
   FILTER_MUTATION,
   INCREMENT_UNREAD_MUTATION,
 } from '@/techwatch/store/statistics/StatisticsConstants';
-import { UserState } from '@/store/user/user';
+import { UserState } from '@/security/store/user';
 import newsService, { newsMark } from '@/techwatch/services/NewsService';
 import {
   actionServiceRegisterFunction,