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:
iris
mara
parent
10b8422d93
commit
cd41e1d510
19 changed files with 417 additions and 154 deletions
92
frontend/packages/shared/src/user-menu/UserMenu.css
Normal file
92
frontend/packages/shared/src/user-menu/UserMenu.css
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
/* <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.
|
||||
Kept as its own stylesheet for the same reason `SettingsMenu.css`
|
||||
gives: three small, independently-evolving popovers that happen to
|
||||
look alike today, not one component with three skins. */
|
||||
.user-menu {
|
||||
position: relative;
|
||||
}
|
||||
.user-menu-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.75em;
|
||||
height: 2.75em;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.user-menu-button:hover,
|
||||
.user-menu-button[aria-expanded="true"] {
|
||||
border-color: var(--fg);
|
||||
}
|
||||
.user-menu-popover {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.4em);
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 12em;
|
||||
padding: 0.4em;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5em;
|
||||
background: var(--bg-elev);
|
||||
box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.3);
|
||||
animation: user-menu-popover-enter 140ms ease;
|
||||
}
|
||||
/* Mount-triggered, same shape as `LinksMenu.css`'s own version — see
|
||||
its comment for why a keyframe (not a transition) is the right tool
|
||||
here. */
|
||||
@keyframes user-menu-popover-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-0.25em) scale(0.98);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.user-menu-popover {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
:root[data-motion="reduce"] .user-menu-popover {
|
||||
animation: none;
|
||||
}
|
||||
:root[data-motion="allow"] .user-menu-popover {
|
||||
animation: user-menu-popover-enter 140ms ease;
|
||||
}
|
||||
.user-menu-name {
|
||||
padding: 0.4em 0.6em 0.5em;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 0.3em;
|
||||
color: var(--muted);
|
||||
font-size: 0.85em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.user-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 2.75em;
|
||||
padding: 0.4em 0.6em;
|
||||
border-radius: 0.35em;
|
||||
color: var(--fg);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.user-menu-item:hover {
|
||||
background: var(--bg);
|
||||
}
|
||||
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` };
|
||||
}
|
||||
Loading…
Reference in a new issue