Merge branch 'dev' of github.com:bunkerity/bunkerweb into dev

src/ui/static/js/plugins.js

@@ -372,7 +372,9 @@ class Upload {
       <svg class="fill-sky-500 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM385 215c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-71-71V392c0 13.3-10.7 24-24 24s-24-10.7-24-24V177.9l-71 71c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 103c9.4-9.4 24.6-9.4 33.9 0L385 215z"/></svg>  
       <span class="text-sm text-slate-700 dark:text-gray-300 mr-4">${name} </span>
         <span class="text-sm text-slate-700 dark:text-gray-300">${fileSize}</span>
-        <svg  class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-3 w-3 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"/></svg>
+        <svg class=" fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-3 w-3 "  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+        </svg>
       </div>
     </div>
     </div>`;

src/ui/static/js/services.js

@@ -76,7 +76,9 @@ class ServiceModal {
           this.setSettingsDefault();
           //server name is unset
           const inpServName = document.querySelector("input#SERVER_NAME");
+          inpServName.getAttribute("value", "");
           inpServName.value = "";
+
           //show modal
           this.openModal();
         }
@@ -104,7 +106,6 @@ class ServiceModal {
       const inpName = inp.getAttribute("name");
       if (
         inpName === "csrf_token" ||
-        inpName === "SERVER_NAME" ||
         inpName === "OLD_SERVER_NAME" ||
         inpName === "operation"
       )
@@ -169,20 +170,19 @@ class ServiceModal {
 
     if (action === "edit" || action === "new") {
       this.showNewEditForm();
-      formEl
-        .querySelector(`input[name="OLD_SERVER_NAME"]`)
-        .setAttribute("value", serviceName);
+      const oldNameInp = formEl.querySelector(`input[name="OLD_SERVER_NAME"]`);
+      oldNameInp.setAttribute("value", serviceName);
+      oldNameInp.value = serviceName;
     }
 
     if (action === "delete") {
       this.showDeleteForm();
-      formEl.setAttribute("id", `form-${action}-${serviceName}`);
-      formEl
-        .querySelector(`input[name="SERVER_NAME"]`)
-        .setAttribute("value", serviceName);
       formEl.querySelector(
         `[services-modal-text]`
       ).textContent = `Are you sure you want to delete ${serviceName} ?`;
+      const nameInp = formEl.querySelector(`input[name="SERVER_NAME"]`);
+      nameInp.setAttribute("value", serviceName);
+      nameInp.value = serviceName;
     }
   }
 
@@ -245,7 +245,6 @@ class ServiceModal {
           const inpName = inp.getAttribute("name");
           if (
             inpName === "csrf_token" ||
-            inpName === "SERVER_NAME" ||
             inpName === "OLD_SERVER_NAME" ||
             inpName === "operation"
           )
@@ -627,7 +626,6 @@ class Multiple {
         const inpName = inp.getAttribute("name");
         if (
           inpName === "csrf_token" ||
-          inpName === "SERVER_NAME" ||
           inpName === "OLD_SERVER_NAME" ||
           inpName === "operation"
         )

src/ui/static/js/utils/file.manager.js

@@ -181,6 +181,14 @@ class FolderDropdown {
   init() {
     let prevActionBtn = ""; //compare with curr to hide or not prev
     this.container.addEventListener("click", (e) => {
+      //remove when none click
+      try {
+        if (
+          !e.target.closest("div").hasAttribute(`${this.prefix}-action-button`)
+        ) {
+          this.hideDropEls();
+        }
+      } catch (err) {}
       //show dropdown actions for folders
       try {
         if (

src/ui/static/js/utils/form.js

@@ -37,6 +37,23 @@ class Select {
 
   init() {
     window.addEventListener("click", (e) => {
+      //CASE NO BTN SELECT CLICKED
+      try {
+        if (!e.target.closest("button")) {
+          const selectEls = document.querySelectorAll(
+            "div[setting-select-dropdown]"
+          );
+          selectEls.forEach((select) => {
+            select.classList.add("hidden");
+            select.classList.remove("flex");
+          });
+          const btnEls = document.querySelectorAll("button[setting-select]");
+          btnEls.forEach((btn) => {
+            const dropdownChevron = btn.querySelector(`svg[setting-select]`);
+            dropdownChevron.classList.remove("rotate-180");
+          });
+        }
+      } catch (err) {}
       //SELECT BTN LOGIC
       try {
         if (

src/ui/static/js/utils/settings.js

@@ -82,12 +82,18 @@ class Tabs {
     //reset desktop style
     const tabsDesktop = container.querySelectorAll("button[tab-handler]");
     tabsDesktop.forEach((tab) => {
-      tab.classList.remove("brightness-90", "z-10");
+      tab.classList.remove("brightness-90", "z-[1001]");
+      tab.classList.add("z-1000");
     });
     //reset mobile style
     const tabsMobile = container.querySelectorAll("button[tab-handler-mobile]");
     tabsMobile.forEach((tab) => {
-      tab.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700");
+      tab.classList.add(
+        "bg-white",
+        "dark:bg-slate-700",
+        "text-gray-700",
+        "z-1000"
+      );
       tab.classList.remove(
         "dark:bg-primary",
         "bg-primary",
@@ -103,7 +109,7 @@ class Tabs {
     const tabDesktop = container.querySelector(
       `button[tab-handler='${tabAtt}']`
     );
-    tabDesktop.classList.add("brightness-90", "z-10");
+    tabDesktop.classList.add("brightness-90", "z-[1001]");
 
     //mobile case
     const tabMobile = container.querySelector(
@@ -158,10 +164,7 @@ class FormatValue {
       try {
         inp.setAttribute("value", inp.getAttribute("value").trim());
         inp.value = inp.value.trim();
-
-      }catch(err) {
-
-      }
+      } catch (err) {}
     });
   }
 }

src/ui/templates/loading.html

@@ -24,7 +24,7 @@
         {%if message %}
         <div class="w-full flex justify-center">
           <p
-            class="lowercase text-center absolute mt-6 font-normal text-white text-xl"
+            class="uppercase text-center absolute mt-6 font-normal text-white text-xl"
           >
             {{ message }}
           </p>

src/ui/templates/services-modal.html

@@ -94,8 +94,9 @@
       method="POST"
     >
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-      <input type="hidden" value="server_name" name="SERVER_NAME" />
       <input type="hidden" value="delete" name="operation" />
+      <input type="hidden" value="" name="SERVER_NAME" />
+
       <div class="flex justify-center">
         <p
           services-modal-text

src/ui/templates/settings_plugins.html

@@ -65,6 +65,7 @@
       {% if value["type"] != "select" and value["type"] != "check" %}
       <div class="relative flex items-center">
         <input
+        {% if setting == "SERVER_NAME" %}required{%endif%}
         default-value="{{global_config[setting]['value']}}" default-method="{{global_config[setting]['method']}}"
         {% if global_config[setting]['method'] != 'ui' and global_config[setting]['method'] != 'default'  %} disabled {% endif %}     id="{{setting}}" name="{{setting}}"
         class="outline-none dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:border-gray-300/0 focus:ring-1  focus:valid:ring-green-500 focus:invalid:ring-red-500  text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700"

src/ui/templates/settings_tabs.html

@@ -12,14 +12,14 @@
     <button
     tab-handler="{{ plugin['id'] }}"
     type="button"
-    class="z-1000 {% if loop.first %} brightness-90 {% endif %} border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700  border my-1 relative inline-block px-3 py-3 font-bold text-center uppercase align-middle transition-all rounded-none cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
+    class="{% if loop.first %} brightness-90 z-[1001]{%else %} {% endif %} border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700  border my-1 relative inline-block px-3 py-3 font-bold text-center uppercase align-middle transition-all rounded-none cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
   >
     <div class="w-full flex justify-between items-center">
       <!-- text and icon -->
       <span class="text-primary transition duration-300 ease-in-out dark:opacity-90 pl-3 pr-2 dark:text-gray-300"> {{ plugin["name"] }} </span>
       <svg
         popover-btn="{{ plugin["name"] }}"
-        class=" z-20 fill-blue-500 h-5 w-5 mr-2 hover:brightness-95"
+        class=" fill-blue-500 h-5 w-5 mr-2 hover:brightness-95"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 512 512"
       >
@@ -68,32 +68,31 @@
   tab-dropdown
     class="hidden z-100 absolute flex-col w-full overflow-hidden overflow-y-auto  max-h-90"
   >
-  {% if current_endpoint != "services" %}
-
-  <!-- general button-->
-  <button
-  tab-handler-mobile="general"
-    type="button"
-    data-select="false"
-    class="flex justify-between border-t rounded-t border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 bg-primary dark:bg-primary my-0 relative px-6 py-2  text-center  align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600  dark:text-gray-300 text-gray-300"    >
-      General
-
-  </button>
-  <!-- end general button-->
-  {% endif %}
-
+  {% set first_el = "True" %}
   {% for plugin in plugins %}  {% if current_endpoint == "services" and plugin["settings"]
   and check_settings(plugin["settings"], "multisite") or current_endpoint == "global-config" and plugin["settings"]
   and check_settings(plugin["settings"], "global") %}
-    <button
-    tab-handler-mobile="{{ plugin['id'] }}"
-      type="button"
-      data-select="false"
-      id="edit-{{current_endpoint}}-{{ plugin['id'] }}-tab"
-      class="flex justify-between {% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90  bg-white text-gray-700 my-0 relative px-6 py-2  text-center  align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300">
-      {{ plugin["name"] }}
-   
-    </button>
+
+  {% if loop.first %}
+  <button
+  tab-handler-mobile="{{ plugin['id'] }}"
+    type="button"
+    data-select="false"
+    id="edit-{{current_endpoint}}-{{ plugin['id'] }}-tab"
+    class="flex justify-between border-t rounded-t border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300 z-1000 dark:bg-primary bg-primary text-gray-300">
+    {{ plugin["name"] }}
+  </button>
+  {% else %}
+  <button
+  tab-handler-mobile="{{ plugin['id'] }}"
+    type="button"
+    data-select="false"
+    id="edit-{{current_endpoint}}-{{ plugin['id'] }}-tab"
+    class="flex justify-between {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90  bg-white text-gray-700 my-0 relative px-6 py-2  text-center  align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300">
+    {{ plugin["name"] }}
+ 
+  </button>
+  {%endif%}
     {% endif %} {% endfor %}
   </div>
   <!-- end dropdown-->