no more timeout

client/index.js

@@ -1,16 +1,27 @@
-function jeanCloudContactMailerMessage (messageContainer, theme, level, text) {
-    /* This function displays a message on top of the form */
+class JeanCloudContactFormNotifier {
+    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
-    messageContainer.appendChild(messageElement)
+        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
-    /*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 {
+        //        messageElement.parentNode.removeChild(messageElement)
+        //    } catch (e) {} /* Silently fail if message was already deleted by click */
+        //}, 10000)
 
-    setTimeout(() => {
-        try {
-            messageContainer.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 */
@@ -63,18 +76,23 @@ function jeanCloudContactFormIntercept (formId, theme) {
             method: formElem.method,
             body: new FormData(formElem)
         })
+
         .then(data => {
             loadingText.parentNode.removeChild(loadingText)
-            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')
-            } else if (data.ok || data.status == 200) {
-                jeanCloudContactMailerMessage (messageBox, theme, 'success', 'Le message a bien été envoyé !')
+            if (data.ok && data.status == 200) {
+                notifier.success('Le message a bien été envoyé !')
                 formElem.reset()
+            } else if (!data.ok && data.status == 500) {
+                notifier.error('Erreur du service d’envoi. Réessayez plus tard ou contactez https://jean-cloud.net')
+            } else if (!data.ok && data.status == 400) {
+                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

@@ -6,7 +6,7 @@
 </head>
 <body>
 <div id="contact-mailer-message"></div>
-<form action="http://localhost:8080/submit" method="POST" id="contact-mailer-form">
+<form action="https://mailer.jean-cloud.net/submit" method="POST" id="contact-mailer-form">
     <input type="hidden" name="token" value="s0y6WANzU1XnYERoJxMwekP9pqilSVLK5Gbf3hmZadHB2rQ4u8" />
     <div>
       <label for="nom">Votre nom&nbsp;:</label>
@@ -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>