From a375ab324558146e5b63c5ba0e6d6031a76e3aea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?=
 <38253764+wazolab@users.noreply.github.com>
Date: Tue, 17 Dec 2024 11:01:10 +0100
Subject: [PATCH] Fix URL IDs rules (#446)

---
 composables/useIdsResolver.ts   |  6 +++
 pages/category/[id].vue         |  4 +-
 pages/embedded.vue              | 57 ++++++++++++++++------------
 pages/embedded/[p1].vue         | 14 -------
 pages/embedded/[p1]/[poiId].vue | 17 +++++----
 pages/embedded/[p1]/index.vue   |  9 ++---
 pages/index.vue                 | 66 +++++++++++++++++++++------------
 pages/index/[p1].vue            | 18 ---------
 pages/index/[p1]/[poiId].vue    | 17 +++++----
 pages/index/[p1]/index.vue      | 10 ++---
 pages/poi/[id]/details.vue      |  5 +--
 pages/pois/[ids]/map.vue        |  6 +--
 12 files changed, 116 insertions(+), 113 deletions(-)
 create mode 100644 composables/useIdsResolver.ts
 delete mode 100644 pages/embedded/[p1].vue
 delete mode 100644 pages/index/[p1].vue

diff --git a/composables/useIdsResolver.ts b/composables/useIdsResolver.ts
new file mode 100644
index 00000000..0d0d4628
--- /dev/null
+++ b/composables/useIdsResolver.ts
@@ -0,0 +1,6 @@
+export const regexForCategoryIds = /^(?:(?<cartocode>cartocode:\w{2})|(?<reference>ref:[\w-]+:\w+)|(?<osm>osm:[nwr]\d+)|\d+(?:,\d+)*)$/
+export const regexForPOIIds = /^(?:cartocode:\w{2}|ref:[\w-]+:\w+|osm:[nwr]\d+|\d+)$/
+
+export function useIdsResolver() {
+
+}
diff --git a/pages/category/[id].vue b/pages/category/[id].vue
index 25dcc183..8f9216c2 100644
--- a/pages/category/[id].vue
+++ b/pages/category/[id].vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { regexForCategoryIds } from '~/composables/useIdsResolver'
+
 //
 // Validators
 //
 definePageMeta({
   validate({ params }) {
-    return typeof params.id === 'string' && /^[-\w:,]+$/.test(params.id)
+    return !!params.id && regexForCategoryIds.test(params.id.toString())
   },
 })
 </script>
diff --git a/pages/embedded.vue b/pages/embedded.vue
index 350809f0..9186d9ff 100644
--- a/pages/embedded.vue
+++ b/pages/embedded.vue
@@ -5,11 +5,12 @@ import Embedded from '~/components/Home/Embedded.vue'
 import type { ApiPoi } from '~/lib/apiPois'
 import { siteStore as useSiteStore } from '~/stores/site'
 import { mapStore as useMapStore } from '~/stores/map'
+import { regexForCategoryIds } from '~/composables/useIdsResolver'
 
 //
 // Composables
 //
-const { params, query, path } = useRoute()
+const route = useRoute()
 const siteStore = useSiteStore()
 const mapStore = useMapStore()
 const { config, settings } = storeToRefs(siteStore)
@@ -20,7 +21,6 @@ const { $trackingInit } = useNuxtApp()
 // Data
 //
 const boundaryGeojson = ref<Polygon | MultiPolygon>()
-const categoryIdsJoin = ref<string>()
 const poiId = ref<string>()
 const categoryIds = ref<number[]>()
 
@@ -31,7 +31,7 @@ onBeforeMount(() => {
   $trackingInit(config.value!)
 })
 
-const { boundary } = query
+const { boundary } = route.query
 if (boundary && typeof boundary === 'string' && settings.value!.polygons_extra) {
   const boundaryObject = settings.value!.polygons_extra[boundary]
   if (boundaryObject) {
@@ -51,33 +51,42 @@ if (boundary && typeof boundary === 'string' && settings.value!.polygons_extra)
   }
 }
 
-// Workaround Nuxt missing feature to simple respect trialling slash meaning
-if (params.poiId) {
-  categoryIdsJoin.value = params.p1 as string
-  poiId.value = params.poiId as string
-}
-else if (path.endsWith('/')) {
-  categoryIdsJoin.value = params.p1 as string
-  poiId.value = undefined
-}
-else {
-  categoryIdsJoin.value = undefined
-  poiId.value = params.p1 as string
+// Get category IDs from URL
+if (route.params.p1) {
+  const match = route.params.p1.toString().match(regexForCategoryIds)
+
+  if (!match || (!route.path.endsWith('/') && match.groups && (match.groups.cartocode || match.groups.reference || match.groups.osm)))
+    throw createError({ statusCode: 400, message: `No match for category ID: ${route.params.p1}` })
+
+  categoryIds.value = match.input?.split(',').map(id => Number.parseInt(id))
 }
 
-categoryIds.value = categoryIdsJoin.value?.split(',').map(id => Number.parseInt(id))
+// Get POI ID from URL
+if (categoryIds.value?.length === 1 && route.name === 'index-p1' && route.path.endsWith('/')) {
+  poiId.value = route.params.p1?.toString()
+  categoryIds.value = undefined
+}
 
-const { data, error } = await useFetch<ApiPoi>(`${API_ENDPOINT}/${API_PROJECT}/${API_THEME}/poi/${poiId.value}.geojson?geometry_as=bbox&short_description=false`)
+if (route.params.poiId)
+  poiId.value = route.params.poiId.toString()
 
-if (categoryIds.value && poiId.value) {
-  if (error.value)
-    throw createError(error.value)
+// Fetch inital POI
+const { data, error, status } = await useFetch<ApiPoi>(
+  () => `${API_ENDPOINT}/${API_PROJECT}/${API_THEME}/poi/${poiId.value}.geojson`,
+  {
+    query: {
+      geometry_as: 'bbox',
+      short_description: false,
+    },
+    immediate: !!poiId.value,
+  },
+)
 
-  if (!data.value)
-    throw createError({ statusCode: 404, message: 'Initial POI not found !' })
+if (error.value)
+  createError(error.value)
 
-  mapStore.setSelectedFeature(data.value!)
-}
+if (status.value === 'success' && data.value)
+  mapStore.setSelectedFeature(data.value)
 </script>
 
 <template>
diff --git a/pages/embedded/[p1].vue b/pages/embedded/[p1].vue
deleted file mode 100644
index af943d2e..00000000
--- a/pages/embedded/[p1].vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  validate({ params }) {
-    return (
-      typeof params.p1 === 'undefined'
-      || (typeof params.p1 === 'string' && /^[0-9,]+$/.test(params.p1))
-    )
-  },
-})
-</script>
-
-<template>
-  <span />
-</template>
diff --git a/pages/embedded/[p1]/[poiId].vue b/pages/embedded/[p1]/[poiId].vue
index a529503f..a16f922c 100644
--- a/pages/embedded/[p1]/[poiId].vue
+++ b/pages/embedded/[p1]/[poiId].vue
@@ -1,15 +1,18 @@
 <script setup lang="ts">
