v0.4.6: iVentoy-style PXE menu, top-right user menu, Settings touchups
PXE boot menu polish (iVentoy-inspired):
- render_menu now opens with a best-effort `console --picture
<base>/branding/pxe-logo || console` line so iPXE builds with PNG
support paint the operator's uploaded raster logo as the background.
- ASCII OpenPXE wordmark banner sits at the top of the menu in
`item --gap` lines — always visible on every iPXE build, including
the snponly/undionly variants without graphics console.
- New footer line above `choose`: "OpenPXE v0.4.6 - <arch label>",
where <arch label> is mapped from iPXE's ${buildarch}/${platform}
to "x86 BIOS", "x86_64 UEFI", or "arm64 UEFI". No URL, per brief.
- New GET /branding/pxe-logo route serves the operator's PNG / JPEG /
WebP / GIF as-is for iPXE to consume. SVG uploads 404 here (iPXE
can't rasterize SVG) — the always-visible ASCII wordmark stands in.
Route stays public after admin setup so iPXE clients (no cookies)
can fetch it.
UI:
- Removed the bottom-left "signed in as / Sign out" row.
- Added a person-icon button next to the theme toggle in the topbar.
Click opens a small popover with: Name (display only), Edit account
(jumps to Settings), Sign out. Esc + click-outside close it.
- Settings → Account card form chrome made consistent. The previous
`label.field` selector only styled type=text/number, leaving
password inputs with default browser chrome. Switched to a
negation-list selector that covers every typed input we use, plus
-webkit-appearance:none + a 1px focus ring. Light + dark mode both
show the same border/padding/focus state across all four account
fields.
- Settings → SSO card now renders display name, IdP logo URL (new),
and metadata source on one 3-column row. The metadata <select>
inherits the same chrome as the text inputs so it baseline-aligns
with them. SsoConfig grew an idp_logo_url field, persisted to
sso.json, length-capped and validated to http(s) only.
Quality:
- 138 tests passing (was 132 in v0.4.5). +1 IdP-logo-URL validation,
+1 PXE menu polish regression guard, +4 /branding/pxe-logo
integration tests covering missing-config / SVG-fallback / raster-
serve / post-auth public-allowlist cases.
- cargo clippy --workspace --all-targets clean.
Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
This commit is contained in:
Miles Ward
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
4a354a8664
commit
f8bfab3823
@@ -33,6 +33,11 @@ pub struct SsoConfig {
|
||||
/// with X" button label. Empty/whitespace falls back to "SSO".
|
||||
#[serde(default)]
|
||||
pub idp_name: String,
|
||||
/// Optional HTTPS URL pointing at the IdP's brand logo. Rendered
|
||||
/// next to `idp_name` on the WebUI's login screen (FleetDM-style).
|
||||
/// Length-capped at [`MAX_URL_LEN`]; empty is fine.
|
||||
#[serde(default)]
|
||||
pub idp_logo_url: String,
|
||||
/// Raw SAML metadata XML pasted by the operator. Mutually exclusive
|
||||
/// with `metadata_url`; if both are set, the URL wins at apply time
|
||||
/// (operators typically forget about a stale XML paste).
|
||||
@@ -100,6 +105,7 @@ impl SsoStore {
|
||||
/// but the server enforces a hard ceiling regardless.
|
||||
pub fn replace(&self, mut cfg: SsoConfig) -> Result<SsoConfig> {
|
||||
cfg.idp_name = cfg.idp_name.trim().to_string();
|
||||
cfg.idp_logo_url = cfg.idp_logo_url.trim().to_string();
|
||||
cfg.metadata = cfg.metadata.trim().to_string();
|
||||
cfg.metadata_url = cfg.metadata_url.trim().to_string();
|
||||
if cfg.metadata.len() > MAX_METADATA_BYTES {
|
||||
@@ -112,6 +118,11 @@ impl SsoStore {
|
||||
"metadata_url exceeds {MAX_URL_LEN}-char cap"
|
||||
)));
|
||||
}
|
||||
if cfg.idp_logo_url.len() > MAX_URL_LEN {
|
||||
return Err(Error::Invalid(format!(
|
||||
"idp_logo_url exceeds {MAX_URL_LEN}-char cap"
|
||||
)));
|
||||
}
|
||||
if !cfg.metadata_url.is_empty()
|
||||
&& !cfg.metadata_url.starts_with("http://")
|
||||
&& !cfg.metadata_url.starts_with("https://")
|
||||
@@ -120,6 +131,14 @@ impl SsoStore {
|
||||
"metadata_url must start with http:// or https://".into(),
|
||||
));
|
||||
}
|
||||
if !cfg.idp_logo_url.is_empty()
|
||||
&& !cfg.idp_logo_url.starts_with("http://")
|
||||
&& !cfg.idp_logo_url.starts_with("https://")
|
||||
{
|
||||
return Err(Error::Invalid(
|
||||
"idp_logo_url must start with http:// or https://".into(),
|
||||
));
|
||||
}
|
||||
// If they're trying to *enable* the integration but haven't
|
||||
// supplied either source, reject — saves a "configured but
|
||||
// unusable" surprise later.
|
||||
@@ -197,6 +216,7 @@ mod tests {
|
||||
idp_name: "Okta".into(),
|
||||
metadata: String::new(),
|
||||
metadata_url: "https://idp.example.com/metadata".into(),
|
||||
idp_logo_url: String::new(),
|
||||
})
|
||||
.unwrap();
|
||||
drop(s);
|
||||
@@ -218,6 +238,7 @@ mod tests {
|
||||
idp_name: "Test IdP".into(),
|
||||
metadata: xml.into(),
|
||||
metadata_url: String::new(),
|
||||
idp_logo_url: String::new(),
|
||||
})
|
||||
.unwrap();
|
||||
assert!(s.snapshot().is_usable());
|
||||
@@ -232,6 +253,7 @@ mod tests {
|
||||
idp_name: "Okta".into(),
|
||||
metadata: String::new(),
|
||||
metadata_url: String::new(),
|
||||
idp_logo_url: String::new(),
|
||||
});
|
||||
assert!(matches!(r, Err(Error::Invalid(_))));
|
||||
// …and a disabled blank config is fine.
|
||||
@@ -247,10 +269,38 @@ mod tests {
|
||||
idp_name: String::new(),
|
||||
metadata: String::new(),
|
||||
metadata_url: "ftp://idp.example.com/metadata".into(),
|
||||
idp_logo_url: String::new(),
|
||||
});
|
||||
assert!(matches!(r, Err(Error::Invalid(_))));
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn idp_logo_url_must_be_http_scheme() {
|
||||
// v0.4.6: SSO settings learned an idp_logo_url so the login
|
||||
// screen can render the FleetDM-style "Sign in with <IdP-logo>"
|
||||
// affordance. Same scheme rule as metadata_url.
|
||||
let dir = tempdir().unwrap();
|
||||
let s = SsoStore::load_or_default(dir.path());
|
||||
let r = s.replace(SsoConfig {
|
||||
enabled: false,
|
||||
idp_name: "Okta".into(),
|
||||
metadata: String::new(),
|
||||
metadata_url: String::new(),
|
||||
idp_logo_url: "data:image/png;base64,...".into(),
|
||||
});
|
||||
assert!(matches!(r, Err(Error::Invalid(_))));
|
||||
// Real HTTPS URL is fine.
|
||||
s.replace(SsoConfig {
|
||||
enabled: false,
|
||||
idp_name: "Okta".into(),
|
||||
metadata: String::new(),
|
||||
metadata_url: String::new(),
|
||||
idp_logo_url: "https://idp.example.com/logo.png".into(),
|
||||
})
|
||||
.unwrap();
|
||||
assert_eq!(s.snapshot().idp_logo_url, "https://idp.example.com/logo.png");
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn metadata_size_cap_enforced() {
|
||||
let dir = tempdir().unwrap();
|
||||
@@ -261,6 +311,7 @@ mod tests {
|
||||
idp_name: String::new(),
|
||||
metadata: oversize,
|
||||
metadata_url: String::new(),
|
||||
idp_logo_url: String::new(),
|
||||
});
|
||||
assert!(matches!(r, Err(Error::Invalid(_))));
|
||||
}
|
||||
|
||||
@@ -51,6 +51,13 @@ pub fn build_router(state: AppState) -> Router {
|
||||
.route("/assets/app.css", get(ui_css))
|
||||
.route("/assets/logo.svg", get(ui_logo))
|
||||
.route("/assets/loader.svg", get(ui_loader))
|
||||
// v0.4.6: PXE menu logo — the raster form of the operator's
|
||||
// uploaded mark, served so iPXE's `console --picture` can
|
||||
// overlay it on the boot menu. SVG uploads 404 here (iPXE
|
||||
// can't rasterize SVG); we deliberately don't bundle a
|
||||
// pre-rendered PNG fallback because iPXE's ASCII wordmark
|
||||
// banner already provides the always-visible branding.
|
||||
.route("/branding/pxe-logo", get(ui_pxe_logo))
|
||||
// iPXE script endpoints.
|
||||
.route("/boot.ipxe", get(boot_top_menu))
|
||||
.route("/boot/:filename", get(boot_sub))
|
||||
@@ -263,6 +270,49 @@ async fn ui_logo(State(state): State<AppState>) -> Response {
|
||||
.into_response()
|
||||
}
|
||||
|
||||
/// v0.4.6: raster-only logo endpoint for the iPXE menu's
|
||||
/// `console --picture`. iPXE can't rasterize SVG, so SVG uploads 404
|
||||
/// here — the ASCII OpenPXE wordmark in `render_menu` already gives
|
||||
/// the operator a polished default. No bundled PNG fallback by design:
|
||||
/// either the operator's raster logo paints, or the text stands in.
|
||||
async fn ui_pxe_logo(State(state): State<AppState>) -> Response {
|
||||
let Some(path) = state.branding.logo_path() else {
|
||||
return (StatusCode::NOT_FOUND, "no custom logo configured").into_response();
|
||||
};
|
||||
let Some(mime) = state.branding.logo_mime() else {
|
||||
return (StatusCode::NOT_FOUND, "no mime recorded").into_response();
|
||||
};
|
||||
if mime == "image/svg+xml" {
|
||||
return (
|
||||
StatusCode::NOT_FOUND,
|
||||
"operator-uploaded logo is SVG; iPXE menu falls back to the bundled ASCII wordmark",
|
||||
)
|
||||
.into_response();
|
||||
}
|
||||
match tokio::fs::read(&path).await {
|
||||
Ok(bytes) => {
|
||||
let ct = HeaderValue::from_str(&mime)
|
||||
.unwrap_or_else(|_| HeaderValue::from_static("application/octet-stream"));
|
||||
(
|
||||
[
|
||||
(header::CONTENT_TYPE, ct),
|
||||
(
|
||||
header::CACHE_CONTROL,
|
||||
HeaderValue::from_static("no-cache, max-age=0"),
|
||||
),
|
||||
],
|
||||
bytes,
|
||||
)
|
||||
.into_response()
|
||||
}
|
||||
Err(e) => (
|
||||
StatusCode::NOT_FOUND,
|
||||
format!("custom logo unreadable: {e}"),
|
||||
)
|
||||
.into_response(),
|
||||
}
|
||||
}
|
||||
|
||||
async fn ui_loader() -> Response {
|
||||
(
|
||||
[(
|
||||
@@ -945,6 +995,8 @@ async fn api_docs() -> Json<serde_json::Value> {
|
||||
"summary": "Upload a custom WebUI logo (multipart 'file', PNG/SVG/JPEG/WebP/GIF up to 2 MB)."},
|
||||
{"method": "DELETE", "path": "/api/branding/logo",
|
||||
"summary": "Remove the custom logo and revert to the bundled mark."},
|
||||
{"method": "GET", "path": "/branding/pxe-logo",
|
||||
"summary": "Raster form of the operator's logo for the iPXE menu's `console --picture`. SVG uploads 404 here."},
|
||||
{"method": "GET", "path": "/api/sso",
|
||||
"summary": "Current SAML SSO configuration."},
|
||||
{"method": "PUT", "path": "/api/sso",
|
||||
|
||||
@@ -440,6 +440,9 @@ mod tests {
|
||||
"/", "/assets/app.js", "/boot.ipxe", "/boot/fake.ipxe",
|
||||
"/iso/fake.iso", "/ipxe/snponly.efi", "/healthz", "/readyz",
|
||||
"/metrics",
|
||||
// v0.4.6: iPXE fetches this for `console --picture` before
|
||||
// it can possibly have a session cookie.
|
||||
"/branding/pxe-logo",
|
||||
] {
|
||||
assert!(is_public_path(p), "expected {p} to be public");
|
||||
}
|
||||
|
||||
@@ -29,6 +29,15 @@ use std::fmt::Write as _;
|
||||
|
||||
/// Top-level OpenPXE boot menu. Serialized identically for BIOS and UEFI
|
||||
/// clients because iPXE normalises the menu primitives across firmwares.
|
||||
///
|
||||
/// v0.4.6: rendered with an iVentoy-style polished frame — centered
|
||||
/// OpenPXE wordmark banner at the top (ASCII so every iPXE build can
|
||||
/// paint it), a footer carrying version + arch + firmware kind, and an
|
||||
/// optional `console --picture` directive that paints the operator's
|
||||
/// uploaded raster logo on top when the iPXE binary on the wire was
|
||||
/// built with PNG support. The ASCII banner is always rendered so
|
||||
/// even when the picture call no-ops the screen still reads as
|
||||
/// "OpenPXE — here is the menu" rather than a featureless box.
|
||||
#[must_use]
|
||||
pub fn render_menu(isos: &[IsoMeta], settings: &Settings, base_url: &str) -> String {
|
||||
let mut s = String::new();
|
||||
@@ -47,8 +56,38 @@ pub fn render_menu(isos: &[IsoMeta], settings: &Settings, base_url: &str) -> Str
|
||||
let _ = writeln!(s, "set base-url {base}");
|
||||
let _ = writeln!(s, "set esc:hex 1b");
|
||||
let _ = writeln!(s, "set cls ${{esc:string}}[2J");
|
||||
// v0.4.6: best-effort graphics console with the operator-uploaded
|
||||
// raster logo. Falls back to plain text console on iPXE builds
|
||||
// without PNG support — the `||` chain keeps a parse-clean
|
||||
// single-statement form so even the strictest iPXE parsers accept
|
||||
// it. The `console` reset at the end re-syncs the menu output.
|
||||
let _ = writeln!(
|
||||
s,
|
||||
"console --picture {base}/branding/pxe-logo || console"
|
||||
);
|
||||
// Map iPXE's ${{buildarch}} + ${{platform}} into the human form the
|
||||
// user asked for (e.g. "x86 BIOS", "x86_64 UEFI", "arm64 UEFI").
|
||||
// iPXE evaluates `iseq` lazily, so we only set whichever line
|
||||
// matches. Anything not on the allowlist falls through to a generic
|
||||
// `<buildarch> <platform>` display.
|
||||
let _ = writeln!(s, "set arch-label ${{buildarch}} ${{platform}}");
|
||||
let _ = writeln!(
|
||||
s,
|
||||
"iseq ${{buildarch}} i386 && iseq ${{platform}} pcbios && set arch-label x86 BIOS || iseq ${{buildarch}} x86_64 && iseq ${{platform}} efi && set arch-label x86_64 UEFI || iseq ${{buildarch}} arm64 && iseq ${{platform}} efi && set arch-label arm64 UEFI || true"
|
||||
);
|
||||
let _ = writeln!(s, ":menu");
|
||||
let _ = writeln!(s, "menu OpenPXE - network boot menu");
|
||||
// Centered ASCII wordmark. iPXE menus are ~76 columns wide on the
|
||||
// default VGA text console; the lines below are padded to sit
|
||||
// approximately centered. `item --gap -- <text>` emits text without
|
||||
// a selectable hotkey.
|
||||
let _ = writeln!(s, "item --gap");
|
||||
let _ = writeln!(s, "item --gap -- ___ ___ __ __ ___");
|
||||
let _ = writeln!(s, "item --gap -- / _ \\ _ __ ___ _ _ | _ \\ \\/ / | __|");
|
||||
let _ = writeln!(s, "item --gap -- | (_) | '_ \\/ -_) ' \\ | _/ \\ / | _|");
|
||||
let _ = writeln!(s, "item --gap -- \\___/| .__/\\___|_||_| |_| /_/\\_\\ |___|");
|
||||
let _ = writeln!(s, "item --gap -- |_|");
|
||||
let _ = writeln!(s, "item --gap");
|
||||
let _ = writeln!(
|
||||
s,
|
||||
"item --gap -- ------------------------- Default -------------------------"
|
||||
@@ -82,6 +121,18 @@ pub fn render_menu(isos: &[IsoMeta], settings: &Settings, base_url: &str) -> Str
|
||||
let _ = writeln!(s, "item queue Queued Deployment (join queue)");
|
||||
let _ = writeln!(s, "item --gap");
|
||||
let _ = writeln!(s, "item --key x exit Exit iPXE");
|
||||
// v0.4.6 footer line. Sits just above the `choose` line so it's
|
||||
// always visible regardless of how the menu paginates. iPXE
|
||||
// interpolates `${arch-label}` (set near the top of this script)
|
||||
// and `${version}` is the binary-baked iPXE version — *not* the
|
||||
// OpenPXE version — so we hard-code the OpenPXE version string
|
||||
// here.
|
||||
let openpxe_version = env!("CARGO_PKG_VERSION");
|
||||
let _ = writeln!(s, "item --gap");
|
||||
let _ = writeln!(
|
||||
s,
|
||||
"item --gap -- OpenPXE v{openpxe_version} - ${{arch-label}}"
|
||||
);
|
||||
|
||||
if matches!(settings.timeout_action, TimeoutAction::Stay) {
|
||||
let _ = writeln!(s, "choose --default {default_item} target || goto menu");
|
||||
@@ -575,6 +626,50 @@ mod password_tests {
|
||||
assert!(s.contains("chain http://10.0.0.5/boot/alpha-linux.ipxe"));
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn top_menu_has_polished_branding_and_arch_footer() {
|
||||
// v0.4.6 polish: a `console --picture` line for operator
|
||||
// logos, an ASCII OpenPXE wordmark visible across iPXE
|
||||
// builds (graphics or not), and a single-line footer carrying
|
||||
// the current OpenPXE version + the resolved arch label.
|
||||
let settings = Settings::default();
|
||||
let s = render_menu(&[], &settings, "http://10.0.0.5");
|
||||
assert!(
|
||||
s.contains("console --picture http://10.0.0.5/branding/pxe-logo"),
|
||||
"missing console --picture line:\n{s}"
|
||||
);
|
||||
// Picture-or-text-console must be a single statement so older
|
||||
// iPXE parsers don't choke on the chain.
|
||||
assert!(s.contains("|| console"), "missing graceful fallback:\n{s}");
|
||||
// ASCII wordmark — at least one of the banner lines must
|
||||
// contain the trailing pipe segment, plus the leading "_"s.
|
||||
assert!(
|
||||
s.contains("___ ___ __ __ ___"),
|
||||
"ascii banner missing first row:\n{s}"
|
||||
);
|
||||
// Footer with version + arch interpolation. The version comes
|
||||
// from CARGO_PKG_VERSION at compile time.
|
||||
let version = env!("CARGO_PKG_VERSION");
|
||||
assert!(
|
||||
s.contains(&format!("OpenPXE v{version}")),
|
||||
"footer missing OpenPXE version:\n{s}"
|
||||
);
|
||||
assert!(
|
||||
s.contains("${arch-label}"),
|
||||
"footer missing arch-label interpolation:\n{s}"
|
||||
);
|
||||
// No website URL — the design brief calls that out as tacky.
|
||||
assert!(
|
||||
!s.to_ascii_lowercase().contains("openpxe.com"),
|
||||
"footer should not advertise the website:\n{s}"
|
||||
);
|
||||
// Arch-label mapping covers the three labels from the brief:
|
||||
// "x86 BIOS", "x86_64 UEFI", "arm64 UEFI".
|
||||
assert!(s.contains("x86 BIOS"), "{s}");
|
||||
assert!(s.contains("x86_64 UEFI"), "{s}");
|
||||
assert!(s.contains("arm64 UEFI"), "{s}");
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn generated_scripts_do_not_emit_bare_or_trailing_fallbacks() {
|
||||
let settings = Settings::default();
|
||||
|
||||
@@ -1742,3 +1742,92 @@ async fn docs_lists_new_v0_4_5_endpoints() {
|
||||
assert!(paths.iter().any(|p| p == needle), "{needle} missing");
|
||||
}
|
||||
}
|
||||
|
||||
// ─── v0.4.6: PXE logo endpoint ────────────────────────────────────────────
|
||||
|
||||
#[tokio::test]
|
||||
async fn pxe_logo_404_when_no_custom_logo_configured() {
|
||||
let (state, _dir) = build_state().await;
|
||||
let app = build_router(state);
|
||||
let (s, body) = get(&app, "/branding/pxe-logo").await;
|
||||
assert_eq!(s, StatusCode::NOT_FOUND);
|
||||
let text = std::str::from_utf8(&body).unwrap();
|
||||
assert!(text.contains("no custom logo"), "got: {text}");
|
||||
}
|
||||
|
||||
#[tokio::test]
|
||||
async fn pxe_logo_404_when_uploaded_logo_is_svg() {
|
||||
// iPXE can't rasterize SVG, so an SVG upload deliberately doesn't
|
||||
// light up the PXE menu's `console --picture` overlay — the ASCII
|
||||
// wordmark in render_menu stands in instead.
|
||||
let (state, _dir) = build_state().await;
|
||||
state
|
||||
.branding
|
||||
.set_logo(
|
||||
"image/svg+xml",
|
||||
"svg",
|
||||
br#"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"/>"#,
|
||||
)
|
||||
.unwrap();
|
||||
let app = build_router(state);
|
||||
let (s, body) = get(&app, "/branding/pxe-logo").await;
|
||||
assert_eq!(s, StatusCode::NOT_FOUND);
|
||||
let text = std::str::from_utf8(&body).unwrap();
|
||||
assert!(text.contains("SVG"), "got: {text}");
|
||||
}
|
||||
|
||||
#[tokio::test]
|
||||
async fn pxe_logo_serves_raster_with_correct_mime() {
|
||||
let (state, _dir) = build_state().await;
|
||||
state
|
||||
.branding
|
||||
.set_logo("image/png", "png", b"\x89PNG\r\n\x1a\nfake-png-bytes")
|
||||
.unwrap();
|
||||
let app = build_router(state);
|
||||
let res = app
|
||||
.clone()
|
||||
.oneshot(
|
||||
Request::builder()
|
||||
.uri("/branding/pxe-logo")
|
||||
.body(Body::empty())
|
||||
.unwrap(),
|
||||
)
|
||||
.await
|
||||
.unwrap();
|
||||
assert_eq!(res.status(), StatusCode::OK);
|
||||
let ct = res
|
||||
.headers()
|
||||
.get(axum::http::header::CONTENT_TYPE)
|
||||
.unwrap()
|
||||
.to_str()
|
||||
.unwrap();
|
||||
assert_eq!(ct, "image/png");
|
||||
let body = axum::body::to_bytes(res.into_body(), usize::MAX)
|
||||
.await
|
||||
.unwrap();
|
||||
assert!(body.starts_with(b"\x89PNG"), "PNG header missing");
|
||||
}
|
||||
|
||||
#[tokio::test]
|
||||
async fn pxe_logo_endpoint_is_public_after_admin_setup() {
|
||||
// iPXE clients can't send a session cookie, so /branding/pxe-logo
|
||||
// must stay reachable once the admin has been bootstrapped. The
|
||||
// auth allowlist gates `/api/*` only.
|
||||
let (state, _dir) = build_state().await;
|
||||
state
|
||||
.branding
|
||||
.set_logo("image/png", "png", b"\x89PNG\r\n\x1a\nfake")
|
||||
.unwrap();
|
||||
let app = build_router(state);
|
||||
// Configure an admin so the middleware kicks in.
|
||||
let (s, _, _) = post_collect(
|
||||
&app,
|
||||
"/api/setup",
|
||||
r#"{"username":"admin","password":"hunter2hunter2"}"#,
|
||||
)
|
||||
.await;
|
||||
assert_eq!(s, StatusCode::CREATED);
|
||||
// Still public without a cookie.
|
||||
let (s, _) = get(&app, "/branding/pxe-logo").await;
|
||||
assert_eq!(s, StatusCode::OK);
|
||||
}
|
||||
|
||||
+72
-16
@@ -287,16 +287,26 @@ label.field {
|
||||
}
|
||||
label.field .name { color: var(--fg-dim); font-size: 12px; }
|
||||
label.field .hint { color: var(--fg-dimmer); font-size: 11px; }
|
||||
label.field input[type="text"],
|
||||
label.field input[type="number"],
|
||||
/* All single-line inputs share one chrome rule. Pre-v0.4.6 we only
|
||||
styled type=text/number, which left type=password fields rendering
|
||||
with the default browser look — visibly off vs adjacent text fields
|
||||
in the Account card. The negation list keeps `type=checkbox`,
|
||||
`type=file`, and `type=range` (none of which we use inside
|
||||
`label.field`) from picking up the padded-box look. */
|
||||
label.field input:not([type="checkbox"]):not([type="file"]):not([type="range"]),
|
||||
label.field select,
|
||||
label.field textarea {
|
||||
width: 100%; background: var(--bg); color: var(--fg);
|
||||
border: 1px solid var(--border); border-radius: var(--radius);
|
||||
padding: 7px 10px; font: inherit;
|
||||
/* iOS/Safari shrinks password-field text by default; clamp it so
|
||||
the password input matches the username input's metrics. */
|
||||
font-size: 14px; line-height: 1.4;
|
||||
box-shadow: none; -webkit-appearance: none; appearance: none;
|
||||
}
|
||||
label.field input:focus, label.field select:focus, label.field textarea:focus {
|
||||
outline: none; border-color: var(--accent);
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
|
||||
}
|
||||
label.check {
|
||||
display: flex; gap: 10px; align-items: center;
|
||||
@@ -421,9 +431,21 @@ tr.unbootable td:first-child { border-left: 3px solid var(--warn); }
|
||||
.dot.err { background: var(--err); }
|
||||
.dot.warn { background: var(--warn); }
|
||||
|
||||
/* Inline form rows. */
|
||||
.form-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 14px; }
|
||||
@media (max-width: 900px) { .form-row { grid-template-columns: 1fr; } }
|
||||
/* Inline form rows. The default is a 4-column grid sized for the
|
||||
Account card's "Current / New username / New password / Confirm"
|
||||
quartet; the `.cols-3` modifier swaps to a 3-column layout for the
|
||||
SSO header strip (display name / logo URL / metadata source). All
|
||||
`.form-row > label.field` children share the same baseline because
|
||||
their inner inputs share metrics via the global rule above. */
|
||||
.form-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 14px; align-items: end; }
|
||||
.form-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
|
||||
.form-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
|
||||
.form-row label.field { margin-bottom: 0; }
|
||||
@media (max-width: 900px) {
|
||||
.form-row,
|
||||
.form-row.cols-3,
|
||||
.form-row.cols-2 { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* ── Queued deployment visual ────────────────────────────────────── */
|
||||
.queue-track {
|
||||
@@ -567,22 +589,56 @@ tr.unbootable td:first-child { border-left: 3px solid var(--warn); }
|
||||
}
|
||||
.auth-card .sso-btn .meta { color: var(--fg-dim); font-size: 11px; margin-top: 2px; }
|
||||
|
||||
/* ── Logout chip (sidebar footer) ────────────────────────────── */
|
||||
.sidebar .footer .logout-row {
|
||||
margin-top: 8px; display: flex; align-items: center; justify-content: space-between;
|
||||
gap: 8px;
|
||||
/* ── Top-right user menu (v0.4.6) ────────────────────────────
|
||||
The "signed in as X" identity + sign-out moved out of the sidebar
|
||||
footer in v0.4.6 — the sidebar footer is now reserved for the
|
||||
service-state trio (Service status / Advertised URL / Backend
|
||||
version). The button matches the theme toggle's size + chrome so
|
||||
the top-right reads as a tidy two-icon strip. */
|
||||
.user-menu { position: relative; }
|
||||
.user-btn {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 36px; height: 32px;
|
||||
background: transparent; color: var(--fg);
|
||||
border: 1px solid var(--border); border-radius: 8px;
|
||||
cursor: pointer; padding: 0;
|
||||
transition: background 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
.sidebar .footer .logout-row .who {
|
||||
color: var(--fg); font-weight: 600; font-size: 11.5px;
|
||||
.user-btn:hover { background: var(--bg-panel-2); border-color: var(--accent); }
|
||||
.user-pop {
|
||||
position: absolute; right: 0; top: 38px;
|
||||
min-width: 200px;
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-card);
|
||||
padding: 6px;
|
||||
z-index: 60;
|
||||
display: flex; flex-direction: column; gap: 2px;
|
||||
}
|
||||
.user-pop[hidden] { display: none; }
|
||||
.user-pop .user-pop-name {
|
||||
padding: 8px 10px 6px;
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
margin-bottom: 4px;
|
||||
color: var(--fg); font-weight: 600; font-size: 13px;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.sidebar .footer .logout-btn {
|
||||
background: transparent; color: var(--fg-dim);
|
||||
border: 1px solid var(--border); border-radius: var(--radius);
|
||||
padding: 2px 8px; font: inherit; font-size: 11px; font-weight: 500;
|
||||
.user-pop .user-pop-item {
|
||||
text-align: left; width: 100%;
|
||||
background: transparent; color: var(--fg);
|
||||
border: 0; border-radius: var(--radius);
|
||||
padding: 7px 10px; font: inherit; font-size: 13px; font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sidebar .footer .logout-btn:hover { color: var(--fg); background: var(--bg-panel-2); border-color: var(--accent); }
|
||||
.user-pop .user-pop-item:hover {
|
||||
background: var(--bg-panel-2); color: var(--fg);
|
||||
}
|
||||
.user-pop .user-pop-danger { color: var(--err); }
|
||||
.user-pop .user-pop-danger:hover {
|
||||
background: color-mix(in srgb, var(--err) 12%, transparent);
|
||||
color: var(--err);
|
||||
}
|
||||
|
||||
/* ── About card ─────────────────────────────────────────────────── */
|
||||
.about-hero { padding: 20px 24px; }
|
||||
|
||||
+86
-20
@@ -1103,16 +1103,29 @@
|
||||
ssoEnabled.checked = !!sso.enabled;
|
||||
const ssoName = el('input', {type:'text', placeholder:'e.g. Okta, Azure AD',
|
||||
value: sso.idp_name || ''});
|
||||
// v0.4.6: optional FleetDM-style IdP logo URL. The login screen
|
||||
// will render this as the brand mark on the "Sign in with X"
|
||||
// button once the runtime SSO flow ships; for v0.4.6 we just
|
||||
// persist it.
|
||||
const ssoLogo = el('input', {type:'text',
|
||||
placeholder:'https://idp.example.com/logo.svg',
|
||||
value: sso.idp_logo_url || ''});
|
||||
const ssoUrl = el('input', {type:'text', placeholder:'https://idp.example.com/metadata',
|
||||
value: sso.metadata_url || ''});
|
||||
const ssoXml = el('textarea', {rows:'6',
|
||||
placeholder:'<EntityDescriptor xmlns="urn:oasis:names:tc:SAML:2.0:metadata"…',
|
||||
style:'width:100%;font-family:var(--mono);font-size:12px;background:var(--bg);' +
|
||||
'color:var(--fg);border:1px solid var(--border);border-radius:var(--radius);' +
|
||||
'padding:8px 10px;resize:vertical'},
|
||||
// The textarea inherits the same chrome via the global
|
||||
// `label.field textarea` rule, plus the monospace family for
|
||||
// pasting raw XML. Children come after the attrs object — the
|
||||
// initial value is the only "child".
|
||||
const ssoXml = el('textarea',
|
||||
{rows:'6',
|
||||
spellcheck:'false', autocapitalize:'off',
|
||||
placeholder:'<EntityDescriptor xmlns="urn:oasis:names:tc:SAML:2.0:metadata"…',
|
||||
style:'font-family:var(--mono);font-size:12px;resize:vertical'},
|
||||
sso.metadata || '');
|
||||
const ssoMode = el('select', {style:'min-width:160px;background:var(--bg);color:var(--fg);' +
|
||||
'border:1px solid var(--border);border-radius:var(--radius);padding:6px 8px;font:inherit'}, [
|
||||
// The mode picker is a styled <select> so it aligns with text
|
||||
// inputs in the same `.form-row` — the global `label.field
|
||||
// select` rule takes care of the chrome.
|
||||
const ssoMode = el('select', {}, [
|
||||
el('option', {value:'url'}, 'Metadata URL'),
|
||||
el('option', {value:'xml'}, 'Metadata XML'),
|
||||
]);
|
||||
@@ -1121,7 +1134,7 @@
|
||||
el('span', {class:'name'}, 'IdP metadata URL'),
|
||||
ssoUrl,
|
||||
el('span', {class:'hint'},
|
||||
'OpenPXE will fetch this URL once SSO sign-in lands; v0.4.5 just stores it.'),
|
||||
'OpenPXE will fetch this URL once SSO sign-in lands; v0.4.6 just stores it.'),
|
||||
]);
|
||||
const xmlWrap = el('label', {class:'field'}, [
|
||||
el('span', {class:'name'}, 'IdP metadata XML'),
|
||||
@@ -1144,6 +1157,7 @@
|
||||
const payload = {
|
||||
enabled: ssoEnabled.checked,
|
||||
idp_name: ssoName.value,
|
||||
idp_logo_url: ssoLogo.value,
|
||||
metadata: ssoMode.value === 'xml' ? ssoXml.value : '',
|
||||
metadata_url: ssoMode.value === 'url' ? ssoUrl.value : '',
|
||||
};
|
||||
@@ -1179,12 +1193,22 @@
|
||||
ssoEnabled,
|
||||
el('span', {}, 'Enable single sign-on'),
|
||||
]),
|
||||
el('div', {class:'form-row'}, [
|
||||
// 3-column header strip: display name, logo URL, metadata
|
||||
// source. All three controls inherit the same border/padding/
|
||||
// focus chrome from the global `label.field input/select`
|
||||
// rule, so they line up cleanly. Below: the active source
|
||||
// field (URL or XML) spans the full width.
|
||||
el('div', {class:'form-row cols-3'}, [
|
||||
el('label', {class:'field'}, [
|
||||
el('span', {class:'name'}, 'IdP display name'),
|
||||
ssoName,
|
||||
el('span', {class:'hint'}, '"Sign in with X" label on the login screen.'),
|
||||
]),
|
||||
el('label', {class:'field'}, [
|
||||
el('span', {class:'name'}, 'IdP logo URL'),
|
||||
ssoLogo,
|
||||
el('span', {class:'hint'}, 'Optional. Shown next to the IdP name on the login button.'),
|
||||
]),
|
||||
el('label', {class:'field'}, [
|
||||
el('span', {class:'name'}, 'Metadata source'),
|
||||
ssoMode,
|
||||
@@ -1610,25 +1634,67 @@
|
||||
}
|
||||
|
||||
async function startDashboard() {
|
||||
// Light up the sidebar's "signed in as X / Sign out" row. It was
|
||||
// hidden in index.html because we don't know the identity until
|
||||
// /api/me resolves.
|
||||
// v0.4.6: light up the top-right user-menu chip. The button is
|
||||
// hidden in index.html until /api/me confirms a signed-in session,
|
||||
// so we don't show the icon (then hide it) when the user lands
|
||||
// on /login. Clicking the icon opens a small popover with
|
||||
// Name / Edit account / Sign out.
|
||||
try {
|
||||
const me = await fetch('/api/me').then(r => r.ok ? r.json() : null);
|
||||
const row = $('[data-bind=logout_row]');
|
||||
const who = $('[data-bind=signed_in_as]');
|
||||
const btn = $('[data-bind=logout_btn]');
|
||||
if (row && me && me.authenticated && me.user) {
|
||||
who.textContent = me.user.username;
|
||||
who.title = 'Signed in as ' + me.user.username;
|
||||
row.style.display = '';
|
||||
const wrap = $('[data-bind=user_menu_wrap]');
|
||||
const pop = $('[data-bind=user_menu_pop]');
|
||||
const name = $('[data-bind=user_pop_name]');
|
||||
const edit = $('[data-bind=user_pop_edit]');
|
||||
const out = $('[data-bind=user_pop_logout]');
|
||||
const btn = $('#user-menu-btn');
|
||||
if (wrap && me && me.authenticated && me.user) {
|
||||
wrap.style.display = '';
|
||||
if (name) name.textContent = me.user.username;
|
||||
if (btn) btn.title = 'Signed in as ' + me.user.username;
|
||||
if (btn && !btn._wired) {
|
||||
btn._wired = true;
|
||||
btn.addEventListener('click', async () => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const open = !pop.hidden;
|
||||
pop.hidden = open;
|
||||
btn.setAttribute('aria-expanded', String(!open));
|
||||
});
|
||||
}
|
||||
if (edit && !edit._wired) {
|
||||
edit._wired = true;
|
||||
edit.addEventListener('click', () => {
|
||||
pop.hidden = true;
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
render('settings');
|
||||
});
|
||||
}
|
||||
if (out && !out._wired) {
|
||||
out._wired = true;
|
||||
out.addEventListener('click', async () => {
|
||||
pop.hidden = true;
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
await fetch('/api/logout', {method:'POST'}).catch(() => {});
|
||||
wrap.style.display = 'none';
|
||||
showAuthScreen('login');
|
||||
});
|
||||
}
|
||||
// Click-outside-to-close, wired once. Stored on document so we
|
||||
// don't re-attach every render.
|
||||
if (!document._userPopWired) {
|
||||
document._userPopWired = true;
|
||||
document.addEventListener('click', (e) => {
|
||||
if (pop.hidden) return;
|
||||
if (e.target.closest('.user-menu')) return;
|
||||
pop.hidden = true;
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && !pop.hidden) {
|
||||
pop.hidden = true;
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (e) { /* surfaces elsewhere */ }
|
||||
render('dashboard');
|
||||
|
||||
@@ -59,15 +59,7 @@
|
||||
<!-- The brand badge at the top can be overridden by operator-uploaded
|
||||
logos; keep "OpenPXE v…" pinned in the footer so the backend
|
||||
identity is always visible regardless of branding. -->
|
||||
<div class="footer-version">OpenPXE v<span data-bind="version">0.4.5</span></div>
|
||||
<!-- v0.4.5: signed-in identity + one-click sign-out. The button
|
||||
is populated by app.js after /api/me reports an authenticated
|
||||
session — pre-auth states swap the whole shell for the
|
||||
login/setup card so this row never gets shown there. -->
|
||||
<div class="logout-row" data-bind="logout_row" style="display:none">
|
||||
<span class="who" data-bind="signed_in_as" title=""></span>
|
||||
<button type="button" class="logout-btn" data-bind="logout_btn">Sign out</button>
|
||||
</div>
|
||||
<div class="footer-version">OpenPXE v<span data-bind="version">0.4.6</span></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -97,6 +89,27 @@
|
||||
<path d="M20.5 14A8 8 0 0 1 10 3.5 a8 8 0 1 0 10.5 10.5z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- v0.4.6: signed-in operator menu. Sits next to the theme toggle
|
||||
in the top-right corner so the sidebar footer stays clean for
|
||||
the "Service status / Advertised URL / Backend version" trio.
|
||||
The whole block is hidden until /api/me confirms a session. -->
|
||||
<div class="user-menu" data-bind="user_menu_wrap" style="display:none">
|
||||
<button id="user-menu-btn" class="user-btn" type="button"
|
||||
aria-label="Account menu" aria-haspopup="true" aria-expanded="false"
|
||||
title="Account">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="8" r="3.6"/>
|
||||
<path d="M4.5 20a7.5 7.5 0 0 1 15 0"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div id="user-menu-pop" class="user-pop" data-bind="user_menu_pop" hidden>
|
||||
<div class="user-pop-name" data-bind="user_pop_name">—</div>
|
||||
<button type="button" class="user-pop-item" data-bind="user_pop_edit">Edit account</button>
|
||||
<button type="button" class="user-pop-item user-pop-danger" data-bind="user_pop_logout">Sign out</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main" id="view-root"></main>
|
||||
|
||||
Reference in New Issue
Block a user