less global id in dom

client/index.js

@@ -1,5 +1,4 @@
-function message (level, text) {
-    const messageContainer = document.getElementById('contact-mailer-message')
+function message (messageContainer, level, text) {
     const messageElement   = document.createElement('p')
     messageContainer.appendChild(messageElement)
     messageElement.textContent = text
@@ -15,7 +14,17 @@ function interceptForm (formId) {
      * This function intercepts a form submission and send it via XHR.
      * Param formId is the HTML id of the form
      */
-    const formElem = document.getElementById(formId)
+    const formElem   = document.getElementById(formId)
+    if (!formElem) {
+        console.error('You tried to intercept form id:"' + formId + '" but it was not found.')
+        return
+    }
+    /* Create the message container */
+    const messageBox = document.createElement('div')
+    messageBox.classList.add('contact-mailer-message-container')
+    formElem.parentNode.insertBefore(messageBox, formElem)
+
+    /* Intercept the submit event */
     formElem.onsubmit = async (e) => {
         e.preventDefault()
         fetch(formElem.action, {
@@ -24,14 +33,14 @@ function interceptForm (formId) {
         })
         .then(data => {
             if (!data.ok || data.status == 500) {
-                message('error', 'Erreur du service d’envoi. Réessayez plus tard ou contactez https://jean-cloud.net')
+                message(messageBox, 'error', 'Erreur du service d’envoi. Réessayez plus tard ou contactez https://jean-cloud.net')
             } else if (data.ok || data.status == 200) {
-                message('success', 'Le message a bien été envoyé !')
+                message(messageBox, 'success', 'Le message a bien été envoyé !')
                 formElem.reset()
             }
         })
         .catch((error) => {
-            message('error', 'Impossible d’envoyer le formulaire. Vérifiez votre connexion internet ou réessayez plus tard.')
+            message(messageBox, 'error', 'Impossible d’envoyer le formulaire. Vérifiez votre connexion internet ou réessayez plus tard.')
         })
     }
 }

client/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "jean-cloud-contact-mailer-client",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}