From 4181ff8455f4694e83d991dece59fc1f59cfd7ec Mon Sep 17 00:00:00 2001
From: Adrian Amaglio <adrian@amaglio.fr>
Date: Mon, 24 Aug 2020 21:32:37 +0200
Subject: [PATCH] css & js

---
 client/index.js  | 39 +++++++++++++++++++++++++++++++++++++++
 client/style.css | 24 ++++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 client/index.js
 create mode 100644 client/style.css

diff --git a/client/index.js b/client/index.js
new file mode 100644
index 0000000..3efafe8
--- /dev/null
+++ b/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')
diff --git a/client/style.css b/client/style.css
new file mode 100644
index 0000000..bf4e201
--- /dev/null
+++ b/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;
+}