Merge pull request #3730 from BlackDex/update-admin-interface

Update admin interface

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;
  });