From 16cb1b236720d7ff7b9eca1e88b57e63ad4e1ad7 Mon Sep 17 00:00:00 2001
From: Yohann Marchat <yohann.marchat@camptocamp.com>
Date: Wed, 17 Jan 2024 18:50:10 +0100
Subject: [PATCH] feat: factorize legal notice in common, adapt conf

---
 package-lock.json                             |  18 +-
 package.json                                  |   4 +-
 src/App.vue                                   |   2 +-
 src/components/legal/AccessibilityLegal.vue   |  52 +---
 src/components/legal/CGULegal.vue             | 253 ++----------------
 src/components/legal/CookiesLegal.vue         |  17 +-
 src/components/legal/HeaderLegalNotice.vue    |  26 +-
 src/components/legal/LegalNotice.vue          |  83 +-----
 src/components/legal/PrivacyLegal.vue         | 249 +----------------
 src/components/legal/SiteMap.vue              |  35 +--
 .../ui/WaveObservatoryComponent.vue           |   8 +-
 src/services/api-adresse-data-gouv.ts         |  21 --
 src/services/api.ts                           |  34 ---
 src/stores/config.ts                          |  11 +
 14 files changed, 98 insertions(+), 715 deletions(-)
 delete mode 100644 src/services/api-adresse-data-gouv.ts

