feat: improve secrets management UI
This commit is contained in:
parent
d32c2ceec6
commit
962a345ddc
|
|
@ -50,6 +50,11 @@
|
|||
'.secrets-status{font-size:.78rem;color:#8b949e;min-height:1rem}',
|
||||
'.secrets-status.error{color:#ff8f8f}',
|
||||
'.secrets-secret-value{white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid #303844;background:#0d1117;border-radius:4px;padding:.7rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.82rem}',
|
||||
'.secrets-table{width:100%;border-collapse:collapse;border:1px solid #252b36;background:#11151d;border-radius:6px;overflow:hidden}',
|
||||
'.secrets-table th,.secrets-table td{border-bottom:1px solid #252b36;padding:.55rem .65rem;text-align:left;vertical-align:top;font-size:.84rem}',
|
||||
'.secrets-table th{width:9rem;color:#8b949e;font-weight:500;background:#151a23}',
|
||||
'.secrets-table td{color:#e6edf3;overflow-wrap:anywhere}',
|
||||
'.secrets-table tr:last-child th,.secrets-table tr:last-child td{border-bottom:0}',
|
||||
'@media(max-width:780px){.secrets-root{grid-template-columns:1fr}.secrets-panel{border-right:0;border-bottom:1px solid #252b36;max-height:45vh}.secrets-row{grid-template-columns:1fr}}'
|
||||
].join('\n');
|
||||
|
||||
|
|
@ -138,6 +143,7 @@
|
|||
var records = [];
|
||||
var selectedRecord = null;
|
||||
var selectedValue = '';
|
||||
var initialized = false;
|
||||
var unlocked = false;
|
||||
var statusText = '';
|
||||
var statusError = false;
|
||||
|
|
@ -155,13 +161,24 @@
|
|||
'data-secret-master-password': '',
|
||||
placeholder: 'Master password'
|
||||
});
|
||||
var confirmInput = initialized ? null : el('input', {
|
||||
className: 'secrets-input',
|
||||
type: 'password',
|
||||
'data-secret-master-password-confirm': '',
|
||||
placeholder: 'Repeat master password'
|
||||
});
|
||||
var unlockBtn = el('button', {
|
||||
className: 'secrets-btn primary',
|
||||
type: 'button',
|
||||
'data-secret-unlock': '',
|
||||
onClick: function () {
|
||||
if (!initialized && passwordInput.value !== confirmInput.value) {
|
||||
setStatus('Master passwords do not match', true);
|
||||
return;
|
||||
}
|
||||
unlockBtn.disabled = true;
|
||||
api.secrets.unlock(passwordInput.value).then(function () {
|
||||
initialized = true;
|
||||
unlocked = true;
|
||||
return loadRecords();
|
||||
}).catch(function (err) {
|
||||
|
|
@ -170,6 +187,21 @@
|
|||
});
|
||||
}
|
||||
}, ['Unlock']);
|
||||
if (!initialized) unlockBtn.textContent = 'Create master password';
|
||||
var rows = [
|
||||
el('div', { className: 'secrets-row' }, [
|
||||
el('label', { className: 'secrets-label' }, ['Password']),
|
||||
passwordInput
|
||||
])
|
||||
];
|
||||
if (confirmInput) {
|
||||
rows.push(el('div', { className: 'secrets-row' }, [
|
||||
el('label', { className: 'secrets-label' }, ['Repeat']),
|
||||
confirmInput
|
||||
]));
|
||||
}
|
||||
rows.push(el('div', { className: 'secrets-actions' }, [unlockBtn]));
|
||||
rows.push(el('div', { className: statusError ? 'secrets-status error' : 'secrets-status' }, [statusText]));
|
||||
containerEl.innerHTML = '';
|
||||
containerEl.appendChild(el('div', { className: 'secrets-root' }, [
|
||||
el('div', { className: 'secrets-panel' }, [
|
||||
|
|
@ -179,15 +211,8 @@
|
|||
]),
|
||||
el('div', { className: 'secrets-main' }, [
|
||||
el('div', { className: 'secrets-card' }, [
|
||||
el('h2', {}, ['Unlock secrets']),
|
||||
el('div', { className: 'secrets-form' }, [
|
||||
el('div', { className: 'secrets-row' }, [
|
||||
el('label', { className: 'secrets-label' }, ['Password']),
|
||||
passwordInput
|
||||
]),
|
||||
el('div', { className: 'secrets-actions' }, [unlockBtn]),
|
||||
el('div', { className: statusError ? 'secrets-status error' : 'secrets-status' }, [statusText])
|
||||
])
|
||||
el('h2', {}, [initialized ? 'Unlock secrets' : 'Create master password']),
|
||||
el('div', { className: 'secrets-form' }, rows)
|
||||
])
|
||||
])
|
||||
]));
|
||||
|
|
@ -231,34 +256,64 @@
|
|||
]);
|
||||
return el('div', { className: 'secrets-card' }, [
|
||||
el('h2', {}, [selectedRecord.title || selectedRecord.id]),
|
||||
el('div', { className: 'secrets-status' }, [
|
||||
scopeLabel(selectedRecord) + (selectedRecord.username ? ' · ' + selectedRecord.username : '')
|
||||
el('table', { className: 'secrets-table' }, [
|
||||
el('tbody', {}, [
|
||||
fieldRow('Group', scopeLabel(selectedRecord)),
|
||||
fieldRow('ID', selectedRecord.id),
|
||||
fieldRow('Username', selectedRecord.username || ''),
|
||||
fieldRow('Password', selectedValue ? selectedValue : 'Value hidden'),
|
||||
fieldRow('Updated', selectedRecord.updatedAt || '')
|
||||
])
|
||||
]),
|
||||
el('div', { className: 'secrets-secret-value' }, [selectedValue ? selectedValue : 'Value hidden']),
|
||||
el('div', { className: 'secrets-actions' }, [
|
||||
el('button', {
|
||||
className: 'secrets-btn',
|
||||
type: 'button',
|
||||
'data-secret-copy-link': selectedRecord.id,
|
||||
onClick: function () { copySecretLink(selectedRecord.id); }
|
||||
}, ['Copy secret link'])
|
||||
}, ['Copy secret link']),
|
||||
el('button', {
|
||||
className: 'secrets-btn',
|
||||
type: 'button',
|
||||
'data-secret-edit': selectedRecord.id,
|
||||
onClick: function () { showEditSecret(); }
|
||||
}, ['Edit']),
|
||||
el('button', {
|
||||
className: 'secrets-btn',
|
||||
type: 'button',
|
||||
'data-secret-delete': selectedRecord.id,
|
||||
onClick: function () { deleteSecret(selectedRecord.id); }
|
||||
}, ['Delete'])
|
||||
]),
|
||||
el('div', { className: statusError ? 'secrets-status error' : 'secrets-status' }, [statusText])
|
||||
]);
|
||||
}
|
||||
|
||||
function renderNewSecret() {
|
||||
var title = el('input', { className: 'secrets-input', type: 'text', value: '', placeholder: 'Title' });
|
||||
var id = el('input', { className: 'secrets-input', type: 'text', value: '', placeholder: 'stable.id' });
|
||||
var username = el('input', { className: 'secrets-input', type: 'text', value: '', placeholder: 'optional username' });
|
||||
var value = el('textarea', { className: 'secrets-textarea', placeholder: 'Secret value' });
|
||||
function fieldRow(label, value) {
|
||||
return el('tr', {}, [
|
||||
el('th', {}, [label]),
|
||||
el('td', {}, [value || ''])
|
||||
]);
|
||||
}
|
||||
|
||||
function renderSecretForm(existing) {
|
||||
var isEdit = !!existing;
|
||||
var title = el('input', { className: 'secrets-input', type: 'text', 'data-secret-title': '', placeholder: 'Title' });
|
||||
title.value = existing ? text(existing.title) : '';
|
||||
var id = el('input', { className: 'secrets-input', type: 'text', placeholder: 'stable.id' });
|
||||
id.value = existing ? text(existing.id) : '';
|
||||
id.disabled = isEdit;
|
||||
var username = el('input', { className: 'secrets-input', type: 'text', placeholder: 'optional username' });
|
||||
username.value = existing ? text(existing.username) : '';
|
||||
var value = el('textarea', { className: 'secrets-textarea', 'data-secret-value': '', placeholder: 'Secret value' });
|
||||
value.value = isEdit ? selectedValue : '';
|
||||
var scope = el('select', { className: 'secrets-select' }, [
|
||||
el('option', { value: ScopeGlobal }, ['Global']),
|
||||
el('option', { value: ScopeWorkspace }, [workspaceRoot || 'Workspace'])
|
||||
]);
|
||||
if (workspaceRoot) scope.value = ScopeWorkspace;
|
||||
scope.value = existing && existing.scope && existing.scope.kind ? existing.scope.kind : (workspaceRoot ? ScopeWorkspace : ScopeGlobal);
|
||||
return el('div', { className: 'secrets-card' }, [
|
||||
el('h2', {}, ['New secret']),
|
||||
el('h2', {}, [isEdit ? 'Edit secret' : 'New secret']),
|
||||
el('div', { className: 'secrets-form' }, [
|
||||
el('div', { className: 'secrets-row' }, [el('label', { className: 'secrets-label' }, ['Title']), title]),
|
||||
el('div', { className: 'secrets-row' }, [el('label', { className: 'secrets-label' }, ['ID']), id]),
|
||||
|
|
@ -269,6 +324,7 @@
|
|||
el('button', {
|
||||
className: 'secrets-btn primary',
|
||||
type: 'button',
|
||||
'data-secret-save': '',
|
||||
onClick: function () {
|
||||
var nextID = text(id.value).trim() || text(title.value).trim().toLowerCase().replace(/[^a-z0-9._-]+/g, '.').replace(/^\.+|\.+$/g, '');
|
||||
api.secrets.write({
|
||||
|
|
@ -286,7 +342,8 @@
|
|||
setStatus((err && err.message) ? err.message : String(err), true);
|
||||
});
|
||||
}
|
||||
}, ['Save'])
|
||||
}, ['Save']),
|
||||
el('button', { className: 'secrets-btn', type: 'button', onClick: function () { mode = 'selected'; render(); } }, ['Cancel'])
|
||||
]),
|
||||
el('div', { className: statusError ? 'secrets-status error' : 'secrets-status' }, [statusText])
|
||||
])
|
||||
|
|
@ -305,7 +362,7 @@
|
|||
containerEl.appendChild(el('div', { className: 'secrets-root' }, [
|
||||
el('div', { className: 'secrets-panel' }, renderList()),
|
||||
el('div', { className: 'secrets-main' }, [
|
||||
mode === 'new' ? renderNewSecret() : renderSelected()
|
||||
mode === 'new' ? renderSecretForm(null) : mode === 'edit' ? renderSecretForm(selectedRecord) : renderSelected()
|
||||
])
|
||||
]));
|
||||
}
|
||||
|
|
@ -350,6 +407,26 @@
|
|||
render();
|
||||
}
|
||||
|
||||
function showEditSecret() {
|
||||
if (!selectedRecord) return;
|
||||
mode = 'edit';
|
||||
statusText = '';
|
||||
statusError = false;
|
||||
render();
|
||||
}
|
||||
|
||||
function deleteSecret(id) {
|
||||
if (!id || !window.confirm('Delete this secret?')) return;
|
||||
api.secrets.delete(id).then(function () {
|
||||
selectedID = '';
|
||||
selectedRecord = null;
|
||||
selectedValue = '';
|
||||
return loadRecords();
|
||||
}).catch(function (err) {
|
||||
setStatus((err && err.message) ? err.message : String(err), true);
|
||||
});
|
||||
}
|
||||
|
||||
function copySecretLink(id) {
|
||||
api.secrets.copyLink(id).then(function (link) {
|
||||
return writeClipboard(api, link).then(function () {
|
||||
|
|
@ -361,6 +438,7 @@
|
|||
}
|
||||
|
||||
api.secrets.status().then(function (status) {
|
||||
initialized = !!(status && status.initialized);
|
||||
unlocked = !!(status && status.unlocked);
|
||||
if (unlocked) return loadRecords();
|
||||
render();
|
||||
|
|
|
|||
|
|
@ -105,6 +105,7 @@ function loadComponent(document) {
|
|||
VerstakPluginRegister(pluginId, bundle) {
|
||||
registry[pluginId] = bundle.components || {};
|
||||
},
|
||||
confirm: () => true,
|
||||
navigator: { clipboard: { writeText: async () => undefined } },
|
||||
},
|
||||
setTimeout,
|
||||
|
|
@ -139,14 +140,17 @@ async function flush() {
|
|||
{ id: 'global.server', title: 'Global Server', username: 'root', scope: { kind: 'global' }, updatedAt: '2026-06-29T00:00:00Z' },
|
||||
{ id: 'client-a.db', title: 'Client A DB', username: 'app', scope: { kind: 'workspace', workspaceRootPath: 'ClientA' }, updatedAt: '2026-06-29T00:00:00Z' },
|
||||
];
|
||||
let initialized = false;
|
||||
let unlocked = false;
|
||||
const readCalls = [];
|
||||
const copied = [];
|
||||
const deleted = [];
|
||||
const api = {
|
||||
secrets: {
|
||||
status: async () => ({ unlocked }),
|
||||
status: async () => ({ initialized, unlocked }),
|
||||
unlock: async (password) => {
|
||||
if (password !== 'master') throw new Error('bad password');
|
||||
if (password !== 'master-password') throw new Error('bad password');
|
||||
initialized = true;
|
||||
unlocked = true;
|
||||
},
|
||||
list: async () => records,
|
||||
|
|
@ -154,7 +158,20 @@ async function flush() {
|
|||
readCalls.push(id);
|
||||
return { ...records.find((record) => record.id === id), value: 'secret-value' };
|
||||
},
|
||||
write: async (record) => ({ ...record, id: record.id || 'generated.id', updatedAt: '2026-06-29T00:00:00Z' }),
|
||||
write: async (record) => {
|
||||
const next = { ...record, id: record.id || 'generated.id', updatedAt: '2026-06-29T00:00:00Z' };
|
||||
const idx = records.findIndex((item) => item.id === next.id);
|
||||
const listRecord = { ...next };
|
||||
delete listRecord.value;
|
||||
if (idx >= 0) records[idx] = listRecord;
|
||||
else records.push(listRecord);
|
||||
return listRecord;
|
||||
},
|
||||
delete: async (id) => {
|
||||
deleted.push(id);
|
||||
const idx = records.findIndex((record) => record.id === id);
|
||||
if (idx >= 0) records.splice(idx, 1);
|
||||
},
|
||||
copyLink: async (id) => `[${records.find((record) => record.id === id).title}](verstak-secret://${id})`,
|
||||
},
|
||||
clipboard: {
|
||||
|
|
@ -166,11 +183,13 @@ async function flush() {
|
|||
component.mount(container, { workspaceRootPath: 'ClientA', resource: { path: 'client-a.db' } }, api);
|
||||
await flush();
|
||||
|
||||
if (!container.textContent.includes('Unlock secrets')) throw new Error('locked screen did not render');
|
||||
if (!container.textContent.includes('Create master password')) throw new Error('setup screen did not render');
|
||||
const passwordInput = walk(container, (node) => node.getAttribute && node.getAttribute('data-secret-master-password') === '');
|
||||
const confirmInput = walk(container, (node) => node.getAttribute && node.getAttribute('data-secret-master-password-confirm') === '');
|
||||
const unlockButton = walk(container, (node) => node.getAttribute && node.getAttribute('data-secret-unlock') === '');
|
||||
if (!passwordInput || !unlockButton) throw new Error('unlock controls missing');
|
||||
passwordInput.value = 'master';
|
||||
if (!passwordInput || !confirmInput || !unlockButton) throw new Error('setup controls missing');
|
||||
passwordInput.value = 'master-password';
|
||||
confirmInput.value = 'master-password';
|
||||
unlockButton.click();
|
||||
await flush();
|
||||
|
||||
|
|
@ -178,6 +197,10 @@ async function flush() {
|
|||
if (!container.textContent.includes('ClientA')) throw new Error('workspace group missing');
|
||||
if (!container.textContent.includes('Client A DB')) throw new Error('workspace secret missing');
|
||||
if (!readCalls.includes('client-a.db')) throw new Error('deep-linked secret was not selected/read');
|
||||
if (!container.textContent.includes('Group')) throw new Error('secret field table missing Group row');
|
||||
if (!container.textContent.includes('Username')) throw new Error('secret field table missing Username row');
|
||||
if (!container.textContent.includes('Password')) throw new Error('secret field table missing Password row');
|
||||
if (!container.textContent.includes('secret-value')) throw new Error('secret value was not shown in the field table');
|
||||
|
||||
const copyButton = walk(container, (node) => node.getAttribute && node.getAttribute('data-secret-copy-link') === 'client-a.db');
|
||||
if (!copyButton) throw new Error('copy link button missing');
|
||||
|
|
@ -185,6 +208,26 @@ async function flush() {
|
|||
await flush();
|
||||
if (!copied.includes('[Client A DB](verstak-secret://client-a.db)')) throw new Error('secret link was not copied');
|
||||
|
||||
const editButton = walk(container, (node) => node.getAttribute && node.getAttribute('data-secret-edit') === 'client-a.db');
|
||||
if (!editButton) throw new Error('edit button missing');
|
||||
editButton.click();
|
||||
await flush();
|
||||
const titleInput = walk(container, (node) => node.getAttribute && node.getAttribute('data-secret-title') === '');
|
||||
const valueInput = walk(container, (node) => node.getAttribute && node.getAttribute('data-secret-value') === '');
|
||||
const saveButton = walk(container, (node) => node.getAttribute && node.getAttribute('data-secret-save') === '');
|
||||
if (!titleInput || !valueInput || !saveButton) throw new Error('edit form controls missing');
|
||||
titleInput.value = 'Client A DB Updated';
|
||||
valueInput.value = 'updated-secret-value';
|
||||
saveButton.click();
|
||||
await flush();
|
||||
if (!records.some((record) => record.id === 'client-a.db' && record.title === 'Client A DB Updated')) throw new Error('secret edit did not persist');
|
||||
|
||||
const deleteButton = walk(container, (node) => node.getAttribute && node.getAttribute('data-secret-delete') === 'client-a.db');
|
||||
if (!deleteButton) throw new Error('delete button missing');
|
||||
deleteButton.click();
|
||||
await flush();
|
||||
if (!deleted.includes('client-a.db')) throw new Error('secret delete was not called');
|
||||
|
||||
console.log('secrets plugin smoke passed');
|
||||
})().catch((err) => {
|
||||
console.error(err);
|
||||
|
|
|
|||
Loading…
Reference in New Issue