Optimize and made some tweaks for QOL reasons in web UI

src/ui/app/routes/login.py

@@ -46,7 +46,7 @@ def login_page():
             if not ui_user.totp_secret:
                 flash(
                     f'Please enable two-factor authentication to secure your account <a href="{url_for("profile.profile_page", _anchor="security")}">here</a>',
-                    "error",
+                    "warning",
                 )
 
             # redirect him to the page he originally wanted or to the home page

src/ui/app/routes/profile.py

@@ -13,25 +13,6 @@
 
 profile = Blueprint("profile", __name__)
 
-BROWSERS = {
-    "Chrome": "bxl-chrome",
-    "Firefox": "bxl-firefox",
-    "Safari": "bx-compass",
-    "Edge": "bxl-edge",
-    "Opera": "bxl-opera",
-    "Internet Explorer": "bxl-internet-explorer",
-}
-
-OS = {
-    "Windows": "bxl-windows",
-    "Mac": "bxl-apple",
-    "Linux": "bxl-tux",
-}
-
-DEVICES = {
-    "PC": "bx-desktop",
-}
-
 
 def get_last_sessions(page: int, per_page: int) -> Tuple[Generator[Dict[str, Union[str, bool]], None, None], int]:
     db_sessions = DB.get_ui_user_sessions(current_user.username, session.get("session_id"))
@@ -53,7 +34,7 @@ def session_generator(page: int, per_page: int):
 
         for db_session in additional_sessions + db_sessions[(page - 1) * per_page : page * per_page]:  # noqa: E203
             ua_data = parse(db_session["user_agent"])
-            last_session = {
+            yield {
                 "current": db_session["id"] == session.get("session_id") if "session_id" in session else "id" not in db_session,
                 "browser": ua_data.get_browser(),
                 "os": ua_data.get_os(),
@@ -67,20 +48,6 @@ def session_generator(page: int, per_page: int):
                 ),
             }
 
-            for browser, icon in BROWSERS.items():
-                if browser in last_session["browser"]:
-                    last_session["browser"] = f"<i class='bx {icon} text-primary'></i>&nbsp;{last_session['browser']}"
-                    break
-
-            for os, icon in OS.items():
-                if os in last_session["os"]:
-                    last_session["os"] = f"<i class='bx {icon} text-primary'></i>&nbsp;{last_session['os']}"
-                    break
-
-            last_session["device"] = f"<i class='bx {DEVICES.get(last_session['device'], 'bx-mobile')} text-primary'></i>&nbsp;{last_session['device']}"
-
-            yield last_session
-
     return session_generator(page, per_page), total_sessions
 
 

src/ui/app/static/css/overrides.css

