Update admin interface

- Updated the admin interface dependencies.
- Replace bootstrap-native with bootstrap
- Added auto theme with an option to switch to dark/light
- Some small color changes
- Added an dev only function to always load static files from disk

src/api/web.rs

@@ -14,11 +14,17 @@ use crate::{
 pub fn routes() -> Vec<Route> {
     // If addding more routes here, consider also adding them to
     // crate::utils::LOGGED_ROUTES to make sure they appear in the log
+    let mut routes = routes![attachments, alive, alive_head, static_files];
     if CONFIG.web_vault_enabled() {
-        routes![web_index, web_index_head, app_id, web_files, attachments, alive, alive_head, static_files]
-    } else {
-        routes![attachments, alive, alive_head, static_files]
+        routes.append(&mut routes![web_index, web_index_head, app_id, web_files]);
+    }
+
+    #[cfg(debug_assertions)]
+    if CONFIG.reload_templates() {
+        routes.append(&mut routes![_static_files_dev]);
     }
+
+    routes
 }
 
 pub fn catchers() -> Vec<Catcher> {
@@ -116,7 +122,30 @@ fn alive_head(_conn: DbConn) -> EmptyResult {
     Ok(())
 }
 
-#[get("/vw_static/<filename>")]
+// This endpoint/function is used during development and development only.
+// It allows to easily develop the admin interface by always loading the files from disk instead from a slice of bytes
+// This will only be active during a debug build and only when `RELOAD_TEMPLATES` is set to `true`
+// NOTE: Do not forget to add any new files added to the `static_files` function below!
+#[cfg(debug_assertions)]
+#[get("/vw_static/<filename>", rank = 1)]
+pub async fn _static_files_dev(filename: PathBuf) -> Option<NamedFile> {
+    warn!("LOADING STATIC FILES FROM DISK");
+    let file = filename.to_str().unwrap_or_default();
+    let ext = filename.extension().unwrap_or_default();
+
+    let path = if ext == "png" || ext == "svg" {
+        tokio::fs::canonicalize(Path::new(file!()).parent().unwrap().join("../static/images/").join(file)).await
+    } else {
+        tokio::fs::canonicalize(Path::new(file!()).parent().unwrap().join("../static/scripts/").join(file)).await
+    };
+
+    if let Ok(path) = path {
+        return NamedFile::open(path).await.ok();
+    };
+    None
+}
+
+#[get("/vw_static/<filename>", rank = 2)]
 pub fn static_files(filename: &str) -> Result<(ContentType, &'static [u8]), Error> {
     match filename {
         "404.png" => Ok((ContentType::PNG, include_bytes!("../static/images/404.png"))),
@@ -138,12 +167,12 @@ pub fn static_files(filename: &str) -> Result<(ContentType, &'static [u8]), Erro
             Ok((ContentType::JavaScript, include_bytes!("../static/scripts/admin_diagnostics.js")))
         }
         "bootstrap.css" => Ok((ContentType::CSS, include_bytes!("../static/scripts/bootstrap.css"))),
-        "bootstrap-native.js" => Ok((ContentType::JavaScript, include_bytes!("../static/scripts/bootstrap-native.js"))),
+        "bootstrap.bundle.js" => Ok((ContentType::JavaScript, include_bytes!("../static/scripts/bootstrap.bundle.js"))),
         "jdenticon.js" => Ok((ContentType::JavaScript, include_bytes!("../static/scripts/jdenticon.js"))),
         "datatables.js" => Ok((ContentType::JavaScript, include_bytes!("../static/scripts/datatables.js"))),
         "datatables.css" => Ok((ContentType::CSS, include_bytes!("../static/scripts/datatables.css"))),
-        "jquery-3.6.4.slim.js" => {
-            Ok((ContentType::JavaScript, include_bytes!("../static/scripts/jquery-3.6.4.slim.js")))
+        "jquery-3.7.0.slim.js" => {
+            Ok((ContentType::JavaScript, include_bytes!("../static/scripts/jquery-3.7.0.slim.js")))
         }
         _ => err!(format!("Static file not found: {filename}")),
     }

src/static/scripts/admin.js

@@ -37,36 +37,107 @@ function _post(url, successMsg, errMsg, body, reload_page = true) {
         mode: "same-origin",
         credentials: "same-origin",
         headers: { "Content-Type": "application/json" }
-    }).then( resp => {
+    }).then(resp => {
         if (resp.ok) {
             msg(successMsg, reload_page);
             // Abuse the catch handler by setting error to false and continue
-            return Promise.reject({error: false});
+            return Promise.reject({ error: false });
         }
         respStatus = resp.status;
         respStatusText = resp.statusText;
         return resp.text();
-    }).then( respText => {
+    }).then(respText => {
         try {
             const respJson = JSON.parse(respText);
             if (respJson.ErrorModel && respJson.ErrorModel.Message) {
                 return respJson.ErrorModel.Message;
             } else {
-                return Promise.reject({body:`${respStatus} - ${respStatusText}\n\nUnknown error`, error: true});
+                return Promise.reject({ body: `${respStatus} - ${respStatusText}\n\nUnknown error`, error: true });
             }
         } catch (e) {
-            return Promise.reject({body:`${respStatus} - ${respStatusText}\n\n[Catch] ${e}`, error: true});
+            return Promise.reject({ body: `${respStatus} - ${respStatusText}\n\n[Catch] ${e}`, error: true });
         }
-    }).then( apiMsg => {
+    }).then(apiMsg => {
         msg(`${errMsg}\n${apiMsg}`, reload_page);
-    }).catch( e => {
+    }).catch(e => {
         if (e.error === false) { return true; }
         else { msg(`${errMsg}\n${e.body}`, reload_page); }
     });
 }
 
+// Bootstrap Theme Selector
+const getStoredTheme = () => localStorage.getItem("theme");
+const setStoredTheme = theme => localStorage.setItem("theme", theme);
+
+const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme();
+    if (storedTheme) {
+        return storedTheme;
+    }
+
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+
+const setTheme = theme => {
+    if (theme === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        document.documentElement.setAttribute("data-bs-theme", "dark");
+    } else {
+        document.documentElement.setAttribute("data-bs-theme", theme);
+    }
+};
+
+setTheme(getPreferredTheme());
+
+const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector("#bd-theme");
+
+    if (!themeSwitcher) {
+        return;
+    }
+
+    const themeSwitcherText = document.querySelector("#bd-theme-text");
+    const activeThemeIcon = document.querySelector(".theme-icon-active use");
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
+    const svgOfActiveBtn = btnToActive.querySelector("span use").innerText;
+
+    document.querySelectorAll("[data-bs-theme-value]").forEach(element => {
+        element.classList.remove("active");
+        element.setAttribute("aria-pressed", "false");
+    });
+
+    btnToActive.classList.add("active");
+    btnToActive.setAttribute("aria-pressed", "true");
+    activeThemeIcon.innerText = svgOfActiveBtn;
+    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
+    themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
+
+    if (focus) {
+        themeSwitcher.focus();
+    }
+};
+
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+    const storedTheme = getStoredTheme();
+    if (storedTheme !== "light" && storedTheme !== "dark") {
+        setTheme(getPreferredTheme());
+    }
+});
+
+
 // onLoad events
 document.addEventListener("DOMContentLoaded", (/*event*/) => {
+    showActiveTheme(getPreferredTheme());
+
+    document.querySelectorAll("[data-bs-theme-value]")
+        .forEach(toggle => {
+            toggle.addEventListener("click", () => {
+                const theme = toggle.getAttribute("data-bs-theme-value");
+                setStoredTheme(theme);
+                setTheme(theme);
+                showActiveTheme(theme, true);
+            });
+        });
+
     // get current URL path and assign "active" class to the correct nav-item
     const pathname = window.location.pathname;
     if (pathname === "") return;

src/static/scripts/admin_diagnostics.js

@@ -1,6 +1,6 @@
 "use strict";
 /* eslint-env es2017, browser */
-/* global BASE_URL:readable, BSN:readable */
+/* global BASE_URL:readable, bootstrap:readable */
 
 var dnsCheck = false;
 var timeCheck = false;
@@ -135,7 +135,7 @@ function copyToClipboard(event) {
     document.execCommand("copy");
     tmpCopyEl.remove();
 
-    new BSN.Toast("#toastClipboardCopy").show();
+    new bootstrap.Toast("#toastClipboardCopy").show();
 }
 
 function checkTimeDrift(utcTimeA, utcTimeB, statusPrefix) {

src/static/scripts/admin_users.js

@@ -141,19 +141,20 @@ function resendUserInvite (event) {
 const ORG_TYPES = {
     "0": {
         "name": "Owner",
-        "color": "orange"
+        "bg": "orange",
+        "font": "black"
     },
     "1": {
         "name": "Admin",
-        "color": "blueviolet"
+        "bg": "blueviolet"
     },
     "2": {
         "name": "User",
-        "color": "blue"
+        "bg": "blue"
     },
     "3": {
         "name": "Manager",
-        "color": "green"
+        "bg": "green"
     },
 };
 
@@ -227,7 +228,10 @@ function initUserTable() {
     // Color all the org buttons per type
     document.querySelectorAll("button[data-vw-org-type]").forEach(function(e) {
         const orgType = ORG_TYPES[e.dataset.vwOrgType];
-        e.style.backgroundColor = orgType.color;
+        e.style.backgroundColor = orgType.bg;
+        if (orgType.font !== undefined) {
+            e.style.color = orgType.font;
+        }
         e.title = orgType.name;
     });