let's go

FrontendFolder/switch-room/src/App.vue

@@ -3,9 +3,8 @@ import AppFooter from "@/components/AppFooter.vue";
 import AppHeader from "@/components/AppHeader.vue";
 </script>
 <template>
-  <app-header></app-header>
   <router-view></router-view>
   <app-footer></app-footer>
 </template>
 
-<style></style>
\ No newline at end of file
+<style></style>

FrontendFolder/switch-room/src/components/AppHeader.vue

@@ -9,12 +9,21 @@
     active-text-color="#ffd04b"
     @select="handleSelect"
   >
-
-    <el-menu-item index="1" v-on:click="redirect('/login-main-page')">Main</el-menu-item>
-    <el-menu-item index="2" v-on:click="redirect('/offer-page')">Offer Page</el-menu-item>
-    <el-menu-item index="3" v-on:click="redirect('/wishlist-page')">Wish List</el-menu-item>
-    <el-menu-item index="4" v-on:click="redirect('/flight')">Flight Ticket</el-menu-item>
-    <el-menu-item index="5" class="dock-right" @click="hanldeLogOut()">Log Out</el-menu-item>
+    <el-menu-item index="1" v-on:click="redirect('/login-main-page')"
+      >Main</el-menu-item
+    >
+    <el-menu-item index="2" v-on:click="redirect('/offer-page')"
+      >Offer Page</el-menu-item
+    >
+    <el-menu-item index="3" v-on:click="redirect('/wishlist-page')"
+      >Wish List</el-menu-item
+    >
+    <el-menu-item index="4" v-on:click="redirect('/flight')"
+      >Flight Ticket</el-menu-item
+    >
+    <el-menu-item index="5" class="dock-right" @click="hanldeLogOut()"
+      >Log Out</el-menu-item
+    >
   </el-menu>
 </template>
 
@@ -34,8 +43,9 @@ export default defineComponent({
       logOut: "logOutApi",
     }),
     hanldeLogOut() {
-      this.logOut()
-      document.cookie = 'userId=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+      this.logOut();
+      document.cookie =
+        "userId=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
       this.$router.push("/");
     },
   },
