feat(upload): add dynamic expiry options and modern UI theme

- Implement dynamic expiry options on the upload page based on user roles and retention policies. - Add helper functions to build and format expiry options into human-readable labels. - Introduce a new modern theme featuring glassmorphism, gradients, and frosted glass cards.
2026-05-31 15:30:53 +03:00
parent f1c67c455b
commit df91fe9d3d
11 changed files with 504 additions and 30 deletions
--- a/backend/static/js/05-theme.js
+++ b/backend/static/js/05-theme.js
@@ -0,0 +1,53 @@
+/*
+ * Theme init + toggle.
+ *
+ * Loaded in <head> WITHOUT defer so the first block runs before paint and sets
+ * the theme attribute, avoiding a flash of the wrong theme. The choice lives in
+ * localStorage (no cookie, no server round-trip) and applies site-wide.
+ *
+ * CSP note: this is an external /static file, so it is allowed under
+ * script-src 'self'. We only toggle an attribute / class — never inject inline
+ * <style> — which keeps style-src 'self' happy.
+ */
+(function () {
+  var STORAGE_KEY = "warpbox-theme";
+  var THEMES = ["revamp", "classic"];
+
+  function stored() {
+    try {
+      return localStorage.getItem(STORAGE_KEY);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  function apply(theme) {
+    if (THEMES.indexOf(theme) === -1) {
+      theme = "revamp";
+    }
+    document.documentElement.dataset.theme = theme;
+    return theme;
+  }
+
+  // Runs immediately (before paint).
+  var current = apply(stored() || "revamp");
+
+  document.addEventListener("DOMContentLoaded", function () {
+    var select = document.querySelector("[data-theme-select]");
+    if (!select) {
+      return;
+    }
+
+    // Reflect the active theme in the dropdown.
+    select.value = current;
+
+    select.addEventListener("change", function () {
+      current = apply(select.value);
+      try {
+        localStorage.setItem(STORAGE_KEY, current);
+      } catch (e) {
+        /* ignore persistence failures (private mode, etc.) */
+      }
+    });
+  });
+})();
--- a/backend/static/js/40-upload.js
+++ b/backend/static/js/40-upload.js
@@ -18,6 +18,28 @@
    return;
  }

+  // Remember the last-chosen expiry across uploads (per browser).
+  const expirySelect = form.querySelector("[data-expiry-select]");
+  if (expirySelect) {
+    const EXPIRY_KEY = "warpbox-expiry";
+    let saved = null;
+    try {
+      saved = localStorage.getItem(EXPIRY_KEY);
+    } catch (e) {
+      saved = null;
+    }
+    if (saved && expirySelect.querySelector('option[value="' + saved + '"]')) {
+      expirySelect.value = saved;
+    }
+    expirySelect.addEventListener("change", () => {
+      try {
+        localStorage.setItem(EXPIRY_KEY, expirySelect.value);
+      } catch (e) {
+        /* ignore persistence failures */
+      }
+    });
+  }
+
  let latestBoxURL = "";
  let selectedFiles = [];