Merge claude/1
This commit is contained in:
librelad
commit
c460f7afcb
@ -19,24 +19,20 @@
|
||||
color: rgba(var(--text-rgb), 0.45);
|
||||
}
|
||||
|
||||
.ssh-page-header {
|
||||
margin-bottom: 18px;
|
||||
/* SSH Access uses the config page's section layout (.config-category /
|
||||
.domains-wrapper); these just space the content inside each section. */
|
||||
.ssh-section-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.ssh-page-header h1 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.ssh-page-sub {
|
||||
margin: 0;
|
||||
color: rgba(var(--text-rgb), 0.65);
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.ssh-page .backup-ssh-key-card {
|
||||
margin-top: 16px;
|
||||
.ssh-section-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.ssh-key-list {
|
||||
|
||||
@ -167,7 +167,7 @@ if (typeof window.ConfigManager === 'undefined') {
|
||||
'<div class="page-header config-page-header">' +
|
||||
'<img class="page-header-icon" src="/icons/config/' + catIcon + '.svg" alt="" onerror="this.style.display=\'none\'">' +
|
||||
'<div class="page-header-title">' +
|
||||
'<div class="admin-breadcrumb">Admin</div>' +
|
||||
'<div class="admin-breadcrumb">Config</div>' +
|
||||
'<h1>' + catTitle + '</h1>' +
|
||||
(catDesc ? '<p>' + catDesc + '</p>' : '') +
|
||||
'</div>' +
|
||||
|
||||
@ -36,6 +36,13 @@ class ConfigSidebar {
|
||||
});
|
||||
this.categoriesList.appendChild(overviewItem);
|
||||
|
||||
// "Config" group heading above the configuration categories (mirrors the
|
||||
// "Tools" heading below).
|
||||
const configLabel = document.createElement('div');
|
||||
configLabel.className = 'sidebar-group-label';
|
||||
configLabel.textContent = 'Config';
|
||||
this.categoriesList.appendChild(configLabel);
|
||||
|
||||
// Convert categories object to array and sort by ORDER
|
||||
const categoriesArray = Object.entries(window.configData.categories).map(([key, value]) => ({
|
||||
id: key,
|
||||
|
||||
@ -75,43 +75,50 @@ class SshPage {
|
||||
<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>`;
|
||||
|
||||
// Reuse the config page's section layout (.config-category/.domains-*)
|
||||
// so SSH Access looks like the rest of the Admin config pages.
|
||||
const section = (title, desc, inner) => `
|
||||
<div class="config-category">
|
||||
<div class="domains-wrapper">
|
||||
<div class="domains-header"><div><h3>${title}</h3><p class="category-description">${desc}</p></div></div>
|
||||
<div class="domains-divider"></div>
|
||||
${inner}
|
||||
</div>
|
||||
<div class="spacer spacer-lg"></div>
|
||||
</div>`;
|
||||
|
||||
const loginInner = `
|
||||
<div class="ssh-section-body">
|
||||
<div class="admin-card-line"><span>Password login</span><strong>${pwOn ? 'On' : 'Key-only'}</strong></div>
|
||||
<div class="admin-card-line"><span>Authorized keys</span><strong>${keys.length}</strong></div>
|
||||
<div class="ssh-section-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>
|
||||
</div>`;
|
||||
|
||||
const addInner = `
|
||||
<div class="ssh-section-body">
|
||||
<p class="category-description">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="ssh-section-actions">
|
||||
<button type="button" class="backup-primary-btn" data-action="ssh-add-key">Authorize key</button>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
root.innerHTML = `
|
||||
<div class="ssh-page">
|
||||
<div class="page-header config-page-header">
|
||||
<div class="page-header-title">
|
||||
<div class="admin-breadcrumb">Admin</div>
|
||||
<div class="admin-breadcrumb">Tools</div>
|
||||
<h1>SSH Access</h1>
|
||||
<p>Control who can SSH into this server. Grant access by adding a public key, and optionally require key-only login.</p>
|
||||
<p>Control who can SSH into this server (logging in as <code>${this.escape(d.user)}</code>). Grant access by adding a public key, and optionally require key-only login.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
${section('Login', pwOn ? 'Password login is on. Add a key, then you can switch to key-only.' : 'Password login is disabled — only the keys below can connect.', loginInner)}
|
||||
${section('Add a key', 'Authorize a new machine to log in.', addInner)}
|
||||
${section('Authorized keys', 'Machines currently allowed to SSH in.', `<div class="ssh-key-list ssh-section-body">${keysHtml}</div>`)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user