content/pages/member.html

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

@@ -1,12 +0,0 @@
-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>