second step, something is broken

client/index.js

@@ -1,40 +1,57 @@
-function jeanCloudContactMailerMessage (messageContainer, theme, level, text) {
+class JeanCloudContactFormNotifier {
-    /* This function displays a message on top of the form */
+    constructor (theme, messageContainer) {
-    const messageElement   = document.createElement('p')
+        /* Choose the theme */
-    const messageId = 'contact-mailer-' + theme + '-message-' + level
+        this.theme = theme ? theme : 'light'
-    messageContainer.appendChild(messageElement)
-    messageElement.textContent = text
-    messageElement.classList.add('contact-mailer-message')
-    messageElement.classList.add(messageId)
-    messageElement.id = messageId
-    /*messageElement.title = 'Cliquer pour fermer'
-    messageElement.onclick = () => {
-        messageElement.parentNode.removeChild(messageElement)
-    }*/
 
-    /*add close button to the alert message*/
+        /* Create or get the message container */
-    const closeButtonElement   = document.createElement('span')
+        if (messageContainer) {
-    messageElement.appendChild(closeButtonElement)
+            this.messageContainer = messageContainer
-    closeButtonElement.textContent = "×"
+        } else {
-    closeButtonElement.classList.add('contact-mailer-message-close-button')
+            this.messageContainer = document.createElement('div')
-    closeButtonElement.title = 'Cliquer pour fermer'
+            this.messageContainer.classList.add('contact-mailer-message-container')
-    closeButtonElement.onclick = () => {
+            document.body.appendChild(this.messageContainer)
-        messageElement.parentNode.removeChild(messageElement)
+        }
     }
 
-    /* Jump to message */
+    message(level, text) {
-    const url = location.href;             //Save down the URL without hash.
+        /* This function displays a message */
-    location.href = "#"+messageId;         //Go to the target element.
+        const messageElement = document.createElement('p')
-    history.replaceState(null,null,url);   //Don't like hashes. Changing it back.
+        const messageId = 'contact-mailer-' + this.theme + '-message-' + level
+        this.messageContainer.appendChild(messageElement)
+        messageElement.textContent = text
+        messageElement.classList.add('contact-mailer-message')
+        messageElement.classList.add(messageId)
+        messageElement.id = messageId
 
-    setTimeout(() => {
+        /*add close button to the alert message*/
-        try {
+        const closeButtonElement = document.createElement('span')
-            messageContainer.removeChild(messageElement)
+        messageElement.appendChild(closeButtonElement)
-        } catch (e) {} /* Silently fail if message was already deleted by click */
+        closeButtonElement.textContent = "×"
-    }, 10000)
+        closeButtonElement.classList.add('contact-mailer-message-close-button')
+        closeButtonElement.title = 'Cliquer pour fermer'
+        closeButtonElement.onclick = () => {
+            messageElement.parentNode.removeChild(messageElement)
+        }
+
+        setTimeout(() => {
+            try {
+                messageElement.parentNode.removeChild(messageElement)
+            } catch (e) {} /* Silently fail if message was already deleted by click */
+        }, 10000)
+
+    }
+
+    success (text) {
+        this.message('success', text)
+    }
+
+    error (text) {
+        this.message('error', text)
+    }
 }
 
-function jeanCloudContactFormIntercept (formId, theme) {
+
+function jeanCloudContactFormIntercept (formId, notifier) {
     /*
      * This function intercepts a form submission and send it via XHR.
      * Param formId is the HTML id of the form
@@ -44,10 +61,6 @@ function jeanCloudContactFormIntercept (formId, theme) {
         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.before(messageBox)
 
     /* Intercept the submit event */
     formElem.onsubmit = async (e) => {
@@ -55,7 +68,7 @@ function jeanCloudContactFormIntercept (formId, theme) {
         /* Add loading text */
         const submitButton = formElem.querySelector('[type="submit"]')
         const loadingText = document.createElement('span')
-        loadingText.classList.add(".contact-mailer-sending");
+        loadingText.classList.add("contact-mailer-sending");
         loadingText.textContent = 'Envoi en cours…'
         submitButton.after(loadingText)
         /* XHR */
@@ -67,19 +80,19 @@ function jeanCloudContactFormIntercept (formId, theme) {
         .then(data => {
             loadingText.parentNode.removeChild(loadingText)
             if (data.ok && data.status == 200) {
-                jeanCloudContactMailerMessage (messageBox, theme, 'success', 'Le message a bien été envoyé !')
+                notifier.success('Le message a bien été envoyé !')
                 formElem.reset()
             } else if (!data.ok && data.status == 500) {
-                jeanCloudContactMailerMessage (messageBox, theme, 'error', 'Erreur du service d’envoi. Réessayez plus tard ou contactez https://jean-cloud.net')
+                notifier.error('Erreur du service d’envoi. Réessayez plus tard ou contactez https://jean-cloud.net')
             } else if (!data.ok && data.status == 400) {
-                jeanCloudContactMailerMessage (messageBox, theme, 'error', 'Une erreur est survenue dans la requête que vous avez effectué. Réessayez plus tard ou contactez le webmaster par un autre moyen.')
+                notifier.error('Une erreur est survenue dans la requête que vous avez effectué. Réessayez plus tard ou contactez le webmaster par un autre moyen.')
                 // TODO display server’s error message
             }
         })
 
         .catch((error) => {
             loadingText.parentNode.removeChild(loadingText)
-            jeanCloudContactMailerMessage (messageBox, theme, 'error', 'Impossible d’envoyer le formulaire. Vérifiez votre connexion internet ou réessayez plus tard.')
+            notifier.error('Impossible d’envoyer le formulaire. Vérifiez votre connexion internet ou réessayez plus tard.')
         })
     }
 }

test.html

@@ -27,6 +27,6 @@
     <input type="submit" />
 </form>
 <script src="./client/index.js"></script>
-<script> jeanCloudContactFormIntercept ('contact-mailer-form', 'light') </script>
+<script> jeanCloudContactFormIntercept ('contact-mailer-form', new JeanCloudContactFormNotifier()) </script>
 </body>
 </html>