From b67e246ea9e1a51d685067778f22ee63b12edfcb Mon Sep 17 00:00:00 2001
From: Evgenii Alekseev <i@arcanis.me>
Date: Tue, 3 Sep 2024 18:30:56 +0300
Subject: [PATCH] get rid of the jquery

---
 .../templates/build-status/alerts.jinja2      |  8 ++---
 .../build-status/key-import-modal.jinja2      | 34 +++++++++----------
 .../templates/build-status/login-modal.jinja2 | 34 +++++++++----------
 .../build-status/package-rebuild-modal.jinja2 | 21 +++++++-----
 .../templates/utils/bootstrap-scripts.jinja2  |  4 +--
 5 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/package/share/ahriman/templates/build-status/alerts.jinja2 b/package/share/ahriman/templates/build-status/alerts.jinja2
index 6e375ccb..6916a9e0 100644
--- a/package/share/ahriman/templates/build-status/alerts.jinja2
+++ b/package/share/ahriman/templates/build-status/alerts.jinja2
@@ -1,12 +1,12 @@
 <script>
-    const alertPlaceholder = $("#alert-placeholder");
+    const alertPlaceholder = document.getElementById("alert-placeholder");
 
     function createAlert(title, message, clz, action, id) {
         if (!id) id = $.md5(title + message); // MD5 id from the content
-        if (alertPlaceholder.find(`#${id}`).length > 0) return; // check if there are duplicates
+        if (alertPlaceholder.querySelector(`#alert-${id}`)) return; // check if there are duplicates
 
         const wrapper = document.createElement("div");
-        wrapper.id = id;
+        wrapper.id = `alert-${id}`;
         wrapper.classList.add("toast", clz);
         wrapper.role = "alert";
         wrapper.ariaLive = "assertive";
@@ -23,7 +23,7 @@
         body.innerText = message;
         wrapper.appendChild(body);
 
-        alertPlaceholder.append(wrapper);
+        alertPlaceholder.appendChild(wrapper);
         const toast = new bootstrap.Toast(wrapper);
         wrapper.addEventListener("hidden.bs.toast", _ => {
             wrapper.remove();  // bootstrap doesn't remove elements
diff --git a/package/share/ahriman/templates/build-status/key-import-modal.jinja2 b/package/share/ahriman/templates/build-status/key-import-modal.jinja2
index 80a6efbc..3a05d36b 100644
--- a/package/share/ahriman/templates/build-status/key-import-modal.jinja2
+++ b/package/share/ahriman/templates/build-status/key-import-modal.jinja2
@@ -36,23 +36,23 @@
 </div>
 
 <script>
-    const keyImportModal = $("#key-import-modal");
-    const keyImportForm = $("#key-import-form");
+    const keyImportModal = document.getElementById("key-import-modal");
+    const keyImportForm = document.getElementById("key-import-form");
 
-    const keyImportBodyInput = $("#key-import-body-input");
-    const keyImportCopyButton = $("#key-import-copy-button");
+    const keyImportBodyInput = document.getElementById("key-import-body-input");
+    const keyImportCopyButton = document.getElementById("key-import-copy-button");
 
-    const keyImportFingerprintInput = $("#key-import-fingerprint-input");
-    const keyImportServerInput = $("#key-import-server-input");
+    const keyImportFingerprintInput = document.getElementById("key-import-fingerprint-input");
+    const keyImportServerInput = document.getElementById("key-import-server-input");
 
     async function copyPgpKey() {
-        const logs = keyImportBodyInput.text();
-        await copyToClipboard(logs, keyImportCopyButton);
+        const key = keyImportBodyInput.textContent;
+        await copyToClipboard(key, keyImportCopyButton);
     }
 
     function fetchPgpKey() {
-        const key = keyImportFingerprintInput.val();
-        const server = keyImportServerInput.val();
+        const key = keyImportFingerprintInput.value;
+        const server = keyImportServerInput.value;
 
         if (key && server) {
             $.ajax({
@@ -60,14 +60,14 @@
                 data: {"key": key, "server": server},
                 type: "GET",
                 dataType: "json",
-                success: response => { keyImportBodyInput.text(response.key); },
+                success: response => { keyImportBodyInput.textContent = response.key; },
             });
         }
     }
 
     function importPgpKey() {
-        const key = keyImportFingerprintInput.val();
-        const server = keyImportServerInput.val();
+        const key = keyImportFingerprintInput.value;
+        const server = keyImportServerInput.value;
 
         if (key && server) {
             $.ajax({
@@ -76,7 +76,7 @@
                 type: "POST",
                 contentType: "application/json",
                 success: _ => {
-                    keyImportModal.modal("hide");
+                    bootstrap.Modal.getInstance(keyImportModal).hide();
                     showSuccess("Success", `Key ${key} has been imported`);
                 },
                 error: (jqXHR, _, errorThrown) => {
@@ -88,9 +88,9 @@
     }
 
     $(_ => {
-        keyImportModal.on("hidden.bs.modal", _ => {
-            keyImportBodyInput.text("");
-            keyImportForm.trigger("reset");
+        keyImportModal.addEventListener("hidden.bs.modal", _ => {
+            keyImportBodyInput.textContent = "";
+            keyImportForm.reset();
         });
     });
 </script>
diff --git a/package/share/ahriman/templates/build-status/login-modal.jinja2 b/package/share/ahriman/templates/build-status/login-modal.jinja2
index baf4daa3..5292d4dc 100644
--- a/package/share/ahriman/templates/build-status/login-modal.jinja2
+++ b/package/share/ahriman/templates/build-status/login-modal.jinja2
@@ -34,16 +34,16 @@
 </div>
 
 <script>
-    const loginModal = $("#login-modal");
-    const loginForm = $("#login-form");
+    const loginModal = document.getElementById("login-modal");
+    const loginForm = document.getElementById("login-form");
 
-    const loginPasswordInput = $("#login-password");
-    const loginUsernameInput = $("#login-username");
-    const showHidePasswordButton = $("#login-show-hide-password-button");
+    const loginPasswordInput = document.getElementById("login-password");
+    const loginUsernameInput = document.getElementById("login-username");
+    const showHidePasswordButton = document.getElementById("login-show-hide-password-button");
 
     function login() {
-        const password = loginPasswordInput.val();
-        const username = loginUsernameInput.val();
+        const password = loginPasswordInput.value;
+        const username = loginUsernameInput.value;
 
         if (username && password) {
             $.ajax({
@@ -52,7 +52,7 @@
                 type: "POST",
                 contentType: "application/json",
                 success: _ => {
-                    loginModal.modal("hide");
+                    bootstrap.Modal.getInstance(loginModal).hide();
                     showSuccess("Logged in", `Successfully logged in as ${username}`, _ => location.href = "/");
                 },
                 error: (jqXHR, _, errorThrown) => {
@@ -67,20 +67,20 @@
     }
 
     function showPassword() {
-        if (loginPasswordInput.attr("type") === "password") {
-            loginPasswordInput.attr("type", "text");
-            showHidePasswordButton.removeClass("bi-eye");
-            showHidePasswordButton.addClass("bi-eye-slash");
+        if (loginPasswordInput.getAttribute("type") === "password") {
+            loginPasswordInput.setAttribute("type", "text");
+            showHidePasswordButton.classList.remove("bi-eye");
+            showHidePasswordButton.classList.add("bi-eye-slash");
         } else {
-            loginPasswordInput.attr("type", "password");
-            showHidePasswordButton.removeClass("bi-eye-slash");
-            showHidePasswordButton.addClass("bi-eye");
+            loginPasswordInput.setAttribute("type", "password");
+            showHidePasswordButton.classList.remove("bi-eye-slash");
+            showHidePasswordButton.classList.add("bi-eye");
         }
     }
 
     $(_ => {
-        loginModal.on("hidden.bs.modal", _ => {
-            loginForm.trigger("reset");
+        loginModal.addEventListener("hidden.bs.modal", _ => {
+            loginForm.reset();
         });
     });
 </script>
diff --git a/package/share/ahriman/templates/build-status/package-rebuild-modal.jinja2 b/package/share/ahriman/templates/build-status/package-rebuild-modal.jinja2
index ba53a62d..07a96c70 100644
--- a/package/share/ahriman/templates/build-status/package-rebuild-modal.jinja2
+++ b/package/share/ahriman/templates/build-status/package-rebuild-modal.jinja2
@@ -33,17 +33,17 @@
 </div>
 
 <script>
-    const packageRebuildModal = $("#package-rebuild-modal");
-    const packageRebuildForm = $("#package-rebuild-form");
+    const packageRebuildModal = document.getElementById("package-rebuild-modal");
+    const packageRebuildForm = document.getElementById("package-rebuild-form");
 
-    const packageRebuildDependencyInput = $("#package-rebuild-dependency-input");
-    const packageRebuildRepositoryInput = $("#package-rebuild-repository-input");
+    const packageRebuildDependencyInput = document.getElementById("package-rebuild-dependency-input");
+    const packageRebuildRepositoryInput = document.getElementById("package-rebuild-repository-input");
 
     function packagesRebuild() {
-        const packages = packageRebuildDependencyInput.val();
+        const packages = packageRebuildDependencyInput.value;
         const repository = getRepositorySelector(packageRebuildRepositoryInput);
         if (packages) {
-            packageRebuildModal.modal("hide");
+            bootstrap.Modal.getInstance(packageRebuildModal).hide();
             const onSuccess = update => `Repository rebuild has been run for packages which depend on ${update}`;
             const onFailure = error => `Repository rebuild failed: ${error}`;
             doPackageAction("/api/v1/service/rebuild", [packages], repository, onSuccess, onFailure);
@@ -51,10 +51,13 @@
     }
 
     $(_ => {
-        packageRebuildModal.on("shown.bs.modal", _ => {
-            $(`#package-rebuild-repository-input option[value="${repository.architecture}-${repository.repository}"]`).prop("selected", true);
+        packageRebuildModal.addEventListener("shown.bs.modal", _ => {
+            const option = packageRebuildRepositoryInput.querySelector(`option[value="${repository.architecture}-${repository.repository}"]`);
+            if (option) option.selected = "selected";
 
         });
-        packageRebuildModal.on("hidden.bs.modal", _ => { packageRebuildForm.trigger("reset"); });
+        packageRebuildModal.addEventListener("hidden.bs.modal", _ => {
+            packageRebuildForm.reset();
+        });
     });
 </script>
diff --git a/package/share/ahriman/templates/utils/bootstrap-scripts.jinja2 b/package/share/ahriman/templates/utils/bootstrap-scripts.jinja2
index 71fb0021..8e0d2202 100644
--- a/package/share/ahriman/templates/utils/bootstrap-scripts.jinja2
+++ b/package/share/ahriman/templates/utils/bootstrap-scripts.jinja2
@@ -33,9 +33,9 @@
             await navigator.clipboard.writeText(text);
         }
 
-        button.html("<i class=\"bi bi-clipboard-check\"></i> copied");
+        button.innerHTML = "<i class=\"bi bi-clipboard-check\"></i> copied";
         setTimeout(()=> {
-            button.html("<i class=\"bi bi-clipboard\"></i> copy");
+            button.innerHTML = "<i class=\"bi bi-clipboard\"></i> copy";
         }, 2000);
     }