client/index.js

@@ -1,27 +1,16 @@
-class JeanCloudContactFormNotifier {
+function jeanCloudContactMailerMessage (messageContainer, theme, level, text) {
-    constructor (theme, messageContainer) {
+    /* This function displays a message on top of the form */
-        /* 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-' + this.theme + '-message-' + level
+    const messageId = 'contact-mailer-' + theme + '-message-' + level
-        this.messageContainer.appendChild(messageElement)
+    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')
@@ -33,25 +22,19 @@ class JeanCloudContactFormNotifier {
         messageElement.parentNode.removeChild(messageElement)
     }
 
-        //setTimeout(() => {
+    /* Jump to message */
-        //    try {
+    const url = location.href;             //Save down the URL without hash.
-        //        messageElement.parentNode.removeChild(messageElement)
+    location.href = "#"+messageId;         //Go to the target element.
-        //    } catch (e) {} /* Silently fail if message was already deleted by click */
+    history.replaceState(null,null,url);   //Don't like hashes. Changing it back.
-        //}, 10000)
 
-    }
+    setTimeout(() => {
-
+        try {
-    success (text) {
+            messageContainer.removeChild(messageElement)
-        this.message('success', text)
+        } catch (e) {} /* Silently fail if message was already deleted by click */
-    }
+    }, 10000)
-
-    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
@@ -61,6 +44,10 @@ function jeanCloudContactFormIntercept (formId, notifier) {
         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) => {
@@ -68,7 +55,7 @@ function jeanCloudContactFormIntercept (formId, notifier) {
         /* 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 */
@@ -76,23 +63,18 @@ function jeanCloudContactFormIntercept (formId, notifier) {
             method: formElem.method,
             body: new FormData(formElem)
         })
-
         .then(data => {
             loadingText.parentNode.removeChild(loadingText)
-            if (data.ok && data.status == 200) {
+            if (!data.ok || data.status == 500) {
-                notifier.success('Le message a bien été envoyé !')
+                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é !')
                 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)
-            notifier.error('Impossible d’envoyer le formulaire. Vérifiez votre connexion internet ou réessayez plus tard.')
+            jeanCloudContactMailerMessage (messageBox, theme, '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="https://mailer.jean-cloud.net/submit" method="POST" id="contact-mailer-form">
+<form action="http://localhost:8080/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', new JeanCloudContactFormNotifier()) </script>
+<script> jeanCloudContactFormIntercept ('contact-mailer-form', 'light') </script>
 </body>
 </html>