Выпущен 0.1.3: UX convenience pack, unwrap/admin polish и cache-bust статики.
devops-tools/wrapped/wrapped-build/pipeline/head There was a failure building this commit
devops-tools/wrapped/wrapped-build/pipeline/head There was a failure building this commit
Добавлены Share/QR PNG, zip all, size meter, PWA-manifest, системная тема и haptic на copy; улучшены success/unwrap и статистика админки (EN/RU).
This commit is contained in:
+414
-10
@@ -113,6 +113,7 @@ html[data-theme="light"] body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.85rem 0.75rem;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
@@ -262,6 +263,14 @@ html[data-theme="dark"] .icon-btn:hover {
|
||||
.result-panel > .success-callout {
|
||||
justify-self: stretch;
|
||||
}
|
||||
.result-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.result-panel > .success-trust {
|
||||
margin: 0;
|
||||
}
|
||||
.success-panel {
|
||||
justify-items: stretch;
|
||||
text-align: left;
|
||||
@@ -273,6 +282,149 @@ html[data-theme="dark"] .icon-btn:hover {
|
||||
.success-panel > .btn.ghost {
|
||||
justify-self: center;
|
||||
}
|
||||
.success-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 1.25rem 1.5rem;
|
||||
align-items: start;
|
||||
min-width: 0;
|
||||
}
|
||||
.success-main {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.success-main > label {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
.success-password-block {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.success-password-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0.4rem 0.7rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(61, 214, 198, 0.35);
|
||||
background: rgba(61, 214, 198, 0.1);
|
||||
color: var(--accent-2);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
.success-password-hint {
|
||||
margin: 0;
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.success-checklist {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.success-checklist li {
|
||||
position: relative;
|
||||
padding-left: 1.35rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.success-checklist li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0.35rem;
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
border-radius: 2px;
|
||||
border: 1.5px solid var(--accent-2);
|
||||
opacity: 0.85;
|
||||
}
|
||||
.success-trust {
|
||||
margin: 0;
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.success-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
.success-actions .btn {
|
||||
flex: 1 1 auto;
|
||||
min-width: 8rem;
|
||||
}
|
||||
.size-meter {
|
||||
margin: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.size-meter.is-warn {
|
||||
color: #e8a838;
|
||||
}
|
||||
.size-meter.is-over {
|
||||
color: var(--danger);
|
||||
}
|
||||
.success-qr {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.85rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: var(--panel);
|
||||
min-width: 0;
|
||||
}
|
||||
.share-qr {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.share-qr img,
|
||||
.share-qr canvas {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.success-qr-hint {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 0.78rem;
|
||||
max-width: 11rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
@media (max-width: 860px) {
|
||||
.success-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.success-qr {
|
||||
order: -1;
|
||||
justify-self: center;
|
||||
width: min(100%, 280px);
|
||||
}
|
||||
.share-qr {
|
||||
width: min(220px, 70vw);
|
||||
height: min(220px, 70vw);
|
||||
}
|
||||
.copy-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.copy-row .btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.success-callout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -441,12 +593,28 @@ input, select, textarea, .code-input {
|
||||
}
|
||||
.lang-modal-panel {
|
||||
width: min(480px, 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lang-modal-panel .modal-title,
|
||||
.lang-modal-panel .modal-message,
|
||||
.lang-modal-panel .modal-actions {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.lang-modal-panel .modal-message {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.lang-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.45rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.85rem;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.lang-grid { grid-template-columns: 1fr; }
|
||||
@@ -947,6 +1115,110 @@ html[data-theme="light"] .about-version {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.item-card img,
|
||||
.item-preview-img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
margin-top: 0.65rem;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
.item-preview-hint {
|
||||
margin: 0.4rem 0 0;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.unwrap-state {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 0.75rem;
|
||||
text-align: center;
|
||||
padding: 1.5rem 0.5rem 0.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.unwrap-state.hidden {
|
||||
display: none;
|
||||
}
|
||||
.unwrap-state-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(110, 168, 255, 0.25);
|
||||
background: linear-gradient(160deg, rgba(110, 168, 255, 0.14), rgba(13, 20, 32, 0.35));
|
||||
color: var(--accent-2);
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
html[data-theme="light"] .unwrap-state-icon {
|
||||
background: linear-gradient(160deg, rgba(47, 111, 237, 0.12), rgba(255, 255, 255, 0.9));
|
||||
}
|
||||
.unwrap-state h2 {
|
||||
margin: 0;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 650;
|
||||
max-width: 22rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.unwrap-state .lede {
|
||||
margin: 0;
|
||||
max-width: 28rem;
|
||||
}
|
||||
.unwrap-state .btn {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.image-lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1100;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: max(0.75rem, env(safe-area-inset-top, 0px))
|
||||
max(0.75rem, env(safe-area-inset-right, 0px))
|
||||
max(0.75rem, env(safe-area-inset-bottom, 0px))
|
||||
max(0.75rem, env(safe-area-inset-left, 0px));
|
||||
background: rgba(6, 10, 18, 0.88);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.image-lightbox.hidden {
|
||||
display: none;
|
||||
}
|
||||
.image-lightbox-close {
|
||||
justify-self: end;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
background: rgba(20, 28, 42, 0.7);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.image-lightbox img {
|
||||
max-width: min(100%, 960px);
|
||||
max-height: min(78dvh, 78vh);
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
border-radius: 12px;
|
||||
cursor: default;
|
||||
}
|
||||
.image-lightbox-caption {
|
||||
margin: 0;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
max-width: 90vw;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.items {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
@@ -1000,11 +1272,6 @@ html[data-theme="light"] .item-card pre,
|
||||
html[data-theme="light"] .item-card .item-text-pre {
|
||||
background: rgba(16, 32, 56, 0.05);
|
||||
}
|
||||
.item-card img {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
/* Admin */
|
||||
.admin-body { min-height: 100vh; }
|
||||
@@ -1074,6 +1341,15 @@ html[data-theme="light"] .item-card .item-text-pre {
|
||||
margin: 0;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.admin-top-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.admin-nav-toggle {
|
||||
display: none;
|
||||
}
|
||||
.admin-top-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1099,6 +1375,10 @@ html[data-theme="light"] .item-card .item-text-pre {
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.admin-nav-logout-form {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
}
|
||||
.admin-nav-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -1142,6 +1422,113 @@ html[data-theme="light"] .item-card .item-text-pre {
|
||||
html[data-theme="light"] .admin-nav {
|
||||
box-shadow: 0 8px 24px rgba(20, 40, 70, 0.08);
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.admin-top {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-areas:
|
||||
"brand tools"
|
||||
"nav nav";
|
||||
align-items: center;
|
||||
gap: 0.55rem 0.65rem;
|
||||
padding: 0.7rem 0.65rem;
|
||||
}
|
||||
.admin-top > .brand {
|
||||
grid-area: brand;
|
||||
min-width: 0;
|
||||
}
|
||||
.admin-top-tools {
|
||||
grid-area: tools;
|
||||
}
|
||||
.admin-top .brand-tagline {
|
||||
max-width: 42vw;
|
||||
}
|
||||
.admin-nav-toggle {
|
||||
display: grid;
|
||||
}
|
||||
.admin-nav {
|
||||
grid-area: nav;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
max-height: min(70dvh, 28rem);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
padding: 0.4rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.admin-top.is-nav-open .admin-nav {
|
||||
display: flex;
|
||||
}
|
||||
.admin-nav-link {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
padding: 0.7rem 0.85rem;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
.admin-nav-logout-form {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.admin-nav-logout-form .admin-nav-link {
|
||||
width: 100%;
|
||||
}
|
||||
.admin-shell {
|
||||
padding: 0 0.65rem 2rem;
|
||||
}
|
||||
.admin-shell > h1 {
|
||||
font-size: 1.35rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.admin-tablist {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior-x: contain;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.admin-tab {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.admin-tabpanel {
|
||||
padding: 0.9rem;
|
||||
}
|
||||
.audit-filters {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
align-items: stretch;
|
||||
}
|
||||
.audit-field,
|
||||
.audit-field-grow {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.audit-filter-btn {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 42px;
|
||||
}
|
||||
.audit-table {
|
||||
min-width: 720px;
|
||||
}
|
||||
.admin-login-toggles {
|
||||
top: max(0.75rem, env(safe-area-inset-top, 0px));
|
||||
right: max(0.75rem, env(safe-area-inset-right, 0px));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 861px) {
|
||||
.admin-top > .brand {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.admin-nav {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.danger-page {
|
||||
max-width: 520px;
|
||||
}
|
||||
@@ -1262,12 +1649,9 @@ html[data-theme="light"] .admin-nav {
|
||||
}
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
.stats-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@@ -1643,6 +2027,11 @@ body.modal-open {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1.25rem;
|
||||
/* iOS: безопасные отступы от notch / home indicator */
|
||||
padding: max(0.75rem, env(safe-area-inset-top, 0px))
|
||||
max(0.75rem, env(safe-area-inset-right, 0px))
|
||||
max(0.75rem, env(safe-area-inset-bottom, 0px))
|
||||
max(0.75rem, env(safe-area-inset-left, 0px));
|
||||
}
|
||||
.modal-root.hidden {
|
||||
display: none;
|
||||
@@ -1659,6 +2048,10 @@ html[data-theme="light"] .modal-backdrop {
|
||||
.modal-panel {
|
||||
position: relative;
|
||||
width: min(420px, 100%);
|
||||
max-height: calc(100vh - 1.5rem);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
@@ -1666,6 +2059,17 @@ html[data-theme="light"] .modal-backdrop {
|
||||
padding: 1.35rem 1.4rem 1.25rem;
|
||||
animation: modal-in 0.18s ease-out;
|
||||
}
|
||||
@supports (height: 100dvh) {
|
||||
.modal-panel {
|
||||
max-height: calc(100dvh - 1.5rem);
|
||||
}
|
||||
}
|
||||
/* Список языков: скролл внутри сетки, заголовок и Cancel остаются на экране */
|
||||
.modal-panel.lang-modal-panel {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@keyframes modal-in {
|
||||
from { opacity: 0; transform: translateY(8px) scale(0.98); }
|
||||
to { opacity: 1; transform: none; }
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
(() => {
|
||||
const top = document.getElementById("admin-top");
|
||||
const toggle = document.getElementById("admin-nav-toggle");
|
||||
const nav = document.getElementById("admin-nav");
|
||||
if (!top || !toggle || !nav) return;
|
||||
|
||||
const mq = window.matchMedia("(max-width: 860px)");
|
||||
|
||||
const syncLabel = () => {
|
||||
const open = top.classList.contains("is-nav-open");
|
||||
const key = open ? "admin.nav.closeMenu" : "admin.nav.openMenu";
|
||||
const label = window.WrappedI18n?.t(key) || (open ? "Close menu" : "Menu");
|
||||
toggle.setAttribute("aria-label", label);
|
||||
toggle.setAttribute("title", label);
|
||||
};
|
||||
|
||||
const setOpen = (open) => {
|
||||
top.classList.toggle("is-nav-open", open);
|
||||
toggle.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
const icon = toggle.querySelector("i");
|
||||
if (icon) {
|
||||
icon.className = open ? "fa-solid fa-xmark" : "fa-solid fa-bars";
|
||||
}
|
||||
syncLabel();
|
||||
};
|
||||
|
||||
toggle.addEventListener("click", () => {
|
||||
setOpen(!top.classList.contains("is-nav-open"));
|
||||
});
|
||||
|
||||
nav.addEventListener("click", (e) => {
|
||||
if (!mq.matches) return;
|
||||
if (e.target.closest("a.admin-nav-link")) setOpen(false);
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape" && top.classList.contains("is-nav-open")) {
|
||||
setOpen(false);
|
||||
toggle.focus();
|
||||
}
|
||||
});
|
||||
|
||||
mq.addEventListener("change", () => {
|
||||
if (!mq.matches) setOpen(false);
|
||||
else syncLabel();
|
||||
});
|
||||
|
||||
if (window.WrappedI18n?.onChange) {
|
||||
window.WrappedI18n.onChange(syncLabel);
|
||||
}
|
||||
syncLabel();
|
||||
})();
|
||||
+133
-7
@@ -25,8 +25,15 @@
|
||||
composer: document.querySelector(".composer"),
|
||||
shareLink: document.getElementById("share-link"),
|
||||
shareToken: document.getElementById("share-token"),
|
||||
sharePassword: document.getElementById("share-password"),
|
||||
passwordBlock: document.getElementById("success-password-block"),
|
||||
shareQr: document.getElementById("share-qr"),
|
||||
expiresMeta: document.getElementById("expires-meta"),
|
||||
captchaSlot: document.getElementById("captcha-slot"),
|
||||
sizeMeter: document.getElementById("size-meter"),
|
||||
checkPasswordItem: document.getElementById("check-password-item"),
|
||||
shareNative: document.getElementById("share-native"),
|
||||
downloadQr: document.getElementById("download-qr"),
|
||||
};
|
||||
|
||||
function showError(msg) {
|
||||
@@ -100,6 +107,34 @@
|
||||
document.body.classList.remove("modal-open");
|
||||
}
|
||||
|
||||
function estimatePayloadBytes() {
|
||||
const textBytes = new TextEncoder().encode(els.text?.value || "").length;
|
||||
const fileBytes = files.reduce((sum, f) => sum + (Number(f.size) || 0), 0);
|
||||
return textBytes + fileBytes;
|
||||
}
|
||||
|
||||
function refreshSizeMeter() {
|
||||
if (!els.sizeMeter || !settings) return;
|
||||
const used = estimatePayloadBytes();
|
||||
const max = Number(settings.max_upload_bytes) || 0;
|
||||
if (!max) {
|
||||
els.sizeMeter.textContent = "";
|
||||
els.sizeMeter.classList.remove("is-warn", "is-over");
|
||||
return;
|
||||
}
|
||||
const fmt = window.WrappedUI.formatBytes;
|
||||
let text = t("create.sizeMeter", {
|
||||
used: fmt(used),
|
||||
max: fmt(max),
|
||||
});
|
||||
const near = used > max * 0.85 && used <= max;
|
||||
const over = used > max;
|
||||
if (near) text = `${text} · ${t("create.sizeNearLimit")}`;
|
||||
els.sizeMeter.textContent = text;
|
||||
els.sizeMeter.classList.toggle("is-over", over);
|
||||
els.sizeMeter.classList.toggle("is-warn", near);
|
||||
}
|
||||
|
||||
function renderFiles() {
|
||||
els.fileList.innerHTML = "";
|
||||
files.forEach((f, idx) => {
|
||||
@@ -115,6 +150,7 @@
|
||||
li.appendChild(btn);
|
||||
els.fileList.appendChild(li);
|
||||
});
|
||||
refreshSizeMeter();
|
||||
}
|
||||
|
||||
function addFiles(list) {
|
||||
@@ -207,6 +243,8 @@
|
||||
loadCaptcha();
|
||||
setLanguage("plaintext", { silent: true });
|
||||
refreshHighlight();
|
||||
refreshSizeMeter();
|
||||
syncShareControls();
|
||||
}
|
||||
|
||||
els.dropzone.addEventListener("click", () => els.fileInput.click());
|
||||
@@ -243,6 +281,7 @@
|
||||
|
||||
els.text.addEventListener("input", () => {
|
||||
refreshHighlight();
|
||||
refreshSizeMeter();
|
||||
});
|
||||
els.text.addEventListener("scroll", () => {
|
||||
const pre = els.highlight.parentElement;
|
||||
@@ -260,19 +299,104 @@
|
||||
}
|
||||
});
|
||||
|
||||
function renderShareQr(link) {
|
||||
if (!els.shareQr) return;
|
||||
els.shareQr.innerHTML = "";
|
||||
if (!link || typeof QRCode === "undefined") return;
|
||||
const size = window.matchMedia("(max-width: 860px)").matches ? 200 : 164;
|
||||
// eslint-disable-next-line no-new
|
||||
new QRCode(els.shareQr, {
|
||||
text: link,
|
||||
width: size,
|
||||
height: size,
|
||||
colorDark: "#0d1420",
|
||||
colorLight: "#ffffff",
|
||||
correctLevel: QRCode.CorrectLevel.M,
|
||||
});
|
||||
}
|
||||
|
||||
function syncShareControls() {
|
||||
if (els.shareNative) {
|
||||
const canShare = typeof navigator.share === "function";
|
||||
els.shareNative.classList.toggle("hidden", !canShare);
|
||||
els.shareNative.setAttribute("aria-label", t("create.share"));
|
||||
}
|
||||
if (els.downloadQr) {
|
||||
els.downloadQr.setAttribute("aria-label", t("create.downloadQr"));
|
||||
}
|
||||
}
|
||||
|
||||
function showSuccess({ link, token, password, expiresAt }) {
|
||||
els.shareLink.value = link;
|
||||
els.shareToken.value = token;
|
||||
lastExpiresAt = expiresAt;
|
||||
refreshExpiresMeta();
|
||||
if (password) {
|
||||
els.sharePassword.value = password;
|
||||
els.passwordBlock.classList.remove("hidden");
|
||||
els.checkPasswordItem?.classList.remove("hidden");
|
||||
} else {
|
||||
els.sharePassword.value = "";
|
||||
els.passwordBlock.classList.add("hidden");
|
||||
els.checkPasswordItem?.classList.add("hidden");
|
||||
}
|
||||
renderShareQr(link);
|
||||
syncShareControls();
|
||||
els.composer.classList.add("hidden");
|
||||
els.success.classList.remove("hidden");
|
||||
els.success.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
|
||||
async function copyFrom(input, btn) {
|
||||
await navigator.clipboard.writeText(input.value);
|
||||
try {
|
||||
await window.WrappedUI.copyText(input.value);
|
||||
} catch {
|
||||
await navigator.clipboard.writeText(input.value);
|
||||
}
|
||||
const old = btn.textContent;
|
||||
btn.textContent = t("common.copied");
|
||||
setTimeout(() => (btn.textContent = old), 1200);
|
||||
}
|
||||
|
||||
function downloadQrPng() {
|
||||
if (!els.shareQr) return;
|
||||
const canvas = els.shareQr.querySelector("canvas");
|
||||
const img = els.shareQr.querySelector("img");
|
||||
let href = "";
|
||||
if (canvas && canvas.toDataURL) {
|
||||
href = canvas.toDataURL("image/png");
|
||||
} else if (img?.src) {
|
||||
href = img.src;
|
||||
}
|
||||
if (!href) return;
|
||||
const a = document.createElement("a");
|
||||
a.href = href;
|
||||
a.download = "wrapped-qr.png";
|
||||
a.click();
|
||||
}
|
||||
|
||||
document.getElementById("copy-link").addEventListener("click", () => {
|
||||
copyFrom(els.shareLink, document.getElementById("copy-link"));
|
||||
});
|
||||
document.getElementById("copy-token").addEventListener("click", () => {
|
||||
copyFrom(els.shareToken, document.getElementById("copy-token"));
|
||||
});
|
||||
document.getElementById("copy-password")?.addEventListener("click", () => {
|
||||
copyFrom(els.sharePassword, document.getElementById("copy-password"));
|
||||
});
|
||||
els.shareNative?.addEventListener("click", async () => {
|
||||
if (typeof navigator.share !== "function" || !els.shareLink.value) return;
|
||||
try {
|
||||
await navigator.share({
|
||||
title: t("create.shareTitle"),
|
||||
text: t("create.shareText"),
|
||||
url: els.shareLink.value,
|
||||
});
|
||||
} catch {
|
||||
/* user cancelled or unsupported */
|
||||
}
|
||||
});
|
||||
els.downloadQr?.addEventListener("click", downloadQrPng);
|
||||
document.getElementById("create-another").addEventListener("click", () => {
|
||||
location.reload();
|
||||
});
|
||||
@@ -346,12 +470,12 @@
|
||||
const data = await resp.json();
|
||||
const token = window.WrappedCrypto.buildToken(data.wrap_id, keyB64url);
|
||||
const link = `${location.origin}${data.share_path}#${keyB64url}`;
|
||||
els.shareLink.value = link;
|
||||
els.shareToken.value = token;
|
||||
lastExpiresAt = data.expires_at;
|
||||
refreshExpiresMeta();
|
||||
els.composer.classList.add("hidden");
|
||||
els.success.classList.remove("hidden");
|
||||
showSuccess({
|
||||
link,
|
||||
token,
|
||||
password,
|
||||
expiresAt: data.expires_at,
|
||||
});
|
||||
} catch {
|
||||
showError(t("common.error"));
|
||||
} finally {
|
||||
@@ -380,6 +504,8 @@
|
||||
window.WrappedI18n.onChange(() => {
|
||||
fillTtl();
|
||||
refreshExpiresMeta();
|
||||
refreshSizeMeter();
|
||||
syncShareControls();
|
||||
setLanguage(els.lang.value, { silent: true });
|
||||
refreshHighlight();
|
||||
if (els.langChipText) els.langChipText.textContent = langLabel(els.lang.value);
|
||||
|
||||
+90
-6
@@ -39,6 +39,20 @@
|
||||
"create.successTitle": "Token issued",
|
||||
"create.successWarnTitle": "One-time unwrap",
|
||||
"create.successWarnHint": "After opening, ciphertext is deleted on the server.",
|
||||
"create.passwordProtected": "Password protected",
|
||||
"create.sharePassword": "Password",
|
||||
"create.passwordSeparateHint": "Do not send the password in the same chat as the link.",
|
||||
"create.qrHint": "Scan to open the share link",
|
||||
"create.share": "Share",
|
||||
"create.shareTitle": "Wrapped link",
|
||||
"create.shareText": "One-time secure link from Wrapped",
|
||||
"create.downloadQr": "Download QR",
|
||||
"create.checkLink": "Copy the share link",
|
||||
"create.checkPassword": "Send the password in a separate message",
|
||||
"create.checkExpires": "Note the expiry time",
|
||||
"create.trustKey": "The encryption key lives only in the link #fragment — the server never sees it.",
|
||||
"create.sizeMeter": "≈ {used} / {max}",
|
||||
"create.sizeNearLimit": "Approaching size limit",
|
||||
"create.shareLink": "Share link",
|
||||
"create.token": "Wrapped token",
|
||||
"create.another": "Create another",
|
||||
@@ -78,17 +92,36 @@
|
||||
"unwrap.password": "Password (if set)",
|
||||
"unwrap.submit": "Unwrap",
|
||||
"unwrap.working": "Decrypting…",
|
||||
"unwrap.workingFetch": "Downloading…",
|
||||
"unwrap.workingDecrypt": "Decrypting…",
|
||||
"unwrap.destroyedTitle": "Server copy destroyed",
|
||||
"unwrap.destroyedHint": "Preview lives only in this browser session.",
|
||||
"unwrap.needKey": "Missing encryption key. Open the full share link (with #key) or paste the full wrapped token.",
|
||||
"unwrap.badToken": "Invalid token",
|
||||
"unwrap.badTokenHint": "Paste a full wrapped token or open a valid share link.",
|
||||
"unwrap.badPassword": "Wrong password",
|
||||
"unwrap.badPasswordHint": "Check the password and try again.",
|
||||
"unwrap.passwordRequired": "Password required",
|
||||
"unwrap.passwordRequiredHint": "This wrap is password-protected.",
|
||||
"unwrap.attemptsLeft": "{n} of {max} attempts left",
|
||||
"unwrap.passwordLocked": "Too many wrong passwords",
|
||||
"unwrap.passwordLockedHint": "This wrap has been destroyed.",
|
||||
"unwrap.unavailable": "Unavailable (already used, expired, or invalid).",
|
||||
"unwrap.passwordLockedHint": "This wrap has been destroyed after too many failed attempts.",
|
||||
"unwrap.unavailable": "Unavailable",
|
||||
"unwrap.unavailableHint": "Already used, expired, or invalid.",
|
||||
"unwrap.goneTitle": "This link is no longer available",
|
||||
"unwrap.goneHint": "Wrapped links are one-time and can expire. The ciphertext is gone from the server.",
|
||||
"unwrap.rateLimited": "Too many requests",
|
||||
"unwrap.rateLimitedHint": "Wait a minute and try again.",
|
||||
"unwrap.captchaFailed": "CAPTCHA failed",
|
||||
"unwrap.captchaFailedHint": "Complete the CAPTCHA and try again.",
|
||||
"unwrap.storageError": "Temporary storage error",
|
||||
"unwrap.storageErrorHint": "Try again in a moment.",
|
||||
"unwrap.decryptFailed": "Could not decrypt",
|
||||
"unwrap.decryptFailedHint": "The key in the link may be wrong. Ciphertext was already removed from the server.",
|
||||
"unwrap.createOwn": "Create your own wrap",
|
||||
"unwrap.tapPreview": "Tap image to enlarge",
|
||||
"unwrap.downloadAll": "Download all",
|
||||
"unwrap.trustKey": "The key was only in the link #fragment and was never sent to the server.",
|
||||
"common.copy": "Copy",
|
||||
"common.copied": "Copied",
|
||||
"common.download": "Download",
|
||||
@@ -100,6 +133,8 @@
|
||||
"admin.nav.danger": "Danger",
|
||||
"admin.nav.site": "Site",
|
||||
"admin.nav.logout": "Logout",
|
||||
"admin.nav.openMenu": "Menu",
|
||||
"admin.nav.closeMenu": "Close menu",
|
||||
"admin.brand.tagline": "Admin console",
|
||||
"admin.settings.title": "Settings",
|
||||
"admin.stats.title": "Statistics",
|
||||
@@ -107,14 +142,21 @@
|
||||
"admin.stats.minioTitle": "MinIO (pending ciphertext)",
|
||||
"admin.stats.objects": "object(s)",
|
||||
"admin.stats.dbPending": "DB pending",
|
||||
"admin.stats.unwrappedTitle": "Unwrapped (all time)",
|
||||
"admin.stats.unwrappedTitle": "Successful unwraps",
|
||||
"admin.stats.auditOk": "audit ok",
|
||||
"admin.stats.dbConsumed": "DB consumed",
|
||||
"admin.stats.last24h": "24h",
|
||||
"admin.stats.pendingTitle": "Not unwrapped",
|
||||
"admin.stats.items": "item(s)",
|
||||
"admin.stats.uploadedTitle": "Uploaded (all time)",
|
||||
"admin.stats.passwordBurnsTitle": "Burned by password",
|
||||
"admin.stats.passwordBurnsHint": "Destroyed after too many wrong passwords",
|
||||
"admin.stats.wrapsSection": "Wraps by status",
|
||||
"admin.stats.extraSection": "More",
|
||||
"admin.stats.failReasonsSection": "Unwrap fail reasons (all time)",
|
||||
"admin.stats.failReasons24hSection": "Unwrap fail reasons (24h)",
|
||||
"admin.stats.col.reason": "Reason",
|
||||
"admin.stats.noFailReasons": "No failed unwraps yet.",
|
||||
"admin.stats.col.status": "Status",
|
||||
"admin.stats.col.count": "Count",
|
||||
"admin.stats.col.size": "Size",
|
||||
@@ -257,6 +299,20 @@
|
||||
"create.successTitle": "Токен выдан",
|
||||
"create.successWarnTitle": "Расшифруй один раз",
|
||||
"create.successWarnHint": "После открытия ciphertext удаляется на сервере.",
|
||||
"create.passwordProtected": "Защищено паролем",
|
||||
"create.sharePassword": "Пароль",
|
||||
"create.passwordSeparateHint": "Не отправляйте пароль в той же переписке, что и ссылку.",
|
||||
"create.qrHint": "Отсканируйте, чтобы открыть ссылку",
|
||||
"create.share": "Поделиться",
|
||||
"create.shareTitle": "Ссылка Wrapped",
|
||||
"create.shareText": "Одноразовая защищённая ссылка из Wrapped",
|
||||
"create.downloadQr": "Скачать QR",
|
||||
"create.checkLink": "Скопируйте ссылку",
|
||||
"create.checkPassword": "Отправьте пароль отдельным сообщением",
|
||||
"create.checkExpires": "Учтите срок действия",
|
||||
"create.trustKey": "Ключ шифрования только во фрагменте ссылки #… — сервер его не видит.",
|
||||
"create.sizeMeter": "≈ {used} / {max}",
|
||||
"create.sizeNearLimit": "Близко к лимиту размера",
|
||||
"create.shareLink": "Ссылка",
|
||||
"create.token": "Wrapped-токен",
|
||||
"create.another": "Создать ещё",
|
||||
@@ -296,17 +352,36 @@
|
||||
"unwrap.password": "Пароль (если задан)",
|
||||
"unwrap.submit": "Расшифровать",
|
||||
"unwrap.working": "Расшифровка…",
|
||||
"unwrap.workingFetch": "Скачивание…",
|
||||
"unwrap.workingDecrypt": "Расшифровка…",
|
||||
"unwrap.destroyedTitle": "Копия на сервере уничтожена",
|
||||
"unwrap.destroyedHint": "Превью только в этой сессии браузера.",
|
||||
"unwrap.needKey": "Нет ключа шифрования. Открой полную ссылку (с #key) или вставь полный wrapped-токен.",
|
||||
"unwrap.badToken": "Неверный токен",
|
||||
"unwrap.badTokenHint": "Вставьте полный wrapped-токен или откройте корректную ссылку.",
|
||||
"unwrap.badPassword": "Неверный пароль",
|
||||
"unwrap.badPasswordHint": "Проверьте пароль и попробуйте снова.",
|
||||
"unwrap.passwordRequired": "Нужен пароль",
|
||||
"unwrap.passwordRequiredHint": "Этот wrap защищён паролем.",
|
||||
"unwrap.attemptsLeft": "Осталось попыток: {n} из {max}",
|
||||
"unwrap.passwordLocked": "Слишком много неверных паролей",
|
||||
"unwrap.passwordLockedHint": "Этот wrap уничтожен.",
|
||||
"unwrap.unavailable": "Недоступно (уже использовано, истекло или неверно).",
|
||||
"unwrap.passwordLockedHint": "Wrap уничтожен после исчерпания попыток.",
|
||||
"unwrap.unavailable": "Недоступно",
|
||||
"unwrap.unavailableHint": "Уже использовано, истекло или неверно.",
|
||||
"unwrap.goneTitle": "Ссылка больше недоступна",
|
||||
"unwrap.goneHint": "Wrapped-ссылки одноразовые и могут истекать. Ciphertext уже удалён с сервера.",
|
||||
"unwrap.rateLimited": "Слишком много запросов",
|
||||
"unwrap.rateLimitedHint": "Подождите минуту и попробуйте снова.",
|
||||
"unwrap.captchaFailed": "CAPTCHA не пройдена",
|
||||
"unwrap.captchaFailedHint": "Пройдите CAPTCHA и попробуйте снова.",
|
||||
"unwrap.storageError": "Временная ошибка хранилища",
|
||||
"unwrap.storageErrorHint": "Попробуйте чуть позже.",
|
||||
"unwrap.decryptFailed": "Не удалось расшифровать",
|
||||
"unwrap.decryptFailedHint": "Ключ в ссылке может быть неверным. Ciphertext уже удалён с сервера.",
|
||||
"unwrap.createOwn": "Создать свой wrap",
|
||||
"unwrap.tapPreview": "Нажмите на изображение, чтобы увеличить",
|
||||
"unwrap.downloadAll": "Скачать всё",
|
||||
"unwrap.trustKey": "Ключ был только во фрагменте ссылки #… и не уходил на сервер.",
|
||||
"common.copy": "Копировать",
|
||||
"common.copied": "Скопировано",
|
||||
"common.download": "Скачать",
|
||||
@@ -318,6 +393,8 @@
|
||||
"admin.nav.danger": "Опасная зона",
|
||||
"admin.nav.site": "Сайт",
|
||||
"admin.nav.logout": "Выйти",
|
||||
"admin.nav.openMenu": "Меню",
|
||||
"admin.nav.closeMenu": "Закрыть меню",
|
||||
"admin.brand.tagline": "Консоль администратора",
|
||||
"admin.settings.title": "Настройки",
|
||||
"admin.stats.title": "Статистика",
|
||||
@@ -325,14 +402,21 @@
|
||||
"admin.stats.minioTitle": "MinIO (нерасшифрованный ciphertext)",
|
||||
"admin.stats.objects": "объект(ов)",
|
||||
"admin.stats.dbPending": "в БД pending",
|
||||
"admin.stats.unwrappedTitle": "Расшифровано (за всё время)",
|
||||
"admin.stats.unwrappedTitle": "Успешные unwrap",
|
||||
"admin.stats.auditOk": "audit ok",
|
||||
"admin.stats.dbConsumed": "в БД consumed",
|
||||
"admin.stats.last24h": "за 24ч",
|
||||
"admin.stats.pendingTitle": "Не расшифровано",
|
||||
"admin.stats.items": "элемент(ов)",
|
||||
"admin.stats.uploadedTitle": "Загружено (за всё время)",
|
||||
"admin.stats.passwordBurnsTitle": "Сожжено паролем",
|
||||
"admin.stats.passwordBurnsHint": "Уничтожено после слишком многих неверных паролей",
|
||||
"admin.stats.wrapsSection": "Wraps по статусу",
|
||||
"admin.stats.extraSection": "Ещё",
|
||||
"admin.stats.failReasonsSection": "Причины ошибок unwrap (всё время)",
|
||||
"admin.stats.failReasons24hSection": "Причины ошибок unwrap (24ч)",
|
||||
"admin.stats.col.reason": "Причина",
|
||||
"admin.stats.noFailReasons": "Пока нет неудачных unwrap.",
|
||||
"admin.stats.col.status": "Статус",
|
||||
"admin.stats.col.count": "Кол-во",
|
||||
"admin.stats.col.size": "Размер",
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
(() => {
|
||||
const KEY = "wrapped.theme";
|
||||
|
||||
function systemTheme() {
|
||||
return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
|
||||
}
|
||||
|
||||
function preferred() {
|
||||
return localStorage.getItem(KEY) || "dark";
|
||||
const stored = localStorage.getItem(KEY);
|
||||
if (stored === "light" || stored === "dark") return stored;
|
||||
return systemTheme();
|
||||
}
|
||||
|
||||
function apply(theme) {
|
||||
@@ -16,7 +22,8 @@
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
const next = preferred() === "dark" ? "light" : "dark";
|
||||
const current = document.documentElement.getAttribute("data-theme") || preferred();
|
||||
const next = current === "dark" ? "light" : "dark";
|
||||
localStorage.setItem(KEY, next);
|
||||
apply(next);
|
||||
}
|
||||
|
||||
+18
-2
@@ -8,10 +8,13 @@
|
||||
busyEl.className = "busy-overlay hidden";
|
||||
busyEl.setAttribute("aria-live", "polite");
|
||||
busyEl.setAttribute("aria-busy", "true");
|
||||
const favicon =
|
||||
document.querySelector('link[rel="icon"][type="image/svg+xml"]')?.href ||
|
||||
"/static/favicon.svg";
|
||||
busyEl.innerHTML = `
|
||||
<div class="busy-card">
|
||||
<span class="busy-logo" aria-hidden="true">
|
||||
<img src="/static/favicon.svg" alt="" width="48" height="48" />
|
||||
<img src="${favicon}" alt="" width="48" height="48" />
|
||||
</span>
|
||||
<p class="busy-text" data-busy-label></p>
|
||||
</div>
|
||||
@@ -48,5 +51,18 @@
|
||||
return `${gb.toFixed(2)} GB`;
|
||||
}
|
||||
|
||||
window.WrappedUI = { showBusy, hideBusy, formatBytes };
|
||||
function hapticLight() {
|
||||
try {
|
||||
navigator.vibrate?.(12);
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
async function copyText(text) {
|
||||
await navigator.clipboard.writeText(text || "");
|
||||
hapticLight();
|
||||
}
|
||||
|
||||
window.WrappedUI = { showBusy, hideBusy, formatBytes, hapticLight, copyText };
|
||||
})();
|
||||
|
||||
+248
-23
@@ -1,6 +1,7 @@
|
||||
(() => {
|
||||
const t = (k, vars) => window.WrappedI18n.t(k, vars);
|
||||
let settings = null;
|
||||
const objectUrls = [];
|
||||
|
||||
const els = {
|
||||
token: document.getElementById("token-input"),
|
||||
@@ -11,11 +12,24 @@
|
||||
errorHint: document.getElementById("form-error-hint"),
|
||||
errorAttempts: document.getElementById("form-error-attempts"),
|
||||
form: document.getElementById("unwrap-form"),
|
||||
head: document.getElementById("unwrap-head"),
|
||||
state: document.getElementById("unwrap-state"),
|
||||
stateTitle: document.getElementById("unwrap-state-title"),
|
||||
stateHint: document.getElementById("unwrap-state-hint"),
|
||||
stateFa: document.getElementById("unwrap-state-fa"),
|
||||
result: document.getElementById("result-panel"),
|
||||
items: document.getElementById("items"),
|
||||
captchaSlot: document.getElementById("captcha-slot"),
|
||||
lightbox: document.getElementById("image-lightbox"),
|
||||
lightboxImg: document.getElementById("lightbox-img"),
|
||||
lightboxCaption: document.getElementById("lightbox-caption"),
|
||||
lightboxClose: document.getElementById("lightbox-close"),
|
||||
downloadAll: document.getElementById("download-all"),
|
||||
};
|
||||
|
||||
let lastPack = null;
|
||||
let lastWrapId = null;
|
||||
|
||||
function showError(title, hint, attempts) {
|
||||
if (!els.error) return;
|
||||
if (els.errorTitle) els.errorTitle.textContent = title || "";
|
||||
@@ -37,7 +51,6 @@
|
||||
els.errorAttempts.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
// Fallback if structured nodes missing
|
||||
if (!els.errorTitle) els.error.textContent = [title, hint, attempts].filter(Boolean).join(" ");
|
||||
els.error.classList.remove("hidden");
|
||||
}
|
||||
@@ -56,6 +69,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
function showState({ title, hint, icon = "fa-link-slash" }) {
|
||||
clearError();
|
||||
els.form?.classList.add("hidden");
|
||||
els.head?.classList.add("hidden");
|
||||
els.result?.classList.add("hidden");
|
||||
if (els.stateFa) els.stateFa.className = `fa-solid ${icon}`;
|
||||
if (els.stateTitle) els.stateTitle.textContent = title || "";
|
||||
if (els.stateHint) els.stateHint.textContent = hint || "";
|
||||
els.state?.classList.remove("hidden");
|
||||
}
|
||||
|
||||
function attemptsLabel(detail) {
|
||||
const n = Number(detail?.attempts_remaining);
|
||||
const max = Number(detail?.attempts_max);
|
||||
@@ -63,6 +87,41 @@
|
||||
return t("unwrap.attemptsLeft", { n, max });
|
||||
}
|
||||
|
||||
function trackUrl(url) {
|
||||
objectUrls.push(url);
|
||||
return url;
|
||||
}
|
||||
|
||||
function revokeAllUrls() {
|
||||
while (objectUrls.length) {
|
||||
try {
|
||||
URL.revokeObjectURL(objectUrls.pop());
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function closeLightbox() {
|
||||
if (!els.lightbox) return;
|
||||
els.lightbox.classList.add("hidden");
|
||||
document.body.classList.remove("modal-open");
|
||||
if (els.lightboxImg) {
|
||||
els.lightboxImg.removeAttribute("src");
|
||||
els.lightboxImg.alt = "";
|
||||
}
|
||||
if (els.lightboxCaption) els.lightboxCaption.textContent = "";
|
||||
}
|
||||
|
||||
function openLightbox(src, caption) {
|
||||
if (!els.lightbox || !els.lightboxImg) return;
|
||||
els.lightboxImg.src = src;
|
||||
els.lightboxImg.alt = caption || "";
|
||||
if (els.lightboxCaption) els.lightboxCaption.textContent = caption || "";
|
||||
els.lightbox.classList.remove("hidden");
|
||||
document.body.classList.add("modal-open");
|
||||
}
|
||||
|
||||
function loadCaptcha() {
|
||||
els.captchaSlot.innerHTML = "";
|
||||
const provider = settings.captcha_provider;
|
||||
@@ -105,10 +164,11 @@
|
||||
|
||||
function downloadBlob(name, blob) {
|
||||
const a = document.createElement("a");
|
||||
a.href = URL.createObjectURL(blob);
|
||||
const url = URL.createObjectURL(blob);
|
||||
a.href = url;
|
||||
a.download = name;
|
||||
a.click();
|
||||
setTimeout(() => URL.revokeObjectURL(a.href), 2000);
|
||||
setTimeout(() => URL.revokeObjectURL(url), 2000);
|
||||
}
|
||||
|
||||
function makeDownloadBtn(onClick) {
|
||||
@@ -120,6 +180,12 @@
|
||||
return btn;
|
||||
}
|
||||
|
||||
function focusPassword({ select = false } = {}) {
|
||||
if (!els.password) return;
|
||||
els.password.focus();
|
||||
if (select) els.password.select?.();
|
||||
}
|
||||
|
||||
function makeCopyBtn(getText) {
|
||||
const btn = document.createElement("button");
|
||||
btn.className = "btn copy-btn";
|
||||
@@ -129,7 +195,11 @@
|
||||
btn.innerHTML = label();
|
||||
btn.addEventListener("click", async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(getText() || "");
|
||||
if (window.WrappedUI?.copyText) {
|
||||
await window.WrappedUI.copyText(getText() || "");
|
||||
} else {
|
||||
await navigator.clipboard.writeText(getText() || "");
|
||||
}
|
||||
btn.innerHTML = `<i class="fa-solid fa-check" aria-hidden="true"></i><span>${t("common.copied")}</span>`;
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = label();
|
||||
@@ -141,7 +211,71 @@
|
||||
return btn;
|
||||
}
|
||||
|
||||
function itemToBlob(item) {
|
||||
if (item.type === "text") {
|
||||
const lang = item.language || "plaintext";
|
||||
return {
|
||||
name: `wrapped-${lang}.txt`,
|
||||
blob: new Blob([item.content || ""], { type: "text/plain" }),
|
||||
};
|
||||
}
|
||||
if (item.type === "file") {
|
||||
const bytes = window.WrappedCrypto.base64ToBytes(item.data_b64);
|
||||
const mime = item.mime || "application/octet-stream";
|
||||
return {
|
||||
name: item.name || "file",
|
||||
blob: new Blob([bytes], { type: mime }),
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function uniqueZipName(name, used) {
|
||||
let base = name || "file";
|
||||
if (!used.has(base)) {
|
||||
used.add(base);
|
||||
return base;
|
||||
}
|
||||
const dot = base.lastIndexOf(".");
|
||||
const stem = dot > 0 ? base.slice(0, dot) : base;
|
||||
const ext = dot > 0 ? base.slice(dot) : "";
|
||||
let i = 2;
|
||||
let candidate = `${stem}-${i}${ext}`;
|
||||
while (used.has(candidate)) {
|
||||
i += 1;
|
||||
candidate = `${stem}-${i}${ext}`;
|
||||
}
|
||||
used.add(candidate);
|
||||
return candidate;
|
||||
}
|
||||
|
||||
async function downloadAllZip() {
|
||||
if (!lastPack || typeof JSZip === "undefined") return;
|
||||
const items = lastPack.items || [];
|
||||
if (items.length < 2) return;
|
||||
const zip = new JSZip();
|
||||
const used = new Set();
|
||||
for (const item of items) {
|
||||
const entry = itemToBlob(item);
|
||||
if (!entry) continue;
|
||||
zip.file(uniqueZipName(entry.name, used), entry.blob);
|
||||
}
|
||||
const blob = await zip.generateAsync({ type: "blob" });
|
||||
const id = lastWrapId || "pack";
|
||||
downloadBlob(`wrapped-${id}.zip`, blob);
|
||||
}
|
||||
|
||||
function syncDownloadAll() {
|
||||
if (!els.downloadAll) return;
|
||||
const count = lastPack?.items?.length || 0;
|
||||
const show = count >= 2 && typeof JSZip !== "undefined";
|
||||
els.downloadAll.classList.toggle("hidden", !show);
|
||||
els.downloadAll.setAttribute("aria-label", t("unwrap.downloadAll"));
|
||||
}
|
||||
|
||||
function renderPackage(pack) {
|
||||
revokeAllUrls();
|
||||
lastPack = pack;
|
||||
els.items.innerHTML = "";
|
||||
for (const item of pack.items || []) {
|
||||
const card = document.createElement("div");
|
||||
@@ -151,7 +285,16 @@
|
||||
const text = item.content || "";
|
||||
const head = document.createElement("div");
|
||||
head.className = "item-card-head";
|
||||
head.innerHTML = `<div><strong>text</strong> · <span class="mono">${lang}</span></div>`;
|
||||
const meta = document.createElement("div");
|
||||
const strong = document.createElement("strong");
|
||||
strong.textContent = "text";
|
||||
meta.appendChild(strong);
|
||||
meta.appendChild(document.createTextNode(" · "));
|
||||
const langEl = document.createElement("span");
|
||||
langEl.className = "mono";
|
||||
langEl.textContent = lang;
|
||||
meta.appendChild(langEl);
|
||||
head.appendChild(meta);
|
||||
const actions = document.createElement("div");
|
||||
actions.className = "item-card-actions";
|
||||
actions.appendChild(makeCopyBtn(() => text));
|
||||
@@ -170,28 +313,86 @@
|
||||
window.WrappedHighlight.highlightElement(code, text, lang);
|
||||
} else if (item.type === "file") {
|
||||
const bytes = window.WrappedCrypto.base64ToBytes(item.data_b64);
|
||||
const blob = new Blob([bytes], { type: item.mime || "application/octet-stream" });
|
||||
const mime = item.mime || "application/octet-stream";
|
||||
const blob = new Blob([bytes], { type: mime });
|
||||
const name = item.name || "file";
|
||||
const head = document.createElement("div");
|
||||
head.className = "item-card-head";
|
||||
head.innerHTML = `<div><strong>${item.name}</strong> · <span class="mono">${item.mime}</span> · ${window.WrappedUI.formatBytes(bytes.length)}</div>`;
|
||||
head.appendChild(makeDownloadBtn(() => downloadBlob(item.name || "file", blob)));
|
||||
const meta = document.createElement("div");
|
||||
const strong = document.createElement("strong");
|
||||
strong.textContent = name;
|
||||
meta.appendChild(strong);
|
||||
meta.appendChild(document.createTextNode(" · "));
|
||||
const mimeEl = document.createElement("span");
|
||||
mimeEl.className = "mono";
|
||||
mimeEl.textContent = mime;
|
||||
meta.appendChild(mimeEl);
|
||||
meta.appendChild(document.createTextNode(` · ${window.WrappedUI.formatBytes(bytes.length)}`));
|
||||
head.appendChild(meta);
|
||||
head.appendChild(makeDownloadBtn(() => downloadBlob(name, blob)));
|
||||
card.appendChild(head);
|
||||
if ((item.mime || "").startsWith("image/")) {
|
||||
if (mime.startsWith("image/")) {
|
||||
const url = trackUrl(URL.createObjectURL(blob));
|
||||
const img = document.createElement("img");
|
||||
img.alt = item.name;
|
||||
img.src = URL.createObjectURL(blob);
|
||||
img.alt = name;
|
||||
img.src = url;
|
||||
img.className = "item-preview-img";
|
||||
img.loading = "lazy";
|
||||
img.addEventListener("click", () => openLightbox(url, name));
|
||||
card.appendChild(img);
|
||||
const tip = document.createElement("p");
|
||||
tip.className = "hint item-preview-hint";
|
||||
tip.textContent = t("unwrap.tapPreview");
|
||||
card.appendChild(tip);
|
||||
}
|
||||
}
|
||||
els.items.appendChild(card);
|
||||
}
|
||||
syncDownloadAll();
|
||||
}
|
||||
|
||||
function mapHttpError(resp, detail) {
|
||||
if (resp.status === 429 || detail === "rate_limited") {
|
||||
showError(t("unwrap.rateLimited"), t("unwrap.rateLimitedHint"));
|
||||
return;
|
||||
}
|
||||
if (detail === "captcha_failed" || resp.status === 400) {
|
||||
if (detail === "captcha_failed") {
|
||||
showError(t("unwrap.captchaFailed"), t("unwrap.captchaFailedHint"));
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (resp.status === 500 || detail === "storage_error") {
|
||||
showError(t("unwrap.storageError"), t("unwrap.storageErrorHint"));
|
||||
return;
|
||||
}
|
||||
if (resp.status === 410 || detail === "unavailable") {
|
||||
showState({
|
||||
title: t("unwrap.goneTitle"),
|
||||
hint: t("unwrap.goneHint"),
|
||||
icon: "fa-link-slash",
|
||||
});
|
||||
return;
|
||||
}
|
||||
showError(t("unwrap.unavailable"), t("unwrap.unavailableHint"));
|
||||
}
|
||||
|
||||
els.lightboxClose?.addEventListener("click", closeLightbox);
|
||||
els.lightbox?.addEventListener("click", (e) => {
|
||||
if (e.target === els.lightbox) closeLightbox();
|
||||
});
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape" && els.lightbox && !els.lightbox.classList.contains("hidden")) {
|
||||
closeLightbox();
|
||||
}
|
||||
});
|
||||
window.addEventListener("pagehide", revokeAllUrls);
|
||||
|
||||
els.btn.addEventListener("click", async () => {
|
||||
clearError();
|
||||
const parsed = window.WrappedCrypto.parseToken(els.token.value);
|
||||
if (!parsed) {
|
||||
showError(t("unwrap.unavailable"));
|
||||
showError(t("unwrap.badToken"), t("unwrap.badTokenHint"));
|
||||
return;
|
||||
}
|
||||
const key = resolveKey(parsed);
|
||||
@@ -201,7 +402,7 @@
|
||||
}
|
||||
|
||||
els.btn.disabled = true;
|
||||
window.WrappedUI.showBusy(t("unwrap.working"));
|
||||
window.WrappedUI.showBusy(t("unwrap.workingFetch"));
|
||||
try {
|
||||
const resp = await fetch(`/api/v1/wraps/${encodeURIComponent(parsed.wrapId)}/unwrap`, {
|
||||
method: "POST",
|
||||
@@ -216,10 +417,11 @@
|
||||
const detail = err.detail;
|
||||
if (detail && typeof detail === "object") {
|
||||
if (detail.code === "password_locked") {
|
||||
showError(
|
||||
t("unwrap.passwordLocked"),
|
||||
t("unwrap.passwordLockedHint")
|
||||
);
|
||||
showState({
|
||||
title: t("unwrap.passwordLocked"),
|
||||
hint: t("unwrap.passwordLockedHint"),
|
||||
icon: "fa-shield-halved",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (detail.code === "password_required") {
|
||||
@@ -228,7 +430,7 @@
|
||||
t("unwrap.passwordRequiredHint"),
|
||||
attemptsLabel(detail)
|
||||
);
|
||||
els.password?.focus();
|
||||
focusPassword({ select: true });
|
||||
return;
|
||||
}
|
||||
if (detail.code === "bad_password") {
|
||||
@@ -237,19 +439,21 @@
|
||||
t("unwrap.badPasswordHint"),
|
||||
attemptsLabel(detail)
|
||||
);
|
||||
els.password?.focus();
|
||||
els.password?.select?.();
|
||||
focusPassword({ select: true });
|
||||
return;
|
||||
}
|
||||
}
|
||||
showError(t("unwrap.badPassword"), t("unwrap.badPasswordHint"));
|
||||
focusPassword({ select: true });
|
||||
return;
|
||||
}
|
||||
if (!resp.ok) {
|
||||
showError(t("unwrap.unavailable"));
|
||||
const err = await resp.json().catch(() => ({}));
|
||||
mapHttpError(resp, err.detail);
|
||||
return;
|
||||
}
|
||||
const data = await resp.json();
|
||||
window.WrappedUI.showBusy(t("unwrap.workingDecrypt"));
|
||||
const ciphertext = window.WrappedCrypto.base64ToBytes(data.ciphertext_b64);
|
||||
let pack;
|
||||
try {
|
||||
@@ -261,17 +465,22 @@
|
||||
} catch (err) {
|
||||
if (err.message === "password_required") {
|
||||
showError(t("unwrap.passwordRequired"), t("unwrap.passwordRequiredHint"));
|
||||
focusPassword({ select: true });
|
||||
return;
|
||||
}
|
||||
if (err.message === "bad_password") {
|
||||
showError(t("unwrap.badPassword"), t("unwrap.badPasswordHint"));
|
||||
focusPassword({ select: true });
|
||||
return;
|
||||
}
|
||||
showError(t("common.error"));
|
||||
showError(t("unwrap.decryptFailed"), t("unwrap.decryptFailedHint"));
|
||||
return;
|
||||
}
|
||||
lastWrapId = parsed.wrapId;
|
||||
renderPackage(pack);
|
||||
els.form.classList.add("hidden");
|
||||
els.head?.classList.add("hidden");
|
||||
els.state?.classList.add("hidden");
|
||||
els.result.classList.remove("hidden");
|
||||
history.replaceState(null, "", location.pathname);
|
||||
} catch {
|
||||
@@ -282,6 +491,23 @@
|
||||
}
|
||||
});
|
||||
|
||||
els.password?.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
els.btn?.click();
|
||||
}
|
||||
});
|
||||
|
||||
els.downloadAll?.addEventListener("click", () => {
|
||||
downloadAllZip().catch(() => {});
|
||||
});
|
||||
|
||||
if (window.WrappedI18n.onChange) {
|
||||
window.WrappedI18n.onChange(() => {
|
||||
syncDownloadAll();
|
||||
});
|
||||
}
|
||||
|
||||
async function init() {
|
||||
const resp = await fetch("/api/v1/settings");
|
||||
settings = await resp.json();
|
||||
@@ -295,4 +521,3 @@
|
||||
|
||||
init().catch(() => showError(t("common.error")));
|
||||
})();
|
||||
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "Wrapped",
|
||||
"short_name": "Wrapped",
|
||||
"description": "Zero-knowledge one-time encrypted drop for text and files.",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#0b1020",
|
||||
"theme_color": "#0b1020",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/static/favicon.svg",
|
||||
"sizes": "any",
|
||||
"type": "image/svg+xml",
|
||||
"purpose": "any"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user