feat(admin): add box preview and password bypass for administrators

Introduce an `AdminViewBox` handler and route that allows administrators to view any box directly. If the box is password-protected, the handler bypasses the protection by setting an unlock cookie with an unlock token and logs the bypass event. Additionally, add CSS and JS foundations for a file context menu and preview actions in the file browser UI.
2026-05-25 17:05:59 +03:00
parent 26619bacbc
commit bba84d4194
6 changed files with 348 additions and 9 deletions
--- a/backend/static/css/app.css
+++ b/backend/static/css/app.css
@@ -587,6 +587,16 @@ code {
  text-decoration: none;
 }

+.file-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.preview-action [hidden] {
+  display: none;
+}
+
 .file-browser.is-thumbs {
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 }
@@ -606,10 +616,91 @@ code {
  width: 100%;
 }

+.file-browser.is-thumbs .file-actions {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .file-browser.images-only .file-card:not([data-kind="image"]) {
  display: none;
 }

+.context-menu {
+  position: fixed;
+  z-index: 30;
+  width: 10.75rem;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 0.125rem);
+  background: color-mix(in srgb, var(--card) 96%, #000);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.46);
+  padding: 0.4rem;
+}
+
+.context-menu[hidden] {
+  display: none;
+}
+
+.context-menu button {
+  width: 100%;
+  min-height: 2.05rem;
+  justify-content: flex-start;
+  border-radius: calc(var(--radius) - 0.25rem);
+  padding: 0.42rem 0.5rem;
+  color: var(--foreground);
+  font-size: 0.8rem;
+}
+
+.context-menu button:hover,
+.context-menu button:focus-visible,
+.context-menu button.is-copied {
+  background: var(--accent);
+}
+
+.context-menu-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.1rem 0.1rem 0.2rem 0.45rem;
+}
+
+.context-menu-top small {
+  color: color-mix(in srgb, var(--muted-foreground) 74%, transparent);
+  font-size: 0.72rem;
+  font-weight: 600;
+}
+
+.context-menu-icons {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+
+.context-menu-icons button {
+  width: 1.9rem;
+  min-height: 1.9rem;
+  padding: 0;
+  justify-content: center;
+}
+
+.context-menu hr {
+  height: 1px;
+  margin: 0.35rem 0.2rem;
+  border: 0;
+  background: var(--border);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
 .unlock-form {
  margin: 1rem auto 0;
  display: grid;
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@@ -15,6 +15,10 @@
  const fileBrowser = document.querySelector("[data-file-browser]");
  const viewButtons = document.querySelectorAll("[data-view-button]");
  const previewImages = document.querySelector("[data-preview-images]");
+  const previewActions = document.querySelectorAll("[data-preview-action]");
+  const fileContextMenu = document.querySelector("[data-file-context-menu]");
+  let ctrlCopyMode = false;
+  let contextFile = null;

  if (fileBrowser) {
    viewButtons.forEach((button) => {
@@ -34,6 +38,80 @@
    }
  }

+  if (fileBrowser && fileContextMenu) {
+    fileBrowser.addEventListener("contextmenu", (event) => {
+      const card = event.target.closest("[data-file-context]");
+      if (!card) {
+        return;
+      }
+
+      event.preventDefault();
+      contextFile = {
+        previewURL: card.dataset.previewUrl,
+        viewURL: card.dataset.viewUrl,
+        downloadURL: card.dataset.downloadUrl,
+        fileName: card.dataset.fileName,
+      };
+      showContextMenu(event.clientX, event.clientY);
+    });
+
+    fileContextMenu.addEventListener("click", async (event) => {
+      const button = event.target.closest("[data-context-action]");
+      if (!button || !contextFile) {
+        return;
+      }
+
+      const shouldHide = await runContextAction(button.dataset.contextAction, contextFile);
+      if (shouldHide !== false) {
+        hideContextMenu();
+      }
+    });
+
+    document.addEventListener("click", (event) => {
+      if (!fileContextMenu.contains(event.target)) {
+        hideContextMenu();
+      }
+    });
+
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        hideContextMenu();
+      }
+    });
+
+    window.addEventListener("resize", hideContextMenu);
+    window.addEventListener("scroll", hideContextMenu, true);
+  }
+
+  if (previewActions.length > 0) {
+    previewActions.forEach((button) => {
+      button.addEventListener("click", async (event) => {
+        if (!event.ctrlKey && !ctrlCopyMode) {
+          return;
+        }
+
+        event.preventDefault();
+        await copyPreviewLink(button);
+      });
+    });
+
+    window.addEventListener("keydown", (event) => {
+      if (event.key === "Control") {
+        setPreviewCopyMode(true);
+      }
+    });
+
+    window.addEventListener("keyup", (event) => {
+      if (event.key === "Control") {
+        setPreviewCopyMode(false);
+      }
+    });
+
+    window.addEventListener("blur", () => {
+      setPreviewCopyMode(false);
+    });
+  }
+
  if (!form || !dropZone || !fileInput) {
    return;
  }
@@ -267,7 +345,7 @@
    if (!text) {
      return;
    }
-    await navigator.clipboard.writeText(text);
+    await writeClipboard(text);
    const previous = button.textContent;
    button.textContent = copiedLabel;
    setTimeout(() => {
@@ -275,6 +353,102 @@
    }, 1400);
  }

