Merge branch 'route-naming' into 'main'

Route naming

See merge request !36

src/components/OcBreadcrumb/OcBreadcrumb.vue

@@ -31,7 +31,7 @@ const home: MenuItem = {
   label: '',
   key: 'home',
   icon: type2IconsDict['home'],
-  to: ''
+  to: { name: 'index' }
 }
 
 function ocBreadcrumbItem2menuItem(item: OcBreadcrumbItem): MenuItem {
@@ -45,6 +45,7 @@ function ocBreadcrumbItem2menuItem(item: OcBreadcrumbItem): MenuItem {
 
 const formattedItems = computed(() => props.items.map((item) => ocBreadcrumbItem2menuItem(item)))
 </script>
+
 <style scoped>
 .p-breadcrumb {
   --p-breadcrumb-gap: 0.2rem;

src/components/OcCardCommunity/OcCardCommunity.vue

@@ -7,7 +7,7 @@
     </p>
     <OcLink
       :title="t('home.goToCommunity', { label: title })"
-      :to="'/community/' + community.name"
+      :to="{ name: 'community', params: { community: community.name } }"
       class="absolute top-0 left-0 h-full w-full"
     />
   </div>

src/components/OcLink.vue

@@ -5,14 +5,27 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { type RouterLinkProps } from 'vue-router'
+import type { PropType } from 'vue'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { RouteLocationAsRelativeGeneric } from 'vue-router'
 
 const { locale } = useI18n()
 
-const props = defineProps<RouterLinkProps>()
+const props = defineProps({
+  to: {
+    type: Object as PropType<RouteLocationAsRelativeGeneric>,
+    required: true
+  }
+})
 
-const routerLinkPropsTo = computed(() => '/' + locale.value + props.to)
+const routerLinkPropsTo = computed(() => {
+  const route = { ...props.to }
+  route.params = {
+    ...route.params,
+    lang: locale.value
+  }
 
-</script>
+  return route
\ No newline at end of file
+})
+</script>

src/components/OcTopBar/OcTopBar.vue

 <template>
-  <div class="w-full bg-white sticky top-0 flex justify-start items-center drop-shadow-lg px-4 gap-4 z-10 h-16">
-    <OcLink to="" class="flex items-center">
+  <div
+    class="w-full bg-white sticky top-0 flex justify-start items-center drop-shadow-lg px-4 gap-4 z-10 h-16"
+  >
+    <OcLink :to="{ name: 'index' }" class="flex items-center">
       <img src="/logo.png" class="h-6" />
       <p class="font-title font-bold text-2xl uppercase text-primary ml-4 pb-1">Open Common</p>
     </OcLink>

src/components/OcTopMenu.vue

 <template>
   <div class="flex items-center">
-    <Button v-if="!isAuthenticated" :as="OcLink" to="/connection" size="small">
+    <Button v-if="!isAuthenticated" :as="OcLink" :to="{ name: 'connection' }" size="small">
       {{ t('topMenu.signIn') }}
     </Button>
     <Menubar ref="menu" id="overlay_menu_top" :model="menuItems" :popup="true" :style="menuStyle" />
@@ -75,11 +75,11 @@ const menuItems = computed(() => {
       items: [
         {
           label: t('profile.profile'),
-          command: () => router.push(`/${locale.value}/profile`)
+          command: () => router.push({ name: 'profile', params: { lang: locale.value } })
         },
         {
           label: t('connection.logout'),
-          command: () => router.push(`/${locale.value}/logout`)
+          command: () => router.push({ name: 'logout', params: { lang: locale.value } })
         }
       ]
     })

src/composables/authentificationCheck.ts

-import { useAccountStore } from "@/stores/account"
-import { useI18n } from "vue-i18n"
-import { useRoute, useRouter } from "vue-router"
-
-export function useAuthentificationCheck() {
-  const accountStore = useAccountStore()
-  const router = useRouter()
-  const route = useRoute()
-  const { locale } = useI18n()
-
-  if (!accountStore.isAuthenticated) {
-    router.push({
-      name: `/:lang/[...path]`,
-      params: {
-        lang: locale.value,
-        path: 'error'
-      },
-      query: {
-        code: 403,
-        from: route.path
-      }
-    })
-  }
-}
\ No newline at end of file

src/dataLoaders/community.ts

@@ -20,7 +20,7 @@ export const useCommunityData = defineBasicLoader(
       // @see https://uvr.esm.is/data-loaders/navigation-aware.html#navigation-aware
       // As DataLoader is an experimental feature, I let it like this for now.
       router.push({
-        name: `/:lang/[...path]`,
+        name: 'catchall',
         params: {
           lang: locale.value,
           path: 'error'

src/layout/OcLayoutCommunityWithTree/OcLayoutCommunityWithTree.vue

@@ -76,12 +76,12 @@ onBeforeMount(() => treeStore.fetchIfEmpty())
 function onNodeSelect(node: TreeNode) {
   if (node.uri === homeNodeUri) {
     router.push({
-      name: '/:lang/community/[community]/',
+      name: 'community',
       params: { lang: locale.value, community: props.community?.name }
     })
   } else {
     router.push({
-      name: '/:lang/community/[community]/resource/[identifier]',
+      name: 'community.resource',
       params: { lang: locale.value, community: props.community?.name, identifier: node.key }
     })
   }

src/pages/[...path].vue

 <template>
   <header class="bg-primary p-10 flex justify-center">
-    <OcLink to="">
+    <OcLink :to="{ name: 'index' }">
       <img src=" /logo-text.png" class="h-20" alt="Open Common" />
     </OcLink>
   </header>
@@ -24,10 +24,16 @@
       </p>
     </div>
 
-    <Button :as="OcLink" to="">{{ t('backHome') }}</Button>
+    <Button :as="OcLink" :to="{ name: 'index' }">{{ t('backHome') }}</Button>
   </div>
 </template>
 
+<route lang="json">
+{
+  "name": "catchall"
+}
+</route>
+
 <script setup lang="ts">
 import OcLink from '@/components/OcLink.vue'
 import Button from 'primevue/button'

src/pages/community/[community].datasets/new.vue

@@ -59,9 +59,17 @@
   </OcLayoutSimple>
 </template>
 
+<route lang="json">
+{
+  "name": "community.datasets.new",
+  "meta": {
+    "needAuthent": true
+  }
+}
+</route>
+
 <script setup lang="ts">
 import OcLayoutSimple from '@/layout/OcLayoutSimple/OcLayoutSimple.vue'
-import { useAuthentificationCheck } from '@/composables/authentificationCheck'
 import type { OcBreadcrumbItem, OcDataset, OcVocabulary } from '@/declarations'
 import { useAccountStore } from '@/stores/account'
 import { computed } from 'vue'
@@ -84,8 +92,6 @@ import { ref } from 'vue'
 import { insertDataset } from '@/sparql/datasets'
 import { useCommunityData } from '@/dataLoaders/community'
 
-useAuthentificationCheck()
-
 const { translateValue } = useTranslateValue()
 const accountStore = useAccountStore()
 const { t, locale } = useI18n()

src/pages/community/[community].join.vue

@@ -19,7 +19,11 @@
       </div>
 
       <div class="flex justify-center">
-        <Button :as="OcLink" :to="'/community/' + community?.name" severity="secondary">
+        <Button
+          :as="OcLink"
+          :to="{ name: 'community', params: { community: community.name } }"
+          severity="secondary"
+        >
           {{ t('connection.continueAsGuest') }}
         </Button>
       </div>
@@ -29,7 +33,7 @@
         <i class="fa-solid fa-circle-check text-6xl text-center text-primary mb-6"></i>
         <p class="text-center mb-6">{{ t('community.askJoin.confirmation.1') }}</p>
         <p class="text-center mb-6">{{ t('community.askJoin.confirmation.2') }}</p>
-        <Button :as="OcLink" :to="'/community/' + community?.name" severity="secondary" rounded>
+        <Button :as="OcLink" :to="'/community/' + community.name" severity="secondary" rounded>
           {{ t('connection.continueAsGuest') }}
         </Button>
       </div>
@@ -37,6 +41,15 @@
   </OcLayoutBiColumn>
 </template>
 
+<route lang="json">
+{
+  "name": "community.join",
+  "meta": {
+    "needAuthent": true
+  }
+}
+</route>
+
 <script setup lang="ts">
 import OcLink from '@/components/OcLink.vue'
 import { useTranslateValue } from '@/composables/translateValue'

src/pages/community/[community].vue

 <template>
   <OcLayoutCommunityWithTree
-    v-if="community"
     :community="community"
     :is-authenticated="accountStore.isAuthenticated"
     :breadcrumb-items="breadcrumbItems"

src/pages/community/[community]/index.vue

@@ -33,7 +33,7 @@
       <Button
         v-if="!account.isAuthenticated"
         :as="OcLink"
-        to="/connection"
+        :to="{ name: 'connection' }"
         size="large"
         :class="`bg-${color}-400 hover:bg-${color}-700 text-white font-bold shadow-md border-0 mt-8 p-4 rounded-md m-auto`"
       >
@@ -42,7 +42,7 @@
       <Button
         v-else-if="!isMemberOfCurrentCommunity"
         :as="OcLink"
-        :to="'/community/' + name + '/join'"
+        :to="{ name: 'community.join', params: { community: community.name } }"
         size="large"
         :class="`bg-${color}-400 hover:bg-${color}-700 text-white border-0 mt-8 p-4 rounded-md m-auto`"
       >
@@ -60,6 +60,13 @@
     ></OcHomeCommunityActionList>
   </div>
 </template>
+
+<route lang="json">
+{
+  "name": "community"
+}
+</route>
+
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAccountStore } from '@/stores/account'
@@ -85,7 +92,6 @@ const { memberCommunitiesList } = storeToRefs(account)
 const { data: community } = useCommunityData()
 
 const title = computed(() => translateValue(community.value?.title))
-const name = computed(() => community.value?.name ?? '')
 const abstract = computed(() => translateValue(community.value?.abstract))
 const logoUrl = computed(() => community.value?.logo ?? null)
 const color = computed(() => getColor(community.value))

src/pages/community/[community]/resource/[identifier].vue

@@ -2,6 +2,13 @@
   <h2>identifier: {{ identifier }}</h2>
   <p>WIP</p>
 </template>
+
+<route lang="json">
+{
+  "name": "community.resource"
+}
+</route>
+
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
 

src/pages/connection.vue

@@ -20,13 +20,15 @@
       <hr class="my-8" />
 
       <div class="flex justify-center">
-        <Button outlined :as="OcLink" to="/register">{{ t('connection.createAccount') }}</Button>
+        <Button outlined :as="OcLink" :to="{ name: 'register' }">{{
+          t('connection.createAccount')
+        }}</Button>
       </div>
 
       <hr class="my-8" />
 
       <div class="flex justify-center">
-        <Button :as="OcLink" to="" severity="secondary">
+        <Button :as="OcLink" :to="{ name: 'index' }" severity="secondary">
           {{ t('connection.continueAsGuest') }}
         </Button>
       </div>
@@ -34,6 +36,12 @@
   </OcLayoutBiColumn>
 </template>
 
+<route lang="json">
+{
+  "name": "connection"
+}
+</route>
+
 <script setup lang="ts">
 import OcConnectionForm from '@/components/OcConnectionForm/OcConnectionForm.vue'
 import OcLink from '@/components/OcLink.vue'
@@ -73,7 +81,7 @@ async function connection(username: string, password: string) {
     accountStore.profile = profileInfos.profile
     accountStore.memberships = profileInfos.memberships
 
-    router.push(`/${locale.value}`)
+    router.push({ name: 'index', params: { lang: locale.value } })
   } else {
     loginError.value = true
   }

src/pages/index.vue

@@ -34,6 +34,12 @@
   </div>
 </template>
 
+<route lang="json">
+{
+  "name": "index"
+}
+</route>
+
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'

src/pages/logout.vue

@@ -6,17 +6,26 @@
     <div class="w-11/12 md:w-10/12 xl:w-7/12">
       <img src="/logo.png" class="h-16" />
       <p class="font-title font-bold text-5xl uppercase text-primary mb-4">Open Common</p>
-      <p class="text-lg line mb-8">{{ $t('connection.catchphrase') }}</p>
+      <p class="text-lg line mb-8">{{ t('connection.catchphrase') }}</p>
 
-      <Message class="mb-8" severity="success">{{ $t('connection.logoutSuccess') }}</Message>
+      <Message class="mb-8" severity="success">{{ t('connection.logoutSuccess') }}</Message>
 
       <div class="flex justify-center">
-        <Button :as="OcLink" to="">{{ $t('backHome') }}</Button>
+        <Button :as="OcLink" :to="{ name: 'index' }">{{ t('backHome') }}</Button>
       </div>
     </div>
   </OcLayoutBiColumn>
 </template>
 
+<route lang="json">
+{
+  "name": "logout",
+  "meta": {
+    "needAuthent": true
+  }
+}
+</route>
+
 <script setup lang="ts">
 import OcLink from '@/components/OcLink.vue'
 import type { OcBreadcrumbItem } from '@/declarations'

src/pages/profile.vue

@@ -37,6 +37,15 @@
   </OcLayoutSimple>
 </template>
 
+<route lang="json">
+{
+  "name": "profile",
+  "meta": {
+    "needAuthent": true
+  }
+}
+</route>
+
 <script setup lang="ts">
 import type { OcBreadcrumbItem } from '@/declarations'
 import OcLayoutSimple from '@/layout/OcLayoutSimple/OcLayoutSimple.vue'

src/pages/register.vue

@@ -25,7 +25,7 @@
         <i class="fa-solid fa-circle-check text-6xl text-center text-primary mb-6"></i>
         <p class="text-center mb-6">{{ t('register.confirmation.1') }}</p>
         <p class="text-center mb-6">{{ t('register.confirmation.2') }}</p>
-        <Button :as="OcLink" to="" severity="secondary">
+        <Button :as="OcLink" :to="{ name: 'index' }" severity="secondary">
           {{ t('connection.continueAsGuest') }}
         </Button>
       </div>
@@ -33,6 +33,12 @@
   </OcLayoutBiColumn>
 </template>
 
+<route lang="json">
+{
+  "name": "register"
+}
+</route>
+
 <script setup lang="ts">
 import OcLink from '@/components/OcLink.vue'
 import OcRegisterForm from '@/components/OcRegisterForm/OcRegisterForm.vue'

src/router.ts

@@ -16,9 +16,9 @@ const router = createRouter({
       redirect() {
         const language = navigator.language.split('-')[0] as typeof i18n.global.locale.value
         if (i18n.global.availableLocales.includes(language)) {
-          return { path: `${language}` }
+          return { name: 'index', params: { lang: language } }
         } else {
-          return { path: `${i18n.global.fallbackLocale}` }
+          return { name: 'index', params: { lang: i18n.global.fallbackLocale } }
         }
       },
     },
@@ -36,7 +36,7 @@ router.beforeResolve((to) => {
     i18n.global.locale.value = language
   } else {
     return {
-      name: `/:lang/[...path]`,
+      name: `catchall`,
       params: {
         lang: i18n.global.locale.value,
         path: 'error'
@@ -56,11 +56,37 @@ router.beforeEach(async () => {
   const accountStore = useAccountStore()
 
   if (accountStore.isAuthenticated && accountStore.profile === null) {
-    const { infos, profile, memberships } = await getProfileInfos(accountStore.auth as Credentials)
+    getProfileInfos(accountStore.auth as Credentials)
+      .then(({ infos, profile, memberships }) => {
+        accountStore.profile = profile
+        accountStore.infos = infos
+        accountStore.memberships = memberships
+      })
+  }
+})
+
+/**
+ * Authentification guard.
+ */
+router.beforeEach(async (to) => {
+  if (!to.meta.needAuthent) {
+    return
+  }
+
+  const accountStore = useAccountStore()
 
-    accountStore.profile = profile
-    accountStore.infos = infos
-    accountStore.memberships = memberships
+  if (!accountStore.isAuthenticated) {
+    router.push({
+      name: 'catchall',
+      params: {
+        lang: i18n.global.locale.value,
+        path: 'error'
+      },
+      query: {
+        code: 403,
+        from: to.path
+      }
+    })
   }
 })