Abstract collapsing box to a new util

Signed-off-by: XhmikosR <xhmikosr@gmail.com>

scripts/js/login.js

@@ -64,12 +64,9 @@ function wrongPassword(isError = false, isSuccess = false, data = null) {
     // Only show the forgot password box if the error is NOT caused by an
     // invalid TOTP token and this is no error response (= password is wrong)
     if (!isErrorResponse && !isInvalidTOTP) {
-      $("#forgot-pw-box")
+      const forgotPwBox = document.getElementById("forgot-pw-box");
-        .removeClass("box-info")
+      forgotPwBox.classList.replace("box-info", "box-danger");
-        .removeClass("collapsed-box")
+      utils.toggleBoxCollapse(forgotPwBox, true);
-        .addClass("box-danger");
-      $("#forgot-pw-box .box-body").show();
-      $("#forgot-pw-toggle-icon").removeClass("fa-plus").addClass("fa-minus");
     }
 
     return;
@@ -85,9 +82,9 @@ function wrongPassword(isError = false, isSuccess = false, data = null) {
   }
 
   $("#invalid2fa-box").addClass("hidden");
-  $("#forgot-pw-box").addClass("box-info").addClass("collapsed-box").removeClass("box-danger");
+  const forgotPwBox = document.getElementById("forgot-pw-box");
-  $("#forgot-pw-box .box-body").hide();
+  forgotPwBox.classList.replace("box-danger", "box-info");
-  $("#forgot-pw-toggle-icon").removeClass("fa-minus").addClass("fa-plus");
+  utils.toggleBoxCollapse(forgotPwBox, false);
 }
 
 function doLogin(password) {

scripts/js/settings-dns.js

@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global applyCheckboxRadioStyle:false, setConfigValues: false, apiFailure: false */
+/* global utils:false, applyCheckboxRadioStyle:false, setConfigValues: false, apiFailure: false */
 
 "use strict";
 
@@ -95,13 +95,9 @@ function fillDNSupstreams(value, servers) {
   updateDNSserversTextfield(value.value, customServers);
 
   // Expand the box if there are custom servers
-  // Not using the AdminLTE API so that the expansion is not animated
-  // Otherwise, we could use `$(customBox).boxWidget("expand")`
   if (customServers > 0) {
     const customBox = document.getElementById("custom-servers-box");
-    customBox.classList.remove("collapsed-box");
+    utils.toggleBoxCollapse(customBox, true);
-    customBox.querySelector(".btn-box-tool > i").classList.replace("fa-plus", "fa-minus");
-    customBox.querySelector(".box-body").style = "";
   }
 
   // Hide the loading animation

scripts/js/utils.js

@@ -680,6 +680,30 @@ function setInter(func, interval) {
   globalThis.setTimeout(setInter, interval, func, interval);
 }
 
+/**
+ * Toggle or set the collapse state of a box element
+ * @param {HTMLElement} box - The box element
+ * @param {boolean} [expand=true] - Whether to expand (true) or collapse (false) the box
+ */
+// Not using the AdminLTE API so that the expansion is not animated
+// Otherwise, we could use `$(customBox).boxWidget("expand")`
+function toggleBoxCollapse(box, expand = true) {
+  if (!box) return;
+
+  const icon = box.querySelector(".btn-box-tool > i");
+  const body = box.querySelector(".box-body");
+
+  if (expand) {
+    box.classList.remove("collapsed-box");
+    if (icon) icon.classList.replace("fa-plus", "fa-minus");
+    if (body) body.style = "";
+  } else {
+    box.classList.add("collapsed-box");
+    if (icon) icon.classList.replace("fa-minus", "fa-plus");
+    if (body) body.style.display = "none";
+  }
+}
+
 globalThis.utils = (function () {
   return {
     escapeHtml,
@@ -716,5 +740,6 @@ globalThis.utils = (function () {
     loadingOverlay,
     setTimer,
     setInter,
+    toggleBoxCollapse,
   };
 })();