vbv/client/src/router/index.ts

import GuestStartPage from "@/pages/GuestStartPage.vue";
import LoginPage from "@/pages/LoginPage.vue";
import UKStartPage from "@/pages/UKStartPage.vue";
import VVStartPage from "@/pages/VVStartPage.vue";
import DashboardPage from "@/pages/dashboard/DashboardPage.vue";
import {
  handleCourseSessionAsQueryParam,
  handleCurrentCourseSession,
  redirectToStartIfRequired,
  updateLoggedIn,
} from "@/router/guards";
import { addToHistory } from "@/router/history";
import { onboardingRedirect } from "@/router/onboarding";
import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  },
  routes: [
    {
      path: "/start",
      component: GuestStartPage,
      meta: {
        public: true,
      },
    },
    {
      path: "/start/vv",
      component: VVStartPage,
      name: "vvStart",
      meta: {
        public: true,
      },
    },
    {
      path: "/start/uk",
      component: UKStartPage,
      name: "ukStart",
      meta: {
        public: true,
      },
    },
    {
      path: "/login",
      component: LoginPage,
      props: { loginMethod: "sso" },
      meta: {
        // no login required -> so `public === true`
        public: true,
      },
    },
    {
      path: "/login-local",
      component: LoginPage,
      props: { loginMethod: "local" },
      meta: {
        // no login required -> so `public === true`
        public: true,
      },
    },
    {
      path: "/",
      name: "home",
      component: DashboardPage,
    },
    {
      path: "/course/:courseSlug/media",
      props: true,
      component: () => import("@/pages/mediaLibrary/MediaLibraryParentPage.vue"),
      children: [
        {
          path: "",
          component: () => import("@/pages/mediaLibrary/MediaLibraryIndexPage.vue"),
        },
        {
          path: ":categorySlug",
          props: true,
          component: () => import("@/pages/mediaLibrary/MediaLibraryCategoryPage.vue"),
        },
        {
          path: ":categorySlug/:contentSlug",
          props: true,
          component: () => import("@/pages/mediaLibrary/MediaLibraryContentPage.vue"),
        },
      ],
    },
    {
      path: "/course/:courseSlug/competence",
      props: true,
      component: () => import("@/pages/competence/CompetenceParentPage.vue"),
      children: [
        {
          path: "",
          props: true,
          component: () => import("@/pages/competence/CompetenceIndexPage.vue"),
        },

        {
          path: "certificates",
          props: true,
          component: () =>
            import("@/pages/competence/CompetenceCertificateListPage.vue"),
        },
        {
          path: "certificates/:certificateSlug",
          props: true,
          component: () =>
            import("@/pages/competence/CompetenceCertificateDetailPage.vue"),
        },
        {
          path: "criteria",
          props: true,
          component: () => import("@/pages/competence/PerformanceCriteriaPage.vue"),
        },
        {
          path: "competences",
          props: true,
          component: () => import("@/pages/competence/ActionCompetenceListPage.vue"),
        },
      ],
    },
    {
      path: "/course/:courseSlug/learn",
      component: () =>
        import("../pages/learningPath/learningPathPage/LearningPathPage.vue"),
      props: true,
    },
    {
      path: "/course/:courseSlug/learn/:circleSlug",
      component: () => import("../pages/learningPath/circlePage/CirclePage.vue"),
      props: true,
    },
    {
      path: "/course/:courseSlug/learn/:circleSlug/evaluate/:learningUnitSlug",
      component: () =>
        import("../pages/learningPath/selfEvaluationPage/SelfEvaluationPage.vue"),
      props: true,
    },
    {
      path: "/course/:courseSlug/learn/:circleSlug/:contentSlug",
      component: () =>
        import("../pages/learningPath/learningContentPage/LearningContentPage.vue"),
      props: true,
    },
    {
      path: "/course/:courseSlug/cockpit",
      props: true,
      component: () => import("@/pages/cockpit/CockpitParentPage.vue"),
      children: [
        {
          path: "",
          component: () => import("@/pages/cockpit/cockpitPage/CockpitPage.vue"),
          props: true,
        },
        {
          path: "profile/:userId",
          component: () => import("@/pages/cockpit/CockpitUserProfilePage.vue"),
          props: true,
        },
        {
          path: "profile/:userId/:circleSlug",
          component: () => import("@/pages/cockpit/CockpitUserCirclePage.vue"),
          props: true,
        },
        {
          path: "feedback/:circleId",
          component: () => import("@/pages/cockpit/FeedbackPage.vue"),
          props: true,
        },
        {
          path: "assignment/:assignmentId",
          component: () =>
            import("@/pages/cockpit/assignmentsPage/AssignmentsPage.vue"),
          props: true,
        },
        {
          path: "assignment/:assignmentId/:userId",
          component: () =>
            import(
              "@/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue"
            ),
          props: true,
        },
        {
          path: "attendance",
          component: () =>
            import("@/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue"),
          props: true,
        },
        {
          path: "documents",
          component: () => import("@/pages/cockpit/documentPage/DocumentPage.vue"),
          props: true,
        },
      ],
    },
    {
      path: "/statistic",
      props: true,
      component: () => import("@/pages/dashboard/statistic/StatisticParentPage.vue"),
      children: [
        {
          path: "attendance",
          props: true,
          component: () => import("@/pages/dashboard/statistic/AttendanceList.vue"),
        },
        {
          path: "assignment",
          props: true,
          component: () => import("@/pages/dashboard/statistic/AssignmentList.vue"),
        },
        {
          path: "competence",
          props: true,
          component: () => import("@/pages/dashboard/statistic/CompetenceList.vue"),
        },
        {
          path: "feedback",
          props: true,
          component: () => import("@/pages/dashboard/statistic/FeedbackList.vue"),
        },
        {
          path: "list",
          props: true,
          component: () => import("@/pages/dashboard/CourseListPage.vue"),
        },
      ],
    },
    {
      path: "/shop",
      component: () => import("@/pages/ShopPage.vue"),
    },
    {
      path: "/messages",
      component: () => import("@/pages/MessagesPage.vue"),
    },
    {
      path: "/settings",
      component: () => import("@/pages/SettingsPage.vue"),
    },
    {
      path: "/notifications",
      component: () => import("@/pages/NotificationsPage.vue"),
    },
    {
      path: "/appointments",
      component: () => import("@/pages/AppointmentsPage.vue"),
    },
    {
      path: "/course/:courseSlug/appointments",
      component: () => import("@/pages/AppointmentsPage.vue"),
    },
    {
      path: "/onboarding/:courseType",
      props: true,
      component: () => import("@/pages/onboarding/WizardBase.vue"),
      meta: {
        public: true,
        hideChrome: true,
      },
      beforeEnter: onboardingRedirect,
      children: [
        {
          path: "account/create",
          component: () => import("@/pages/onboarding/AccountSetup.vue"),
          name: "accountCreate",
        },
        {
          path: "account/confirm",
          component: () => import("@/pages/onboarding/AccountConfirm.vue"),
          name: "accountConfirm",
        },
        {
          path: "account/profile",
          component: () => import("@/pages/onboarding/AccountProfile.vue"),
          name: "accountProfile",
        },
        {
          path: "account/complete",
          component: () => import("@/pages/onboarding/uk/SetupComplete.vue"),
          name: "setupComplete",
        },
        {
          path: "checkout/address",
          component: () => import("@/pages/onboarding/vv/CheckoutAddress.vue"),
          name: "checkoutAddress",
        },
        {
          path: "checkout/complete",
          component: () => import("@/pages/onboarding/vv/CheckoutComplete.vue"),
          name: "checkoutComplete",
        },
      ],
    },
    {
      path: "/styleguide",
      component: () => import("../pages/StyleGuidePage.vue"),
      meta: {
        public: true,
      },
    },

    {
      path: "/:pathMatch(.*)*",
      component: () => import("../pages/404Page.vue"),
    },
  ],
});

router.beforeEach(updateLoggedIn);
router.beforeEach(redirectToStartIfRequired);

// register after login hooks
router.beforeEach(handleCurrentCourseSession);
router.beforeEach(handleCourseSessionAsQueryParam);

router.beforeEach(addToHistory);

export default router;