@@ -768,3 +768,8 @@ a.courier-prime:hover {
 .courier-prime {
   font-family: var(--font-courier-prime);
 }
+
+.warning-tooltip {
+  --bs-tooltip-bg: var(--bs-warning);
+  --bs-tooltip-color: var(--bs-white);
+}

src/ui/app/static/js/pages/config_edit.js

@@ -111,6 +111,7 @@ $(document).ready(function () {
       ).first();
       $("#select-type")
         .parent()
+        .attr("data-bs-custom-class", "warning-tooltip")
         .attr(
           "data-bs-original-title",
           `Switched to ${firstMultisiteType

src/ui/app/static/js/pages/home.js

@@ -431,6 +431,7 @@ $(function () {
     chart: {
       type: "bar",
       width: "100%",
+      height: 400,
     },
     title: {
       text: "Blocked Requests per Hour",

src/ui/app/static/js/pages/setup.js

@@ -217,7 +217,7 @@ $(document).ready(() => {
 
     $currentStepContainer.find(".plugin-setting").each(function () {
       const $input = $(this);
-      const value = $input.val().trim();
+      const value = $input.val();
       const isRequired = $input.prop("required");
       const pattern = $input.attr("pattern");
       const fieldName =

src/ui/app/static/js/plugins-settings.js

@@ -14,7 +14,6 @@ $(document).ready(() => {
   }
 
   let currentTemplate = $("#selected-template").val();
-  let currentTemplateMethod = $("#selected-template-method").val();
   let currentMode = $("#selected-mode").val();
   let currentType = $("#selected-type").val();
 
@@ -159,7 +158,7 @@ $(document).ready(() => {
 
     currentStepContainer.find(".plugin-setting").each(function () {
       const $input = $(this);
-      const value = $input.val().trim();
+      const value = $input.val();
       const isRequired = $input.prop("required");
       const pattern = $input.attr("pattern");
       const fieldName =

src/ui/app/static/js/utils.js

@@ -17,7 +17,7 @@ class News {
     if (lastNews) {
       this.render(JSON.parse(lastNews));
     } else {
-      $.getJSON("https://www.bunkerweb.io/api/posts/0/2")
+      $.getJSON("https://www.bunkerweb.io/api/posts/0/3")
         .done((res) => {
           const reverseData = res.data.reverse();
           this.render(reverseData);
@@ -271,29 +271,40 @@ $(document).ready(() => {
   const intervalTime = 7000;
   let interval;
   const $bannerText = $("#banner-text");
-  // Create a hidden element to measure the max height
-  const $measuringElement = $("<div>")
-    .css({
-      position: "absolute",
-      visibility: "hidden",
-      height: "auto",
-      width: $bannerText.width(),
-      whiteSpace: "nowrap",
-    })
-    .appendTo("body");
-
-  // Calculate the minimum height required for the banner text
-  let minHeight = 0;
-  newsItems.forEach((item) => {
-    $measuringElement.html(item);
-    minHeight = Math.max(minHeight, $measuringElement.outerHeight());
-  });
 
-  // Set the minimum height to avoid layout shifts
-  $bannerText.css("min-height", minHeight);
+  function calculateMinHeight() {
+    // Create a hidden element to measure the max height
+    const $measuringElement = $("<div>")
+      .css({
+        position: "absolute",
+        visibility: "hidden",
+        height: "auto",
+        width: $bannerText.width(), // Set width to match the current width of the banner text container
+        whiteSpace: "normal", // Change to normal for wrapping if needed
+      })
+      .appendTo("body");
+
+    // Calculate the minimum height required for the banner text
+    let minHeight = 0;
+    newsItems.forEach((item) => {
+      $measuringElement.html(item);
+      minHeight = Math.max(minHeight, $measuringElement.outerHeight());
+    });
+
+    // Set the minimum height to avoid layout shifts
+    $bannerText.css("min-height", minHeight);
+
+    // Remove the measuring element from the DOM
+    $measuringElement.remove();
+  }
 
-  // Remove the measuring element from the DOM
-  $measuringElement.remove();
+  // Calculate the min-height on page load
+  calculateMinHeight();
+
+  // Recalculate the min-height on window resize
+  $(window).on("resize", function () {
+    calculateMinHeight();
+  });
 
   const news = new News();
   news.init();
@@ -380,4 +391,35 @@ $(document).ready(() => {
     loadData();
     $("#next-news").trigger("click");
   }
+
+  var notificationsRead =
+    parseInt(sessionStorage.getItem("notificationsRead")) || 0;
+
+  function updateNotificationsBadge() {
+    const $notificationsBadge = $("#unread-notifications");
+    let unreadNotifications = parseInt($notificationsBadge.text());
+
+    unreadNotifications = isNaN(unreadNotifications) ? 0 : unreadNotifications;
+
+    if ($notificationsBadge.length) {
+      const updatedUnread = unreadNotifications - notificationsRead;
+      if (updatedUnread > 0) {
+        $notificationsBadge.text(updatedUnread);
+        $notificationsBadge.removeClass("d-none");
+      } else {
+        $notificationsBadge.addClass("d-none");
+      }
+    }
+  }
+
+  updateNotificationsBadge();
+
+  $("#notifications-button").on("click", function () {
+    const readNotifications = $(
+      "#notifications-toast-container .bs-toast",
+    ).length;
+    notificationsRead = readNotifications;
+    sessionStorage.setItem("notificationsRead", notificationsRead);
+    updateNotificationsBadge();
+  });
 });

src/ui/app/templates/dashboard.html

@@ -141,7 +141,8 @@
                                         <span class="d-none d-md-inline">Notifications</span>
                                     </button>
                                     {% if flash_messages %}
-                                        <span class="badge-dot-text position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
+                                        <span id="unread-notifications"
+                                              class="badge-dot-text position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger d-none">
                                             {{ flash_messages|length }}
                                             <span class="visually-hidden">unread notifications</span>
                                         </span>
@@ -174,7 +175,7 @@
                                aria-pressed="true"
                                href="{{ url_for('pro') }}">
                                 <span class="me-1 me-md-2 d-flex h-100 justify-content-center align-items-center">
-                                    <img src="{{ pro_diamond_url }}"
+                                    <img src="{{ url_for('static', filename='img/diamond-white.svg') }}"
                                          alt="Pro plugin"
                                          width="18px"
                                          height="15.5px">

src/ui/app/templates/flash.html

@@ -8,12 +8,12 @@
         {% endif %}
         <!-- flash message-->
         {% for category, message in messages %}
-            <div class="bs-toast toast fade show {% if category == 'error' %}bg-danger{% elif category == 'warning' %}bg-warning{% else %}bg-primary text-white{% endif %}"
+            <div class="bs-toast toast fade show bg-white border{% if category == 'error' %} border-danger{% elif category == 'warning' %} border-warning{% else %} border-primary{% endif %}"
                  role="alert"
                  aria-live="assertive"
                  aria-atomic="true">
-                <div class="toast-header">
-                    <i class="d-block w-px-20 h-auto rounded me-2 tf-icons bx bx-bell"></i>
+                <div class="toast-header d-flex align-items-center{% if category == 'error' %} text-danger{% elif category == 'warning' %} text-warning{% else %} text-primary{% endif %}">
+                    <i class="d-block h-auto rounded tf-icons bx bx-xs bx-bell bx-tada me-2"></i>
                     <span class="fw-medium me-auto">
                         {% if category != 'message' %}
                             {{ category|capitalize }}