swarm-ui, hive dashboard, agent page: one profile menu with the signed-in user, avatar and authelia links
The swarm UI's user menu moves to @hive/shared and takes the whoami URL and authelia's URL as props; the swarm UI keeps a thin wrapper, and the hive dashboard and the per-agent page mount the same component. The dashboard's nginx vhost proxies /api/whoami to authelia (the agent page is served from the same vhost), and hive-c0re's state carries authelia_public_url, set from services.hyperhive.swarm.authelia.url. The agent page shows the menu only behind the gateway.
This commit is contained in:
parent
10b8422d93
commit
cd41e1d510
19 changed files with 417 additions and 154 deletions
|
|
@ -11,6 +11,7 @@ import { useApplyThemeOverride } from "@hive/shared/theme-apply.js";
|
|||
import { useApplyMotionOverride } from "@hive/shared/motion-apply.js";
|
||||
import { Header } from "./components/Header.js";
|
||||
import { MetaNav } from "./components/MetaNav.js";
|
||||
import { AgentUserMenu } from "./components/AgentUserMenu.js";
|
||||
import { ExpandDetailsSetting } from "./components/ExpandDetailsSetting.js";
|
||||
import { HideDebugSetting } from "@hive/shared/hide-debug-setting.js";
|
||||
import { StatusChips } from "./components/StatusChips.js";
|
||||
|
|
@ -176,6 +177,11 @@ export function Root() {
|
|||
<ExpandDetailsSetting />
|
||||
<HideDebugSetting />
|
||||
</SettingsMenu>
|
||||
{state ? (
|
||||
<AgentUserMenu
|
||||
dashboardBase={resolveDashboardBase(state.dashboard_port)}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
// Kept mounted regardless of `openPanel` (open/closed toggles just the
|
||||
|
|
|
|||
44
frontend/packages/agent/src/components/AgentUserMenu.tsx
Normal file
44
frontend/packages/agent/src/components/AgentUserMenu.tsx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
// <AgentUserMenu> — the profile menu (`@hive/shared/user-menu.js`) in this
|
||||
// page's header. Only behind the gateway: the page is then on the dashboard's
|
||||
// own origin, where the session cookie is valid and nginx proxies
|
||||
// `/api/whoami` to authelia. Opened directly on the agent's own port there is
|
||||
// no sign-in to show, so the page has no menu.
|
||||
//
|
||||
// Authelia's URL, for the settings and sign-out links, comes from the
|
||||
// dashboard's `/api/state` (`authelia_public_url`), the one place hive-c0re
|
||||
// states it.
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import { UserMenu } from "@hive/shared/user-menu.js";
|
||||
import "@hive/shared/user-menu.css";
|
||||
import { isBehindGateway } from "../lib/dashboardBase.js";
|
||||
|
||||
export function AgentUserMenu({ dashboardBase }: { dashboardBase: string }) {
|
||||
const behind = isBehindGateway();
|
||||
const [autheliaUrl, setAutheliaUrl] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!behind) return;
|
||||
let cancelled = false;
|
||||
fetch(`${dashboardBase}api/state`)
|
||||
.then((r) =>
|
||||
r.ok ? r.json() : Promise.reject(new Error(`http ${r.status}`)),
|
||||
)
|
||||
.then((state: { authelia_public_url?: string | null }) => {
|
||||
if (!cancelled) setAutheliaUrl(state.authelia_public_url ?? null);
|
||||
})
|
||||
.catch(() => {
|
||||
/* cosmetic only: the menu then shows the name without the links */
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [behind, dashboardBase]);
|
||||
|
||||
if (!behind) return null;
|
||||
return (
|
||||
<UserMenu
|
||||
whoamiUrl={`${dashboardBase}api/whoami`}
|
||||
autheliaUrl={autheliaUrl}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -4,8 +4,13 @@
|
|||
// a relative path. Behind the gateway this page lives at
|
||||
// `/agent/<name>/` on the dashboard's own origin (`location.origin`);
|
||||
// accessed directly, it's the same host on `dashboardPort`.
|
||||
/** Whether this page is served through the gateway, on the dashboard's origin. */
|
||||
export function isBehindGateway(): boolean {
|
||||
return location.pathname.startsWith("/agent/");
|
||||
}
|
||||
|
||||
export function resolveDashboardBase(dashboardPort: number): string {
|
||||
return location.pathname.startsWith("/agent/")
|
||||
return isBehindGateway()
|
||||
? location.origin + "/"
|
||||
: `${location.protocol}//${location.hostname}:${dashboardPort}/`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
@import "./system-sections.css";
|
||||
@import "@hive/shared/jobq-rollup.css";
|
||||
@import "@hive/shared/jobq-graph.css";
|
||||
@import "@hive/shared/user-menu.css";
|
||||
|
||||
/* ─── tabbed dashboard chrome ──────────────────────────────────────
|
||||
Top-of-page sticky header with banner + tab strip. SSE stays
|
||||
|
|
@ -42,6 +43,12 @@ body.dashboard-shell {
|
|||
padding: 0.3em 1em;
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
/* Profile menu (user-menu.js): the avatar at the right end of the chrome.
|
||||
Its own look is `@hive/shared/user-menu.css`'s. */
|
||||
.user-menu-slot {
|
||||
flex: none;
|
||||
margin-left: auto;
|
||||
}
|
||||
/* Pages menu (links-menu.js): one icon button at the left of the chrome
|
||||
that opens a popover of the standalone pages and the swarm UI. Same
|
||||
shape as the swarm UI's LinksMenu — quiet until hovered or open. The
|
||||
|
|
|
|||
|
|
@ -86,6 +86,8 @@
|
|||
menu at the left of this strip, not tabs — the strip holds only
|
||||
in-page tabs. -->
|
||||
</nav>
|
||||
<!-- Profile menu: the signed-in user, filled by user-menu.js. -->
|
||||
<div class="user-menu-slot" id="user-menu"></div>
|
||||
</header>
|
||||
|
||||
<!-- Tab panes. createTabStrip (@hive/shared/tabs.js) keeps exactly one
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ import {
|
|||
syncKeptFromSnapshot,
|
||||
} from "./kept.js";
|
||||
import { renderLinksMenu } from "./links-menu.js";
|
||||
import { renderUserMenu } from "./user-menu.js";
|
||||
|
||||
(() => {
|
||||
initStickyTop();
|
||||
|
|
@ -164,6 +165,7 @@ import { renderLinksMenu } from "./links-menu.js";
|
|||
renderContainers(s);
|
||||
renderKept();
|
||||
renderLinksMenu(s);
|
||||
renderUserMenu(s);
|
||||
renderHiveRev(s.hyperhive_rev);
|
||||
restoreOpenDetails(openDetails);
|
||||
// No periodic refresh timer. Phase 6 covers every container
|
||||
|
|
|
|||
24
frontend/packages/dashboard/src/user-menu.js
Normal file
24
frontend/packages/dashboard/src/user-menu.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
// Profile menu in the dashboard chrome, at the right of the tab strip: the
|
||||
// signed-in user's avatar, name, and links to authelia's settings and
|
||||
// sign-out. It is `@hive/shared`'s `UserMenu`, the same component the swarm UI
|
||||
// and the per-agent page mount, rendered with Preact like the job-queue
|
||||
// graph. `/api/whoami` is proxied to authelia by this dashboard's own nginx
|
||||
// vhost, so it needs no CORS; authelia's URL comes from `/api/state`.
|
||||
|
||||
import { h, render } from "preact";
|
||||
import { UserMenu } from "@hive/shared/user-menu.js";
|
||||
import { $ } from "./common.js";
|
||||
|
||||
/** (Re)render the menu into `#user-menu`. Safe to call on every state
|
||||
* refresh: Preact diffs the same component, so an open popover stays open. */
|
||||
export function renderUserMenu(state) {
|
||||
const root = $("user-menu");
|
||||
if (!root) return;
|
||||
render(
|
||||
h(UserMenu, {
|
||||
whoamiUrl: "/api/whoami",
|
||||
autheliaUrl: (state && state.authelia_public_url) || null,
|
||||
}),
|
||||
root,
|
||||
);
|
||||
}
|
||||
|
|
@ -53,7 +53,9 @@
|
|||
"./motion-apply.js": "./src/settings/motion-apply.ts",
|
||||
"./settings-menu.js": "./src/settings/SettingsMenu.tsx",
|
||||
"./hide-debug-setting.js": "./src/settings/HideDebugSetting.tsx",
|
||||
"./settings-menu.css": "./src/settings/SettingsMenu.css"
|
||||
"./settings-menu.css": "./src/settings/SettingsMenu.css",
|
||||
"./user-menu.js": "./src/user-menu/UserMenu.tsx",
|
||||
"./user-menu.css": "./src/user-menu/UserMenu.css"
|
||||
},
|
||||
"files": [
|
||||
"src/"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* <UserMenu> — same header icon-button + popover chrome as
|
||||
/* <UserMenu> (@hive/shared) — same header icon-button + popover chrome as
|
||||
`LinksMenu`/`SettingsMenu`, except the trigger is a round, accent-
|
||||
coloured initials avatar rather than a glyph-on-transparent button —
|
||||
this is the "who is this" affordance, the other two are quiet chrome.
|
||||
122
frontend/packages/shared/src/user-menu/UserMenu.tsx
Normal file
122
frontend/packages/shared/src/user-menu/UserMenu.tsx
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
// <UserMenu> — the profile affordance in a header's top-right corner: an
|
||||
// initials avatar button opening a popover with the signed-in name, a link
|
||||
// to authelia's own account settings, and a sign-out link. The swarm UI, the
|
||||
// hive dashboard and the per-agent page all mount this one, so they look and
|
||||
// behave the same. Same icon-button + popover chrome as `SettingsMenu`.
|
||||
//
|
||||
// Who: `auth_request` only answers yes or no, never *who*. The name comes from
|
||||
// authelia's `GET /api/user/info`, which each UI's nginx vhost proxies at
|
||||
// `/api/whoami` on its own origin, so the browser sends the session cookie
|
||||
// and no CORS is involved. A fetch that fails leaves the avatar as a "?".
|
||||
//
|
||||
// Avatar: authelia has no photo field, so it is generated from the initials
|
||||
// (no third-party call: gravatar would leak a hashed e-mail on every load).
|
||||
//
|
||||
// Styles live in `@hive/shared/user-menu.css`, which the mounting page
|
||||
// imports or `@import`s itself: the dashboard's JS bundle loads `.css`
|
||||
// imports as text, so a component that imported it would not style there.
|
||||
import { useEffect, useRef, useState } from "preact/hooks";
|
||||
import {
|
||||
accountLinks,
|
||||
initialOf,
|
||||
labelOf,
|
||||
parseWhoAmI,
|
||||
pickAccent,
|
||||
type WhoAmI,
|
||||
} from "./identity.js";
|
||||
|
||||
export function UserMenu({
|
||||
whoamiUrl,
|
||||
autheliaUrl,
|
||||
}: {
|
||||
// Where the signed-in user is asked for, on this page's own origin.
|
||||
whoamiUrl: string;
|
||||
// Authelia's base URL, for the settings and sign-out links; none when it
|
||||
// is not known, and the menu then shows only the name.
|
||||
autheliaUrl: string | null;
|
||||
}) {
|
||||
const [who, setWho] = useState<WhoAmI | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
fetch(whoamiUrl)
|
||||
.then((r) =>
|
||||
r.ok ? r.json() : Promise.reject(new Error(`http ${r.status}`)),
|
||||
)
|
||||
.then((body) => {
|
||||
if (!cancelled) setWho(parseWhoAmI(body));
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) setWho(null);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [whoamiUrl]);
|
||||
|
||||
// Close on an outside click or Escape, as `SettingsMenu` does.
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function onPointerDown(e: MouseEvent) {
|
||||
if (rootRef.current && !rootRef.current.contains(e.target as Node))
|
||||
setOpen(false);
|
||||
}
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") setOpen(false);
|
||||
}
|
||||
document.addEventListener("pointerdown", onPointerDown);
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener("pointerdown", onPointerDown);
|
||||
document.removeEventListener("keydown", onKeyDown);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
const label = labelOf(who);
|
||||
const links = accountLinks(autheliaUrl);
|
||||
|
||||
return (
|
||||
<div class="user-menu" ref={rootRef}>
|
||||
<button
|
||||
type="button"
|
||||
class="user-menu-button"
|
||||
style={{ background: pickAccent(label ?? "operator") }}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open}
|
||||
aria-label={label ? `signed in as ${label}` : "account"}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
>
|
||||
{initialOf(label)}
|
||||
</button>
|
||||
{open ? (
|
||||
<div class="user-menu-popover" role="menu">
|
||||
{label ? <div class="user-menu-name">{label}</div> : null}
|
||||
{links ? (
|
||||
<>
|
||||
<a
|
||||
class="user-menu-item"
|
||||
href={links.settings}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
role="menuitem"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
authelia settings
|
||||
</a>
|
||||
<a
|
||||
class="user-menu-item"
|
||||
href={links.logout}
|
||||
role="menuitem"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
log out
|
||||
</a>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
63
frontend/packages/shared/src/user-menu/identity.ts
Normal file
63
frontend/packages/shared/src/user-menu/identity.ts
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
// What <UserMenu> shows of the signed-in user: the name and e-mail authelia
|
||||
// reports, the initials avatar built from them, and the authelia pages the
|
||||
// menu links. Pure, so the swarm UI's tests can run it.
|
||||
|
||||
export interface WhoAmI {
|
||||
displayName: string | null;
|
||||
email: string | null;
|
||||
}
|
||||
|
||||
// The seven chromatic theme colours the avatar is picked from, by name.
|
||||
const AVATAR_ACCENTS = [
|
||||
"var(--red)",
|
||||
"var(--yellow)",
|
||||
"var(--green)",
|
||||
"var(--cyan)",
|
||||
"var(--blue)",
|
||||
"var(--purple)",
|
||||
"var(--pink)",
|
||||
];
|
||||
|
||||
/** A colour for `seed`: the same name always gets the same one. */
|
||||
export function pickAccent(seed: string): string {
|
||||
let hash = 0;
|
||||
for (let i = 0; i < seed.length; i++)
|
||||
hash = (hash * 31 + seed.charCodeAt(i)) | 0;
|
||||
return AVATAR_ACCENTS[Math.abs(hash) % AVATAR_ACCENTS.length];
|
||||
}
|
||||
|
||||
/**
|
||||
* Lenient parse of authelia's `GET /api/user/info`, which wraps its answer in
|
||||
* a `{status, data}` envelope. The menu is cosmetic, so a shape that is not
|
||||
* recognised gives no name rather than an error.
|
||||
*/
|
||||
export function parseWhoAmI(body: unknown): WhoAmI {
|
||||
const record = (body ?? {}) as Record<string, unknown>;
|
||||
const data = (record.data ?? record) as Record<string, unknown>;
|
||||
const displayName =
|
||||
typeof data.display_name === "string" ? data.display_name : null;
|
||||
const emails = Array.isArray(data.emails) ? data.emails : null;
|
||||
const email =
|
||||
emails && typeof emails[0] === "string" ? (emails[0] as string) : null;
|
||||
return { displayName, email };
|
||||
}
|
||||
|
||||
/** The name to show: the display name, else the e-mail, else none. */
|
||||
export function labelOf(who: WhoAmI | null): string | null {
|
||||
return who?.displayName || who?.email || null;
|
||||
}
|
||||
|
||||
/** The letter in the avatar, or "?" when there is no name. */
|
||||
export function initialOf(label: string | null): string {
|
||||
return label ? label.trim().charAt(0).toUpperCase() : "?";
|
||||
}
|
||||
|
||||
/** Authelia's settings and sign-out pages under `autheliaUrl`, if it is known. */
|
||||
export function accountLinks(
|
||||
autheliaUrl: string | null,
|
||||
): { settings: string; logout: string } | null {
|
||||
if (!autheliaUrl) return null;
|
||||
// The trailing slash comes off so `/settings` appends cleanly.
|
||||
const base = autheliaUrl.replace(/\/+$/, "");
|
||||
return { settings: `${base}/settings`, logout: `${base}/logout` };
|
||||
}
|
||||
|
|
@ -1,33 +1,11 @@
|
|||
// <UserMenu> — the profile affordance in the header's top-right corner:
|
||||
// an initials avatar button opening a popover with the signed-in name,
|
||||
// a link to Authelia's own account settings, and a sign-out link. Same
|
||||
// icon-button + popover chrome as `SettingsMenu`/`LinksMenu` (own
|
||||
// stylesheet — see `SettingsMenu.css`'s note on why these stay separate).
|
||||
//
|
||||
// Identity: `auth_request` only ever answers yes/no, never *who*. This
|
||||
// learns "who" from authelia's own `GET /api/user/info`, proxied
|
||||
// same-origin at `/api/whoami` (see `swarm-ui.nix`) — no
|
||||
// swarm-controller code, a pure pass-through.
|
||||
//
|
||||
// Avatar: authelia has no photo field. Ships as a generated initials
|
||||
// avatar (self-contained, no third-party CDN call — gravatar was the
|
||||
// other option, rejected for leaking a hashed email on every load); a
|
||||
// real uploaded photo is a follow-up, not blocking this. Colour is a
|
||||
// deterministic pick from the same seven base16 chromatic slots the nav
|
||||
// accent cycles through (`AVATAR_ACCENTS`).
|
||||
//
|
||||
// "Authelia settings" / "log out" both build off the *same* base URL
|
||||
// `LinksMenu` already shows for "Authelia" (`GET /api/links`), not a
|
||||
// second source of the domain — `/settings` and `/logout` are appended
|
||||
// client-side, both real authelia routes (mara confirmed `/settings` is
|
||||
// the real path after the plain domain-root link landed short of it).
|
||||
import { useEffect, useRef, useState } from "preact/hooks";
|
||||
import "./UserMenu.css";
|
||||
|
||||
interface WhoAmI {
|
||||
displayName: string | null;
|
||||
email: string | null;
|
||||
}
|
||||
// <UserMenu> in the swarm UI's header: the shared profile menu
|
||||
// (`@hive/shared/user-menu.js`) with authelia's URL filled in from
|
||||
// `GET /api/links`, the same source `LinksMenu` shows its "Authelia" entry
|
||||
// from. The name comes from `/api/whoami`, which `swarm-ui.nix` proxies to
|
||||
// authelia's own user info.
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import { UserMenu as SharedUserMenu } from "@hive/shared/user-menu.js";
|
||||
import "@hive/shared/user-menu.css";
|
||||
|
||||
interface ServiceLink {
|
||||
label: string;
|
||||
|
|
@ -35,58 +13,9 @@ interface ServiceLink {
|
|||
url: string;
|
||||
}
|
||||
|
||||
// Same seven chromatic slots `Shell.tsx`'s `NAV_ITEMS` cycle through —
|
||||
// not imported from there directly: that list is route accents, this is
|
||||
// a name→colour pick, different domains that happen to share a palette.
|
||||
const AVATAR_ACCENTS = [
|
||||
"var(--red)",
|
||||
"var(--yellow)",
|
||||
"var(--green)",
|
||||
"var(--cyan)",
|
||||
"var(--blue)",
|
||||
"var(--purple)",
|
||||
"var(--pink)",
|
||||
];
|
||||
|
||||
function pickAccent(seed: string): string {
|
||||
let hash = 0;
|
||||
for (let i = 0; i < seed.length; i++)
|
||||
hash = (hash * 31 + seed.charCodeAt(i)) | 0;
|
||||
return AVATAR_ACCENTS[Math.abs(hash) % AVATAR_ACCENTS.length];
|
||||
}
|
||||
|
||||
// Lenient parse — authelia wraps its API responses in a `{status, data}`
|
||||
// envelope; this is a cosmetic-only display (same "a fetch failure just
|
||||
// falls back" rule `Shell.tsx`'s own swarm-name fetch follows), so an
|
||||
// unexpected shape degrades to no name rather than a thrown error.
|
||||
function parseWhoAmI(body: unknown): WhoAmI {
|
||||
const record = (body ?? {}) as Record<string, unknown>;
|
||||
const data = (record.data ?? record) as Record<string, unknown>;
|
||||
const displayName =
|
||||
typeof data.display_name === "string" ? data.display_name : null;
|
||||
const emails = Array.isArray(data.emails) ? data.emails : null;
|
||||
const email =
|
||||
emails && typeof emails[0] === "string" ? (emails[0] as string) : null;
|
||||
return { displayName, email };
|
||||
}
|
||||
|
||||
export function UserMenu() {
|
||||
const [who, setWho] = useState<WhoAmI | null>(null);
|
||||
const [autheliaUrl, setAutheliaUrl] = useState<string | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/whoami")
|
||||
.then((r) =>
|
||||
r.ok ? r.json() : Promise.reject(new Error(`http ${r.status}`)),
|
||||
)
|
||||
.then((body) => setWho(parseWhoAmI(body)))
|
||||
.catch(() => setWho(null)); // cosmetic only — see file-top comment
|
||||
}, []);
|
||||
|
||||
// Reuses `LinksMenu`'s own data source rather than a second endpoint —
|
||||
// see file-top comment.
|
||||
useEffect(() => {
|
||||
fetch("/api/links")
|
||||
.then((r) =>
|
||||
|
|
@ -99,78 +28,9 @@ export function UserMenu() {
|
|||
if (authelia) setAutheliaUrl(authelia.url);
|
||||
})
|
||||
.catch(() => {
|
||||
/* cosmetic only — the menu just renders with no links */
|
||||
/* cosmetic only: the menu then shows the name without the links */
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Close on an outside click or Escape — identical pattern to
|
||||
// `LinksMenu`/`SettingsMenu`.
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function onPointerDown(e: MouseEvent) {
|
||||
if (rootRef.current && !rootRef.current.contains(e.target as Node))
|
||||
setOpen(false);
|
||||
}
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") setOpen(false);
|
||||
}
|
||||
document.addEventListener("pointerdown", onPointerDown);
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener("pointerdown", onPointerDown);
|
||||
document.removeEventListener("keydown", onKeyDown);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
const label = who?.displayName || who?.email || null;
|
||||
const initial = label ? label.trim().charAt(0).toUpperCase() : "?";
|
||||
const accent = pickAccent(label ?? "operator");
|
||||
// Trailing slash normalised off so `/logout` appends cleanly
|
||||
// regardless of whether the contributed link kept one (the `Authelia`
|
||||
// entry does — see `swarm-authelia.nix` — but this isn't the only
|
||||
// conceivable shape a future contributor's own URL could take).
|
||||
const base = autheliaUrl?.replace(/\/+$/, "") ?? null;
|
||||
|
||||
return (
|
||||
<div class="user-menu" ref={rootRef}>
|
||||
<button
|
||||
type="button"
|
||||
class="user-menu-button"
|
||||
style={{ background: accent }}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open}
|
||||
aria-label={label ? `signed in as ${label}` : "account"}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
>
|
||||
{initial}
|
||||
</button>
|
||||
{open ? (
|
||||
<div class="user-menu-popover" role="menu">
|
||||
{label ? <div class="user-menu-name">{label}</div> : null}
|
||||
{base ? (
|
||||
<>
|
||||
<a
|
||||
class="user-menu-item"
|
||||
href={`${base}/settings`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
role="menuitem"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
authelia settings
|
||||
</a>
|
||||
<a
|
||||
class="user-menu-item"
|
||||
href={`${base}/logout`}
|
||||
role="menuitem"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
log out
|
||||
</a>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
return <SharedUserMenu whoamiUrl="/api/whoami" autheliaUrl={autheliaUrl} />;
|
||||
}
|
||||
|
|
|
|||
67
frontend/packages/swarm-ui/test/user-identity.test.mjs
Normal file
67
frontend/packages/swarm-ui/test/user-identity.test.mjs
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
// What the profile menu shows of the signed-in user, shared by the swarm UI,
|
||||
// the hive dashboard and the per-agent page. Run by `npm test`.
|
||||
import assert from "node:assert/strict";
|
||||
import { test } from "node:test";
|
||||
import {
|
||||
accountLinks,
|
||||
initialOf,
|
||||
labelOf,
|
||||
parseWhoAmI,
|
||||
pickAccent,
|
||||
} from "../../shared/src/user-menu/identity.ts";
|
||||
|
||||
test("authelia's user info is read from its {status, data} envelope or bare", () => {
|
||||
const data = { display_name: "Mara", emails: ["mara@example.org"] };
|
||||
assert.deepEqual(parseWhoAmI({ status: "OK", data }), {
|
||||
displayName: "Mara",
|
||||
email: "mara@example.org",
|
||||
});
|
||||
assert.deepEqual(parseWhoAmI(data), {
|
||||
displayName: "Mara",
|
||||
email: "mara@example.org",
|
||||
});
|
||||
});
|
||||
|
||||
test("a shape that is not recognised gives no name instead of an error", () => {
|
||||
const none = { displayName: null, email: null };
|
||||
assert.deepEqual(parseWhoAmI(null), none);
|
||||
assert.deepEqual(parseWhoAmI("nope"), none);
|
||||
assert.deepEqual(
|
||||
parseWhoAmI({ data: { display_name: 3, emails: "x" } }),
|
||||
none,
|
||||
);
|
||||
assert.deepEqual(parseWhoAmI({ data: { emails: [7] } }), none);
|
||||
});
|
||||
|
||||
test("the label is the display name, else the e-mail, else none", () => {
|
||||
assert.equal(labelOf({ displayName: "Mara", email: "m@x" }), "Mara");
|
||||
assert.equal(labelOf({ displayName: "", email: "m@x" }), "m@x");
|
||||
assert.equal(labelOf({ displayName: null, email: null }), null);
|
||||
assert.equal(labelOf(null), null);
|
||||
});
|
||||
|
||||
test("the avatar letter is the label's first, capitalised, or a question mark", () => {
|
||||
assert.equal(initialOf(" mara"), "M");
|
||||
assert.equal(initialOf(null), "?");
|
||||
assert.equal(initialOf(""), "?");
|
||||
});
|
||||
|
||||
test("a name always gets the same colour, one of the theme's", () => {
|
||||
assert.equal(pickAccent("Mara"), pickAccent("Mara"));
|
||||
assert.match(pickAccent("Mara"), /^var\(--[a-z]+\)$/);
|
||||
const seen = new Set(
|
||||
["a", "b", "c", "d", "e", "f", "g", "h", "i"].map(pickAccent),
|
||||
);
|
||||
assert.ok(seen.size > 1, "different names do not all collapse to one colour");
|
||||
});
|
||||
|
||||
test("the account links sit under authelia's URL whether or not it ends in a slash", () => {
|
||||
const want = {
|
||||
settings: "https://auth.example.org/settings",
|
||||
logout: "https://auth.example.org/logout",
|
||||
};
|
||||
assert.deepEqual(accountLinks("https://auth.example.org/"), want);
|
||||
assert.deepEqual(accountLinks("https://auth.example.org"), want);
|
||||
assert.equal(accountLinks(null), null);
|
||||
assert.equal(accountLinks(""), null);
|
||||
});
|
||||
Loading…
Reference in a new issue