good improvements, ready for preprod

client/index.js

@@ -1,11 +1,28 @@
+(function () {
+
 function message (messageContainer, level, text) {
+    /* This function displays a message on top of the form */
     const messageElement   = document.createElement('p')
+    const messageId = 'contact-mailer-message-' + level
     messageContainer.appendChild(messageElement)
     messageElement.textContent = text
     messageElement.classList.add('contact-mailer-message')
-    messageElement.classList.add('contact-mailer-message-'+level)
+    messageElement.classList.add(messageId)
+    messageElement.id = messageId
+    messageElement.title = 'Cliquer pour fermer'
+    messageElement.onclick = () => {
+        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(() => {
-        messageContainer.removeChild(messageElement)
+        try {
+            messageContainer.removeChild(messageElement)
+        } catch (e) {} /* Silently fail if message was already deleted by click */
     }, 10000)
 }
 
@@ -22,16 +39,23 @@ function interceptForm (formId) {
     /* Create the message container */
     const messageBox = document.createElement('div')
     messageBox.classList.add('contact-mailer-message-container')
-    formElem.parentNode.insertBefore(messageBox, formElem)
+    formElem.before(messageBox)
 
     /* Intercept the submit event */
     formElem.onsubmit = async (e) => {
         e.preventDefault()
+        /* Add loading text */
+        const submitButton = formElem.querySelector('[type="submit"]')
+        const loadingText = document.createElement('span')
+        loadingText.textContent = 'Envoi en cours…'
+        submitButton.after(loadingText)
+        /* XHR */
         fetch(formElem.action, {
             method: formElem.method,
             body: new FormData(formElem)
         })
         .then(data => {
+            loadingText.parentNode.removeChild(loadingText)
             if (!data.ok || data.status == 500) {
                 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) {
@@ -40,9 +64,24 @@ function interceptForm (formId) {
             }
         })
         .catch((error) => {
+            loadingText.parentNode.removeChild(loadingText)
             message(messageBox, 'error', 'Impossible d’envoyer le formulaire. Vérifiez votre connexion internet ou réessayez plus tard.')
         })
     }
 }
 
+/* Get the current js file location */
+const path = (document.currentScript.src[-1] == '/' ? document.currentScript.src : document.currentScript.src.replace(/\/[^\/]*$/, ''))
+
+/* Adding a css file */
+var link = document.createElement("link");
+link.type      = "text/css";
+link.rel       = "stylesheet";
+link.crossOrigin = 'anonymous';
+link.href      = path + "/style.css";
+link.integrity = 'sha384-ZMVeO+6AH9XFYHVaNjAylDyzMg30SupfmEQ2u2VjPGLF1ZK4ZF6MXle1JGO5vYLv'
+document.head.appendChild(link);
+
 interceptForm ('contact-mailer-form')
+
+})()

client/package.json

@@ -1,11 +1,16 @@
 {
   "name": "jean-cloud-contact-mailer-client",
-  "version": "1.0.0",
+  "version": "1.0.8",
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepublishOnly": "npm-auto-version",
+    "postpublish": "git push origin --tags"
   },
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "npm-auto-version": "^1.0.0"
+  }
 }

client/style.css

@@ -6,6 +6,7 @@
     border: 1px solid;
     padding: 3px;
     border-radius: 2px;
+    cursor:pointer;
 }
 
 .contact-mailer-message-error {