Basic router cleanup

src/router/router.js

@@ -1,168 +1,173 @@
-import {createRouter, createWebHistory} from 'vue-router'
-import About from '@/views/documentation/About.vue'
-import ContentPolicy from '@/views/documentation/ContentPolicy.vue'
-import FAQ from '@/views/documentation/FAQ.vue'
-import Pricing from '@/views/documentation/Pricing.vue'
-import CreatorGuide from '@/views/documentation/CreatorGuide.vue'
-import HelpAndContact from '@/views/documentation/HelpAndContact.vue'
-import TermsAndConditions from '@/views/documentation/TermsAndConditions.vue'
-import LoginView from '../views/LoginView.vue'
-import PaymentCompleted from '../views/PayementCompleted.vue'
-import Home from '../views/main/Home.vue'
-import Wallet from '../views/main/Wallet.vue'
-import ProfilePage from '@/views/profile/ProfilePage.vue'
-import CreatorList from '@/views/browser/CreatorList.vue'
-import PostContent from "@/views/contents/PostContent.vue";
-import ContentEditorPage from "@/views/contents/ContentEditorPage.vue";
-import {useAuthStore} from "@/stores/authStore.js";
-import CreatorLayout from "@/views/creators/CreatorLayout.vue";
-import ContentPage from "@/views/contents/ContentPage.vue";
-import CreatorContent from "@/views/creators/CreatorContent.vue";
-import CreatorHome from "@/views/creators/CreatorHome.vue";
-import CTA01 from "@/views/CTA01.vue";
-import SubscriptionMenu from "@/views/creators/SubscriptionMenu.vue";
-import DocumentationLayout from "@/views/documentation/DocumentationLayout.vue";
-import ExclusiveContentCard from "@/views/creators/ExclusiveContentCard.vue";
-import DocumentationHome from "@/views/documentation/DocumentationHome.vue";
+import { useAuthStore } from '@/stores/authStore.js';
+import CTA01 from '@/views/CTA01.vue';
+import CreatorList from '@/views/browser/CreatorList.vue';
+import ContentEditorPage from '@/views/contents/ContentEditorPage.vue';
+import ContentPage from '@/views/contents/ContentPage.vue';
+import PostContent from '@/views/contents/PostContent.vue';
+import CreatorContent from '@/views/creators/CreatorContent.vue';
+import CreatorHome from '@/views/creators/CreatorHome.vue';
+import CreatorLayout from '@/views/creators/CreatorLayout.vue';
+import ExclusiveContentCard from '@/views/creators/ExclusiveContentCard.vue';
+import SubscriptionMenu from '@/views/creators/SubscriptionMenu.vue';
+import About from '@/views/documentation/About.vue';
+import ContentPolicy from '@/views/documentation/ContentPolicy.vue';
+import CreatorGuide from '@/views/documentation/CreatorGuide.vue';
+import DocumentationHome from '@/views/documentation/DocumentationHome.vue';
+import DocumentationLayout from '@/views/documentation/DocumentationLayout.vue';
+import FAQ from '@/views/documentation/FAQ.vue';
+import HelpAndContact from '@/views/documentation/HelpAndContact.vue';
+import Pricing from '@/views/documentation/Pricing.vue';
+import TermsAndConditions from '@/views/documentation/TermsAndConditions.vue';
+import ProfilePage from '@/views/profile/ProfilePage.vue';
+import { createRouter, createWebHistory } from 'vue-router';
+import LoginView from '../views/LoginView.vue';
+import PaymentCompleted from '../views/PayementCompleted.vue';
+import Home from '../views/main/Home.vue';
+import Wallet from '../views/main/Wallet.vue';
 
 const routes = [
-    {
-        path: '/cta01',
-        component: CTA01
-    },
-    {
-        path: '/landing',
-        component: Home
-    },
-    {
-        path: '/',
-        redirect: '/@hutopy',
-    },
-    {
-        path: '/browse',
-        component: CreatorList
-    },
-    {
-        path: '/content/editor',
-        component: ContentEditorPage
-    },
-    {
-        path: '/content/:contentId',
-        component: ContentPage
-    },
-    {
-        path: '/@:creator',
-        component: CreatorLayout,
-        children: [
-            {
-                path: '',
-                component: CreatorHome,
-            },
-            {
-                path: 'content',
-                component: CreatorContent
-            },
-            {
-                path: 'subscription',
-                component: SubscriptionMenu
-            },
-            {
-                path: 'exclusivecontentcard',
-                component: ExclusiveContentCard
-            },
-        ]
-    },
-    {
-        path: '/documents',
-        component: DocumentationLayout,
-        children: [
-            {
-                path: '',
-                component: DocumentationHome,
-            },
-            {
-                path: 'helpandcontact',
-                component: HelpAndContact
-            },
-            {
-                path: 'termsandconditions',
-                name: 'termsandconditions',
-                component: TermsAndConditions
-            },
-            {
-                path: 'contentpolicy',
-                name: 'contentpolicy',
-                component: ContentPolicy
-            },
-            {
-                path: 'faq',
-                name: 'FAQ',
-                component: FAQ
-            },
-            {
-                path: 'guideforcreators',
-                name: 'guideforcreators',
-                component: CreatorGuide
-            },
-            {
-                path: 'about',
-                name: 'about',
-                component: About
-            },
-            {
-                path: 'pricing',
-                name: 'pricing',
-                component: Pricing
-            },
-        ]
-    },
-    {
-        path: '/content/post',
-        component: PostContent,
-    },
-    {
-        path: '/login',
-        name: 'login',
-        component: LoginView
-    },
-    {
-        path: '/paymentcompleted',
-        name: 'PaymentCompleted',
-        component: PaymentCompleted,
-        meta: {requiresAuth: true}
-    },
-    {
-        path: '/wallet',
-        name: 'wallet',
-        component: Wallet,
-        meta: {requiresAuth: true}
-    },
-    {
-        path: '/profile',
-        name: 'profile',
-        component: ProfilePage,
-        meta: {requiresAuth: true}
-    }
-]
+  {
+    path: '/cta01',
+    component: CTA01,
+  },
+  {
+    path: '/landing',
+    name: 'landing',
+    component: Home,
+  },
+  {
+    path: '/',
+    redirect: { name: 'landing' },
+  },
+  {
+    path: '/browse',
+    component: CreatorList,
+    redirect: { name: 'landing' }, // TODO remove this line when the page is ready
+  },
+  {
+    path: '/content/editor',
+    component: ContentEditorPage,
+  },
+  {
+    path: '/content/:contentId',
+    component: ContentPage,
+  },
+  {
+    path: '/@:creator',
+    component: CreatorLayout,
+    name: 'creator',
+    children: [
+      {
+        path: '',
+        component: CreatorHome,
+      },
+      {
+        path: 'content',
+        component: CreatorContent,
+      },
+      {
+        path: 'subscription',
+        component: SubscriptionMenu,
+        redirect: { name: 'creator' }, // TODO remove this line when the page is ready
+      },
+      {
+        path: 'exclusivecontentcard',
+        component: ExclusiveContentCard,
+      },
+    ],
+  },
+  {
+    path: '/documents',
+    component: DocumentationLayout,
+    children: [
+      {
+        path: '',
+        component: DocumentationHome,
+        redirect: { name: 'about' }, // TODO remove this line when the page is ready
+      },
+      {
+        path: 'helpandcontact',
+        name: 'helpandcontact',
+        component: HelpAndContact,
+      },
+      {
+        path: 'termsandconditions',
+        name: 'termsandconditions',
+        component: TermsAndConditions,
+      },
+      {
+        path: 'contentpolicy',
+        name: 'contentpolicy',
+        component: ContentPolicy,
+      },
+      {
+        path: 'faq',
+        name: 'FAQ',
+        component: FAQ,
+      },
+      {
+        path: 'guideforcreators',
+        name: 'guideforcreators',
+        component: CreatorGuide,
+      },
+      {
+        path: 'about',
+        name: 'about',
+        component: About,
+      },
+      {
+        path: 'pricing',
+        name: 'pricing',
+        component: Pricing,
+      },
+    ],
+  },
+  {
+    path: '/content/post',
+    component: PostContent,
+    redirect: { name: 'landing' }, // TODO remove this line when the page is ready
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: LoginView,
+    meta: { notAuthenticated: true },
+  },
+  {
+    path: '/paymentcompleted',
+    name: 'PaymentCompleted',
+    component: PaymentCompleted,
+    meta: { requiresAuth: true },
+  },
+  {
+    path: '/wallet',
+    name: 'wallet',
+    component: Wallet,
+    meta: { requiresAuth: true },
+  },
+  {
+    path: '/profile',
+    name: 'profile',
+    component: ProfilePage,
+    meta: { requiresAuth: true },
+  },
+];
 
 const router = createRouter({
-    history: createWebHistory(import.meta.env.BASE_URL),
-    routes
-})
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+});
 
 // Navigation guards
 router.beforeEach((to, from, next) => {
-    const authStore = useAuthStore();
+  const authStore = useAuthStore();
 
-    if (to.matched.some(record => record.meta.requiresAuth)) {
-        if (!authStore.isAuthenticated) {
-            next('/');
-        } else {
-            next();
-        }
-    } else {
-        next();
-    }
-})
+  if (to.matched.some((record) => record.meta.requiresAuth)) {
+    if (!authStore.isAuthenticated) next({ name: 'login' });
+  } else if (to.matched.some((record) => record.meta.notAuthenticated)) {
+    if (authStore.isAuthenticated) next({ name: 'landing' });
+  }
+  next();
+});
 
 export default router;