From 9dc53bd0bd9ac3e7597cd4da4360cef82735f81e Mon Sep 17 00:00:00 2001
From: Marthym <marthym@gmail.com>
Date: Sat, 13 Jan 2024 14:19:01 +0100
Subject: [PATCH] chore(seaside): #195 refactor security domain with pages and
 router

---
 seaside/src/App.vue                           |  4 +-
 .../src/{services => common}/model/Page.ts    |  0
 .../components/feedslist/FeedsList.vue        |  2 +-
 .../components/profile/ProfileTab.vue         |  4 +-
 .../src/configuration/services/FeedService.ts |  2 +-
 .../src/layout/components/sidenav/SideNav.vue |  4 +-
 .../components/sidenav/SideNavManagement.vue  |  2 +-
 .../components/sidenav/SideNavUserInfo.vue    |  4 +-
 seaside/src/router.ts                         | 38 ++----------------
 .../components/CreateAccountComponent.vue     |  4 +-
 .../src/{ => security}/pages/LoginPage.vue    |  2 +-
 seaside/src/security/router/index.ts          | 40 +++++++++++++++++++
 seaside/src/security/services/UserService.ts  |  2 +-
 .../user => security/store}/UserConstants.ts  |  0
 .../{store/user => security/store}/user.ts    |  2 +-
 seaside/src/store.ts                          | 12 +++---
 seaside/src/teams/pages/TeamsPage.vue         |  2 +-
 seaside/src/teams/services/Teams.service.ts   |  4 +-
 .../components/newslist/NewsList.vue          |  2 +-
 19 files changed, 69 insertions(+), 61 deletions(-)
 rename seaside/src/{services => common}/model/Page.ts (100%)
 rename seaside/src/{ => security}/pages/LoginPage.vue (97%)
 create mode 100644 seaside/src/security/router/index.ts
 rename seaside/src/{store/user => security/store}/UserConstants.ts (100%)
 rename seaside/src/{store/user => security/store}/user.ts (98%)

diff --git a/seaside/src/App.vue b/seaside/src/App.vue
index 5d17596c..92dcd78f 100644
--- a/seaside/src/App.vue
+++ b/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'));
diff --git a/seaside/src/services/model/Page.ts b/seaside/src/common/model/Page.ts
similarity index 100%
rename from seaside/src/services/model/Page.ts
rename to seaside/src/common/model/Page.ts
diff --git a/seaside/src/configuration/components/feedslist/FeedsList.vue b/seaside/src/configuration/components/feedslist/FeedsList.vue
index 77ee6b04..62bd189d 100644
--- a/seaside/src/configuration/components/feedslist/FeedsList.vue
+++ b/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';
 
diff --git a/seaside/src/configuration/components/profile/ProfileTab.vue b/seaside/src/configuration/components/profile/ProfileTab.vue
index 9ee32459..0aedd1d8 100644
--- a/seaside/src/configuration/components/profile/ProfileTab.vue
+++ b/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';
 
diff --git a/seaside/src/configuration/services/FeedService.ts b/seaside/src/configuration/services/FeedService.ts
index d146a024..f9552fd9 100644
--- a/seaside/src/configuration/services/FeedService.ts
+++ b/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';
diff --git a/seaside/src/layout/components/sidenav/SideNav.vue b/seaside/src/layout/components/sidenav/SideNav.vue
index 103c504c..b5a9d7a8 100644
--- a/seaside/src/layout/components/sidenav/SideNav.vue
+++ b/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";
diff --git a/seaside/src/layout/components/sidenav/SideNavManagement.vue b/seaside/src/layout/components/sidenav/SideNavManagement.vue
index ad477014..3ccc5f98 100644
--- a/seaside/src/layout/components/sidenav/SideNavManagement.vue
+++ b/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,
diff --git a/seaside/src/layout/components/sidenav/SideNavUserInfo.vue b/seaside/src/layout/components/sidenav/SideNavUserInfo.vue
index 5d868f97..45f07694 100644
--- a/seaside/src/layout/components/sidenav/SideNavUserInfo.vue
+++ b/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',
diff --git a/seaside/src/router.ts b/seaside/src/router.ts
index 7bb97474..c8933c30 100644
--- a/seaside/src/router.ts
+++ b/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;
\ No newline at end of file
diff --git a/seaside/src/security/components/CreateAccountComponent.vue b/seaside/src/security/components/CreateAccountComponent.vue
index e4236ab2..d9b11b60 100644
--- a/seaside/src/security/components/CreateAccountComponent.vue
+++ b/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';
 
diff --git a/seaside/src/pages/LoginPage.vue b/seaside/src/security/pages/LoginPage.vue
similarity index 97%
rename from seaside/src/pages/LoginPage.vue
rename to seaside/src/security/pages/LoginPage.vue
index 31a66a1b..6d26de70 100644
--- a/seaside/src/pages/LoginPage.vue
+++ b/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';
diff --git a/seaside/src/security/router/index.ts b/seaside/src/security/router/index.ts
new file mode 100644
index 00000000..938f5b1b
--- /dev/null
+++ b/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 } };
+        }
+    }
+};
\ No newline at end of file
diff --git a/seaside/src/security/services/UserService.ts b/seaside/src/security/services/UserService.ts
index 0dfed513..4c5c74b6 100644
--- a/seaside/src/security/services/UserService.ts
+++ b/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';
diff --git a/seaside/src/store/user/UserConstants.ts b/seaside/src/security/store/UserConstants.ts
similarity index 100%
rename from seaside/src/store/user/UserConstants.ts
rename to seaside/src/security/store/UserConstants.ts
diff --git a/seaside/src/store/user/user.ts b/seaside/src/security/store/user.ts
similarity index 98%
rename from seaside/src/store/user/user.ts
rename to seaside/src/security/store/user.ts
index 50539845..bf987f38 100644
--- a/seaside/src/store/user/user.ts
+++ b/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 = {
diff --git a/seaside/src/store.ts b/seaside/src/store.ts
index a6291efe..ec7e9c6b 100644
--- a/seaside/src/store.ts
+++ b/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: {
diff --git a/seaside/src/teams/pages/TeamsPage.vue b/seaside/src/teams/pages/TeamsPage.vue
index 2cc4d0d8..f0ecc5b4 100644
--- a/seaside/src/teams/pages/TeamsPage.vue
+++ b/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',
diff --git a/seaside/src/teams/services/Teams.service.ts b/seaside/src/teams/services/Teams.service.ts
index 7322102c..1c00bf6a 100644
--- a/seaside/src/teams/services/Teams.service.ts
+++ b/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`;
diff --git a/seaside/src/techwatch/components/newslist/NewsList.vue b/seaside/src/techwatch/components/newslist/NewsList.vue
index 49ba23df..4ff2b3a6 100644
--- a/seaside/src/techwatch/components/newslist/NewsList.vue
+++ b/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,