From 645e330515019e023ca32de02db119cf004be788 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Fri, 2 Feb 2024 10:45:21 +0100
Subject: [PATCH] =?UTF-8?q?Corrige=20le=20probl=C3=A8me=20des=20URL=20avec?=
 =?UTF-8?q?=20des=20espaces=20=C3=A0=20l'int=C3=A9rieur=20(#623)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* encode & decode pages url

* add regex to validate url inputs

* validate url fields in a11y statement

* update changelog
---
 CHANGELOG.md                                               | 4 ++++
 .../src/components/audit/AuditGeneralInformationsForm.vue  | 7 ++++---
 confiture-web-app/src/components/ui/DsfrField.vue          | 4 ++++
 confiture-web-app/src/pages/audit/AuditDeclarationPage.vue | 6 +++++-
 confiture-web-app/src/utils.ts                             | 5 ++++-
 5 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5c217a5f..c51137c5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur c
 
 ## 31/01/2024
 
+### Corrections 🐛
+
+- Empêche la création de pages avec des espaces dans l’URL ([#623](https://github.com/DISIC/Ara/pull/623))
+
 ### Autres changements ⚙️
 
 - Corrige l’accessibilité de l’indicateur d’étape terminée sur la synthèse d’un audit ([#630](https://github.com/DISIC/Ara/pull/630))
diff --git a/confiture-web-app/src/components/audit/AuditGeneralInformationsForm.vue b/confiture-web-app/src/components/audit/AuditGeneralInformationsForm.vue
index 85a92165..1326714c 100644
--- a/confiture-web-app/src/components/audit/AuditGeneralInformationsForm.vue
+++ b/confiture-web-app/src/components/audit/AuditGeneralInformationsForm.vue
@@ -7,7 +7,7 @@ import { useNotifications } from "../../composables/useNotifications";
 import { usePreviousRoute } from "../../composables/usePreviousRoute";
 import { useAccountStore } from "../../store/account";
 import { AuditType, CreateAuditRequestData } from "../../types";
-import { formatEmail } from "../../utils";
+import { formatEmail, URL_REGEX } from "../../utils";
 import AuditTypeRadio from "./AuditTypeRadio.vue";
 import BackLink from "../ui/BackLink.vue";
 import DsfrField from "../ui/DsfrField.vue";
@@ -209,8 +209,7 @@ function onSubmit() {
   emit("submit", {
     auditType: auditType.value!,
     procedureName: procedureName.value,
-    // remove leading/trailing whitespaces from urls, the browser validation might accept those our backend won't!
-    pages: pages.value.map((p) => ({ ...p, url: p.url.trim() })),
+    pages: pages.value.map((p) => ({ ...p, url: p.url })),
     auditorName: procedureAuditorName.value,
     auditorEmail: formatEmail(procedureAuditorEmail.value)
   });
@@ -359,6 +358,8 @@ const previousRoute = usePreviousRoute();
         label="URL de la page"
         type="url"
         required
+        :pattern="URL_REGEX"
+        title="https://domaine.fr et sans espaces"
         @change="pagesArePristine = false"
       >
         <template #hint>
diff --git a/confiture-web-app/src/components/ui/DsfrField.vue b/confiture-web-app/src/components/ui/DsfrField.vue
index 531dcebb..755fe0f0 100644
--- a/confiture-web-app/src/components/ui/DsfrField.vue
+++ b/confiture-web-app/src/components/ui/DsfrField.vue
@@ -7,6 +7,8 @@ const props = defineProps<{
   hint?: string;
   type?: "text" | "email" | "url";
   required?: boolean;
+  pattern?: RegExp;
+  title?: string;
   error?: string;
   id: string;
 }>();
@@ -39,6 +41,8 @@ defineExpose({ inputRef });
       :type="type"
       :aria-describedby="isError ? errorId : undefined"
       :required="required"
+      :pattern="pattern ? pattern.toString().slice(1, -1) : undefined"
+      :title="title"
       :value="modelValue"
       @input="
         $emit('update:modelValue', ($event.target as HTMLInputElement).value)
diff --git a/confiture-web-app/src/pages/audit/AuditDeclarationPage.vue b/confiture-web-app/src/pages/audit/AuditDeclarationPage.vue
index c50ac7a4..7043c031 100644
--- a/confiture-web-app/src/pages/audit/AuditDeclarationPage.vue
+++ b/confiture-web-app/src/pages/audit/AuditDeclarationPage.vue
@@ -17,7 +17,7 @@ import {
 } from "../../enums";
 import { useAuditStore } from "../../store";
 import { AuditEnvironment, UpdateAuditRequestData } from "../../types";
-import { formatEmail } from "../../utils";
+import { formatEmail, URL_REGEX } from "../../utils";
 
 const route = useRoute();
 const uniqueId = route.params.uniqueId as string;
@@ -310,6 +310,8 @@ const isDevMode = useDevMode();
         v-model="procedureUrl"
         label="URL de la page d’accueil du site audité"
         type="url"
+        :pattern="URL_REGEX"
+        title="https://domaine.fr et sans espaces"
         required
       >
         <template #hint>
@@ -361,6 +363,8 @@ const isDevMode = useDevMode();
           label="Formulaire de contact en ligne"
           hint="Exemple : contact@ministere.gouv.fr"
           type="url"
+          :pattern="URL_REGEX"
+          title="https://domaine.fr et sans espaces"
           placeholder="https://"
           :error="
             hasNoContactInfo
diff --git a/confiture-web-app/src/utils.ts b/confiture-web-app/src/utils.ts
index 3d27b49c..b2b96d00 100644
--- a/confiture-web-app/src/utils.ts
+++ b/confiture-web-app/src/utils.ts
@@ -183,7 +183,6 @@ export async function captureWithPayloads(
   captureException(error, scope);
 }
 
-// TODO: use everywhere
 export const pluralize = (singular: string, plural: string, count: number) =>
   count === 1 ? singular : plural;
 
@@ -201,6 +200,10 @@ export function formatEmail(s: string): string {
   return s.trim().toLocaleLowerCase();
 }
 
+// https://regexr.com/7fjmt
+export const URL_REGEX =
+  /^(https?:\/\/)((?!-)(?!.*--)[a-zA-Z\-0-9]{1,63}(?<!-)\.)+[a-zA-Z]{2,63}(\/[^\s]*)?$/;
+
 export function isJwtExpired(jwt: string) {
   const payload = jwtDecode<{ exp?: number }>(jwt);