css & js

client/index.js

@@ -0,0 +1,39 @@
+function message (level, text) {
+    const messageContainer = document.getElementById('contact-mailer-message')
+    const messageElement   = document.createElement('p')
+    messageContainer.appendChild(messageElement)
+    messageElement.textContent = text
+    messageElement.classList.add('contact-mailer-message')
+    messageElement.classList.add('contact-mailer-message-'+level)
+    setTimeout(() => {
+        messageContainer.removeChild(messageElement)
+    }, 10000)
+}
+
+function interceptForm (formId) {
+    /*
+     * This function intercepts a form submission and send it via XHR.
+     * Param formId is the HTML id of the form
+     */
+    const formElem = document.getElementById(formId)
+    formElem.onsubmit = async (e) => {
+        e.preventDefault()
+        fetch(formElem.action, {
+            method: formElem.method,
+            body: new FormData(formElem)
+        })
+        .then(data => {
+            if (!data.ok || data.status == 500) {
+                message('error', 'Erreur du service d’envoi. Réessayez plus tard ou contactez https://jean-cloud.net')
+            } else if (data.ok || data.status == 200) {
+                message('success', 'Le message a bien été envoyé !')
+                formElem.reset()
+            }
+        })
+        .catch((error) => {
+            message('error', 'Impossible d’envoyer le formulaire. Vérifiez votre connexion internet ou réessayez plus tard.')
+        })
+    }
+}
+
+interceptForm ('contact-mailer-form')

client/style.css

@@ -0,0 +1,24 @@
+.contact-mailer-form {
+    
+}
+
+.contact-mailer-message {
+    border: 1px solid;
+    padding: 3px;
+    border-radius: 2px;
+}
+
+.contact-mailer-message-error {
+    color: red;
+    border-color: red;
+}
+
+.contact-mailer-message-success {
+    color: green;
+    border-color: green;
+}
+
+.contact-mailer-message-info {
+    color: blue;
+    border-color: blue;
+}