Merge pull request #1521 from betagouv/1504-error-message

Changement du message d'erreur en cas de token CSRF pas à jour
betagouv · Jan 23, 2025 · e710bc7 · e710bc7
2 parents 41f4d10 + 935ac7c
commit e710bc7
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 11 deletions.
diff --git a/frontend/src/utils/error-handling.js b/frontend/src/utils/error-handling.js
@@ -26,10 +26,11 @@ export const handleError = async (response) => {
   // Handle display of the errors (directly on the form or in a toast)
   // https://vuelidate-next.netlify.app/advanced_usage.html#config-with-composition-api
   const backErrorData = await response.value.json()
-  if (backErrorData.globalError) {
-    // show an error toast
-    addErrorMessage(backErrorData.globalError)
-  }
+  const isCsrfError = backErrorData.globalError?.indexOf?.("CSRF Failed") > -1
+
+  if (isCsrfError) addErrorMessage("Veuillez rafraîchir la page pour mettre à jour votre session.")
+  else if (backErrorData.globalError) addErrorMessage(backErrorData.globalError)
+
   // Return other errors to be handled by Vuelidate directly (and "extra" parameters to get additional data)
   // If you don't have a form and expect global errors only, just ignore the result of this function when called.
   return {

diff --git a/frontend/src/views/DeclaredElementPage/ElementSynonyms.vue b/frontend/src/views/DeclaredElementPage/ElementSynonyms.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue"
+import { computed } from "vue"
 import { getElementName } from "@/utils/elements"
 
 const props = defineProps({ initialSynonyms: Array, requestElement: Object })

diff --git a/frontend/src/views/NewElementsPage/ElementLink.vue b/frontend/src/views/NewElementsPage/ElementLink.vue
@@ -12,5 +12,5 @@
 </template>
 
 <script setup>
-const props = defineProps({ element: Object })
+defineProps({ element: Object })
 </script>
diff --git a/frontend/src/views/ProducerFormPage/index.vue b/frontend/src/views/ProducerFormPage/index.vue
@@ -235,11 +235,15 @@ const savePayload = async (successMessage = "Votre démarche a été sauvegardé
   const { response, data } = await useFetch(url, { headers: headers() })[httpMethod](payload).json()
   requestInProgress.value = false
   $externalResults.value = await handleError(response)
-  if ($externalResults.value) {
-    useToaster().addErrorMessage(
-      "Merci de vérifier que les champs obligatoires, signalés par une astérix *, ont bien été remplis pour pouvoir changer d'onglet"
-    )
-    window.scrollTo(0, 0)
+  const hasError = !!$externalResults.value
+  if (hasError) {
+    const fieldErrors = $externalResults.value.fieldErrors
+    if (fieldErrors && Object.keys(fieldErrors).length > 0) {
+      useToaster().addErrorMessage(
+        "Merci de vérifier que les champs obligatoires, signalés par une astérix *, ont bien été remplis pour pouvoir changer d'onglet"
+      )
+      window.scrollTo(0, 0)
+    }
     return false
   } else {
     payload.value = data.value