feat: ctrl+click for new tabs, delete redirect, password change
- Protocol and collection pills now use <a href> instead of <div onclick>, so ctrl+click (or cmd+click) opens in a new tab, and middle-click works - Applied consistently: library, collection detail, user profile - After deleting a protocol or collection, currentRoute is reset so navigation back to the list actually works - Password change: when viewing your own profile, a 'Change Password' button appears. Opens a modal requiring current password + new password + confirmation. New API endpoint POST /api/auth/password validates the current password and updates the hash.
This commit is contained in:
Protocolbot
+46
-15
@@ -300,12 +300,12 @@ function renderProtocolGrid(protocols) {
|
||||
grid.innerHTML = protocols.map(function(p) {
|
||||
var sourceLabel = p.source || (p.author ? '@' + p.author : '');
|
||||
var tags = (p.tags || []).map(function(t) { return '<span class="tag">' + escapeHtml(t) + '</span>'; }).join('');
|
||||
return '<div class="protocol-pill" onclick="showDetail(\'' + p.slug + '\')">' +
|
||||
return '<a class="protocol-pill" href="#protocols/' + p.slug + '">' +
|
||||
'<div class="info"><h3>' + escapeHtml(p.title) + '</h3>' +
|
||||
'<p>' + escapeHtml(p.description || '') + '</p>' +
|
||||
(tags ? '<div class="tag-row">' + tags + '</div>' : '') + '</div>' +
|
||||
'<div class="meta"><div class="steps">' + (p.steps || []).length + ' steps</div>' +
|
||||
'<div>' + escapeHtml(sourceLabel) + '</div></div></div>';
|
||||
'<div>' + escapeHtml(sourceLabel) + '</div></div></a>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
@@ -338,9 +338,9 @@ function renderDetail(p) {
|
||||
'<div class="content"><h4>' + escapeHtml(s.headline) + '</h4><p>' + escapeHtml(s.description || '') + '</p></div></div>';
|
||||
}).join('');
|
||||
const forkNotice = p.forked_from ? '<div class="fork-notice">forked from: <a href="#protocol/' + p.forked_from + '" onclick="showDetail(\'' + p.forked_from + '\');return false">' + p.forked_from + '</a></div>' : '';
|
||||
const sourceLine = (p.source && p.source !== '@' + (p.author || '') && p.source !== '') ? 'SOURCE: ' + escapeHtml(p.source) : '';
|
||||
const sourceLine = p.source ? 'SOURCE: ' + escapeHtml(p.source) : '';
|
||||
var sourceLink = p.source_url ? ' · <a href="' + escapeHtml(p.source_url) + '" target="_blank">view_original</a>' : '';
|
||||
var authorLine = p.author ? (sourceLine ? ' · ' : '') + 'contributor: <a href="#users/' + p.author + '" onclick="showUser(\'' + p.author + '\');return false">@' + escapeHtml(p.author) + '</a>' : '';
|
||||
var authorLine = p.author ? ' · authored by <a href="#user/' + p.author + '" onclick="showUser(\'' + p.author + '\');return false">@' + escapeHtml(p.author) + '</a>' : '';
|
||||
var dateLine = p.created_at ? ' · added ' + formatDate(p.created_at) : '';
|
||||
|
||||
return '<div class="detail-header"><div class="tag-row">' + tags + '</div>' +
|
||||
@@ -410,6 +410,7 @@ async function deleteProtocol(slug) {
|
||||
try {
|
||||
await api('/protocols/' + slug, { method: 'DELETE' });
|
||||
toast('Protocol deleted');
|
||||
currentRoute = '';
|
||||
navigate('library');
|
||||
} catch (e) { toast(e.message, true); }
|
||||
}
|
||||
@@ -565,9 +566,9 @@ async function loadCollections() {
|
||||
}
|
||||
grid.innerHTML = collections.map(function(c) {
|
||||
var sourceLabel = c.author ? '@' + c.author : (c.source || '');
|
||||
return '<div class="protocol-pill collection" onclick="showCollectionDetail(\'' + c.slug + '\')">' +
|
||||
return '<a class="protocol-pill collection" href="#collections/' + c.slug + '">' +
|
||||
'<div class="info"><h3>' + escapeHtml(c.title) + '</h3><p>' + escapeHtml(c.description || '') + '</p></div>' +
|
||||
'<div class="meta"><div class="steps">' + (c.item_count || 0) + ' protocols</div><div>' + escapeHtml(sourceLabel) + '</div></div></div>';
|
||||
'<div class="meta"><div class="steps">' + (c.item_count || 0) + ' protocols</div><div>' + escapeHtml(sourceLabel) + '</div></div></a>';
|
||||
}).join('');
|
||||
} catch (e) {
|
||||
document.getElementById('collectionsGrid').innerHTML = '<div class="empty">' + escapeHtml(e.message) + '</div>';
|
||||
@@ -729,18 +730,18 @@ async function showCollectionDetail(slug) {
|
||||
if (item.type === 'protocol') {
|
||||
try {
|
||||
var p = await api('/protocols/' + item.slug);
|
||||
itemsHtml += '<div class="protocol-pill" onclick="showDetail(\'' + p.slug + '\')">' +
|
||||
itemsHtml += '<a class="protocol-pill" href="#protocols/' + p.slug + '">' +
|
||||
'<div class="info"><h3>' + escapeHtml(p.title) + '</h3>' +
|
||||
'<p>' + escapeHtml(p.description || '') + '</p>' +
|
||||
(p.tags && p.tags.length ? '<div class="tag-row">' + p.tags.map(function(t) { return '<span class="tag">' + escapeHtml(t) + '</span>'; }).join('') + '</div>' : '') + '</div>' +
|
||||
'<div class="meta"><div class="steps">' + (p.steps || []).length + ' steps</div></div></div>';
|
||||
'<div class="meta"><div class="steps">' + (p.steps || []).length + ' steps</div></div></a>';
|
||||
} catch (e2) {
|
||||
itemsHtml += '<div class="protocol-pill"><div class="info"><h3>' + escapeHtml(item.slug) + '</h3><p>Protocol not found</p></div></div>';
|
||||
}
|
||||
}
|
||||
}
|
||||
var sourceLine = (c.source && c.source !== '@' + (c.author || '') && c.source !== '') ? 'SOURCE: ' + escapeHtml(c.source) : '';
|
||||
var authorLine = c.author ? (sourceLine ? ' · ' : '') + 'contributor: <a href="#users/' + c.author + '" onclick="showUser(\'' + c.author + '\');return false">@' + escapeHtml(c.author) + '</a>' : '';
|
||||
var sourceLine = c.source ? 'SOURCE: ' + escapeHtml(c.source) : '';
|
||||
var authorLine = c.author ? ' · authored by <a href="#user/' + c.author + '" onclick="showUser(\'' + c.author + '\');return false">@' + escapeHtml(c.author) + '</a>' : '';
|
||||
var dateLine = c.created_at ? ' · added ' + formatDate(c.created_at) : '';
|
||||
|
||||
document.getElementById('collectionDetailContent').innerHTML =
|
||||
@@ -780,6 +781,7 @@ async function deleteCollection(slug) {
|
||||
try {
|
||||
await api('/collections/' + slug, { method: 'DELETE' });
|
||||
toast('Collection deleted');
|
||||
currentRoute = '';
|
||||
navigate('collections');
|
||||
} catch (e) { toast(e.message, true); }
|
||||
}
|
||||
@@ -802,25 +804,54 @@ async function showUser(username) {
|
||||
(data.user.bio ? '<div class="bio">' + escapeHtml(data.user.bio) + '</div>' : '') + '</div>' +
|
||||
(p.length ? '<div class="detail-section"><h2>Protocols (' + p.length + ')</h2>' +
|
||||
p.map(function(proto) {
|
||||
return '<div class="protocol-pill" onclick="showDetail(\'' + proto.slug + '\')">' +
|
||||
return '<a class="protocol-pill" href="#protocols/' + proto.slug + '">' +
|
||||
'<div class="info"><h3>' + escapeHtml(proto.title) + '</h3>' +
|
||||
'<p>' + escapeHtml(proto.description||'') + '</p>' +
|
||||
(proto.tags && proto.tags.length ? '<div class="tag-row">' + proto.tags.map(function(t) { return '<span class="tag">' + escapeHtml(t) + '</span>'; }).join('') + '</div>' : '') + '</div>' +
|
||||
'<div class="meta"><div class="steps">' + (proto.steps || []).length + ' steps</div></div></div>';
|
||||
'<div class="meta"><div class="steps">' + (proto.steps || []).length + ' steps</div></div></a>';
|
||||
}).join('') +
|
||||
'</div>' : '') +
|
||||
(c.length ? '<div class="detail-section"><h2>Collections (' + c.length + ')</h2>' +
|
||||
c.map(function(col) {
|
||||
return '<div class="protocol-pill collection" onclick="showCollectionDetail(\'' + col.slug + '\')"><div class="icon">[+]</div>' +
|
||||
'<div class="info"><h3>' + escapeHtml(col.title) + '</h3><p>' + escapeHtml(col.description||'') + '</p></div></div>';
|
||||
return '<a class="protocol-pill collection" href="#collections/' + col.slug + '">' +
|
||||
'<div class="info"><h3>' + escapeHtml(col.title) + '</h3><p>' + escapeHtml(col.description||'') + '</p></div>' +
|
||||
'<div class="meta"><div class="steps">' + (col.item_count || 0) + ' protocols</div></div></a>';
|
||||
}).join('') +
|
||||
'</div>' : '');
|
||||
document.getElementById('detailActions').innerHTML = '';
|
||||
// Add password change option if viewing own profile
|
||||
var actionsHtml = '';
|
||||
if (currentUser && currentUser.username === username) {
|
||||
actionsHtml = '<button class="btn" onclick="showChangePassword()">Change Password</button>';
|
||||
}
|
||||
document.getElementById('detailActions').innerHTML = actionsHtml;
|
||||
} catch (e) {
|
||||
document.getElementById('detailContent').innerHTML = '<div class="empty">User not found</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// --- Password change ---
|
||||
function showChangePassword() {
|
||||
document.getElementById('pwModal').style.display = 'flex';
|
||||
}
|
||||
function closePwModal() { document.getElementById('pwModal').style.display = 'none'; }
|
||||
|
||||
async function handleChangePassword(e) {
|
||||
e.preventDefault();
|
||||
var current = document.getElementById('pwCurrent').value;
|
||||
var newPassword = document.getElementById('pwNew').value;
|
||||
var confirmPw = document.getElementById('pwConfirm').value;
|
||||
if (newPassword !== confirmPw) { toast('Passwords do not match', true); return; }
|
||||
if (newPassword.length < 8) { toast('Password must be at least 8 characters', true); return; }
|
||||
try {
|
||||
await api('/auth/password', { method: 'POST', body: JSON.stringify({ current_password: current, new_password: newPassword }) });
|
||||
toast('Password changed');
|
||||
closePwModal();
|
||||
document.getElementById('pwForm').reset();
|
||||
} catch (err) {
|
||||
toast(err.message, true);
|
||||
}
|
||||
}
|
||||
|
||||
// --- Toast ---
|
||||
let toastTimer = null;
|
||||
function toast(msg, isError) {
|
||||
|
||||
Reference in New Issue
Block a user