Merge pull request #381 from TheophileDiot/dev

Made some fixes in the UI

src/ui/static/css/dashboard.css

@@ -1030,6 +1030,10 @@ h6 {
   margin-left: 1.5rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -1066,10 +1070,6 @@ h6 {
   margin-left: auto;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
-}
-
 .mr-6 {
   margin-right: 1.5rem;
 }
@@ -1366,10 +1366,6 @@ h6 {
   max-width: 100%;
 }
 
-.max-w-\[350px\] {
-  max-width: 350px;
-}
-
 .max-w-screen-sm {
   max-width: 576px;
 }
@@ -1547,10 +1543,6 @@ h6 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.flex-row {
-  flex-direction: row;
-}
-
 .flex-col {
   flex-direction: column;
 }
@@ -2264,6 +2256,11 @@ h6 {
   line-height: 1rem;
 }
 
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -2384,6 +2381,11 @@ h6 {
   color: rgb(94 114 228 / var(--tw-text-opacity));
 }
 
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(108 117 125 / var(--tw-text-opacity));
+}
+
 .text-primary {
   --tw-text-opacity: 1;
   color: rgb(8 85 119 / var(--tw-text-opacity));
@@ -2404,11 +2406,6 @@ h6 {
   color: rgb(5 17 57 / var(--tw-text-opacity));
 }
 
-.text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(108 117 125 / var(--tw-text-opacity));
-}
-
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -2422,14 +2419,14 @@ h6 {
   opacity: 1;
 }
 
-.opacity-60 {
-  opacity: 0.6;
-}
-
 .opacity-0 {
   opacity: 0;
 }
 
+.opacity-60 {
+  opacity: 0.6;
+}
+
 .shadow-md {
   --tw-shadow: 0 4px 6px rgba(50,50,93,.1),0 1px 3px rgba(0,0,0,.08);
   --tw-shadow-colored: 0 4px 6px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color);
@@ -2487,6 +2484,16 @@ h6 {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.brightness-90 {
+  --tw-brightness: brightness(.9);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.brightness-95 {
+  --tw-brightness: brightness(.95);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }

src/ui/static/js/services.js

@@ -134,6 +134,20 @@ class ServiceModal {
         )
         .click();
     });
+    //server name always enabled for default
+    this.setNameSetting("ui", "");
+  }
+
+  setNameSetting(method, value) {
+    const nameInp = document.querySelector('input[name="SERVER_NAME"]');
+
+    if (method === "ui" || method === "default") {
+      nameInp.removeAttribute("disabled");
+    } else {
+      nameInp.setAttribute("disabled", "");
+    }
+
+    nameInp.value = value;
   }
 
   setDisabled(inp, method) {
@@ -238,8 +252,8 @@ class ServiceModal {
           inpt.tagName === "INPUT" &&
           inpt.getAttribute("type") === "checkbox"
         ) {
-          inpt.checked = defaultVal === "yes" ? true : false;
-          inpt.setAttribute("value", defaultVal);
+          inpt.checked = value === "yes" ? true : false;
+          inpt.setAttribute("value", value);
         }
         //for select
         if (inpt.tagName === "SELECT") {
@@ -251,6 +265,11 @@ class ServiceModal {
         }
       } catch (err) {}
     }
+    //name setting value
+    this.setNameSetting(
+      settings["SERVER_NAME"]["method"],
+      settings["SERVER_NAME"]["value"]
+    );
   }
 
   //UTILS

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

