replace subscription form with htmx implementation

content/pages/member.html

@@ -6,46 +6,31 @@ date: 2013-05-01
 category_title: Μέλη
 ---
 
-  <form id="subscriptionemail">
-      <p> Παρακαλούμε συμπληρώστε την παρακάτω φόρμα, για να ενημερωθείτε για τυχόν Ταμειακές Εκκρεμότητες σας, μέσω e-mail :</p>
-  <br>  
-  <label for="email">Πληκτολογίστε το email σας (όπως το είχατε δώσει κατά την εγγραφή σας):  </label><input type="text" name="email" />  <br/>
-  <br>
-  <p>Εισάγετε τα ψηφία της επόμενης Εικόνας Ελέγχου :</p>
-  <p><img id=captchaimage src="" alt="Captcha"></p>
-  <input type="hidden" id=captchahidden name=Id value="">
-  <input name=Solution id=solution></br>
- <br>
-  <input type="submit" value="Υποβολή"/>
-  <div id="response"></div>
-  </form>
-  <script>
-    async function captchaid() {
-        await fetch('/api/captcha/')
-            .then(response => response.text())
-            .then(id => {
-                console.log("id="+id);
-                document.getElementById('captchahidden').value = id.toString();
-                document.getElementById('captchaimage').src = '/api/captcha/'+id.toString()+'/captcha.png'; });
-    };
 
-    captchaid();
-    subscriptionemail.onsubmit = async (e) => {
-      e.preventDefault();
-      var form = document.querySelector("#subscriptionemail");
-        data = {
-          email : form.querySelector('input[name="email"]').value,
-          id : form.querySelector('input[name="Id"]').value,
-          solution : form.querySelector('input[name="Solution"]').value
-        }
-        let response = await fetch('/api/sendSubscriptionEmail', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(data),
-        })
-        let text = await response.text();
-        document.querySelector("#response").innerHTML = text;
-    };
-  </script>
+<!-- htmx -->
+<script src="/static/js/htmx.min.js"></script>
+<script src="/static/js/ext/json-enc.js"></script>
+
+<form id="subscriptionform" hx-post="/api/sendSubscriptionEmail" hx-ext='json-enc'>
+  <p> Παρακαλούμε συμπληρώστε την παρακάτω φόρμα, για να ενημερωθείτε για τυχόν Ταμειακές Εκκρεμότητες σας, μέσω e-mail</p>
+  <div class="col-sm-10">
+    <label class="form-label">Πληκτολογήστε το email σας (όπως το είχατε δώσει κατά την εγγραφή σας)</label>
+    <input type="email" name="email" class="form-control" placeholder="username@hellug.gr">
+  </div>
+
+  <div class="mb-3">
+    <label class="form-label">Εισάγετε τα ψηφία της επόμενης Εικόνας Ελέγχου :
+      <div hx-get="/api/captcha/?htmx=1" hx-trigger="load" hx-swap="innerhtml" hx-target="#captcha">
+        <div id="captcha">
+          <img class="htmx-indicator" src="" alt="Φορτώνει..">
+          <input type="hidden" name=Id value="">
+        </div>
+      </div>
+    </label>
+    <div class="col-sm-3">
+      <input name=Solution id=solution class="form-control" id="exampleFormControlInput1">
+    </div>
+  </div>
+  <button class="btn btn-primary">Υποβολή</button>
+  <div hx-target="#subscriptionform" hx-swap="innerHTML"></div>
+</form>

static/static/js/ext/json-enc.js

@@ -0,0 +1,12 @@
+htmx.defineExtension('json-enc', {
+    onEvent: function (name, evt) {
+        if (name === "htmx:configRequest") {
+            evt.detail.headers['Content-Type'] = "application/json";
+        }
+    },
+    
+    encodeParameters : function(xhr, parameters, elt) {
+        xhr.overrideMimeType('text/json');
+        return (JSON.stringify(parameters));
+    }
+});

themes/hellug-bootstrap/layouts/partials/header.html

@@ -48,4 +48,4 @@
         </div>
     </div><!-- /.navbar-collapse -->
 </nav>
-<header>
+</header>