+import { regexForCategoryIds, regexForPOIIds } from '~/composables/useIdsResolver'
+
 //
 // Validators
 //
 definePageMeta({
-  validate({ params }) {
-    return (
-      typeof params.p1 === 'string'
-      && typeof params.poiId === 'string'
-      && /^[0-9,]+$/.test(params.p1)
-      && /^[-\w:]+$/.test(params.poiId)
-    )
+  validate: ({ params }) => {
+    const match = params.p1.toString().match(regexForCategoryIds)
+
+    if (match?.groups && (match.groups.cartocode || match.groups.reference || match.groups.osm)) {
+      return false
+    }
+
+    return !!params.p1 && !!params.poiId && regexForCategoryIds.test(params.p1.toString()) && regexForPOIIds.test(params.poiId.toString())
   },
 })
 </script>
diff --git a/pages/embedded/[p1]/index.vue b/pages/embedded/[p1]/index.vue
index 9b92c0aa..1698aa6d 100644
--- a/pages/embedded/[p1]/index.vue
+++ b/pages/embedded/[p1]/index.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
+import { regexForCategoryIds } from '~/composables/useIdsResolver'
+
 //
 // Validators
 //
 definePageMeta({
-  validate({ params }) {
-    return (
-      params.p1 === undefined
-      || (typeof params.p1 === 'string' && /^[0-9,]+$/.test(params.p1))
-    )
+  validate: ({ params }) => {
+    return !!params.p1 && regexForCategoryIds.test(params.p1.toString())
   },
 })
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index 2114f976..158515ad 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,11 +5,12 @@ import Home from '~/components/Home/Home.vue'
 import type { ApiPoi } from '~/lib/apiPois'
 import { siteStore as useSiteStore } from '~/stores/site'
 import { mapStore as useMapStore } from '~/stores/map'
+import { regexForCategoryIds } from '~/composables/useIdsResolver'
 
 //
 // Composables
 //
-const { params, query, path } = useRoute()
+const route = useRoute()
 const siteStore = useSiteStore()
 const mapStore = useMapStore()
 const { config, settings } = storeToRefs(siteStore)
@@ -20,7 +21,6 @@ const { $trackingInit } = useNuxtApp()
 // Data
 //
 const boundaryGeojson = ref<Polygon | MultiPolygon>()
-const categoryIdsJoin = ref<string>()
 const poiId = ref<string>()
 const categoryIds = ref<number[]>()
 
@@ -31,7 +31,7 @@ onBeforeMount(() => {
   $trackingInit(config.value!)
 })
 
-const { boundary } = query
+const { boundary } = route.query
 if (boundary && typeof boundary === 'string' && settings.value!.polygons_extra) {
   const boundaryObject = settings.value!.polygons_extra[boundary]
   if (boundaryObject) {
@@ -51,38 +51,56 @@ if (boundary && typeof boundary === 'string' && settings.value!.polygons_extra)
   }
 }
 
-// Workaround Nuxt missing feature to simple respect trialling slash meaning
-if (params.poiId) {
-  categoryIdsJoin.value = params.p1 as string
-  poiId.value = params.poiId as string
-}
-else if (path.endsWith('/')) {
-  categoryIdsJoin.value = params.p1 as string
-  poiId.value = undefined
+// Get category IDs from URL
+if (route.params.p1) {
+  const match = route.params.p1.toString().match(regexForCategoryIds)
+
+  if (!match || (!route.path.endsWith('/') && match.groups && (match.groups.cartocode || match.groups.reference || match.groups.osm)))
+    throw createError({ statusCode: 400, message: `No match for category ID: ${route.params.p1}` })
+
+  categoryIds.value = match.input?.split(',').map(id => Number.parseInt(id))
 }
-else {
-  categoryIdsJoin.value = undefined
-  poiId.value = params.p1 as string
+
+// Get POI ID from URL
+if (categoryIds.value?.length === 1 && route.name === 'index-p1' && route.path.endsWith('/')) {
+  poiId.value = route.params.p1?.toString()
+  categoryIds.value = undefined
 }
 
-categoryIds.value = categoryIdsJoin.value?.split(',').map(id => Number.parseInt(id))
+if (route.params.poiId)
+  poiId.value = route.params.poiId.toString()
 
 // Fetch inital POI
-const { data, error } = await useFetch<ApiPoi>(`${API_ENDPOINT}/${API_PROJECT}/${API_THEME}/poi/${poiId.value}.geojson?geometry_as=bbox&short_description=true`)
+const { data, error, status } = await useFetch<ApiPoi>(
+  () => `${API_ENDPOINT}/${API_PROJECT}/${API_THEME}/poi/${poiId.value}.geojson`,
+  {
+    query: {
+      geometry_as: 'bbox',
+      short_description: true,
+    },
+    immediate: !!poiId.value,
+  },
+)
 
-if (categoryIds.value && poiId.value) {
-  if (error.value)
-    throw createError(error.value)
+if (error.value)
+  createError(error.value)
 
-  if (!data.value)
-    throw createError({ statusCode: 404, message: 'Initial POI not found !' })
-
-  mapStore.setSelectedFeature(data.value!)
-}
+if (status.value === 'success' && data.value)
+  mapStore.setSelectedFeature(data.value)
 </script>
 
 <template>
   <VApp>
+    <VAlert
+      v-if="error"
+      :closable="true"
+      :style="{ zIndex: 999 }"
+      :text="error.message"
+      location="top center"
+      position="fixed"
+      type="error"
+      variant="elevated"
+    />
     <Home
       :boundary-area="boundaryGeojson"
       :initial-category-ids="categoryIds"
diff --git a/pages/index/[p1].vue b/pages/index/[p1].vue
deleted file mode 100644
index 13f92a9b..00000000
--- a/pages/index/[p1].vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-//
-// Validators
-//
-definePageMeta({
-  validate({ params }) {
-    return (
-      typeof params.p1 === 'undefined'
-      || (typeof params.p1 === 'string'
-      && /^[-\w:,]+$/.test(params.p1))
-    )
-  },
-})
-</script>
-
-<template>
-  <span />
-</template>
diff --git a/pages/index/[p1]/[poiId].vue b/pages/index/[p1]/[poiId].vue
index e45bb87b..a16f922c 100644
--- a/pages/index/[p1]/[poiId].vue
+++ b/pages/index/[p1]/[poiId].vue
@@ -1,15 +1,18 @@
 <script setup lang="ts">
+import { regexForCategoryIds, regexForPOIIds } from '~/composables/useIdsResolver'
+
 //
 // Validators
 //
 definePageMeta({
-  validate({ params }) {
-    return (
-      typeof params.p1 === 'string'
-      && typeof params.poiId === 'string'
-      && /^[-\w:,]/.test(params.p1)
-      && /^[-\w:]+$/.test(params.poiId)
-    )
+  validate: ({ params }) => {
+    const match = params.p1.toString().match(regexForCategoryIds)
+
+    if (match?.groups && (match.groups.cartocode || match.groups.reference || match.groups.osm)) {
+      return false
+    }
+
+    return !!params.p1 && !!params.poiId && regexForCategoryIds.test(params.p1.toString()) && regexForPOIIds.test(params.poiId.toString())
   },
 })
 </script>
diff --git a/pages/index/[p1]/index.vue b/pages/index/[p1]/index.vue
index 926ccbb9..1698aa6d 100644
--- a/pages/index/[p1]/index.vue
+++ b/pages/index/[p1]/index.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
+import { regexForCategoryIds } from '~/composables/useIdsResolver'
+
 //
 // Validators
 //
 definePageMeta({
-  validate({ params }) {
-    return (
-      params.p1 === undefined
-      || (typeof params.p1 === 'string'
-      && /^[-\w:,]+$/.test(params.p1))
-    )
+  validate: ({ params }) => {
+    return !!params.p1 && regexForCategoryIds.test(params.p1.toString())
   },
 })
 </script>
diff --git a/pages/poi/[id]/details.vue b/pages/poi/[id]/details.vue
index 0ceaaeca..5a6fd816 100644
--- a/pages/poi/[id]/details.vue
+++ b/pages/poi/[id]/details.vue
@@ -8,15 +8,14 @@ import type { ApiPoi } from '~/lib/apiPois'
 import { headerFromSettings } from '~/lib/apiSettings'
 import { getAsyncDataOrThrows } from '~/lib/getAsyncData'
 import { siteStore as useSiteStore } from '~/stores/site'
+import { regexForPOIIds } from '~/composables/useIdsResolver'
 
 //
 // Validators
 //
 definePageMeta({
   validate({ params }) {
-    return (
-      typeof params.id === 'string' && /^[-\w:]+$/.test(params.id)
-    )
+    return !!params.id && regexForPOIIds.test(params.id.toString())
   },
 })
 
diff --git a/pages/pois/[ids]/map.vue b/pages/pois/[ids]/map.vue
index 3ba63727..72ae2c76 100644
--- a/pages/pois/[ids]/map.vue
+++ b/pages/pois/[ids]/map.vue
@@ -4,16 +4,14 @@ import MapPois from '~/components/Map/MapPois.vue'
 import { type ApiPoiId, type ApiPois, getPois } from '~/lib/apiPois'
 import { getAsyncDataOrThrows } from '~/lib/getAsyncData'
 import { siteStore as useSiteStore } from '~/stores/site'
+import { regexForCategoryIds } from '~/composables/useIdsResolver'
 
 //
 // Validators
 //
 definePageMeta({
   validate({ params }) {
-    return (
-      typeof params.ids === 'string'
-      && /^[-\w:,]+$/.test(params.ids)
-    )
+    return !!params.ids && regexForCategoryIds.test(params.ids.toString())
   },
 })