Corrige le problème des URL avec des espaces à l'intérieur (#623)

* encode & decode pages url

* add regex to validate url inputs

* validate url fields in a11y statement

* update changelog

Author: bellangerq

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))

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>

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)

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

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);