@@ -719,7 +760,7 @@ function copyLink(url) {
}
/** Rebuild action buttons so slugs in onclick match after rename. */
-function buildLinkRowActionsHtml(host, slug, guest, expiresAtMs, folderSlug, status, type, id) {
+function buildLinkRowActionsHtml(linkHost, link.slug, link.guest, link.expiresAt, link.folderSlug, status, link.type, isTransformer ? link.id : link.slug)(host, slug, guest, expiresAtMs, folderSlug, status, type, id) {
const isTransformer = type === 'transformer';
const actionId = id || slug;
const co = new URL(ORIGIN);
@@ -1080,6 +1121,692 @@ document.getElementById('guest')?.addEventListener('input', updateTransformerMod
// Initial hide of deleted rows
document.addEventListener('DOMContentLoaded', () => {
+
+let apiKeysLoaded = false;
+
+document.querySelectorAll('.tab-link').forEach(link => {
+ link.addEventListener('click', (e) => {
+ e.preventDefault();
+ document.querySelectorAll('.tab-link').forEach(l => l.classList.remove('active'));
+ document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+
+ link.classList.add('active');
+ document.getElementById(link.dataset.target).classList.add('active');
+
+ if (link.dataset.target === 'tab-apikeys' && !apiKeysLoaded) {
+ apiKeysLoaded = true;
+ loadApiKeys();
+ }
+ });
+});
+
+document.getElementById('refreshApiKeysBtn')?.addEventListener('click', loadApiKeys);
+
+async function loadApiKeys() {
+ const tbody = document.getElementById('apiKeysBody');
+ if (!tbody) return;
+ tbody.innerHTML = '
| Loading... |
';
+
+ try {
+ const host = document.getElementById('apiKeyHost').value;
+ const res = await fetch('/api/keys?host=' + encodeURIComponent(host));
+ if (!res.ok) throw new Error('Failed to fetch keys');
+ const keys = await res.json();
+
+ if (keys.length === 0) {
+ tbody.innerHTML = '
| No API keys found. |
';
+ return;
+ }
+
+ tbody.innerHTML = keys.map(k => {
+ const expStr = k.expiresAt ? new Date(k.expiresAt).toLocaleString() : 'Never';
+ const perms = (k.permissions || []).join(', ');
+
+ return '
' +
+ '| ' + escHtml(k.name) + ' | ' +
+ '' + escHtml(k.host) + ' | ' +
+ '' + escHtml(perms) + ' | ' +
+ '' + escHtml(expStr) + ' | ' +
+ '' +
+ '' +
+ ' | ' +
+ '
';
+ }).join('');
+
+ } catch (err) {
+ tbody.innerHTML = '
| Error loading keys: ' + escHtml(err.message) + ' |
';
+ }
+}
+
+window.revokeApiKey = async function(id, host) {
+ if (!confirm('Are you sure you want to revoke this API key? This cannot be undone.')) return;
+ try {
+ const res = await fetch('/api/keys/' + encodeURIComponent(id) + '?host=' + encodeURIComponent(host), { method: 'DELETE' });
+ if (!res.ok) throw new Error('Failed to revoke key');
+ showToast('API Key revoked');
+ loadApiKeys();
+ } catch(err) {
+ alert('Error: ' + err.message);
+ }
+};
+
+document.getElementById('createApiKeyForm')?.addEventListener('submit', async function(e) {
+ e.preventDefault();
+ const errEl = document.getElementById('apiKeyFormError');
+ const successEl = document.getElementById('apiKeySuccess');
+ const btn = document.getElementById('createApiKeyBtn');
+ errEl.style.display = 'none';
+ successEl.style.display = 'none';
+
+ const fd = new FormData(e.target);
+ const host = fd.get('host');
+ const name = fd.get('name');
+ const expiresAtRaw = fd.get('expiresAt');
+ const permissions = Array.from(fd.getAll('permissions'));
+
+ if (permissions.length === 0) {
+ errEl.textContent = 'Please select at least one permission.';
+ errEl.style.display = '';
+ return;
+ }
+
+ const body = {
+ host,
+ name,
+ permissions,
+ expiresAt: expiresAtRaw ? new Date(expiresAtRaw).getTime() : null,
+ };
+
+ btn.disabled = true;
+ btn.textContent = 'Generating...';
+
+ try {
+ const res = await fetch('/api/keys', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(body)
+ });
+ const data = await res.json().catch(() => ({}));
+ if (!res.ok) throw new Error(data.error || 'Failed to create API key');
+
+ document.getElementById('apiKeyDisplay').value = data.token;
+ successEl.style.display = 'flex';
+ e.target.reset();
+
+ // Default checked state for permissions since reset clears them
+ e.target.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = true);
+ // Restore host
+ document.getElementById('apiKeyHost').value = host;
+
+ loadApiKeys();
+
+ } catch(err) {
+ errEl.textContent = err.message;
+ errEl.style.display = '';
+ } finally {
+ btn.disabled = false;
+ btn.textContent = 'Generate Key';
+ }
+});
+
+document.getElementById('apiKeyHost')?.addEventListener('change', loadApiKeys);
+
+
+function updateTransformerMode() {
+ const isT = document.getElementById('isTransformer')?.checked;
+ const isI = document.getElementById('isImage')?.checked;
+
+ const guestEl = document.getElementById('guest');
+ const slugHint = document.getElementById('slugHint');
+ const guestHint = document.getElementById('guestHint');
+
+ if (isI) {
+ if (document.getElementById('isTransformer')) {
+ document.getElementById('isTransformer').checked = false;
+ document.getElementById('isTransformer').disabled = true;
+ }
+
+ if (document.getElementById('imageUploadGrid')) document.getElementById('imageUploadGrid').style.display = 'grid';
+ if (guestEl) {
+ guestEl.parentElement.style.display = 'none';
+ guestEl.removeAttribute('required');
+ }
+
+ if (document.getElementById('folderSlug')) document.getElementById('folderSlug').disabled = false;
+ if (document.getElementById('expiresAt')) document.getElementById('expiresAt').disabled = false;
+ if (document.getElementById('password')) document.getElementById('password').disabled = false;
+
+ } else if (isT) {
+ if (document.getElementById('isImage')) {
+ document.getElementById('isImage').checked = false;
+ document.getElementById('isImage').disabled = true;
+ }
+
+ if (document.getElementById('imageUploadGrid')) document.getElementById('imageUploadGrid').style.display = 'none';
+ if (guestEl) {
+ guestEl.parentElement.style.display = 'block';
+ guestEl.setAttribute('required', 'true');
+ guestEl.type = 'text';
+ guestEl.placeholder = 'https://example.com/${1}';
+ }
+ if (slugHint) slugHint.innerHTML = 'Use
${1},
${2},
${3} to capture path segments.';
+ if (guestHint) {
+ guestHint.style.display = 'block';
+ guestHint.innerHTML = 'Substitute
${1} into the destination URL.';
+ }
+
+ if (document.getElementById('folderSlug')) {
+ document.getElementById('folderSlug').value = '';
+ document.getElementById('folderSlug').disabled = true;
+ }
+ if (document.getElementById('expiresAt')) {
+ document.getElementById('expiresAt').value = '';
+ document.getElementById('expiresAt').disabled = true;
+ }
+ if (document.getElementById('password')) {
+ document.getElementById('password').value = '';
+ document.getElementById('password').disabled = true;
+ }
+ } else {
+ if (document.getElementById('isImage')) document.getElementById('isImage').disabled = false;
+ if (document.getElementById('isTransformer')) document.getElementById('isTransformer').disabled = false;
+
+ if (document.getElementById('imageUploadGrid')) document.getElementById('imageUploadGrid').style.display = 'none';
+ if (guestEl) {
+ guestEl.parentElement.style.display = 'block';
+ guestEl.setAttribute('required', 'true');
+ guestEl.type = 'url';
+ guestEl.placeholder = 'https://example.com';
+ }
+ if (slugHint) slugHint.innerHTML = 'Letters, numbers, hyphens and underscores only.';
+ if (guestHint) guestHint.style.display = 'none';
+
+ if (document.getElementById('folderSlug')) document.getElementById('folderSlug').disabled = false;
+ if (document.getElementById('expiresAt')) document.getElementById('expiresAt').disabled = false;
+ if (document.getElementById('password')) document.getElementById('password').disabled = false;
+ }
+}
+
+// Override original form submission with FormData
+document.getElementById('createForm')?.addEventListener('submit', async function(e) {
+ e.preventDefault();
+
+document.getElementById('createForm')?.addEventListener('submit', async function(e) {
+ // Override inside DOMContentLoaded to win the listener battle.
+ e.stopImmediatePropagation();
+ e.preventDefault();
+ const errEl = document.getElementById('formError');
+ errEl.style.display = 'none';
+ const fd = new FormData(e.target);
+ const host = fd.get('host').trim();
+ const slug = fd.get('slug').trim();
+ const folderSlug = (fd.get('folderSlug') || '').trim();
+ const expiresAtRaw = fd.get('expiresAt');
+ const password = fd.get('password');
+ const isTransformer = document.getElementById('isTransformer')?.checked || false;
+ const isImage = document.getElementById('isImage')?.checked || false;
+ let guest = fd.get('guest');
+ if (guest) guest = guest.trim();
+
+ let reqOpts = {};
+
+ if (isImage) {
+ const file = fd.get('image');
+ if (!file || !file.size) {
+ errEl.textContent = 'Please select an image file.';
+ errEl.style.display = '';
+ return;
+ }
+ reqOpts = {
+ method: 'POST',
+ body: fd
+ };
+ fd.append('type', 'image');
+ if (expiresAtRaw) fd.set('expiresAt', new Date(expiresAtRaw).getTime());
+ else fd.delete('expiresAt');
+ } else {
+ const body = {
+ host,
+ slug,
+ guest,
+ folderSlug: folderSlug || null,
+ expiresAt: expiresAtRaw ? new Date(expiresAtRaw).getTime() : null,
+ password: password || null,
+ };
+ if (isTransformer) {
+ body.type = 'transformer';
+ body.isTransformer = true;
+ body.folderSlug = null;
+ body.expiresAt = null;
+ body.password = null;
+ }
+
+ reqOpts = {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(body),
+ };
+ }
+
+ const btn = document.getElementById('createBtn');
+ btn.disabled = true;
+ btn.textContent = isTransformer ? 'Creating transformer…' : (isImage ? 'Uploading image…' : 'Creating…');
+
+ const r = await fetch('/api/links', reqOpts);
+ const d = await r.json().catch(() => ({}));
+ btn.disabled = false;
+ btn.innerHTML = '
Create Link';
+
+ if (!r.ok) {
+ errEl.textContent = d.error || 'Failed to create link.';
+ errEl.style.display = '';
+ return;
+ }
+
+ const createdId = d.id || slug;
+ showToast(isTransformer
+ ? ('Transformer created: ' + host + '/' + slug)
+ : (isImage ? 'Image uploaded: ' + host + '/' + slug : 'Created: ' + (host === new URL(ORIGIN).host ? (ORIGIN + '/' + slug) : ('https://' + host + '/' + slug))));
+ e.target.reset();
+ updateTransformerMode();
+ setTimeout(() => location.reload(), 1500); // Reload to fetch fresh table data easily
+}, true); // Use capture to intercept the original listener
+
+});
+
+
+
+let apiKeysLoaded = false;
+
+document.querySelectorAll('.tab-link').forEach(link => {
+ link.addEventListener('click', (e) => {
+ e.preventDefault();
+ document.querySelectorAll('.tab-link').forEach(l => l.classList.remove('active'));
+ document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+
+ link.classList.add('active');
+ document.getElementById(link.dataset.target).classList.add('active');
+
+ if (link.dataset.target === 'tab-apikeys' && !apiKeysLoaded) {
+ apiKeysLoaded = true;
+ loadApiKeys();
+ }
+ });
+});
+
+document.getElementById('refreshApiKeysBtn')?.addEventListener('click', loadApiKeys);
+
+async function loadApiKeys() {
+ const tbody = document.getElementById('apiKeysBody');
+ if (!tbody) return;
+ tbody.innerHTML = '
| Loading... |
';
+
+ try {
+ const host = document.getElementById('apiKeyHost').value;
+ const res = await fetch('/api/keys?host=' + encodeURIComponent(host));
+ if (!res.ok) throw new Error('Failed to fetch keys');
+ const keys = await res.json();
+
+ if (keys.length === 0) {
+ tbody.innerHTML = '
| No API keys found. |
';
+ return;
+ }
+
+ tbody.innerHTML = keys.map(k => {
+ const expStr = k.expiresAt ? new Date(k.expiresAt).toLocaleString() : 'Never';
+ const perms = (k.permissions || []).join(', ');
+
+ return '
' +
+ '| ' + escHtml(k.name) + ' | ' +
+ '' + escHtml(k.host) + ' | ' +
+ '' + escHtml(perms) + ' | ' +
+ '' + escHtml(expStr) + ' | ' +
+ '' +
+ '' +
+ ' | ' +
+ '
';
+ }).join('');
+
+ } catch (err) {
+ tbody.innerHTML = '
| Error loading keys: ' + escHtml(err.message) + ' |
';
+ }
+}
+
+window.revokeApiKey = async function(id, host) {
+ if (!confirm('Are you sure you want to revoke this API key? This cannot be undone.')) return;
+ try {
+ const res = await fetch('/api/keys/' + encodeURIComponent(id) + '?host=' + encodeURIComponent(host), { method: 'DELETE' });
+ if (!res.ok) throw new Error('Failed to revoke key');
+ showToast('API Key revoked');
+ loadApiKeys();
+ } catch(err) {
+ alert('Error: ' + err.message);
+ }
+};
+
+document.getElementById('createApiKeyForm')?.addEventListener('submit', async function(e) {
+ e.preventDefault();
+ const errEl = document.getElementById('apiKeyFormError');
+ const successEl = document.getElementById('apiKeySuccess');
+ const btn = document.getElementById('createApiKeyBtn');
+ errEl.style.display = 'none';
+ successEl.style.display = 'none';
+
+ const fd = new FormData(e.target);
+ const host = fd.get('host');
+ const name = fd.get('name');
+ const expiresAtRaw = fd.get('expiresAt');
+ const permissions = Array.from(fd.getAll('permissions'));
+
+ if (permissions.length === 0) {
+ errEl.textContent = 'Please select at least one permission.';
+ errEl.style.display = '';
+ return;
+ }
+
+ const body = {
+ host,
+ name,
+ permissions,
+ expiresAt: expiresAtRaw ? new Date(expiresAtRaw).getTime() : null,
+ };
+
+ btn.disabled = true;
+ btn.textContent = 'Generating...';
+
+ try {
+ const res = await fetch('/api/keys', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(body)
+ });
+ const data = await res.json().catch(() => ({}));
+ if (!res.ok) throw new Error(data.error || 'Failed to create API key');
+
+ document.getElementById('apiKeyDisplay').value = data.token;
+ successEl.style.display = 'flex';
+ e.target.reset();
+
+ // Default checked state for permissions since reset clears them
+ e.target.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = true);
+ // Restore host
+ document.getElementById('apiKeyHost').value = host;
+
+ loadApiKeys();
+
+ } catch(err) {
+ errEl.textContent = err.message;
+ errEl.style.display = '';
+ } finally {
+ btn.disabled = false;
+ btn.textContent = 'Generate Key';
+ }
+});
+
+document.getElementById('apiKeyHost')?.addEventListener('change', loadApiKeys);
+
+
+
+let apiKeysLoaded = false;
+
+document.querySelectorAll('.tab-link').forEach(link => {
+ link.addEventListener('click', (e) => {
+ e.preventDefault();
+ document.querySelectorAll('.tab-link').forEach(l => l.classList.remove('active'));
+ document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+
+ link.classList.add('active');
+ document.getElementById(link.dataset.target).classList.add('active');
+
+ if (link.dataset.target === 'tab-apikeys' && !apiKeysLoaded) {
+ apiKeysLoaded = true;
+ loadApiKeys();
+ }
+ });
+});
+
+document.getElementById('refreshApiKeysBtn')?.addEventListener('click', loadApiKeys);
+
+async function loadApiKeys() {
+ const tbody = document.getElementById('apiKeysBody');
+ if (!tbody) return;
+ tbody.innerHTML = '
| Loading... |
';
+
+ try {
+ const host = document.getElementById('apiKeyHost').value;
+ const res = await fetch('/api/keys?host=' + encodeURIComponent(host));
+ if (!res.ok) throw new Error('Failed to fetch keys');
+ const keys = await res.json();
+
+ if (keys.length === 0) {
+ tbody.innerHTML = '
| No API keys found. |
';
+ return;
+ }
+
+ tbody.innerHTML = keys.map(k => {
+ const expStr = k.expiresAt ? new Date(k.expiresAt).toLocaleString() : 'Never';
+ const perms = (k.permissions || []).join(', ');
+
+ return '
' +
+ '| ' + escHtml(k.name) + ' | ' +
+ '' + escHtml(k.host) + ' | ' +
+ '' + escHtml(perms) + ' | ' +
+ '' + escHtml(expStr) + ' | ' +
+ '' +
+ '' +
+ ' | ' +
+ '
';
+ }).join('');
+
+ } catch (err) {
+ tbody.innerHTML = '
| Error loading keys: ' + escHtml(err.message) + ' |
';
+ }
+}
+
+window.revokeApiKey = async function(id, host) {
+ if (!confirm('Are you sure you want to revoke this API key? This cannot be undone.')) return;
+ try {
+ const res = await fetch('/api/keys/' + encodeURIComponent(id) + '?host=' + encodeURIComponent(host), { method: 'DELETE' });
+ if (!res.ok) throw new Error('Failed to revoke key');
+ showToast('API Key revoked');
+ loadApiKeys();
+ } catch(err) {
+ alert('Error: ' + err.message);
+ }
+};
+
+document.getElementById('createApiKeyForm')?.addEventListener('submit', async function(e) {
+ e.preventDefault();
+ const errEl = document.getElementById('apiKeyFormError');
+ const successEl = document.getElementById('apiKeySuccess');
+ const btn = document.getElementById('createApiKeyBtn');
+ errEl.style.display = 'none';
+ successEl.style.display = 'none';
+
+ const fd = new FormData(e.target);
+ const host = fd.get('host');
+ const name = fd.get('name');
+ const expiresAtRaw = fd.get('expiresAt');
+ const permissions = Array.from(fd.getAll('permissions'));
+
+ if (permissions.length === 0) {
+ errEl.textContent = 'Please select at least one permission.';
+ errEl.style.display = '';
+ return;
+ }
+
+ const body = {
+ host,
+ name,
+ permissions,
+ expiresAt: expiresAtRaw ? new Date(expiresAtRaw).getTime() : null,
+ };
+
+ btn.disabled = true;
+ btn.textContent = 'Generating...';
+
+ try {
+ const res = await fetch('/api/keys', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(body)
+ });
+ const data = await res.json().catch(() => ({}));
+ if (!res.ok) throw new Error(data.error || 'Failed to create API key');
+
+ document.getElementById('apiKeyDisplay').value = data.token;
+ successEl.style.display = 'flex';
+ e.target.reset();
+
+ // Default checked state for permissions since reset clears them
+ e.target.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = true);
+ // Restore host
+ document.getElementById('apiKeyHost').value = host;
+
+ loadApiKeys();
+
+ } catch(err) {
+ errEl.textContent = err.message;
+ errEl.style.display = '';
+ } finally {
+ btn.disabled = false;
+ btn.textContent = 'Generate Key';
+ }
+});
+
+document.getElementById('apiKeyHost')?.addEventListener('change', loadApiKeys);
+
+
+
+let apiKeysLoaded = false;
+
+document.querySelectorAll('.tab-link').forEach(link => {
+ link.addEventListener('click', (e) => {
+ e.preventDefault();
+ document.querySelectorAll('.tab-link').forEach(l => l.classList.remove('active'));
+ document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+
+ link.classList.add('active');
+ document.getElementById(link.dataset.target).classList.add('active');
+
+ if (link.dataset.target === 'tab-apikeys' && !apiKeysLoaded) {
+ apiKeysLoaded = true;
+ loadApiKeys();
+ }
+ });
+});
+
+document.getElementById('refreshApiKeysBtn')?.addEventListener('click', loadApiKeys);
+
+async function loadApiKeys() {
+ const tbody = document.getElementById('apiKeysBody');
+ tbody.innerHTML = '
| Loading... |
';
+
+ try {
+ const host = document.getElementById('apiKeyHost').value;
+ const res = await fetch('/api/keys?host=' + encodeURIComponent(host));
+ if (!res.ok) throw new Error('Failed to fetch keys');
+ const keys = await res.json();
+
+ if (keys.length === 0) {
+ tbody.innerHTML = '
| No API keys found. |
';
+ return;
+ }
+
+ tbody.innerHTML = keys.map(k => {
+ const expStr = k.expiresAt ? new Date(k.expiresAt).toLocaleString() : 'Never';
+ const perms = (k.permissions || []).join(', ');
+
+ return '
' +
+ '| ' + escHtml(k.name) + ' | ' +
+ '' + escHtml(k.host) + ' | ' +
+ '' + escHtml(perms) + ' | ' +
+ '' + escHtml(expStr) + ' | ' +
+ '' +
+ '' +
+ ' | ' +
+ '
';
+ }).join('');
+
+ } catch (err) {
+ tbody.innerHTML = '
| Error loading keys: ' + escHtml(err.message) + ' |
';
+ }
+}
+
+window.revokeApiKey = async function(id, host) {
+ if (!confirm('Are you sure you want to revoke this API key? This cannot be undone.')) return;
+ try {
+ const res = await fetch('/api/keys/' + encodeURIComponent(id) + '?host=' + encodeURIComponent(host), { method: 'DELETE' });
+ if (!res.ok) throw new Error('Failed to revoke key');
+ showToast('API Key revoked');
+ loadApiKeys();
+ } catch(err) {
+ alert('Error: ' + err.message);
+ }
+};
+
+document.getElementById('createApiKeyForm')?.addEventListener('submit', async function(e) {
+ e.preventDefault();
+ const errEl = document.getElementById('apiKeyFormError');
+ const successEl = document.getElementById('apiKeySuccess');
+ const btn = document.getElementById('createApiKeyBtn');
+ errEl.style.display = 'none';
+ successEl.style.display = 'none';
+
+ const fd = new FormData(e.target);
+ const host = fd.get('host');
+ const name = fd.get('name');
+ const expiresAtRaw = fd.get('expiresAt');
+ const permissions = Array.from(fd.getAll('permissions'));
+
+ if (permissions.length === 0) {
+ errEl.textContent = 'Please select at least one permission.';
+ errEl.style.display = '';
+ return;
+ }
+
+ const body = {
+ host,
+ name,
+ permissions,
+ expiresAt: expiresAtRaw ? new Date(expiresAtRaw).getTime() : null,
+ };
+
+ btn.disabled = true;
+ btn.textContent = 'Generating...';
+
+ try {
+ const res = await fetch('/api/keys', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(body)
+ });
+ const data = await res.json().catch(() => ({}));
+ if (!res.ok) throw new Error(data.error || 'Failed to create API key');
+
+ document.getElementById('apiKeyDisplay').value = data.token;
+ successEl.style.display = 'flex';
+ e.target.reset();
+
+ // Default checked state for permissions since reset clears them
+ e.target.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = true);
+ // Restore host
+ document.getElementById('apiKeyHost').value = host;
+
+ loadApiKeys();
+
+ } catch(err) {
+ errEl.textContent = err.message;
+ errEl.style.display = '';
+ } finally {
+ btn.disabled = false;
+ btn.textContent = 'Generate Key';
+ }
+});
+
+document.getElementById('apiKeyHost')?.addEventListener('change', loadApiKeys);
+
+
refreshFoldersForHost(document.getElementById('host').value);
refreshAudit();
updateTransformerMode();
@@ -1104,7 +1831,8 @@ document.getElementById('editCancelBtn2').addEventListener('click', (e) => {
closeEditModal();
});
-document.getElementById('editForm').addEventListener('submit', async function(e) {
+
+document.getElementById('editForm')?.addEventListener('submit', async function(e) {
e.preventDefault();
const errEl = document.getElementById('editError');
errEl.style.display = 'none';
@@ -1133,6 +1861,57 @@ document.getElementById('editForm').addEventListener('submit', async function(e)
});
const pd = await pr.json().catch(() => ({}));
if (!pr.ok) throw new Error(pd.error || 'Update failed');
+ showToast('Updated transformer: ' + host + '/' + newSlug);
+ setTimeout(() => location.reload(), 500);
+ return;
+ }
+
+ let currentSlug = oldSlug;
+
+ if (newSlug && newSlug !== oldSlug) {
+ const rr = await fetch('/api/links/' + encodeURIComponent(oldSlug) + '/rename', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ host, newSlug }),
+ });
+ const rd = await rr.json().catch(() => ({}));
+ if (!rr.ok) throw new Error(rd.error || 'Rename failed');
+ currentSlug = rd.slug || newSlug;
+ }
+
+ const patchBody = {
+ host,
+ expiresAt: expiresAtRaw ? new Date(expiresAtRaw).getTime() : null,
+ };
+ if (editType !== 'image') {
+ patchBody.guest = guest;
+ }
+
+ patchBody.folderSlug = folderSlug || null;
+ if (clearPassword) patchBody.password = null;
+ else if (password) patchBody.password = password;
+
+ const pr = await fetch('/api/links/' + encodeURIComponent(currentSlug), {
+ method: 'PATCH',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(patchBody),
+ });
+ const pd = await pr.json().catch(() => ({}));
+ if (!pr.ok) throw new Error(pd.error || 'Update failed');
+
+ showToast('Updated: ' + currentSlug);
+ setTimeout(() => location.reload(), 500);
+ } catch (err) {
+ errEl.textContent = err.message || 'Failed to update link.';
+ errEl.style.display = '';
+ } finally {
+ saveBtn.disabled = false;
+ saveBtn.textContent = 'Save changes';
+ }
+});
+
+ const pd = await pr.json().catch(() => ({}));
+ if (!pr.ok) throw new Error(pd.error || 'Update failed');
const row = document.querySelector('[data-id="' + editId + '"][data-host="' + host + '"][data-type="transformer"]');
if (row) {
@@ -1178,11 +1957,15 @@ document.getElementById('editForm').addEventListener('submit', async function(e)
document.getElementById('editOldSlug').value = currentSlug;
}
+
const patchBody = {
host,
- guest,
expiresAt: expiresAtRaw ? new Date(expiresAtRaw).getTime() : null,
};
+ if (editType !== 'image') {
+ patchBody.guest = guest;
+ }
+
patchBody.folderSlug = folderSlug || null;
if (clearPassword) patchBody.password = null;
else if (password) patchBody.password = password;
@@ -1198,12 +1981,17 @@ document.getElementById('editForm').addEventListener('submit', async function(e)
// Update destination cell + expiry cell + pass cell
const row = document.querySelector('[data-slug="' + currentSlug + '"][data-host="' + host + '"]');
if (row) {
+
const destCell = row.querySelector('.url-cell a');
- if (destCell) {
+ const urlCell = row.querySelector('.url-cell');
+ if (editType === 'image') {
+ if (urlCell) urlCell.innerHTML = '
Image Data';
+ } else if (destCell) {
destCell.href = guest;
destCell.title = guest;
destCell.textContent = guest;
}
+
const expiryCell = row.querySelector('td.center.nowrap');
if (expiryCell) {
expiryCell.textContent = expiresAtRaw
@@ -1235,6 +2023,7 @@ document.getElementById('editForm').addEventListener('submit', async function(e)
}
});
+
document.getElementById('createForm').addEventListener('submit', async function(e) {
e.preventDefault();
const errEl = document.getElementById('formError');
@@ -1242,37 +2031,60 @@ document.getElementById('createForm').addEventListener('submit', async function(
const fd = new FormData(e.target);
const host = fd.get('host').trim();
const slug = fd.get('slug').trim();
- const guest = fd.get('guest').trim();
const folderSlug = (fd.get('folderSlug') || '').trim();
const expiresAtRaw = fd.get('expiresAt');
const password = fd.get('password');
const isTransformer = document.getElementById('isTransformer')?.checked || false;
+ const isImage = document.getElementById('isImage')?.checked || false;
+ let guest = fd.get('guest');
+ if (guest) guest = guest.trim();
+
+ let reqOpts = {};
+
+ if (isImage) {
+ const file = fd.get('image');
+ if (!file || !file.size) {
+ errEl.textContent = 'Please select an image file.';
+ errEl.style.display = '';
+ return;
+ }
+ // We send FormData directly for image uploads
+ reqOpts = {
+ method: 'POST',
+ body: fd
+ };
+ fd.append('type', 'image');
+ if (expiresAtRaw) fd.set('expiresAt', new Date(expiresAtRaw).getTime());
+ else fd.delete('expiresAt');
+ } else {
+ const body = {
+ host,
+ slug,
+ guest,
+ folderSlug: folderSlug || null,
+ expiresAt: expiresAtRaw ? new Date(expiresAtRaw).getTime() : null,
+ password: password || null,
+ };
+ if (isTransformer) {
+ body.type = 'transformer';
+ body.isTransformer = true;
+ body.folderSlug = null;
+ body.expiresAt = null;
+ body.password = null;
+ }
- const body = {
- host,
- slug,
- guest,
- folderSlug: folderSlug || null,
- expiresAt: expiresAtRaw ? new Date(expiresAtRaw).getTime() : null,
- password: password || null,
- };
- if (isTransformer) {
- body.type = 'transformer';
- body.isTransformer = true;
- body.folderSlug = null;
- body.expiresAt = null;
- body.password = null;
+ reqOpts = {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(body),
+ };
}
const btn = document.getElementById('createBtn');
btn.disabled = true;
- btn.textContent = isTransformer ? 'Creating transformer…' : 'Creating…';
+ btn.textContent = isTransformer ? 'Creating transformer…' : (isImage ? 'Uploading image…' : 'Creating…');
- const r = await fetch('/api/links', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(body),
- });
+ const r = await fetch('/api/links', reqOpts);
const d = await r.json().catch(() => ({}));
btn.disabled = false;
btn.innerHTML = '
Create Link';
@@ -1286,7 +2098,7 @@ document.getElementById('createForm').addEventListener('submit', async function(
const createdId = d.id || slug;
showToast(isTransformer
? ('Transformer created: ' + host + '/' + slug)
- : ('Created: ' + (host === new URL(ORIGIN).host ? (ORIGIN + '/' + slug) : ('https://' + host + '/' + slug))));
+ : (isImage ? 'Image uploaded: ' + host + '/' + slug : 'Created: ' + (host === new URL(ORIGIN).host ? (ORIGIN + '/' + slug) : ('https://' + host + '/' + slug))));
e.target.reset();
updateTransformerMode();
@@ -1296,8 +2108,8 @@ document.getElementById('createForm').addEventListener('submit', async function(
const emptyRow = tbody.querySelector('tr:not(#filterEmptyRow) .empty-row');
if (emptyRow) emptyRow.closest('tr').remove();
- const expiryText = body.expiresAt
- ? new Date(body.expiresAt).toLocaleString('en-GB', { dateStyle: 'short', timeStyle: 'short' })
+ const expiryText = expiresAtRaw
+ ? new Date(expiresAtRaw).toLocaleString('en-GB', { dateStyle: 'short', timeStyle: 'short' })
: '—';
const shortUrl = (host === new URL(ORIGIN).host) ? (ORIGIN + '/' + slug) : ('https://' + host + '/' + slug);
const tr = document.createElement('tr');
@@ -1305,23 +2117,27 @@ document.getElementById('createForm').addEventListener('submit', async function(
tr.dataset.host = host;
tr.dataset.status = 'active';
tr.dataset.folderSlug = isTransformer ? '' : (folderSlug || '');
- tr.dataset.type = isTransformer ? 'transformer' : 'link';
+ tr.dataset.type = isTransformer ? 'transformer' : (isImage ? 'image' : 'link');
tr.dataset.id = createdId;
function esc(s) {
return String(s).replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"').replace(/'/g,''');
}
+ let typePill = '';
+ if (isTransformer) typePill = '
Transformer';
+ if (isImage) typePill = '
Image';
+
tr.innerHTML =
- '
' + (isTransformer ? renderPatternTokens(slug) : esc(slug)) + '' + (isTransformer ? ' Transformer' : '') + ' | ' +
+ '
' + (isTransformer ? renderPatternTokens(slug) : esc(slug)) + '' + typePill + ' | ' +
'
' + esc(host) + ' | ' +
'
Active | ' +
- '
' + (isTransformer ? ('' + renderPatternTokens(guest) + '') : ('' + esc(guest) + '')) + ' | ' +
+ '
' + (isTransformer ? ('' + renderPatternTokens(guest) + '') : (isImage ? 'Image Data' : ('' + esc(guest) + ''))) + ' | ' +
'
0 | ' +
- '
' + (!isTransformer && body.password ? '🔒' : '—') + ' | ' +
+ '
' + (!isTransformer && password ? '🔒' : '—') + ' | ' +
'
' + (isTransformer ? '—' : esc(expiryText)) + ' | ' +
'
' +
- buildLinkRowActionsHtml(host, slug, guest, isTransformer ? null : body.expiresAt, isTransformer ? null : (folderSlug || null), 'active', isTransformer ? 'transformer' : 'link', createdId) +
+ buildLinkRowActionsHtml(host, slug, guest || '', isTransformer || isImage ? null : new Date(expiresAtRaw).getTime(), isTransformer ? null : (folderSlug || null), 'active', isTransformer ? 'transformer' : (isImage ? 'image' : 'link'), createdId) +
' | ';
tbody.insertBefore(tr, tbody.firstChild);
@@ -1329,6 +2145,7 @@ document.getElementById('createForm').addEventListener('submit', async function(
if (badge) badge.textContent = parseInt(badge.textContent || '0', 10) + 1;
applyRowVisibility();
});
- `,
- );
+
+ `
+ )
}
diff --git a/src/pages/errors.js b/src/pages/errors.js
index 1a20a7d..a72a273 100644
--- a/src/pages/errors.js
+++ b/src/pages/errors.js
@@ -1,7 +1,7 @@
-import { htmlPage } from './shared.js';
-import { escHtml } from '../util.js';
+import { htmlPage } from './shared.js'
+import { escHtml } from '../util.js'
-export function passwordPage(slug, badPassword) {
+export function passwordPage (slug, badPassword) {
return htmlPage(
'Protected Link — Plummer',
`
@@ -30,11 +30,11 @@ export function passwordPage(slug, badPassword) {
h1 { font-size:1.5rem; font-weight:800; margin-bottom:10px; }
p { opacity:0.72; margin-bottom:20px; font-size:0.95rem; }
.alert { text-align:left; }
- `,
- );
+ `
+ )
}
-export function expiredPage() {
+export function expiredPage () {
return htmlPage(
'Link Expired — Plummer',
`
@@ -51,11 +51,11 @@ export function expiredPage() {
.page-icon { font-size:3rem; margin-bottom:18px; }
h1 { font-size:1.5rem; font-weight:800; margin-bottom:10px; }
p { opacity:0.72; margin-bottom:4px; font-size:0.95rem; }
- `,
- );
+ `
+ )
}
-export function inactivePage() {
+export function inactivePage () {
return htmlPage(
'Link Inactive — Plummer',
`
@@ -72,11 +72,11 @@ export function inactivePage() {
.page-icon { font-size:3rem; margin-bottom:18px; }
h1 { font-size:1.5rem; font-weight:800; margin-bottom:10px; }
p { opacity:0.72; margin-bottom:4px; font-size:0.95rem; }
- `,
- );
+ `
+ )
}
-export function deletedPage() {
+export function deletedPage () {
return htmlPage(
'Link Deleted — Plummer',
`
@@ -93,11 +93,11 @@ export function deletedPage() {
.page-icon { font-size:3rem; margin-bottom:18px; }
h1 { font-size:1.5rem; font-weight:800; margin-bottom:10px; }
p { opacity:0.72; margin-bottom:4px; font-size:0.95rem; }
- `,
- );
+ `
+ )
}
-export function notFoundPage() {
+export function notFoundPage () {
return htmlPage(
'Not Found — Plummer',
`
@@ -114,11 +114,11 @@ export function notFoundPage() {
.page-icon { font-size:3rem; margin-bottom:18px; }
h1 { font-size:1.5rem; font-weight:800; margin-bottom:10px; }
p { opacity:0.72; margin-bottom:4px; font-size:0.95rem; }
- `,
- );
+ `
+ )
}
-export function misconfiguredPage() {
+export function misconfiguredPage () {
return htmlPage(
'Setup Required — Plummer',
`
@@ -152,7 +152,6 @@ export function misconfiguredPage() {
border-radius:8px; font-family:ui-monospace,monospace; font-size:13px;
text-align:left; overflow-x:auto;
}
- `,
- );
+ `
+ )
}
-
diff --git a/src/pages/folders.js b/src/pages/folders.js
index 0385c80..a8086bf 100644
--- a/src/pages/folders.js
+++ b/src/pages/folders.js
@@ -1,27 +1,27 @@
-import { htmlPage } from './shared.js';
-import { escHtml } from '../util.js';
+import { htmlPage } from './shared.js'
+import { escHtml } from '../util.js'
-export function folderListingPage({ origin, host, folder, links }) {
- const title = folder?.name ? `${folder.name} — Plummer` : 'Folder — Plummer';
- const safeName = folder?.name ? escHtml(folder.name) : escHtml(folder?.slug ?? 'Folder');
- const base = new URL(origin);
- base.host = host;
+export function folderListingPage ({ origin, host, folder, links }) {
+ const title = folder?.name ? `${folder.name} — Plummer` : 'Folder — Plummer'
+ const safeName = folder?.name ? escHtml(folder.name) : escHtml(folder?.slug ?? 'Folder')
+ const base = new URL(origin)
+ base.host = host
const rows = links.length === 0
- ? `
| No links in this folder yet. |
`
+ ? '
| No links in this folder yet. |
'
: links.map((link) => {
- const shortUrl = `${base.origin}/${link.slug}`;
+ const shortUrl = `${base.origin}/${link.slug}`
const expiry = link.expiresAt
? new Date(link.expiresAt).toLocaleString('en-GB', { dateStyle: 'short', timeStyle: 'short' })
- : '—';
- const status = link.status || 'active';
+ : '—'
+ const status = link.status || 'active'
return `
${escHtml(link.slug)} |
${escHtml(link.guest)} |
${escHtml(status)} |
${escHtml(expiry)} |
-
`;
- }).join('');
+ `
+ }).join('')
return htmlPage(
title,
@@ -77,7 +77,6 @@ export function folderListingPage({ origin, host, folder, links }) {
.url-cell { max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-row { text-align: center; padding: 28px; opacity: 0.6; font-style: italic; }
code { font-family: ui-monospace, "Cascadia Code", monospace; }
- `,
- );
+ `
+ )
}
-
diff --git a/src/pages/heartbeat.js b/src/pages/heartbeat.js
index fde110c..c785186 100644
--- a/src/pages/heartbeat.js
+++ b/src/pages/heartbeat.js
@@ -1,4 +1,4 @@
-export function heartbeatPage() {
+export function heartbeatPage () {
return `
@@ -112,5 +112,5 @@ export function heartbeatPage() {
-`;
+