start ajax on antibot core plugin

src/common/core/antibot/ui/actions.py

@@ -1 +1,3 @@
 # Spoofing an action file
+def antibot():
+    return {"message": "ok", "data": {"info": "test", "count": 24}}

src/common/core/antibot/ui/template.html

@@ -9,12 +9,9 @@
 
     <div class="mx-1 flex justify-start items-center my-4">
       <p
+        data-info
         class="transition duration-300 ease-in-out mb-0 font-sans text-sm leading-normal dark:text-gray-500 dark:opacity-80"
-      >
-        {{ antibot_info or "Anti-bot technology is designed to detect and
-        mitigate suspicious or malicious bots, preventing them from reaching an
-        organization's websites or IT ecosystem." }}
-      </p>
+      ></p>
     </div>
   </div>
   <!-- end info -->
@@ -29,14 +26,12 @@
       >
         Challenges
       </p>
-      <h5 class="mb-1 font-bold dark:text-white/90">
-        {{ antibot_count or "unknown" }}
-      </h5>
+      <h5 data-count class="mb-1 font-bold dark:text-white/90">"unknown"</h5>
 
       <p class="mb-0 dark:text-white dark:opacity-60">
         <span class="font-bold leading-normal text-sm text-sky-500 mx-0.5"
-          >total number</span
-        >
+          >total number
+        </span>
       </p>
     </div>
     <!-- end text -->
@@ -66,4 +61,136 @@
   </div>
 </div>
 
+<div
+  role="alert"
+  data-fetch
+  class="bg-sky-500 p-4 mb-1 md:mb-3 md:mr-3 z-[1001] flex flex-col fixed bottom-0 right-0 w-full md:w-1/2 max-w-[300px] min-h-20 rounded-lg dark:brightness-110 hover:scale-102 transition shadow-md break-words dark:bg-slate-850 dark:shadow-dark-xl bg-clip-border"
+>
+  <button
+    data-fetch-close
+    role="close alert message"
+    class="absolute right-7 top-1.5"
+  >
+    <svg
+      class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-5 w-5"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 320 512"
+    >
+      <path
+        d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
+      ></path>
+    </svg>
+  </button>
+  <h5 data-fetch-status class="text-lg mb-0 text-white dark:text-gray-300">
+    Fetching
+  </h5>
+  <p data-fetch-msg class="text-white dark:text-gray-300 mb-0 text-sm">
+    Please wait...
+  </p>
+</div>
+
+<script>
+  class Plugin {
+    constructor() {
+      // Alert elements
+      this.alertEl = document.querySelector("[data-fetch]");
+      this.alertCloseEl = document.querySelector("[data-fetch-close]");
+      this.alertStatusEl = document.querySelector("[data-fetch-status]");
+      this.alertMsgEl = document.querySelector("[data-fetch-msg]");
+      // Set data defaults elements and variables
+      this.data = {
+        info: {
+          el: document.querySelector("[data-info]"),
+          value: `"Anti-bot technology is designed to detect and mitigate suspicious or
+            malicious bots, preventing them from reaching an organization's websites
+            or IT ecosystem."`,
+        },
+        count: {
+          el: document.querySelector("[data-count]"),
+          value: "unknown",
+        },
+      };
+
+      this.init();
+    }
+
+    init() {
+      window.addEventListener("DOMContentLoaded", () => {
+        // Set default values and fetch
+        updateDataDOM();
+        this.updateAlert("fetch");
+
+        fetch("/antibot", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-CSRFToken": "{{ csrf_token() }}",
+          },
+        })
+          .then((response) => response.json())
+          .then((res) => {
+            this.getFetchDataByKey(res.data);
+            this.updateDataDOM();
+            this.updateAlert("success");
+          })
+          .catch((error) => {
+            this.updateAlert("error");
+          });
+      });
+
+      this.alertCloseEl.addEventListener("click", () => {
+        this.alertEl.classList.add("hidden");
+      });
+    }
+
+    // Key of fetch data need to match key of this.data
+    getFetchDataByKey(fetchDataObj) {
+      for (const [key, value] of Object.entries(this.data)) {
+        this.data[key]["value"] =
+          fetchDataObj[key] || this.data[key]["value"] || "";
+      }
+    }
+
+    updateDataDOM() {
+      for (const [key, value] of Object.entries(this.data)) {
+        this.data[key]["el"].textContent = this.data[key]["value"] || "";
+      }
+    }
+
+    // type<str> : fetch, success, error
+    updateAlert(type) {
+      if (!type) return;
+
+      if (type == "fetch") {
+        this.alertStatusEl.textContent = "Fetching";
+        this.alertMsgEl.textContent = "Please wait...";
+        this.alertEl.classList.remove("bg-green-500");
+        this.alertEl.classList.remove("bg-red-500");
+        this.alertEl.classList.add("bg-sky-500");
+      }
+      if (type == "success") {
+        this.alertStatusEl.textContent = "Success";
+        this.alertMsgEl.textContent = "Data fetched successfully";
+        this.alertEl.classList.remove("bg-sky-500");
+        this.alertEl.classList.remove("bg-red-500");
+        this.alertEl.classList.add("bg-green-500");
+      }
+      if (type == "error") {
+        this.alertStatusEl.textContent = "Error";
+        this.alertMsgEl.textContent = "Something went wrong";
+        this.alertEl.classList.remove("bg-sky-500");
+        this.alertEl.classList.remove("bg-green-500");
+        this.alertEl.classList.add("bg-red-500");
+      }
+      // Hide alert after an amount of time
+      this.alertEl.classList.remove("hidden");
+      setTimeout(() => {
+        this.alertEl.classList.add("hidden");
+      }, 5000);
+    }
+  }
+
+  new Plugin();
+</script>
+
 {% endblock %}