Merge branch 'router_update_2' into 'main'

Router update 2

See merge request !159

src/components/CommunityComponents/CommunityHome.vue

@@ -164,7 +164,7 @@ export default {
       }
     },
     goToItemInfoPage(item) {
-      this.$router.push("/itempage/" + item);
+      this.$router.push("/item/" + item);
     },
     getItemPictures: async function (itemid) {
       let res = await getItemPictures(itemid);

src/components/ItemComponents/EditItemForm.vue

@@ -377,7 +377,7 @@ export default {
           this.initialItem.listingID,
           this.updatedItem.images
         );
-        this.$router.push("/itempage/" + this.initialItem.listingID);
+        this.$router.push("/item/" + this.initialItem.listingID);
       }
     },
 

src/components/UserProfileComponents/UserProfile.vue

@@ -45,7 +45,7 @@
         >
           <li>
             <router-link
-              to="/user/userItems"
+              to="/profile/items"
               class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
               >Mine gjenstander</router-link
             >

src/router/index.js

@@ -3,12 +3,12 @@ import { createRouter, createWebHistory } from "vue-router";
 import NotFound from "@/views/NotFound.vue";
 
 /**
- * Guards routes.
+ * Guard route for logged-in users.
  * If token is null, no user is logged in and only the
  * login, register, reset password, help and listing of public groups and items pages will be accessible.
  * Without a token the user gets redirected to the login page when trying to access guard routed pages.
  */
-function guardRoute(to, from, next) {
+function authGuardRoute(to, from, next) {
   let isAuthenticated = store.state.user.token != null;
   if (isAuthenticated) {
     next(); // allow to enter route
@@ -18,10 +18,10 @@ function guardRoute(to, from, next) {
 }
 
 /**
- * Guards routes for administartors. If token is null or
+ * Guards route for administartors. If token is null or
  * the user is not the administrator of the group, the user gets sent to the home page.
  */
-function isAdmin(to, from, next) {
+function adminGuardRoute(to, from, next) {
   if (store.state.user.adminList.includes(parseInt(from.params.communityID)))
     next(); // allow to enter route
   else
@@ -44,36 +44,36 @@ const routes = [
     path: "/community/:communityID/admin",
     name: "communityAdminPage",
     component: () => import("@/views/CommunityViews/AdminView.vue"),
-    beforeEnter: [guardRoute, isAdmin],
+    beforeEnter: [authGuardRoute, adminGuardRoute],
   },
   {
     path: "/community/:communityID/memberlist",
     name: "memberlist",
     component: () => import("../views/CommunityViews/MemberListView.vue"),
-    beforeEnter: guardRoute,
+    beforeEnter: authGuardRoute,
   },
   {
     path: "/community/:communityID/private/join",
     name: "communityRequest",
     component: () => import("../views/CommunityViews/CommunityRequestView.vue"),
-    beforeEnter: guardRoute,
+    beforeEnter: authGuardRoute,
   },
   {
     path: "/help",
     name: "help",
     component: () => import("../views/HelpView.vue"),
   },
+  {
+    path: "/item/:id",
+    name: "itemInfo",
+    component: () => import("../views/RentingViews/ItemInfoPageView.vue"),
+    beforeEnter: authGuardRoute,
+  },
   {
     path: "/item/:id/edit",
     name: "editItem",
     component: () => import("../views/ItemViews/EditItemView.vue"),
-    beforeEnter: guardRoute,
-  },
-  {
-    path: "/itempage/:id",
-    name: "itemInfo",
-    component: () => import("../views/RentingViews/ItemInfoPageView.vue"),
-    beforeEnter: guardRoute,
+    beforeEnter: authGuardRoute,
   },
   {
     path: "/login",
@@ -84,43 +84,49 @@ const routes = [
     path: "/messages",
     name: "messages",
     component: () => import("../views/ChatViews/ChatView.vue"),
-    beforeEnter: guardRoute,
+    beforeEnter: authGuardRoute,
   },
   {
     path: "/newCommunity",
     name: "newCommunity",
     component: () => import("../views/CommunityViews/NewCommunityView.vue"),
-    beforeEnter: guardRoute,
+    beforeEnter: authGuardRoute,
   },
   {
     path: "/newItem",
     name: "newItem",
     component: () => import("../views/ItemViews/NewItemView.vue"),
-    beforeEnter: guardRoute,
+    beforeEnter: authGuardRoute,
   },
   {
     path: "/newPassword",
     name: "newPassword",
     component: () => import("../views/UserAuthViews/NewPasswordView"),
-    beforeEnter: guardRoute,
+    beforeEnter: authGuardRoute,
   },
   {
     path: "/profile/:id",
     name: "profile",
     component: () => import("../views/UserProfileViews/ProfileView.vue"),
-    beforeEnter: guardRoute,
+    beforeEnter: authGuardRoute,
   },
   {
     path: "/profile/communities",
     name: "myCommunities",
     component: () => import("../views/UserProfileViews/MyCommunitiesView.vue"),
-    beforeEnter: guardRoute,
+    beforeEnter: authGuardRoute,
   },
   {
     path: "/profile/history",
     name: "history",
     component: () => import("../views/UserProfileViews/RentHistoryView.vue"),
-    beforeEnter: guardRoute,
+    beforeEnter: authGuardRoute,
+  },
+  {
+    path: "/profile/items",
+    name: "userItems",
+    component: () => import("../views/UserProfileViews/UserItemsView.vue"),
+    beforeEnter: authGuardRoute,
   },
   {
     path: "/register",
@@ -141,17 +147,17 @@ const routes = [
     path: "/test",
     name: "test",
     component: () => import("../views/TestView.vue"),
-    beforeEnter: guardRoute,
-  },
-  {
-    path: "/user/userItems",
-    name: "userItems",
-    component: () => import("../views/UserProfileViews/UserItemsView.vue"),
-    beforeEnter: guardRoute,
+    beforeEnter: authGuardRoute,
   },
 
-  // Make sure it's your last route definition
-  { path: "/:pathMatch(.*)*", name: "not-found", component: NotFound },
+  /**
+   * Catch all for wrong/non-existing routes
+   * Must be last to catch all
+   */
+  { path: "/:pathMatch(.*)*",
+    name: "not-found",
+    component: NotFound
+  },
 ];
 
 const router = createRouter({