diff --git a/containers/libreportal/frontend/css/ssh.css b/containers/libreportal/frontend/css/ssh.css index 0b55c7d..965f3d6 100644 --- a/containers/libreportal/frontend/css/ssh.css +++ b/containers/libreportal/frontend/css/ssh.css @@ -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 { diff --git a/containers/libreportal/frontend/js/components/config/config-manager.js b/containers/libreportal/frontend/js/components/config/config-manager.js index 66b85b3..b26cc6e 100755 --- a/containers/libreportal/frontend/js/components/config/config-manager.js +++ b/containers/libreportal/frontend/js/components/config/config-manager.js @@ -167,7 +167,7 @@ if (typeof window.ConfigManager === 'undefined') { '`).join('') : `
No keys authorized yet โ€” add one below to allow key-based login.
`; + // 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) => ` +
+
+

${title}

${desc}

+
+ ${inner} +
+
+
`; + + const loginInner = ` +
+
Password login${pwOn ? 'On' : 'Key-only'}
+
Authorized keys${keys.length}
+
+ ${pwOn + ? `` + : ``} +
+
`; + + const addInner = ` +
+

Paste a public key (the .pub from your machine) to grant it SSH access.

+ +
+ +
+
`; + root.innerHTML = `
- -
-
- Login - ${pwOn ? 'Password login: ON' : 'Key-only login'} -
-

Logging in as ${this.escape(d.user)} ยท ${keys.length} authorized key${keys.length === 1 ? '' : 's'}.

-
- ${pwOn - ? `` - : ``} -
- ${pwOn ? '' : `

Password login is disabled โ€” only the keys below can connect.

`} -
- -
-
Add a key
-

Paste a public key (the .pub from your machine) to grant it SSH access:

- -
- -
-
- -
-
Authorized keys
-
${keysHtml}
-
+ ${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.', `
${keysHtml}
`)}
`; }