266 lines
21 KiB
JavaScript
266 lines
21 KiB
JavaScript
import { installGlobalDiagnostics, logInfo } from "@rustpad/logger";
|
||
installGlobalDiagnostics();
|
||
|
||
import { bindIdentityDialog, handleAccountConfirmationToken, handleResetToken, logoutCurrentSession, validateCurrentSession } from "@rustpad/auth-ui";
|
||
import { getAuthToken, setAccessToken } from "@rustpad/session";
|
||
import { api } from "@rustpad/api";
|
||
import { copyText } from "@rustpad/clipboard";
|
||
|
||
function slugify(value, fallback) {
|
||
return value.toLowerCase().normalize("NFKD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || fallback;
|
||
}
|
||
|
||
function bindPreview(inputId, previewId, countId, prefix, fallback) {
|
||
const input = document.querySelector(inputId);
|
||
const preview = document.querySelector(previewId);
|
||
const count = document.querySelector(countId);
|
||
const update = () => {
|
||
count.textContent = `${input.value.length}/80`;
|
||
preview.textContent = `${prefix}${slugify(input.value, fallback)}`;
|
||
};
|
||
input.addEventListener("input", update);
|
||
update();
|
||
}
|
||
|
||
function setBusy(button, busy, idleText, busyText) {
|
||
button.disabled = busy;
|
||
button.textContent = busy ? busyText : idleText;
|
||
}
|
||
|
||
bindPreview("#pad-name", "#pad-slug-preview", "#pad-name-count", "/p/", "note");
|
||
bindPreview("#workspace-name", "#workspace-slug-preview", "#workspace-name-count", "/w/", "workspace");
|
||
|
||
document.querySelectorAll(".password-toggle").forEach((button) => {
|
||
button.addEventListener("click", () => {
|
||
const input = document.getElementById(button.dataset.target);
|
||
const show = input.type === "password";
|
||
input.type = show ? "text" : "password";
|
||
button.textContent = show ? "Hide" : "Show";
|
||
});
|
||
});
|
||
|
||
document.querySelector("#pad-form").addEventListener("submit", async (event) => {
|
||
event.preventDefault();
|
||
const name = document.querySelector("#pad-name");
|
||
const password = document.querySelector("#pad-password");
|
||
const button = document.querySelector("#pad-button");
|
||
const error = document.querySelector("#pad-error");
|
||
error.textContent = "";
|
||
setBusy(button, true, "Create note", "Creating…");
|
||
try {
|
||
const payload = { name: name.value.trim() };
|
||
if (password.value) payload.password = password.value;
|
||
const result = await api("/api/pads", { method: "POST", headers: authHeaders(), body: JSON.stringify(payload) });
|
||
if (password.value) { const grant = await api("/api/access-token", { method: "POST", body: JSON.stringify({ kind: "pad", slug: result.slug, password: password.value }) }); setAccessToken("pad", result.slug, grant.access_token); }
|
||
window.location.assign(`${result.url}?view=split&mode=markdown`);
|
||
} catch (requestError) {
|
||
error.textContent = requestError.message;
|
||
} finally {
|
||
setBusy(button, false, "Create note", "Creating…");
|
||
}
|
||
});
|
||
|
||
document.querySelector("#workspace-form").addEventListener("submit", async (event) => {
|
||
event.preventDefault();
|
||
const name = document.querySelector("#workspace-name");
|
||
const password = document.querySelector("#workspace-password");
|
||
const button = document.querySelector("#workspace-button");
|
||
const error = document.querySelector("#workspace-error");
|
||
error.textContent = "";
|
||
setBusy(button, true, "Create workspace", "Creating…");
|
||
try {
|
||
const payload = { name: name.value.trim() };
|
||
if (password.value) payload.password = password.value;
|
||
const result = await api("/api/workspaces", { method: "POST", headers: authHeaders(), body: JSON.stringify(payload) });
|
||
if (password.value) { const grant = await api("/api/access-token", { method: "POST", body: JSON.stringify({ kind: "workspace", slug: result.slug, password: password.value }) }); setAccessToken("workspace", result.slug, grant.access_token); }
|
||
window.location.assign(result.url);
|
||
} catch (requestError) {
|
||
error.textContent = requestError.message;
|
||
} finally {
|
||
setBusy(button, false, "Create workspace", "Creating…");
|
||
}
|
||
});
|
||
|
||
handleAccountConfirmationToken();
|
||
handleResetToken();
|
||
|
||
const identityDialog = document.querySelector("#identity-dialog");
|
||
const guestAccount = document.querySelector("#footer-account-guest");
|
||
const userAccount = document.querySelector("#footer-account-user");
|
||
const userLabel = document.querySelector("#footer-user-label");
|
||
const registerLink = document.querySelector("#footer-register");
|
||
const registrationEnabled = document.body.dataset.registrationEnabled === "true";
|
||
const resourcesDialog = document.querySelector("#resources-dialog");
|
||
const resourcesList = document.querySelector("#resources-list");
|
||
const resourcesError = document.querySelector("#resources-error");
|
||
|
||
function authHeaders() { const token = getAuthToken(); return token ? { Authorization: `Bearer ${token}` } : {}; }
|
||
function escapeHtml(value) { const node = document.createElement("div"); node.textContent = String(value ?? ""); return node.innerHTML; }
|
||
function shareExpiry(hours, forever) { if (forever) return null; const value = Number(hours); if (!Number.isFinite(value) || value <= 0 || value > 87600) throw new Error("Enter a validity between 1 and 87600 hours."); return new Date(Date.now() + value * 3600000).toISOString(); }
|
||
function formatShareExpiry(value) { if (!value) return "Never expires"; const date = new Date(value); return Number.isNaN(date.getTime()) ? value : `Expires ${date.toLocaleString()}`; }
|
||
async function loadResources() {
|
||
resourcesError.textContent = ""; resourcesList.innerHTML = "<p>Loading…</p>";
|
||
try {
|
||
const data = await api("/api/auth/resources", { headers: authHeaders() });
|
||
const items = [...data.workspaces.map(item => ({ ...item, kind: "workspace", url: `/w/${item.slug}` })), ...data.pads.map(item => ({ ...item, kind: "pad", url: `/p/${item.slug}` }))];
|
||
resourcesList.innerHTML = items.length ? "" : "<p>No assigned items yet.</p>";
|
||
for (const item of items) {
|
||
const row = document.createElement("article");
|
||
row.className = "resource-row";
|
||
const sharedLabel = !item.owned ? `<span class="resource-shared-badge">Shared by ${escapeHtml(item.shared_by || "another user")}</span>` : "";
|
||
const permissionLabel = item.permission === "rw" ? "Read and write" : "Read only";
|
||
row.classList.toggle("resource-row--shared", !Boolean(item.owned));
|
||
row.innerHTML = `<div class="resource-main"><div class="resource-copy"><div class="resource-title-line"><a href="${item.url}">${escapeHtml(item.title)}</a>${sharedLabel}</div><small>${item.kind === "workspace" ? "Workspace" : "Note"}${item.private ? " · private" : ""}${!item.owned ? ` · ${permissionLabel}` : item.protected ? " · password protected" : ""}</small></div><div class="resource-actions">${item.owned ? `<button class="action-button action-button--secondary compact-button" type="button" data-privacy>${item.private ? "Make public" : "Make private"}</button><button class="action-button action-button--primary compact-button" type="button" data-share>Share</button><button class="action-button action-button--secondary compact-button" type="button" data-password>Change password</button><button class="action-button action-button--danger compact-button" type="button" data-delete>Delete</button>` : ""}</div></div><div class="resource-inline" data-inline hidden></div>`;
|
||
|
||
const inline = row.querySelector("[data-inline]");
|
||
const closeInline = () => { inline.hidden = true; inline.innerHTML = ""; };
|
||
const setInlineMessage = (text, type = "") => {
|
||
const message = inline.querySelector("[data-inline-message]");
|
||
if (!message) return;
|
||
message.className = `form-message resource-inline-message ${type}`.trim();
|
||
message.textContent = text;
|
||
};
|
||
|
||
row.querySelector("[data-privacy]")?.addEventListener("click", async () => {
|
||
try { await api("/api/auth/resources/privacy", { method: "POST", headers: authHeaders(), body: JSON.stringify({ kind: item.kind, slug: item.slug, private: !Boolean(item.private) }) }); await loadResources(); }
|
||
catch (e) { resourcesError.textContent = e.message; }
|
||
});
|
||
row.querySelector("[data-share]")?.addEventListener("click", async () => {
|
||
const dialog = document.createElement("dialog");
|
||
dialog.className = "app-dialog share-dialog";
|
||
dialog.innerHTML = `<div class="share-panel">
|
||
<div class="share-panel-head"><div><h3>Share access</h3><p>Manage registered users and direct access links for <strong>${escapeHtml(item.title)}</strong>.</p></div><button class="dialog-close" type="button" data-cancel aria-label="Close share dialog">×</button></div>
|
||
<div class="share-dialog-body">
|
||
<section class="share-section"><div class="share-section-head"><div><h4>People with access</h4><p>Invite existing Rustpad users by e-mail.</p></div></div><form data-user-share-form class="share-form-grid">
|
||
<label class="share-emails"><span>E-mail addresses</span><input name="emails" type="text" placeholder="alice@example.com, bob@example.com" autocomplete="off"></label>
|
||
<label><span>Permission</span><select name="permission"><option value="ro">Read only</option><option value="rw">Read and write</option></select></label>
|
||
<button class="primary-button" type="submit">Grant access</button>
|
||
</form><div data-user-list class="share-list"></div></section>
|
||
<section class="share-section"><div class="share-section-head"><div><h4>Direct links</h4><p>Create links for people without an account or manage existing links.</p></div></div><form data-link-form class="share-form-grid share-link-form">
|
||
<label><span>Permission</span><select name="permission"><option value="ro">Read only</option><option value="rw">Read and write</option></select></label>
|
||
<label><span>Valid for</span><div class="share-hours-field"><input name="hours" type="number" min="1" max="87600" value="24" inputmode="numeric"><span>hours</span></div></label>
|
||
<label class="share-forever"><input name="forever" type="checkbox"><span>Never expires</span></label>
|
||
<button class="primary-button" type="submit">Create link</button>
|
||
</form><div data-link-list class="share-list"></div></section>
|
||
</div>
|
||
<div class="share-dialog-footer"><p class="form-message resource-inline-message" data-inline-message role="status"></p><button class="secondary-button" type="button" data-done>Done</button></div>
|
||
</div>`;
|
||
document.body.append(dialog);
|
||
const closeDialog = () => dialog.close();
|
||
dialog.addEventListener("close", () => dialog.remove(), { once: true });
|
||
dialog.addEventListener("click", event => { if (event.target === dialog) closeDialog(); });
|
||
dialog.querySelector("[data-cancel]").addEventListener("click", closeDialog);
|
||
dialog.querySelector("[data-done]").addEventListener("click", closeDialog);
|
||
const setDialogMessage = (text, type = "") => {
|
||
const message = dialog.querySelector("[data-inline-message]");
|
||
message.className = `form-message resource-inline-message ${type}`.trim();
|
||
message.textContent = text;
|
||
};
|
||
const userForm = dialog.querySelector("[data-user-share-form]");
|
||
const linkForm = dialog.querySelector("[data-link-form]");
|
||
const userList = dialog.querySelector("[data-user-list]");
|
||
const linkList = dialog.querySelector("[data-link-list]");
|
||
const syncForever = () => { linkForm.hours.disabled = linkForm.forever.checked; };
|
||
linkForm.forever.addEventListener("change", syncForever); syncForever();
|
||
const refresh = async () => {
|
||
const d = await api(`/api/auth/resources/sharing?kind=${encodeURIComponent(item.kind)}&slug=${encodeURIComponent(item.slug)}`, { headers: authHeaders() });
|
||
userList.innerHTML = d.users.length ? d.users.map(u => `<div class="share-list-row"><div class="share-list-identity"><span class="share-avatar">${escapeHtml((u.nickname || u.email || "?").slice(0, 1).toUpperCase())}</span><div><strong>${escapeHtml(u.nickname)}</strong><small>${escapeHtml(u.email)}</small></div></div><span class="share-role">${u.permission === "rw" ? "Read and write" : "Read only"}</span><button class="secondary-button compact-button" type="button" data-remove-user="${escapeHtml(u.email)}">Remove</button></div>`).join("") : '<p class="share-empty">No users have access.</p>';
|
||
linkList.innerHTML = d.links.length ? d.links.map(link => {
|
||
const directUrl = link.token ? new URL(`${item.url}?share=${encodeURIComponent(link.token)}`, location.origin).href : "";
|
||
const linkPreview = link.token ? `<div class="share-link-inline"><input type="text" readonly value="${escapeHtml(directUrl)}" aria-label="Direct access link"><button class="secondary-button compact-button" type="button" data-copy-link>Copy</button></div>` : '<small class="share-link-legacy">Link value unavailable. Recreate this legacy link to display it.</small>';
|
||
return `<form class="share-list-row share-link-row" data-link-token="${escapeHtml(link.token_hash)}"><div class="share-link-info"><strong>Individual link</strong><small>${escapeHtml(formatShareExpiry(link.expires_at))}</small>${linkPreview}</div><label><span class="sr-only">Permission</span><select name="permission" aria-label="Link permission"><option value="ro" ${link.permission === "ro" ? "selected" : ""}>Read only</option><option value="rw" ${link.permission === "rw" ? "selected" : ""}>Read and write</option></select></label><label><span class="sr-only">Validity in hours</span><div class="share-hours-field"><input name="hours" type="number" min="1" max="87600" value="24" aria-label="New validity in hours"><span>h</span></div></label><label class="share-forever"><input name="forever" type="checkbox" ${link.expires_at ? "" : "checked"}><span>Never</span></label><div class="share-row-actions"><button class="secondary-button compact-button" type="submit">Update</button><button class="danger-button compact-button" type="button" data-revoke-link>Revoke</button></div></form>`;
|
||
}).join("") : '<p class="share-empty">No active links.</p>';
|
||
userList.querySelectorAll("[data-remove-user]").forEach(button => button.addEventListener("click", async () => { try { button.disabled = true; await api("/api/auth/resources/sharing", { method: "DELETE", headers: authHeaders(), body: JSON.stringify({ kind: item.kind, slug: item.slug, email: button.dataset.removeUser }) }); setDialogMessage("Access removed.", "success"); await refresh(); } catch (err) { setDialogMessage(err.message, "error"); button.disabled = false; } }));
|
||
linkList.querySelectorAll("[data-link-token]").forEach(linkRow => {
|
||
const forever = linkRow.elements.forever, hours = linkRow.elements.hours; const sync = () => { hours.disabled = forever.checked; }; forever.addEventListener("change", sync); sync();
|
||
linkRow.querySelector("[data-copy-link]")?.addEventListener("click", async () => { try { await copyText(linkRow.querySelector(".share-link-inline input").value); setDialogMessage("Link copied.", "success"); } catch (err) { setDialogMessage(err.message, "error"); } });
|
||
linkRow.addEventListener("submit", async event => { event.preventDefault(); try { const expires_at = shareExpiry(hours.value, forever.checked); await api("/api/auth/resources/share-links", { method: "PUT", headers: authHeaders(), body: JSON.stringify({ kind: item.kind, slug: item.slug, token: linkRow.dataset.linkToken, permission: linkRow.elements.permission.value, expires_at }) }); setDialogMessage("Link updated.", "success"); await refresh(); } catch (err) { setDialogMessage(err.message, "error"); } });
|
||
linkRow.querySelector("[data-revoke-link]").addEventListener("click", async () => { try { await api("/api/auth/resources/share-links", { method: "DELETE", headers: authHeaders(), body: JSON.stringify({ kind: item.kind, slug: item.slug, token: linkRow.dataset.linkToken }) }); setDialogMessage("Link revoked.", "success"); await refresh(); } catch (err) { setDialogMessage(err.message, "error"); } });
|
||
});
|
||
};
|
||
userForm.addEventListener("submit", async event => { event.preventDefault(); try { await api("/api/auth/resources/sharing", { method: "POST", headers: authHeaders(), body: JSON.stringify({ kind: item.kind, slug: item.slug, emails: userForm.emails.value, permission: userForm.permission.value }) }); userForm.emails.value = ""; setDialogMessage("Access granted.", "success"); await refresh(); } catch (err) { setDialogMessage(err.message, "error"); } });
|
||
linkForm.addEventListener("submit", async event => { event.preventDefault(); try { const expires_at = shareExpiry(linkForm.hours.value, linkForm.forever.checked); const result = await api("/api/auth/resources/share-links", { method: "POST", headers: authHeaders(), body: JSON.stringify({ kind: item.kind, slug: item.slug, permission: linkForm.permission.value, expires_at }) }); const absolute = new URL(result.url, location.origin).href; await copyText(absolute); setDialogMessage("Link created and copied. It remains visible below.", "success"); await refresh(); } catch (err) { setDialogMessage(err.message, "error"); } });
|
||
dialog.showModal();
|
||
try { await refresh(); } catch (err) { setDialogMessage(err.message, "error"); }
|
||
});
|
||
|
||
row.querySelector("[data-password]")?.addEventListener("click", () => {
|
||
inline.hidden = false;
|
||
inline.innerHTML = `<form class="resource-password-form" autocomplete="off"><label>New password<input name="resource-password" type="password" minlength="8" maxlength="128" autocomplete="new-password" data-bwignore="true" placeholder="Minimum 8 characters"></label><p class="resource-inline-help">Leave empty to remove password protection.</p><p class="form-message resource-inline-message" data-inline-message role="status"></p><div class="resource-inline-actions"><button class="primary-button" type="submit">Save</button><button class="secondary-button" type="button" data-cancel>Cancel</button></div></form>`;
|
||
const form = inline.querySelector("form");
|
||
const input = form.querySelector("input");
|
||
form.querySelector("[data-cancel]").addEventListener("click", closeInline);
|
||
form.addEventListener("submit", async event => {
|
||
event.preventDefault();
|
||
const password = input.value;
|
||
if (password && password.length < 8) { setInlineMessage("Password must contain at least 8 characters.", "error"); return; }
|
||
const submit = form.querySelector('[type="submit"]');
|
||
submit.disabled = true;
|
||
setInlineMessage("");
|
||
try {
|
||
await api("/api/auth/resources", { method: "PUT", headers: authHeaders(), body: JSON.stringify({ kind: item.kind, slug: item.slug, password }) });
|
||
await loadResources();
|
||
} catch (e) {
|
||
setInlineMessage(e.message, "error");
|
||
submit.disabled = false;
|
||
}
|
||
});
|
||
input.focus();
|
||
});
|
||
|
||
row.querySelector("[data-delete]")?.addEventListener("click", () => {
|
||
inline.hidden = false;
|
||
inline.innerHTML = `<div class="resource-delete-confirm"><p>Delete “${item.title}” permanently?</p><p class="form-message resource-inline-message" data-inline-message role="status"></p><div class="resource-inline-actions"><button class="danger-button" type="button" data-confirm-delete>Delete</button><button class="secondary-button" type="button" data-cancel>Cancel</button></div></div>`;
|
||
inline.querySelector("[data-cancel]").addEventListener("click", closeInline);
|
||
inline.querySelector("[data-confirm-delete]").addEventListener("click", async event => {
|
||
event.currentTarget.disabled = true;
|
||
setInlineMessage("");
|
||
try {
|
||
await api("/api/auth/resources", { method: "DELETE", headers: authHeaders(), body: JSON.stringify({ kind: item.kind, slug: item.slug }) });
|
||
await loadResources();
|
||
} catch (e) {
|
||
setInlineMessage(e.message, "error");
|
||
event.currentTarget.disabled = false;
|
||
}
|
||
});
|
||
});
|
||
resourcesList.append(row);
|
||
}
|
||
} catch (e) { resourcesList.innerHTML = ""; resourcesError.textContent = e.message; }
|
||
}
|
||
|
||
|
||
function renderAccount(session) {
|
||
guestAccount.hidden = Boolean(session);
|
||
userAccount.hidden = !session;
|
||
if (session) userLabel.textContent = `Signed in as ${session.nickname}`;
|
||
registerLink.hidden = !registrationEnabled;
|
||
}
|
||
|
||
if (identityDialog) {
|
||
const authDialog = bindIdentityDialog({
|
||
dialog: identityDialog,
|
||
onIdentity: async (_nickname, session) => renderAccount(session),
|
||
});
|
||
|
||
document.querySelector("#footer-login")?.addEventListener("click", () => {
|
||
authDialog.setMode("login");
|
||
identityDialog.showModal();
|
||
});
|
||
registerLink?.addEventListener("click", () => {
|
||
authDialog.setMode("register");
|
||
identityDialog.showModal();
|
||
});
|
||
document.querySelector("#footer-resources")?.addEventListener("click", async () => { resourcesDialog.showModal(); await loadResources(); });
|
||
document.querySelector("#close-resources")?.addEventListener("click", () => resourcesDialog.close());
|
||
resourcesDialog?.addEventListener("click", (event) => { if (event.target === resourcesDialog) resourcesDialog.close(); });
|
||
document.querySelector("#footer-logout")?.addEventListener("click", async () => {
|
||
await logoutCurrentSession();
|
||
renderAccount(null);
|
||
});
|
||
|
||
window.addEventListener("rustpad:session-expired", () => renderAccount(null));
|
||
renderAccount(null);
|
||
validateCurrentSession().then(renderAccount);
|
||
}
|