diff --git a/package-lock.json b/package-lock.json
index a5e35c7..a5e1a79 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,16 @@
 {
   "name": "cooperation_jn_wave",
-  "version": "1.1.0-RC1",
+  "version": "1.1.0-SNAPSHOT",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cooperation_jn_wave",
-      "version": "1.1.0-RC1",
+      "version": "1.1.0-SNAPSHOT",
       "dependencies": {
         "@kyvg/vue3-notification": "^2.9.0",
         "@pinia/testing": "^0.0.14",
-        "@sigrennesmetropole/cooperation_jn_common_ui": "0.0.35",
+        "@sigrennesmetropole/cooperation_jn_common_ui": "0.0.36",
         "@tailwindcss/forms": "^0.5.3",
         "@turf/boolean-intersects": "^6.5.0",
         "@turf/distance": "^6.5.0",
@@ -2045,9 +2045,9 @@
       "dev": true
     },
     "node_modules/@sigrennesmetropole/cooperation_jn_common_ui": {
-      "version": "0.0.35",
-      "resolved": "https://npm.pkg.github.com/download/@sigrennesmetropole/cooperation_jn_common_ui/0.0.35/80977c8c289861314de8a813ef24887d4cccee92",
-      "integrity": "sha512-NSs2aZ0PuratY+EjSchGTfDILrJE369dcVXbDx4QvPKTLVIO8hapRrdNs+cxHh/OURGQ3Of7o2gADQjyFYY10g==",
+      "version": "0.0.36",
+      "resolved": "https://npm.pkg.github.com/download/@sigrennesmetropole/cooperation_jn_common_ui/0.0.36/152c1cdbcbdfa1b37a3950c0ef02b248d81d0fc6",
+      "integrity": "sha512-Pa6aj12KvKaujoL4KlPv/KIB8i608x2QjzOgo+yK9zXk0Nb8hNTku+NRknP4zFQxZK8FwB+V0CQ12lmlqGDc6w==",
       "dependencies": {
         "npm-watch": "^0.11.0",
         "vue": "^3.2.38"
@@ -16160,9 +16160,9 @@
       "dev": true
     },
     "@sigrennesmetropole/cooperation_jn_common_ui": {
-      "version": "0.0.35",
-      "resolved": "https://npm.pkg.github.com/download/@sigrennesmetropole/cooperation_jn_common_ui/0.0.35/80977c8c289861314de8a813ef24887d4cccee92",
-      "integrity": "sha512-NSs2aZ0PuratY+EjSchGTfDILrJE369dcVXbDx4QvPKTLVIO8hapRrdNs+cxHh/OURGQ3Of7o2gADQjyFYY10g==",
+      "version": "0.0.36",
+      "resolved": "https://npm.pkg.github.com/download/@sigrennesmetropole/cooperation_jn_common_ui/0.0.36/152c1cdbcbdfa1b37a3950c0ef02b248d81d0fc6",
+      "integrity": "sha512-Pa6aj12KvKaujoL4KlPv/KIB8i608x2QjzOgo+yK9zXk0Nb8hNTku+NRknP4zFQxZK8FwB+V0CQ12lmlqGDc6w==",
       "requires": {
         "npm-watch": "^0.11.0",
         "vue": "^3.2.38"
diff --git a/package.json b/package.json
index b3ac1cf..e1399a3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cooperation_jn_wave",
-  "version": "1.1.0-RC1",
+  "version": "1.1.0-SNAPSHOT",
   "engines": {
     "node": ">=14"
   },
@@ -29,7 +29,7 @@
   "dependencies": {
     "@kyvg/vue3-notification": "^2.9.0",
     "@pinia/testing": "^0.0.14",
-    "@sigrennesmetropole/cooperation_jn_common_ui": "0.0.35",
+    "@sigrennesmetropole/cooperation_jn_common_ui": "0.0.36",
     "@tailwindcss/forms": "^0.5.3",
     "@turf/boolean-intersects": "^6.5.0",
     "@turf/distance": "^6.5.0",
diff --git a/src/App.vue b/src/App.vue
index 7658813..b779e02 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,7 +19,7 @@ const mapStore = useMapStore()
 onBeforeMount(async () => {
   const rennesApp = new RennesApp(mapConfig)
   provide('rennesApp', rennesApp)
-  displayRealTimePoints(rennesApp)
+  await displayRealTimePoints(rennesApp)
 })
 
 function isLeftPanelRetractable() {
diff --git a/src/components/legal/AccessibilityLegal.vue b/src/components/legal/AccessibilityLegal.vue
index 9c766fd..f1ad0b0 100644
--- a/src/components/legal/AccessibilityLegal.vue
+++ b/src/components/legal/AccessibilityLegal.vue
@@ -1,50 +1,6 @@
+<script setup lang="ts">
+import { UiAccessibilityLegal } from '@sigrennesmetropole/cooperation_jn_common_ui'
+</script>
 <template>
-  <div
-    class="flex flex-col gap-12 w-[880px] h-fit bg-white rounded-xl px-8 py-16 mx-auto mt-32 mb-[87px]"
-  >
-    <h1
-      class="flex flex-column align-start text-[44px] leading-[48px] lmb-12 font-bold"
-    >
-      Accessibilité
-    </h1>
-    <div class="text-base font-normal">
-      <p>
-        Le site n'a pas été soumis à un audit complet de conformité au RGAA.
-        Cependant, des mesures favorisant l'accessibilité ont été prises en
-        compte.
-      </p>
-      <br />
-      <p>
-        Tout au long du processus de développement de l'application, un effort a
-        été fait pour la rendre accessible au plus grand nombre. Les points
-        suivants ont été optimisés :
-      </p>
-      <ul class="list-disc pl-6">
-        <li>les contrastes visuels pour les personnes malvoyantes,</li>
-        <li>
-          la navigation tabulaire opérante afin de permettre aux personnes ne
-          pouvant pas utiliser la souris de naviguer facilement sur
-          l'application,
-        </li>
-        <li>
-          la lecture automatique d'écran en utilisant des outils tels que NVDA.
-          (https://www.nvaccess.org/).
-        </li>
-      </ul>
-      <br />
-      <p>
-        Pour profiter pleinement de l'expérience immersive offerte par notre
-        application basée sur Cesium et le jumeau numérique 3D de la métropole
-        de Rennes, veuillez vérifier ces prérequis techniques et mettre à jour
-        votre navigateur si nécessaire.
-      </p>
-    </div>
-    <div class="text-base font-normal">
-      <h2 class="text-2xl mb-2 font-bold">État de conformité</h2>
-      <p>
-        Le site est <span class="font-bold">non conforme</span> avec le
-        référentiel général d’amélioration de l’accessibilité (RGAA), version 4.
-      </p>
-    </div>
-  </div>
+  <UiAccessibilityLegal></UiAccessibilityLegal>
 </template>
diff --git a/src/components/legal/CGULegal.vue b/src/components/legal/CGULegal.vue
index 37729ba..3ac8e55 100644
--- a/src/components/legal/CGULegal.vue
+++ b/src/components/legal/CGULegal.vue
@@ -1,233 +1,30 @@
 <script setup lang="ts">
-import imgFinancePar from '@/assets/illustrations/etiquette-fr.png'
+import { UiCGULegal } from '@sigrennesmetropole/cooperation_jn_common_ui'
+import { useConfigStore } from '@/stores/config'
+let configStore = useConfigStore()
 </script>
 
 <template>
-  <div
-    class="flex flex-col gap-12 w-[880px] h-fit bg-white rounded-xl px-8 py-16 mx-auto mt-32 mb-[79px] font-dm-sans"
-  >
-    <h1 class="text-[44px] leading-[48px] mb-12 font-bold">
-      Conditions d’utilisation
-    </h1>
-    <div class="flex flex-col gap-8 leading-6 text-">
-      <p class="text-base align-baseline">
-        Rennes Métropole met à disposition, via le présent site, un service
-        permettant, sur le territoire de Ville de Rennes, de consulter les
-        mesures d'exposition aux ondes électromagnétiques réalisées,
-        d'identifier les sites radioélectriques présents et d'être redirigé vers
-        le site de l'ANFR pour réaliser une demande de mesure d'exposition aux
-        ondes électromagnétiques. L’Utilisateur est réputé avoir pris
-        connaissance des présentes conditions générales, qui s'imposent à tout
-        usager du présent site. L’Utilisateur garantit qu’il n’utilisera pas le
-        site à des fins illicites ou immorales ou contraires à leur utilisation
-        initiale.
-      </p>
-      <p class="text-base align-baseline">
-        Les équipements (ordinateurs, téléphones, moyens de télécommunication…)
-        permettant l'accès au site sont à la charge exclusive des Utilisateurs,
-        de même que les frais de télécommunications induits par leur
-        utilisation.
-      </p>
-
-      <p class="text-base align-baseline">
-        Pour une expérience optimale de l'application, vous trouverez ci-dessous
-        les prérequis techniques :
-      </p>
-      <ul class="list-disc pl-6">
-        <li>
-          Navigateur : Nous recommandons l'utilisation de Firefox, Chrome ou
-          Safari pour une compatibilité maximale.
-        </li>
-        <li>
-          WebGL : Assurez-vous que votre navigateur prend en charge WebGL, une
-          technologie graphique 3D utilisée par notre application.
-        </li>
-        <li>
-          Accélération matérielle : Pour des performances optimales, vérifiez
-          que votre appareil dispose d'un accélérateur graphique ou GPU.
-        </li>
-        <li>
-          Version du navigateur : Nous vous recommandons d'utiliser la dernière
-          version stable de votre navigateur préféré pour bénéficier des
-          dernières améliorations et fonctionnalités de compatibilité.
-        </li>
-        <li>
-          Suppression du cache : Pour éviter tout problème lié à des versions
-          précédentes de l'application en cache, nous vous conseillons de vider
-          régulièrement le cache de votre navigateur.
-        </li>
-        <li>
-          Pour garantir une expérience fluide et sans problèmes, nous vous
-          recommandons vivement de n'utiliser que les boutons de navigation
-          internes fournis dans notre application. Ces boutons sont spécialement
-          conçus pour maintenir la cohérence de l'interface utilisateur et
-          prévenir les erreurs.
-        </li>
-      </ul>
-      <p>
-        Pour profiter pleinement de l'expérience immersive offerte par notre
-        application basée sur Cesium et le jumeau numérique 3D de la métropole
-        de Rennes, veuillez vérifier ces prérequis techniques et mettre à jour
-        votre navigateur si nécessaire.
-      </p>
-
-      <h2 class="text-2xl font-bold">Services proposés aux utilisateurs</h2>
-      <ul class="list-disc pl-6">
-        <li>
-          Consultation des mesures en temps réel : via l'observatoire des Ondes,
-          un service de l'EXEM (laboratoire spécialisé dans la mesure de champs
-          électromagnétiques). Les mesures "en temps réel" sont enregistrées
-          toutes les deux heures par des capteurs permanents du laboratoire EXEM
-          installés par la Ville de Rennes.
-        </li>
-        <li>
-          Consultation des mesures ponctuelles : via le site Cartoradio, carte
-          des sites et des mesures radioélectriques de l'ANFR. Le site permet la
-          consultation des rapports détaillés des mesures de champs
-          électromagnétiques ainsi que des informations sur les sites
-          radioélectriques en France.
-        </li>
-        <li>
-          Consultation des sites émetteurs d'ondes (téléphonie mobile, réseaux
-          mobiles privés, télévision, radio, faisceaux hertziens et autres
-          stations) : également disponibles via le site Cartoradio.
-        </li>
-      </ul>
-      <p>Ces données sont mises à jour une fois par trimestre.</p>
-      <h2 class="text-2xl font-bold mt-1">Propriété intellectuelle</h2>
-      <h3 class="font-bold text-xl">Sites utilisés</h3>
-      <ul class="list-disc pl-6">
-        <li>
-          <a
-            href="https://www.observatoiredesondes.com/fr/carte-des-ondes/"
-            target="_blank"
-            class="underline"
-            >https://www.observatoiredesondes.com/fr/carte-des-ondes/</a
-          >
-          : ce site permet la consultation des mesures en temps réel
-          d'exposition aux ondes électromagnétiques
-        </li>
-        <li>
-          <a href="https://cartoradio.fr/#/" target="_blank" class="underline"
-            >https://cartoradio.fr/#/</a
-          >
-          : ce site permet la consultation à la fois des mesures ponctuelles et
-          des sites émetteurs d'ondes au sein de la Ville de Rennes
-        </li>
-      </ul>
-      <h2 class="text-2xl font-bold mt-1">Droits de reproduction</h2>
-      <h3 class="font-bold text-xl">Contenus produits par Rennes Métropole</h3>
-      <p class="text-base align-baseline">
-        Le présent site est la propriété de Rennes Métropole, qui en est
-        l'auteur au sens des articles L. 111.1 et suivants du Code de la
-        propriété intellectuelle. Les photographies, textes, slogans, dessins,
-        images, séquences animées sonores ou non ainsi que toutes œuvres
-        intégrées dans le site sont la propriété de Rennes Métropole ou de tiers
-        ayant autorisé Rennes Métropole à les utiliser. La reproduction, sur un
-        support papier ou informatique, du rapport téléchargeable ou du site est
-        autorisée sous réserve qu'elle soit strictement réservée à un usage
-        personnel, excluant tout usage à des fins publicitaires et/ou
-        commerciales et/ou d'informations, et qu'elle soit conforme aux
-        dispositions de l'article L122-5 du Code de la Propriété Intellectuelle.
-        À l'exception des dispositions ci-dessus, toute reproduction,
-        représentation, utilisation ou modification, par quelque procédé que ce
-        soit et sur quelque support que ce soit, de tout ou partie du site, des
-        rapports téléchargeables et de tout ou partie des contenus qui le
-        composent, sans avoir obtenu l'autorisation préalable de Rennes
-        Métropole, est strictement interdite et constitue un délit de
-        contrefaçon.
-      </p>
-
-      <h3 class="font-bold text-xl">Liens hypertextes pointant vers le site</h3>
-      <p class="text-base align-baseline">
-        Le site de Rennes Métropole autorise tout site internet ou tout autre
-        support à le citer ou à mettre en place un lien hypertexte pointant vers
-        son contenu, sous réserve :
-      </p>
-      <ul class="list-disc pl-6">
-        <li>
-          Que la page atteinte ne soit pas imbriquée à l’intérieur d’autres
-          pages, en particulier par voie de cadre (ou « frames ») c’est-à-dire
-          que les pages du présent site ne soient pas imbriquées à l’intérieur
-          des pages d’un autre site, mais accessibles par l’ouverture d’une
-          fenêtre,
-        </li>
-        <li>
-          De mentionner la source (Site Rennes Métropole) pour chaque lien, en
-          particulier lorsqu’il s’agit d’un lien direct sur un contenu,
-        </li>
-        <li>
-          Que l’accès aux pages contenant ces liens vers le présent site soit
-          gratuit.
-        </li>
-      </ul>
-      <p class="text-base align-baseline">
-        Cette autorisation ne s’applique pas aux sites diffusant des
-        informations à caractère polémique, pornographique, xénophobe ou
-        pouvant, dans une plus large mesure porter atteinte à la sensibilité du
-        plus grand nombre. Rennes Métropole se réserve le droit de demander la
-        suppression d’un lien qu’elle estime non conforme à sa ligne éditoriale.
-        <br /><br />
-        Rennes Métropole ne peut en aucun cas être tenu responsable de la mise à
-        disposition du présent site via un lien hypertexte, et ne peut supporter
-        aucune responsabilité sur le contenu, les produits, les services, etc.
-        disponibles sur ces sites destinataires ou à partir de ces sites
-        destinataires.
-      </p>
-
-      <h3 class="font-bold text-xl">
-        Liens hypertextes proposés sur le présent site
-      </h3>
-      <p class="text-base align-baseline">
-        Plusieurs liens vers d’autres sites sont proposés. Leur présence ne
-        saurait engager Rennes Métropole quant à leur contenu et ne vise qu’à
-        permettre à l’internaute de trouver plus facilement un accompagnement et
-        d’autres ressources sur le sujet de l'énergie photovoltaïque.
-      </p>
-
-      <h2 class="text-2xl font-bold mt-1">
-        Traitement des données personnelles
-      </h2>
-      <p class="text-base align-baseline">
-        Voir la politique
-        <a
-          href="/legalnotice/confidentialite"
-          target="_blank"
-          class="underline"
-        >
-          de protection des données personnelles</a
-        >
-        du présent site.
-      </p>
-
-      <h2 class="text-2xl font-bold mt-1">Responsabilité</h2>
-      <p class="text-base align-baseline">
-        Rennes Métropole met tout en œuvre pour offrir aux Utilisateurs des
-        informations et/ou des outils disponibles et mis à jour. Pour autant,
-        elle ne saurait être tenue responsable en cas d’erreurs, d’absence de
-        disponibilité des fonctionnalités et/ou de la présence de virus sur le
-        site.
-        <br /><br />
-        Rennes Métropole ne saurait garantir l'exactitude, la complétude,
-        l'actualité et l’exhaustivité des informations diffusées sur le site.
-        Chaque Utilisateur est invité à affiner les informations obtenues et
-        restituées dans le rapport téléchargeable auprès de structures
-        spécialisées.
-        <br /><br />
-        La responsabilité de Rennes Métropole ne saurait être engagée en cas de
-        force majeure.
-      </p>
-
-      <h2 class="text-2xl font-bold mt-1">Programme France Relance</h2>
-      <p class="text-base align-baseline">
-        Ce projet a été soutenu par le programme France Relance.
-      </p>
-
-      <img class="w-[242.25px] h-[130px]" :src="imgFinancePar" alt="" />
-
-      <p class="text-base align-baseline">
-        Licence Creative Commons BY-NC-SA 3.0 FR
-      </p>
-    </div>
-  </div>
+  <UiCGULegal>
+    <li>
+      <a
+        :href="configStore.config?.wave.carte_ondes_url"
+        target="_blank"
+        class="underline"
+        >{{ configStore.config?.wave.carte_ondes_url }}</a
+      >
+      : ce site permet la consultation des mesures en temps réel d'exposition
+      aux ondes électromagnétiques
+    </li>
+    <li>
+      <a
+        :href="configStore.config?.wave.carto_radio_url"
+        target="_blank"
+        class="underline"
+        >{{ configStore.config?.wave.carto_radio_url }}</a
+      >
+      : ce site permet la consultation à la fois des mesures ponctuelles et des
+      sites émetteurs d'ondes au sein de la Ville de Rennes
+    </li>
+  </UiCGULegal>
 </template>
diff --git a/src/components/legal/CookiesLegal.vue b/src/components/legal/CookiesLegal.vue
index 9f8cfb6..b3245e8 100644
--- a/src/components/legal/CookiesLegal.vue
+++ b/src/components/legal/CookiesLegal.vue
@@ -1,15 +1,6 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { UiCookiesLegal } from '@sigrennesmetropole/cooperation_jn_common_ui'
+</script>
 <template>
-  <div
-    class="flex flex-col gap-12 w-[880px] h-fit bg-white rounded-xl px-8 py-16 mx-auto mt-32 mb-[87px]"
-  >
-    <h1
-      class="flex flex-column align-start text-[44px] leading-[48px] lmb-12 font-bold"
-    >
-      Cookies
-    </h1>
-    <div class="text-base font-normal">
-      <p>L'application n'utilise pas de cookie.</p>
-    </div>
-  </div>
+  <UiCookiesLegal></UiCookiesLegal>
 </template>
diff --git a/src/components/legal/HeaderLegalNotice.vue b/src/components/legal/HeaderLegalNotice.vue
index 6e91b98..c2a0007 100644
--- a/src/components/legal/HeaderLegalNotice.vue
+++ b/src/components/legal/HeaderLegalNotice.vue
@@ -2,6 +2,7 @@
 import { useRoute, useRouter } from 'vue-router'
 import { ref } from 'vue'
 import { UiHeaderFullScreen } from '@sigrennesmetropole/cooperation_jn_common_ui'
+import { UiMidLegalNotice } from '@sigrennesmetropole/cooperation_jn_common_ui'
 import logoRennes from '@/assets/illustrations/logoRennes.png'
 import { legalList } from '@/constants/legalLinks'
 import { useViewsStore } from '@/stores/views'
@@ -10,7 +11,7 @@ const router = useRouter()
 const { params } = useRoute()
 const viewStore = useViewsStore()
 const routeParams = ref(params)
-const legalLink = routeParams.value.legallink
+const legalLink = routeParams.value.legallink.toString()
 
 function goTo(link: string) {
   router.push(link)
@@ -29,23 +30,12 @@ const close = () => {
       <img class="ml-8" :src="logoRennes" />
     </template>
     <template v-slot:mid-content>
-      <div class="flex flex-row self-end gap-4">
-        <div
-          v-for="item in legalList"
-          :key="item.name"
-          class="flex flex-row align-center pt-2 pb-4 px-2"
-          :class="legalLink == item.slug ? 'border-black border-b-2' : ''"
-        >
-          <h4
-            tabindex="0"
-            class="text-[18px] leading-6 bold cursor-pointer"
-            @click="goTo(item.link)"
-            @keydown.enter="goTo(item.link)"
-          >
-            {{ item.name }}
-          </h4>
-        </div>
-      </div>
+      <UiMidLegalNotice
+        :go-to="goTo"
+        :legal-link="legalLink"
+        :legal-list="legalList"
+      >
+      </UiMidLegalNotice>
     </template>
     <template v-slot:button-content>
       <span class="text-base font-medium">Fermer</span>
diff --git a/src/components/legal/LegalNotice.vue b/src/components/legal/LegalNotice.vue
index cde5ce6..20ebd20 100644
--- a/src/components/legal/LegalNotice.vue
+++ b/src/components/legal/LegalNotice.vue
@@ -1,81 +1,14 @@
 <script setup lang="ts">
-import expandIcon from '@/assets/icons/expand-small-bigger-retract-smaller-big.svg'
-import imgFinancePar from '@/assets/illustrations/etiquette-fr.png'
+import { UiLegalNotice } from '@sigrennesmetropole/cooperation_jn_common_ui'
+
+import { useConfigStore } from '@/stores/config'
+let configStore = useConfigStore()
 </script>
 
 <template>
-  <div
-    class="flex flex-col gap-12 w-[880px] h-fit bg-white rounded-xl px-8 py-16 mx-auto mt-32 mb-[78px]"
+  <UiLegalNotice
+    :contact_link="configStore.config?.link.contact_link"
+    :current_url="configStore.config?.link.ondes_link"
   >
-    <h1 class="text-[44px] leading-[48px] lmb-12 font-bold">
-      Mentions légales
-    </h1>
-    <div class="flex flex-col gap-8 text-base font-normal">
-      <p>
-        Nos devoirs et obligations : toutes les informations obligatoires du
-        présent site internet.
-      </p>
-      <h1 class="text-3xl font-bold">Éditeurs du site</h1>
-      <p>Le présent site internet est géré par Rennes Métropole.</p>
-      <div class="flex flex-col gap-2 text-base font-normal">
-        <div>
-          <h3 class="text-xl font-bold">Rennes Métropole:</h3>
-          <p>(Établissement public de coopération intercommunale)</p>
-        </div>
-        <div>
-          <p>Hôtel de Rennes Métropole</p>
-          <p>4, avenue Henri Fréville</p>
-          <p>CS 9311135031 RENNES cedex</p>
-          <p>Téléphone : 02 99 86 60 60</p>
-          <div class="flex flex-row">
-            <p class="underline decoration-1 font-medium">
-              <a
-                href="https://e-demarches.rennes.fr/Rennes/workflow_url?ECITIZ_ACTIVITY_PATH=Demandeur&USAGER_PROCESS=CONTACT"
-                target="_blank"
-              >
-                Nous contacter
-              </a>
-            </p>
-            <a
-              href="https://e-demarches.rennes.fr/Rennes/workflow_url?ECITIZ_ACTIVITY_PATH=Demandeur&USAGER_PROCESS=CONTACT"
-              target="_blank"
-            >
-              <img :src="expandIcon" class="w-3.5 h-3.5 ml-2 mt-1" />
-            </a>
-          </div>
-          <ul>
-            <li class="test-base">Siren : 243 500 139</li>
-            <li class="test-base">Siret : 243 500 139 001 89</li>
-            <li class="test-base">N°TVA : FR 25 243 500 139</li>
-          </ul>
-        </div>
-      </div>
-      <div class="flex flex-col gap-2 text-base font-normal">
-        <h3 class="text-xl font-bold">Directeur de la publication:</h3>
-        <div>
-          <p>Nathalie APPERE, présidente de Rennes Métropole.</p>
-        </div>
-      </div>
-      <div class="flex flex-col gap-2 text-base font-normal">
-        <h3 class="text-xl font-bold">Conception et charte graphique:</h3>
-        <p>Lucile Collignon EI</p>
-      </div>
-      <div class="flex flex-col text-base font-normal">
-        <h3 class="text-xl font-bold mb-2">Développement:</h3>
-        <p>Camptocamp France SAS</p>
-        <p>18 rue du Lac Saint André - Bât. Le Dauphin</p>
-        <p>Savoie Technolac</p>
-        <p>73 370 Le Bourget-du-Lac</p>
-      </div>
-      <div class="flex flex-col gap-2 text-base font-normal">
-        <h3 class="text-xl font-bold">Hébergement:</h3>
-        <p>Ce site est hébergé par Scaleway.</p>
-      </div>
-      <div class="flex flex-col gap-2 text-base font-normal">
-        <h3 class="text-xl font-bold">Programme France Relance:</h3>
-        <p>Ce projet a été soutenu par le programme France Relance.</p>
-        <img class="w-[242.25px] h-[130px]" :src="imgFinancePar" alt="" />
-      </div>
-    </div>
-  </div>
+  </UiLegalNotice>
 </template>
diff --git a/src/components/legal/PrivacyLegal.vue b/src/components/legal/PrivacyLegal.vue
index f2ef2fb..d014601 100644
--- a/src/components/legal/PrivacyLegal.vue
+++ b/src/components/legal/PrivacyLegal.vue
@@ -1,243 +1,14 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useConfigStore } from '@/stores/config'
+import { UiPrivacyLegal } from '@sigrennesmetropole/cooperation_jn_common_ui'
+
+let configStore = useConfigStore()
+</script>
 
 <template>
-  <div
-    class="flex flex-col gap-12 w-[880px] h-fit bg-white rounded-xl px-8 py-16 mx-auto mt-32 mb-[79px]"
+  <UiPrivacyLegal
+    :current_url="configStore.config?.link.ondes_link"
+    :contact_link="configStore.config?.link.contact_link"
   >
-    <h1 class="text-[44px] leading-[48px] mb-12 font-bold">
-      Politique de protection des données personnelles
-    </h1>
-    <p>Dernière mise à jour : 13 juin 2023</p>
-    <div class="bg-neutral-50 p-8 border border-neutral-200">
-      <p class="text-base font-normal">
-        Bienvenue sur le lien
-        <a
-          class="underline decoration-1 font-medium"
-          href="https://ondes.coopterr.rennesmetropole.fr/"
-          target="_blank"
-          >https://ondes.coopterr.rennesmetropole.fr/</a
-        >
-      </p>
-      <p class="text-base font-normal">
-        Le responsable de traitement de vos données personnelles est Rennes
-        Métropole (ci-après « nous »). Adresse postale: Rennes Métropole Service
-        Protection de la donnée Hôtel de Rennes Métropole 4, avenue Henri
-        Freville CS 93111 35031 Rennes cedex
-        <a
-          class="test-base underline decoration-1 font-medium"
-          href="https://e-demarches.rennes.fr/Rennes/workflow_url?ECITIZ_ACTIVITY_PATH=Demandeur&amp;USAGER_PROCESS=CONTACT"
-          target="_blank"
-          >Nous contacter</a
-        >
-      </p>
-      <p>
-        <a
-          class="test-base underline decoration-1 font-medium"
-          href="/legalnotice/mentions-legales"
-          target="_blank"
-          >Voir les mentions légales</a
-        >
-      </p>
-    </div>
-    <div class="flex flex-col gap-8">
-      <div class="text-base font-normal">
-        <p class="mb-6">
-          Dans le cadre de l'accès à l'application web ondes et mesures, seule
-          votre adresse IP est collectée. Nous nous engageons à ce que la
-          collecte et le traitement de vos données soient effectués de manière
-          licite, loyale et transparente, conformément au
-          <a
-            class="underline decoration-1 font-medium"
-            href="https://www.cnil.fr/fr/reglement-europeen-protection-donnees"
-            target="_blank"
-            >Règlement européen général sur la protection des données</a
-          >
-          (« RGPD ») et à la
-          <a
-            class="underline decoration-1 font-medium"
-            href="https://www.cnil.fr/fr/la-loi-informatique-et-libertes"
-            target="_blank"
-            >Loi informatiques et Libertés de 1978 modifiée</a
-          >
-          (« LIL »).
-        </p>
-        <p class="mb-6">
-          Cette collecte d'information se limite au nécessaire, conformément au
-          principe de minimisation des données. Les définitions fournies à
-          <a
-            class="underline decoration-1 font-medium"
-            href="https://www.cnil.fr/fr/reglement-europeen-protection-donnees/chapitre1"
-            target="_blank"
-            >l'article 4 du RGPD</a
-          >
-          sont applicables aux présentes. En cas de mise à jour, nous
-          n'abaisserons pas le niveau de confidentialité de manière
-          substantielle sans l'information préalable des personnes concernées.
-        </p>
-        <p class="mb-6">
-          Nous nous efforcerons de répondre en toute transparence aux questions
-          suivantes : Quelles catégories de données personnelles traitons-nous ?
-          Dans quels buts ? Sur quelles bases légales ? Quels sont vos droits ?
-          Comment les exercer ? Pendant combien de temps les données sont-elles
-          conservées ? Vous trouverez également nos engagements en matière de
-          sous-traitance, de transferts, de communication à des tiers et en cas
-          de faille de sécurité.
-        </p>
-        <p>
-          Pour toute précision ou réclamation, n'hésitez pas à
-          <a
-            class="underline decoration-1 font-medium"
-            href="https://e-demarches.rennes.fr/Rennes/workflow_url?ECITIZ_ACTIVITY_PATH=Demandeur&amp;USAGER_PROCESS=CONTACT"
-            target="_blank"
-            >nous contacter.</a
-          >
-        </p>
-      </div>
-      <h2 class="text-2xl font-bold">
-        Quelles données personnelles collectons-nous ?
-      </h2>
-      <div class="font-normal">
-        <h3 class="text-xl font-bold mb-2">Journaux de connexion :</h3>
-        <p class="text-base">
-          Des données d´utilisation (adresses IP) sont collectées
-          automatiquement.
-        </p>
-      </div>
-      <h2 class="text-2xl font-bold">
-        Dans quels buts ces données sont-elles collectées ?
-      </h2>
-    </div>
-    <div class="font-normal">
-      <p class="text-base">
-        Le but est d'assurer une traçabilité des accès et des actions des
-        différentes personnes accédant aux systèmes d’informations afin de
-        pouvoir détecter et enquêter en cas d’incident, d’intrusion dans les
-        systèmes informatiques, ou de détournement d’usage des traitements de
-        données par les personnes habilitées. Cela constitue une mesure de
-        sécurité.
-      </p>
-    </div>
-
-    <p class="text-2xl font-bold">Quelle est la licéité du traitement ?</p>
-    <div class="font-normal text-base">
-      <p class="mb-6">
-        Le traitement que nous mettons en œuvre repose sur une obligation légale
-        de sécurité.
-      </p>
-    </div>
-
-    <p class="text-2xl font-bold">
-      Pendant combien de temps sont-elles conservées ?
-    </p>
-    <div class="font-normal text-base">
-      <p class="mb-6">
-        Les données sont conservées au minimum 6 mois et au maximum 1 an. À
-        l'issue de ce délai, les données personnelles feront l'objet d'une
-        suppression définitive systématique.
-      </p>
-    </div>
-    <p class="text-2xl font-bold">
-      Quels sont vos droits ? Comment les exercer ?
-    </p>
-    <div class="text-base font-normal">
-      <p>
-        Dans les limites prévues par la loi, vous pouvez accéder et obtenir
-        copie des données vous concernant, vous opposer au traitement de ces
-        données, les faire rectifier ou les faire effacer. Vous disposez
-        également d'un droit à la limitation du traitement de vos données.
-      </p>
-      <p>
-        Les demandes d'exercice de vos droits peuvent être adressées au
-        responsable de traitement par voie postale :
-      </p>
-      <p>Rennes Métropole</p>
-      <p>Service Protection de la donnée</p>
-      <p>Hôtel de Rennes Métropole</p>
-      <p>4 avenue Henri Freville</p>
-      <p>CS 93111 35031 Rennes Cedex</p>
-      <p class="mb-6">
-        <a
-          class="underline decoration-1 font-medium"
-          href="https://e-demarches.rennes.fr/Rennes/workflow_url?ECITIZ_ACTIVITY_PATH=Demandeur&amp;USAGER_PROCESS=CONTACT"
-          target="_blank"
-          >Nous contacter</a
-        >
-      </p>
-      <p>
-        Si vous estimez après nous avoir contacté que les droits sur vos données
-        n’ont pas été respectés, vous pouvez introduire une réclamation auprès
-        de la CNIL.
-      </p>
-      <p>
-        <a
-          class="underline decoration-1 font-medium"
-          href="https://www.cnil.fr/fr/les-droits-pour-maitriser-vos-donnees-personnelles"
-          target="_blank"
-          >Voir le site de la CNIL pour plus d´informations sur vos droits.</a
-        >
-      </p>
-    </div>
-
-    <p class="text-2xl font-bold">
-      Nos engagements en matière de sous-traitance, communication et transferts
-      de données.
-    </p>
-    <div class="text-base font-normal">
-      <p class="mb-6">
-        En cas de communication de vos données personnelles à un tiers, quelle
-        que soit sa qualité, nous nous assurerons préalablement que ce dernier
-        est tenu d´appliquer des conditions de confidentialité identiques aux
-        nôtres.
-        <br />
-        Nous nous engageons à (i) ce que tout sous-traitant, présente des
-        garanties contractuelles suffisantes et appropriées pour respecter vos
-        droits, afin que le traitement réponde aux exigences du RGPD et (ii) à
-        respecter les
-        <a
-          href="https://www.cnil.fr/fr/reglement-europeen-protection-donnees/chapitre5"
-          target="_blank"
-          class="underline"
-          >dispositions</a
-        >
-        du RGPD applicables aux transferts des données.
-      </p>
-    </div>
-
-    <p class="text-2xl font-bold">Indications en cas de violation de données</p>
-    <div class="text-base font-normal">
-      <p class="mb-6">
-        Nous nous engageons à mettre en œuvre toutes les mesures techniques et
-        organisationnelles appropriées grâce à des moyens de sécurisation
-        physiques et logistiques permettant de garantir un niveau de sécurité
-        adapté au regard des risques d'accès accidentels, non autorisés ou
-        illégaux, de divulgation, d'altération, de perte ou encore de
-        destruction des données personnelles vous concernant.
-      </p>
-      <p>
-        Dans l'éventualité où nous prendrions connaissance d'un accès illégal
-        aux données personnelles vous concernant, stockées sur nos serveurs ou
-        ceux de nos prestataires, ou d'un accès non autorisé ayant pour
-        conséquence la réalisation des risques identifiés ci-dessus, nous nous
-        engageons à :
-      </p>
-      <br />
-      <ul>
-        <li>
-          · Vous notifier l'incident dans les plus brefs délais si cela est
-          susceptible d’engendrer un risque élevé pour vos droits et libertés ;
-        </li>
-        <li>· Examiner les causes de l'incident ;</li>
-        <li>
-          · Prendre les mesures nécessaires dans la limite du raisonnable afin
-          d'amoindrir les effets négatifs et préjudices pouvant résulter dudit
-          incident.
-        </li>
-      </ul>
-      <p class="mt-10">
-        En aucun cas les engagements définis au point ci-dessus ne peuvent être
-        assimilés à une quelconque reconnaissance de faute ou de responsabilité
-        quant à la survenance de l'incident en question.
-      </p>
-    </div>
-  </div>
+  </UiPrivacyLegal>
 </template>
diff --git a/src/components/legal/SiteMap.vue b/src/components/legal/SiteMap.vue
index 4fa89bb..ac8aae3 100644
--- a/src/components/legal/SiteMap.vue
+++ b/src/components/legal/SiteMap.vue
@@ -1,26 +1,15 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useConfigStore } from '@/stores/config'
+import { UiSiteMap } from '@sigrennesmetropole/cooperation_jn_common_ui'
+
+let configStore = useConfigStore()
+</script>
 <template>
-  <div
-    class="flex flex-col gap-12 w-[880px] h-fit bg-white rounded-xl px-8 py-16 mx-auto mt-32 mb-[87px]"
+  <UiSiteMap
+    :coopterr_url="configStore.config?.link.coopterr_link"
+    :ondes_url="configStore.config?.link.ondes_link"
+    :solaire_url="configStore.config?.link.solar_link"
+    :trambus_url="configStore.config?.link.trambus_link"
   >
-    <h1
-      class="flex flex-column align-start text-[44px] leading-[48px] lmb-12 font-bold"
-    >
-      Plan du site
-    </h1>
-    <a
-      class="text-xl font-bold mb-2"
-      href="https://coopterr.rennesmetropole.fr"
-    >
-      COOPTERR
-    </a>
-    <a class="text-xl font-bold mb-2"> Cadastre Solaire </a>
-    <a
-      class="text-xl font-bold mb-2"
-      href="https://ondes.coopterr.rennesmetropole.fr"
-    >
-      Ondes & Mesures
-    </a>
-    <a class="text-xl font-bold mb-2"> Réseau Trambus </a>
-  </div>
+  </UiSiteMap>
 </template>
diff --git a/src/components/ui/WaveObservatoryComponent.vue b/src/components/ui/WaveObservatoryComponent.vue
index 20099a4..f63c724 100644
--- a/src/components/ui/WaveObservatoryComponent.vue
+++ b/src/components/ui/WaveObservatoryComponent.vue
@@ -2,12 +2,12 @@
 import expandArrow from '@/assets/icons/expand-small-bigger-retract-smaller-big.svg'
 import WaveObservatory from '@/assets/illustrations/wave-observatory.svg'
 import { UiButton } from '@sigrennesmetropole/cooperation_jn_common_ui'
+import { useConfigStore } from '@/stores/config'
+
+let configStore = useConfigStore()
 
 function goToWaveObservatory() {
-  window.open(
-    'https://www.observatoiredesondes.com/fr/carte-des-ondes/',
-    '_blank'
-  )
+  window.open(configStore.config?.wave.carte_ondes_url, '_blank')
 }
 </script>
 
diff --git a/src/services/api-adresse-data-gouv.ts b/src/services/api-adresse-data-gouv.ts
deleted file mode 100644
index d4f798b..0000000
--- a/src/services/api-adresse-data-gouv.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// import { RennesNotification } from '@/services/notification'
-import { useAddressStore } from '@/stores/address'
-import { apiService } from '@/services/api'
-
-class ApiAdresseDataGouvService {
-  //Documention of API : https://adresse.data.gouv.fr/api-doc/adresse
-
-  async fetchAddressesFromLatLon(lat: number, lon: number) {
-    const errorMessage =
-      "Récupération d'adresse échouée, mais position obtenue. Vous pouvez continuer la simulation."
-    const data = await apiService.callApiGet(
-      `/api/address-reverse/${lat}/${lon}`,
-      errorMessage
-    )
-    const addressStore = useAddressStore()
-    addressStore.setAddress(data)
-    return data
-  }
-}
-
-export const apiAdresseDataGouvService = new ApiAdresseDataGouvService()
diff --git a/src/services/api.ts b/src/services/api.ts
index 2b5b901..29d912a 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -2,40 +2,6 @@ import { RennesNotification } from '@/services/notification'
 import { getUrlBackOffice } from '@/services/env'
 
 class ApiService {
-  async callApiPost(
-    url: string,
-    dataPost: {},
-    headers: {},
-    type: string = 'json'
-  ) {
-    try {
-      const response = await fetch(getUrlBackOffice() + url, {
-        method: 'POST',
-        headers: headers,
-        credentials: 'include',
-        body: JSON.stringify(dataPost),
-      })
-
-      if (response.status !== 200) {
-        throw new Error(`HTTP error status: ${response.status}`)
-      }
-
-      if (type == 'buffer') {
-        const arrayBuffer = await response.arrayBuffer() // get array buffer
-        return arrayBuffer
-      } else {
-        const data = await response.json()
-        return data
-      }
-    } catch (error) {
-      const notif = new RennesNotification(
-        'error',
-        'Une erreur est survenue, veuillez réessayer.'
-      )
-      notif.displayNotification()
-    }
-  }
-
   async callApiGet(
     url: string,
     errorMsg: string = 'Une erreur est survenue, veuillez réessayer.'
diff --git a/src/stores/config.ts b/src/stores/config.ts
index 469057e..4d24f96 100644
--- a/src/stores/config.ts
+++ b/src/stores/config.ts
@@ -10,6 +10,17 @@ type ConfigType = {
     nb_addresses_communes: number
     nb_addresses_streets: number
   }
+  link: {
+    coopterr_link: string
+    solar_link: string
+    trambus_link: string
+    ondes_link: string
+    contact_link: string
+  }
+  wave: {
+    carte_ondes_url: string
+    carto_radio_url: string
+  }
 }
 
 export const useConfigStore = defineStore('configStore', () => {