update

client/index.js

@@ -1,9 +1,7 @@
-(function () {
-
-function message (messageContainer, level, text) {
+function jeanCloudContactMailerMessage (messageContainer, theme, level, text) {
     /* This function displays a message on top of the form */
     const messageElement   = document.createElement('p')
-    const messageId = 'contact-mailer-message-' + level
+    const messageId = 'contact-mailer-' + theme + '-message-' + level
     messageContainer.appendChild(messageElement)
     messageElement.textContent = text
     messageElement.classList.add('contact-mailer-message')
@@ -26,12 +24,12 @@ function message (messageContainer, level, text) {
     }, 10000)
 }
 
-function interceptForm (formId) {
+function jeanCloudContactFormIntercept (formId, theme) {
     /*
      * 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)
+    const formElem = document.getElementById(formId)
     if (!formElem) {
         console.error('You tried to intercept form id:"' + formId + '" but it was not found.')
         return
@@ -58,31 +56,30 @@ function interceptForm (formId) {
         .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')
+                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) {
-                message(messageBox, 'success', 'Le message a bien été envoyé !')
+                jeanCloudContactMailerMessage (messageBox, theme, 'success', 'Le message a bien été envoyé !')
                 formElem.reset()
             }
         })
         .catch((error) => {
             loadingText.parentNode.removeChild(loadingText)
-            message(messageBox, '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.')
         })
     }
 }
 
-/* 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-9kSXtY4xhTP1f97JTT2J8tEHj1thIUfd9Ub7yOFsGLBQ/impvue07/UN1MhyCcyP'
-document.head.appendChild(link);
-
-interceptForm ('contact-mailer-form')
+(function () {
+    /* 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-8PWvFCRowSxssUyiGirvpq/Nh6TTzYrsbAmpC0cw/OUKkZibNdI5L1gFiHxfrTZT'
+    // cat style.css | openssl dgst -sha384 -binary | openssl base64 -A
+    document.head.appendChild(link);
 })()

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jean-cloud-contact-mailer-client",
-  "version": "1.0.8",
+  "version": "1.0.15",
   "description": "",
   "main": "index.js",
   "scripts": {

client/style.css

@@ -9,13 +9,13 @@
     cursor:pointer;
 }
 
-.contact-mailer-message-error {
+.contact-mailer-plain-message-error {
     color: white;
     background-color: #ef4757;
     border-color: #ef4757;
 }
 
-.contact-mailer-message-success {
+.contact-mailer-plain-message-success {
     color: white;
     background-color: #00B06A;
     border-color: #00B06A;

readme.md

@@ -75,6 +75,10 @@ You can store them in a `.env` file. The python app will read it or you can pass
 - `ADMIN_PASSWORD` password used to manage users
 - `UID` used to set the uwsg socket ownership in production
 
+## Client
+
+plain or light theme.
+
 ## Roadmap
 ### Near future
 - go on docker hub

test.html

@@ -27,5 +27,6 @@
     <input type="submit" />
 </form>
 <script src="./client/index.js"></script>
+<script> jeanCloudContactFormIntercept ('contact-mailer-form', 'light') </script>
 </body>
 </html>