settings-dns: expand custom servers box if it has custom servers (#3514)

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")
-        .removeClass("box-info")
-        .removeClass("collapsed-box")
-        .addClass("box-danger");
-      $("#forgot-pw-box .box-body").show();
-      $("#forgot-pw-toggle-icon").removeClass("fa-plus").addClass("fa-minus");
+      const forgotPwBox = document.getElementById("forgot-pw-box");
+      forgotPwBox.classList.replace("box-info", "box-danger");
+      utils.toggleBoxCollapse(forgotPwBox, true);
     }
 
     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");
-  $("#forgot-pw-box .box-body").hide();
-  $("#forgot-pw-toggle-icon").removeClass("fa-minus").addClass("fa-plus");
+  const forgotPwBox = document.getElementById("forgot-pw-box");
+  forgotPwBox.classList.replace("box-danger", "box-info");
+  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";
 
@@ -94,6 +94,12 @@ function fillDNSupstreams(value, servers) {
   // Initialize textfield
   updateDNSserversTextfield(value.value, customServers);
 
+  // Expand the box if there are custom servers
+  if (customServers > 0) {
+    const customBox = document.getElementById("custom-servers-box");
+    utils.toggleBoxCollapse(customBox, true);
+  }
+
   // Hide the loading animation
   $("#dns-upstreams-overlay").hide();
 

scripts/js/utils.js

@@ -676,6 +676,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,
@@ -711,5 +735,6 @@ globalThis.utils = (function () {
     loadingOverlay,
     setTimer,
     setInter,
+    toggleBoxCollapse,
   };
 })();

settings-dns.lp

@@ -36,7 +36,7 @@ mg.include('scripts/lua/settings_header.lp','r')
                         <p>ECS (Extended Client Subnet) defines a mechanism for recursive resolvers to send partial client IP address information to authoritative DNS name servers. Content Delivery Networks (CDNs) and latency-sensitive services use this to give geo-located responses when responding to name lookups coming through public DNS resolvers. <em>Note that ECS may result in reduced privacy.</em></p>
                     </div>
                     <div class="col-sm-12">
-                        <div class="box collapsed-box">
+                        <div class="box collapsed-box" id="custom-servers-box">
                             <div class="box-header with-border pointer" data-widget="collapse">
                                 <h3 class="box-title">Custom DNS servers <span id="custom-servers-title"></span></h3>
                                 <div class="box-tools pull-right">