@@ -44,6 +54,6 @@ export default defineComponent({
 
 <style scoped>
 .el-menu-demo > .el-menu-item.dock-right {
-  margin-left: auto
+  margin-left: auto;
 }
 </style>

FrontendFolder/switch-room/src/components/MainPage.vue

@@ -27,25 +27,25 @@
              Username
           </label>
           <input
-              id="user-name"
-              v-model="username"
-              class="form-content"
-              type="text"
-              name="username"
-              autocomplete="on"
-              required
+            id="user-name"
+            v-model="username"
+            class="form-content"
+            type="text"
+            name="username"
+            autocomplete="on"
+            required
           />
           <div class="form-border"></div>
           <label for="user-password" style="padding-top: 22px"
-          >&nbsp;Password
+            >&nbsp;Password
           </label>
           <input
-              id="user-password"
-              v-model="password"
-              class="form-content"
-              type="password"
-              name="password"
-              required
+            id="user-password"
+            v-model="password"
+            class="form-content"
+            type="password"
+            name="password"
+            required
           />
           <div class="form-border"></div>
           <a href="#">
@@ -66,7 +66,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { mapActions, mapGetters } from "vuex";
-import {checkLoginSession} from "../services/UserService";
+import { checkLoginSession } from "../services/UserService";
 
 export default defineComponent({
   data() {
@@ -85,14 +85,13 @@ export default defineComponent({
       actionLoginApi: "loginApi",
     }),
     async handleCreated() {
-      await checkLoginSession()
-      .then((result) => {
+      await checkLoginSession().then((result) => {
         if (result.status == "OK") {
-          this.$router.push({name: 'LoginMainPage'});
+          this.$router.push({ name: "LoginMainPage" });
         } else {
-          this.$router.push({name: 'home'})
+          this.$router.push({ name: "home" });
         }
-      })
+      });
     },
     async handleLogin() {
       const payload = {
@@ -100,17 +99,15 @@ export default defineComponent({
         password: this.password,
       };
       await this.actionLoginApi(payload);
-      if (this.getLoginStatus){
-        this.$router.push({name: 'LoginMainPage'});
+      if (this.getLoginStatus) {
+        this.$router.push({ name: "LoginMainPage" });
       }
     },
   },
-  created: function(){
-    this.handleCreated()
-  }
+  created: function () {
+    this.handleCreated();
+  },
 });
-
-
 </script>
 
 <style scoped>

FrontendFolder/switch-room/src/router/index.ts

@@ -18,7 +18,7 @@ const routes: Array<RouteRecordRaw> = [
     path: "/resetPassword",
     name: "resetPassword",
     meta: {
-      requiresAuth: true
+      requiresAuth: true,
     },
     component: ResetPasswordView,
   },
@@ -26,7 +26,7 @@ const routes: Array<RouteRecordRaw> = [
     path: "/offer-page",
     name: "OfferPage",
     meta: {
-      requiresAuth: true
+      requiresAuth: true,
     },
     component: () =>
       import(/* webpackChunkName:  "about" */ "../views/OfferView.vue"),
@@ -35,7 +35,7 @@ const routes: Array<RouteRecordRaw> = [
     path: "/wishlist-page",
     name: "WishlistPage",
     meta: {
-      requiresAuth: true
+      requiresAuth: true,
     },
     component: () =>
       import(/* webpackChunkName: "about" */ "../views/WishlistView.vue"),
@@ -53,11 +53,10 @@ const routes: Array<RouteRecordRaw> = [
     path: "/login-main-page",
     name: "LoginMainPage",
     meta: {
-      requiresAuth: true
+      requiresAuth: true,
     },
-    component: () =>
-      import("../views/LoginMainPageView.vue"),
-  }
+    component: () => import("../views/LoginMainPageView.vue"),
+  },
 ];
 
 const router = createRouter({
@@ -66,15 +65,15 @@ const router = createRouter({
 });
 
 router.beforeEach((to, from, next) => {
-  if (to.matched.some(record => record.meta.requiresAuth)) {
+  if (to.matched.some((record) => record.meta.requiresAuth)) {
     if (!document.cookie) {
-      next({ name: 'home' })
+      next({ name: "home" });
     } else {
-      next()
+      next();
     }
   } else {
-    next()
+    next();
   }
-})
+});
 
 export default router;

FrontendFolder/switch-room/src/store/modules/auth.ts

 import * as UserService from "../../services/UserService";
 
 const state = () => ({
-    loginStatus: false,
+  loginStatus: false,
 });
 
 const getters = {
-    getLoginStatus(state: any) {
-      return state.loginStatus;
-    },
-  };
+  getLoginStatus(state: any) {
+    return state.loginStatus;
+  },
+};
 
 const actions = {
-    async loginApi({ commit }: any, payload: any) {
-      const response = await UserService.loginUser(JSON.stringify(payload))
-        .catch((error) => alert(error));
-      if (response.status == "OK") {
-        commit("setLoginStatus", true);
-      } else {
-        alert(response.message)
-      }
-    },
-    logOutApi({ commit }: any) {
-      // todo: clear session in backend
-      console.log("logOut")
-      commit("setLoginStatus", false);
+  async loginApi({ commit }: any, payload: any) {
+    const response = await UserService.loginUser(JSON.stringify(payload)).catch(
+      (error) => alert(error)
+    );
+    if (response.status == "OK") {
+      const userId = response.data.userId;
+      commit("setLoginStatus", true);
+    } else {
+      alert(response.message);
     }
+  },
+  logOutApi({ commit }: any) {
+    // todo: clear session in backend
+    console.log("logOut");
+    commit("setLoginStatus", false);
+  },
 };
 
 const mutations = {
-    setLoginStatus(state: any, data: any) {
-      state.loginStatus = data;
-    },
-  };
+  setLoginStatus(state: any, data: any) {
+    state.loginStatus = data;
+  },
+};
 
 export default {
-    namespaced: true,
-    state,
-    getters,
-    actions,
-    mutations,
-};
\ No newline at end of file
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

FrontendFolder/switch-room/src/views/LoginMainPageView.vue

 <template>
-    <main-page></main-page>
+  <app-header></app-header>
+  <main-page></main-page>
 </template>
 
 <script setup lang="ts">
 import MainPage from "@/components/LoginMainPage.vue";
+import AppHeader from "@/components/AppHeader.vue";
+import { watch } from "vue";
+import { useRoute } from "vue-router";
+const route = useRoute();
+import { ref } from "vue";
+function getCookie(userId: string) {
+  const value = `; ${document.cookie}`;
+  const parts: string[] = value.split(`; ${userId}=`);
+  if (parts.length === 2) return parts?.pop()?.split(";").shift();
+}
+
+const offers = ref([] as OfferNotification[]);
+async function fetchNotification(userId: number) {
+  const response = await NotificationService.getNotificationFromServerWithID(
+    userId
+  );
+  offers.value = response.data;
+}
+
+watch(
+  () => route.name,
+  (values) => {
+    const userIdString: string = getCookie("userId");
+    let userIdNumber = +userIdString;
+    fetchNotification(userIdNumber);
+  },
+  { immediate: true }
+);
 </script>
-  
\ No newline at end of file