librelad e75f10618d feat(ssh): WebUI SSH Access page
New /ssh page (topbar nav + SPA route + SshPage controller + ssh-content.html
+ ssh.css). Reads data/ssh/access.json and lets the admin: paste a public key
to authorize a machine, remove keys, and toggle key-only login — all via
'libreportal ssh ...' tasks through the backend's lockout guards. Reuses the
backup key-card styles for a consistent look. This is the inbound counterpart
to the backup location key card (outbound): same paste-a-key model, opposite
direction.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
2026-05-23 16:52:47 +01:00

133 lines
6.0 KiB
JavaScript

// SSH Access page — manage inbound admin SSH to this host: authorize public
// keys (paste to grant access), remove them, and toggle password login behind
// the backend's lockout guard. Reads /data/ssh/access.json; all mutations run
// as `libreportal ssh ...` tasks. LibrePortal never handles a private key here.
class SshPage {
constructor() {
this.taskManager = (typeof TaskManager !== 'undefined') ? new TaskManager() : null;
this.data = null;
this._bound = false;
}
async init() {
this.bindEvents();
await this.refresh();
this.render();
}
async refresh() {
this.data = await this.fetchJson(`/data/ssh/access.json?t=${Date.now()}`);
}
async fetchJson(url) {
try { const r = await fetch(url); if (!r.ok) return null; return await r.json(); }
catch { return null; }
}
escape(s) {
return String(s ?? '').replace(/[&<>"']/g, c => (
{ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
));
}
notify(msg, type) {
if (window.notificationSystem) window.notificationSystem.show(msg, type || 'info');
else console.log(`[ssh ${type || 'info'}] ${msg}`);
}
bindEvents() {
if (this._bound) return;
this._bound = true;
document.addEventListener('click', (e) => {
if (e.target.closest('[data-action="ssh-add-key"]')) { this.addKey(); return; }
const rm = e.target.closest('[data-action="ssh-remove-key"]');
if (rm) { this.removeKey(rm.dataset.fp); return; }
const tog = e.target.closest('[data-action="ssh-toggle-password"]');
if (tog) { this.togglePassword(tog.dataset.next); return; }
});
}
render() {
const root = document.getElementById('ssh-page-root');
if (!root) return;
if (!this.data) {
root.innerHTML = `<div class="backup-empty-state">Couldn't load SSH access data.</div>`;
return;
}
const d = this.data;
const pwOn = d.password_auth === true;
const keys = Array.isArray(d.keys) ? d.keys : [];
const keysHtml = keys.length ? keys.map(k => `
<div class="ssh-key-row">
<div class="ssh-key-row-main">
<span class="ssh-key-type">${this.escape(k.type)}</span>
<span class="ssh-key-comment">${this.escape(k.comment || '(no comment)')}</span>
<span class="ssh-key-fp">${this.escape(k.fingerprint)}</span>
</div>
<button type="button" class="backup-danger-btn" data-action="ssh-remove-key" data-fp="${this.escape(k.fingerprint)}">Remove</button>
</div>`).join('') : `<div class="backup-empty-state">No keys authorized yet — add one below to allow key-based login.</div>`;
root.innerHTML = `
<div class="backup-ssh-key-card">
<div class="backup-ssh-key-head">
<span class="backup-ssh-key-title">Login</span>
<span class="backup-ssh-key-status ${pwOn ? 'none' : 'ok'}">${pwOn ? 'Password login: ON' : 'Key-only login'}</span>
</div>
<p class="backup-card-hint">Logging in as <code>${this.escape(d.user)}</code> · ${keys.length} authorized key${keys.length === 1 ? '' : 's'}.</p>
<div class="backup-ssh-key-actions">
${pwOn
? `<button type="button" class="backup-secondary-btn" data-action="ssh-toggle-password" data-next="off">Require key-only login</button>`
: `<button type="button" class="backup-secondary-btn" data-action="ssh-toggle-password" data-next="on">Re-enable password login</button>`}
</div>
${pwOn ? '' : `<p class="backup-card-hint" style="margin-top:8px">Password login is disabled — only the keys below can connect.</p>`}
</div>
<div class="backup-ssh-key-card">
<div class="backup-ssh-key-head"><span class="backup-ssh-key-title">Add a key</span></div>
<p class="backup-card-hint">Paste a <strong>public</strong> key (the <code>.pub</code> from your machine) to grant it SSH access:</p>
<textarea class="backup-ssh-keyinput" id="ssh-add-key-input" rows="3" spellcheck="false" placeholder="ssh-ed25519 AAAA... you@laptop"></textarea>
<div class="backup-ssh-key-actions">
<button type="button" class="backup-primary-btn" data-action="ssh-add-key">Authorize key</button>
</div>
</div>
<div class="backup-ssh-key-card">
<div class="backup-ssh-key-head"><span class="backup-ssh-key-title">Authorized keys</span></div>
<div class="ssh-key-list">${keysHtml}</div>
</div>
`;
}
async runTask(command) {
if (!this.taskManager) { this.notify('Task system unavailable', 'error'); return; }
try {
await this.taskManager.createTask(command, 'ssh', null);
setTimeout(() => this.refresh().then(() => this.render()), 1500);
} catch (e) {
this.notify(`Failed to queue task: ${e.message || e}`, 'error');
}
}
async addKey() {
const input = document.getElementById('ssh-add-key-input');
const key = (input?.value || '').trim();
if (!key) { this.notify('Paste a public key first', 'error'); return; }
const b64 = btoa(unescape(encodeURIComponent(key)));
await this.runTask(`libreportal ssh key-add ${b64}`);
}
async removeKey(fp) {
if (!fp) return;
if (!confirm('Remove this key? That machine will no longer be able to SSH in.')) return;
await this.runTask(`libreportal ssh key-remove ${fp}`);
}
async togglePassword(next) {
if (next === 'off' && !confirm('Disable password login? Make sure a key above works first — otherwise you could lock yourself out.')) return;
await this.runTask(`libreportal ssh password-auth ${next}`);
}
}
window.SshPage = SshPage;