Generalized persistence of forms in separate js file.

Some minor improvements to the usage instructions.

pkg/server/templates/basepage.templ

@@ -24,7 +24,9 @@ templ BasePage(tab int) {
 
         <script src="../static/js/htmx.1.9.12.js"></script>
         <script src="../static/js/htmx.ws.1.9.12.js"></script>
-        <script type="module" src="../static/js/custom.js"></script>
+        <script type="module" src="../static/js/modules.js"></script>
+        <script src="../static/js/persistentforms.js"></script>
+
 
         <title>Converge</title>
     </head>

pkg/server/templates/usage.templ

@@ -148,6 +148,14 @@ templ Usage(access models.ConvergeAccess) {
   <div>
       <h1>usage</h1>
 
+      <p>
+      <ol>
+      <li>Configure agent settings below</li>
+      <li>Copy paste the required commands for your agent</li>
+      <li>Copy paste the required commands for connecting to the remote shell on the agent through
+         Converge. </li>
+      </ol>
+      </p>
       <!-- TODO Investigate how to do this properly with bootstrap -->
       <style>
       .minimal-width {
@@ -157,11 +165,12 @@ templ Usage(access models.ConvergeAccess) {
       </style>
 
       <form id="inputs" novalidate
+            class="persistent-form"
             hx-post="../usage"
             method="post"
             hx-trigger="load,input delay:500ms,change,formdataloaded"
             hx-target="#example-cli"
-            hx-on::after-request="saveFormToCookie()">
+            hx-on::after-request="saveFormToCookieEvent(event)">
           <table class="table table-responsive">
                <tr>
                  <td class="minimal-width"><label for="rendez-vous-id">rendez-vous id</label></td>
@@ -209,108 +218,6 @@ templ Usage(access models.ConvergeAccess) {
 
       <div id="example-cli">
       </div>
-    <script>
-    function setCookie(name, value, days) {
-        let expires = "";
-        if (days) {
-            const date = new Date();
-            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-            expires = "; expires=" + date.toUTCString();
-        }
-        document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
-    }
-
-    function getCookie(name) {
-        const nameEQ = name + "=";
-        const ca = document.cookie.split(';');
-        for(let i=0; i < ca.length; i++) {
-            let c = ca[i];
-            while (c.charAt(0)==' ') c = c.substring(1,c.length);
-            if (c.indexOf(nameEQ) == 0) return decodeURIComponent(c.substring(nameEQ.length,c.length));
-        }
-        return null;
-    }
-
-    function saveFormToCookie() {
-        const form = document.getElementById('inputs');
-        const formData = new FormData(form);
-        for (let element of form.elements) {
-            if (element.id) {
-                //console.log("Saving " + element.id)
-                if (element.type === 'checkbox') {
-                    //console.log("Checkbox " + element.checked)
-                    setCookie(element.id, element.checked ? 'true' : 'false', 7);
-                } else if (element.type === 'radio') {
-                    if (element.checked) {
-                        //console.log("Set cookie " + element.id + " " + element.value)
-                        setCookie(element.id, element.value, 7);
-                    } else {
-                        //console.log("Set cookie " + element.id + " EMPTY")
-                        setCookie(element.id, "", 7)
-                    }
-                } else {
-                    setCookie(element.id, element.value, 7);
-                }
-            }
-        }
-    }
-
-    function loadFormFromCookie() {
-        //console.log("Load form from cookie")
-        const form = document.getElementById('inputs');
-        if (!form) {
-            return
-        }
-        updated = false
-        for (let element of form.elements) {
-            if (element.id) {
-                const value = getCookie(element.id);
-                //console.log("Loading " + element.id + " value: " + value)
-                if (value !== null) {
-                    if (element.type === 'checkbox') {
-                        newvalue = value === "true"
-                        if (element.checked != newvalue) {
-                            element.checked = newvalue
-                            updated = true
-                        }
-                    } else if (element.type === 'radio') {
-                        newvalue = element.value === value
-                        if (element.checked != newvalue) {
-                            element.checked = newvalue;
-                            updated = true
-                        }
-                    } else {
-                        if (element.value != value) {
-                            element.value = value;
-                            updated = true
-                        }
-                    }
-                }
-            }
-        }
-        if (updated) {
-            htmx.trigger(form, 'formdataloaded')
-        }
-    }
-
-    // Save form data to cookie on change
-    document.getElementById('inputs').addEventListener('change', saveFormToCookie);
-
-    document.body.addEventListener('htmx:load', function(event) {
-      //console.log("htmx:load")
-      loadFormFromCookie();
-    });
-
-    document.body.addEventListener('htmx:afterSettle', function(event) {
-      //console.log("htmx:afterSettle")
-      loadFormFromCookie();
-    });
-
-    // when hx-boost=false
-    // Load form data from cookie on page load
-    //document.addEventListener('DOMContentLoaded', loadFormFromCookie);
-    </script>
-
   </div>
 }
 

static/js/custom.js

@@ -1,2 +1,4 @@
 
-import './copy-to-clipboard.js';
+import './persistentforms.js';
+
+

static/js/modules.js

@@ -0,0 +1,4 @@
+
+import './copy-to-clipboard.js';
+
+

static/js/persistentforms.js

@@ -0,0 +1,123 @@
+function setCookie(name, value, days) {
+    let expires = "";
+    if (days) {
+        const date = new Date();
+        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+        expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
+}
+
+function getCookie(name) {
+    const nameEQ = name + "=";
+    const ca = document.cookie.split(';');
+    for(let i=0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0)==' ') c = c.substring(1,c.length);
+        if (c.indexOf(nameEQ) == 0) return decodeURIComponent(c.substring(nameEQ.length,c.length));
+    }
+    return null;
+}
+
+function saveFormToCookie(form) {
+    const formData = new FormData(form);
+    for (let element of form.elements) {
+        if (element.id) {
+            //console.log("Saving " + element.id)
+            if (element.type === 'checkbox') {
+                //console.log("Checkbox " + element.checked)
+                setCookie(element.id, element.checked ? 'true' : 'false', 7);
+            } else if (element.type === 'radio') {
+                if (element.checked) {
+                    //console.log("Set cookie " + element.id + " " + element.value)
+                    setCookie(element.id, element.value, 7);
+                } else {
+                    //console.log("Set cookie " + element.id + " EMPTY")
+                    setCookie(element.id, "", 7)
+                }
+            } else {
+                setCookie(element.id, element.value, 7);
+            }
+        }
+    }
+}
+
+function saveFormToCookieEvent(evt) {
+    //console.log("save form to cookie: " + evt.target)
+    form = evt.target
+    saveFormToCookie(form)
+}
+
+function loadFormFromCookie(form) {
+    //console.log("Load form from cookie")
+    if (!form) {
+        return
+    }
+    let updated = false
+    for (let element of form.elements) {
+        if (element.id) {
+            const value = getCookie(element.id);
+            //console.log("Loading " + element.id + " value: " + value)
+            if (value !== null) {
+                if (element.type === 'checkbox') {
+                    let newvalue = value === "true"
+                    if (element.checked != newvalue) {
+                        element.checked = newvalue
+                        updated = true
+                    }
+                } else if (element.type === 'radio') {
+                    let newvalue = element.value === value
+                    if (element.checked != newvalue) {
+                        element.checked = newvalue;
+                        updated = true
+                    }
+                } else {
+                    if (element.value != value) {
+                        element.value = value;
+                        updated = true
+                    }
+                }
+            }
+        }
+    }
+    if (updated) {
+        htmx.trigger(form, 'formdataloaded')
+    }
+}
+
+function getPersistentForms() {
+    return document.getElementsByClassName("persistent-form");
+}
+
+function loadFormsFromCookie() {
+    let forms = getPersistentForms();
+    for (let i = 0; i < forms.length; i++) {
+        loadFormFromCookie(forms[i])
+    }
+}
+
+// Most likely not needed.
+/*
+( () => {
+      let forms = getPersistentForms()
+      for (let i = 0; i < forms.length; i++) {
+          forms[i].addEventListener('change', function() {
+              saveFormToCookie(form)
+          })
+      }
+  })()
+*/
+
+htmx.on('htmx:load', function(event) {
+    //console.log("htmx:load")
+    loadFormsFromCookie();
+});
+
+htmx.on('htmx:afterSettle', function(event) {
+    //console.log("htmx:afterSettle")
+    loadFormsFromCookie();
+});
+
+// when hx-boost=false
+// Load form data from cookie on page load
+//document.addEventListener('DOMContentLoaded', loadFormFromCookie);