@@ -81,6 +81,14 @@ class Tabs {
   }
 
   initTabs() {
+    //show first element
+    window.addEventListener("load", () => {
+      try {
+        document.querySelector("button[services-item-handler]").click();
+        document.querySelector("button[services-mobile-item-handler]").click();
+      } catch (err) {}
+    });
+
     this.tabsContainer.addEventListener("click", (e) => {
       //MOBILE TABS LOGIC
       try {
@@ -112,7 +120,7 @@ class Tabs {
           const tabAtt = tab.getAttribute(`${this.prefix}-item-handler`);
           //style
           this.resetDeskStyle();
-          tab.classList.add("brightness-75");
+          tab.classList.add("brightness-95", "z-10");
           //show content
           this.showRightSetting(tabAtt);
         }
@@ -122,7 +130,7 @@ class Tabs {
 
   resetDeskStyle() {
     this.desktopBtns.forEach((tab) => {
-      tab.classList.remove("brightness-75");
+      tab.classList.remove("brightness-95", "z-10");
     });
   }
 

src/ui/templates/loading.html

@@ -13,13 +13,19 @@
   </head>
   <body>
     <div
-      class="fixed h-screen w-screen bg-primary flex justify-center align-middle items-center"
+      class="fixed h-screen w-screen bg-primary flex flex-col justify-center align-middle items-center"
     >
-      <img
-        src="images/logo-menu-2.png"
-        class="duration-300 w-40 h-12 sm:w-50 sm:h-14 md:w-60 md:h-16 lg:w-80 lg:h-24 inline transition-all"
-        alt="main logo"
-      />
+      <div>
+        <img
+          src="images/logo-menu-2.png"
+          class="duration-300 w-40 h-12 sm:w-50 sm:h-14 md:w-60 md:h-16 lg:w-80 lg:h-24 inline transition-all"
+          alt="main logo"
+        />
+        {%if message %}
+        <h1 class="text-center absolute mt-6 font-bold text-white text-2xl">
+          {%endif%}
+        </h1>
+      </div>
     </div>
   </body>
   <script>

src/ui/templates/login.html

@@ -16,6 +16,17 @@
     <link rel="stylesheet" href="css/dashboard.css" />
   </head>
   <body>
+    <div
+      loader
+      class="fixed z-[10000] transition duration-300 h-screen w-screen bg-primary flex justify-center align-middle items-center"
+    >
+      <img
+        loader-img
+        src="images/logo-menu-2.png"
+        class="duration-300 w-40 h-12 sm:w-50 sm:h-14 md:w-60 md:h-16 lg:w-80 lg:h-24 inline transition-all"
+        alt="main logo"
+      />
+    </div>
     {% with messages = get_flashed_messages(with_categories=true) %} {% if
     messages %}
     <!-- flash message-->
@@ -151,6 +162,44 @@
     <!-- end content -->
     <script src="js/tsparticles.bundle.min.js"></script>
     <script>
+      class Loader {
+        constructor() {
+          this.menuContainer = document.querySelector("[menu-container]");
+          this.logoContainer = document.querySelector("[loader]");
+          this.logoEl = document.querySelector("[loader-img]");
+          this.isLoading = true;
+          this.init();
+        }
+
+        init() {
+          this.loading();
+          window.addEventListener("load", (e) => {
+            setTimeout(() => {
+              this.logoContainer.classList.add("opacity-0");
+            }, 350);
+
+            setTimeout(() => {
+              this.isLoading = false;
+              this.logoContainer.classList.add("hidden");
+            }, 650);
+
+            setTimeout(() => {
+              this.logoContainer.remove();
+            }, 800);
+          });
+        }
+
+        loading() {
+          if ((this.isLoading = true)) {
+            setTimeout(() => {
+              this.logoEl.classList.toggle("scale-105");
+              this.loading();
+            }, 300);
+          }
+        }
+      }
+
+      const setLoader = new Loader();
       tsParticles.loadJSON("particles-js", "json/particles.json");
     </script>
   </body>

src/ui/templates/settings_plugins.html

@@ -10,12 +10,12 @@
   "settings": {
     "SERVER_NAME": {
       "context": "multisite",
-      "default": "www.example.com",
+      "default": "",
       "help": "List of the virtual hosts served by bunkerweb.",
-      "id": "server-name",
+      "id": "SERVER_NAME",
       "label": "Server name",
       "regex": ".*",
-      "type": "text"
+      "type": "text",
     }
   }
 }] + config["CONFIG"].get_plugins() %}

src/ui/templates/settings_tabs.html

@@ -10,7 +10,7 @@
   "settings": {
     "SERVER_NAME": {
       "context": "multisite",
-      "default": "www.example.com",
+      "default": "",
       "help": "List of the virtual hosts served by bunkerweb.",
       "id": "server-name",
       "label": "Server name",
@@ -65,7 +65,7 @@
     <button
     {{current_endpoint}}-item-handler="{{ plugin['id'] }}"
     type="button"
-    class="{% if current_endpoint == 'service' and loop.first %} brightness-75 {% 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="z-1000 {% if current_endpoint == 'service' and loop.first %} brightness-75 {% 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 clas="w-full flex justify-between items-center">
       <!-- text and icon -->