second step, something is broken

client/index.js

@@ -1,16 +1,27 @@
-function jeanCloudContactMailerMessage (messageContainer, theme, level, text) {
+class JeanCloudContactFormNotifier {
-    /* This function displays a message on top of the form */
+    constructor (theme, messageContainer) {
+        /* Choose the theme */
+        this.theme = theme ? theme : 'light'
+
+        /* Create or get the message container */
+        if (messageContainer) {
+            this.messageContainer = messageContainer
+        } else {
+            this.messageContainer = document.createElement('div')
+            this.messageContainer.classList.add('contact-mailer-message-container')
+            document.body.appendChild(this.messageContainer)
+        }
+    }
+
+    message(level, text) {
+        /* This function displays a message */
         const messageElement = document.createElement('p')
-    const messageId = 'contact-mailer-' + theme + '-message-' + level
+        const messageId = 'contact-mailer-' + this.theme + '-message-' + level
-    messageContainer.appendChild(messageElement)
+        this.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*/
         const closeButtonElement = document.createElement('span')
@@ -22,19 +33,25 @@ function jeanCloudContactMailerMessage (messageContainer, theme, level, text) {
             messageElement.parentNode.removeChild(messageElement)
         }
 
-    /* Jump to message */
-    const url = location.href;             //Save down the URL without hash.
-    location.href = "#"+messageId;         //Go to the target element.
-    history.replaceState(null,null,url);   //Don't like hashes. Changing it back.
-
         setTimeout(() => {
             try {
-            messageContainer.removeChild(messageElement)
+                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>