+  async function copyPreviewLink(button) {
+    await writeClipboard(button.href);
+    const label = button.querySelector("[data-preview-label]");
+    if (!label) {
+      return;
+    }
+
+    label.textContent = "Copied";
+    setTimeout(() => {
+      label.textContent = ctrlCopyMode ? button.dataset.copyLabel || "Copy link" : button.dataset.viewLabel || "View";
+    }, 1200);
+  }
+
+  function setPreviewCopyMode(enabled) {
+    ctrlCopyMode = enabled;
+    previewActions.forEach((button) => {
+      const label = button.querySelector("[data-preview-label]");
+      const viewIcon = button.querySelector("[data-preview-view-icon]");
+      const copyIcon = button.querySelector("[data-preview-copy-icon]");
+      if (label) {
+        label.textContent = enabled ? button.dataset.copyLabel || "Copy link" : button.dataset.viewLabel || "View";
+      }
+      if (viewIcon) {
+        viewIcon.hidden = enabled;
+      }
+      if (copyIcon) {
+        copyIcon.hidden = !enabled;
+      }
+    });
+  }
+
+  async function runContextAction(action, file) {
+    if (action === "preview") {
+      openInNewTab(file.previewURL);
+      return true;
+    }
+    if (action === "view") {
+      openInNewTab(file.viewURL);
+      return true;
+    }
+    if (action === "copy-preview") {
+      await writeClipboard(file.previewURL);
+      return true;
+    }
+    if (action === "copy-download") {
+      await writeClipboard(file.downloadURL);
+      return true;
+    }
+    if (action === "download") {
+      openInNewTab(file.downloadURL);
+    }
+    return true;
+  }
+
+  function showContextMenu(x, y) {
+    fileContextMenu.hidden = false;
+    fileContextMenu.style.left = "0px";
+    fileContextMenu.style.top = "0px";
+
+    const rect = fileContextMenu.getBoundingClientRect();
+    const margin = 8;
+    const left = Math.min(x, window.innerWidth - rect.width - margin);
+    const top = Math.min(y, window.innerHeight - rect.height - margin);
+    fileContextMenu.style.left = `${Math.max(margin, left)}px`;
+    fileContextMenu.style.top = `${Math.max(margin, top)}px`;
+  }
+
+  function hideContextMenu() {
+    if (!fileContextMenu || fileContextMenu.hidden) {
+      return;
+    }
+    fileContextMenu.hidden = true;
+    contextFile = null;
+  }
+
+  function openInNewTab(url) {
+    window.open(url, "_blank", "noopener,noreferrer");
+  }
+
+  async function writeClipboard(text) {
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text);
+      return;
+    }
+
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    document.body.append(textarea);
+    textarea.select();
+    document.execCommand("copy");
+    textarea.remove();
+  }
+
  function formatDate(value) {
    const date = new Date(value);
    if (Number.isNaN(date.getTime())) {