@keycloakify/keycloak-account-ui
Version:
Repackaged Keycloak Account UI
55 lines • 4.22 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Avatar, DropdownItem, Masthead, MastheadBrand, MastheadContent, MastheadToggle, PageToggleButton, Toolbar, ToolbarContent, ToolbarItem, } from "@patternfly/react-core";
import { BarsIcon } from "@patternfly/react-icons";
import { useTranslation } from "react-i18next";
import { DefaultAvatar } from "../../ui-shared/masthead/DefaultAvatar";
import { KeycloakDropdown } from "../../ui-shared/masthead/KeycloakDropdown";
function loggedInUserName(token, t) {
if (!token) {
return t("unknownUser");
}
const givenName = token.given_name;
const familyName = token.family_name;
const preferredUsername = token.preferred_username;
if (givenName && familyName) {
return t("fullName", { givenName, familyName });
}
return givenName || familyName || preferredUsername || t("unknownUser");
}
const KeycloakMasthead = (_a) => {
var _b;
var { keycloak } = _a, _c = _a.brand, { src, alt, className } = _c, brandProps = __rest(_c, ["src", "alt", "className"]), { avatar, features: { hasLogout = true, hasManageAccount = true, hasUsername = true, } = {}, kebabDropdownItems, dropdownItems = [], toolbarItems } = _a, rest = __rest(_a, ["keycloak", "brand", "avatar", "features", "kebabDropdownItems", "dropdownItems", "toolbarItems"]);
const { t } = useTranslation();
const extraItems = [];
if (hasManageAccount) {
extraItems.push(_jsx(DropdownItem, { onClick: () => keycloak.accountManagement(), children: t("manageAccount") }, "manageAccount"));
}
if (hasLogout) {
extraItems.push(_jsx(DropdownItem, { onClick: () => keycloak.logout(), children: t("signOut") }, "signOut"));
}
const picture = (_b = keycloak.idTokenParsed) === null || _b === void 0 ? void 0 : _b.picture;
return (_jsxs(Masthead, Object.assign({}, rest, { children: [_jsx(MastheadToggle, { children: _jsx(PageToggleButton, { variant: "plain", "aria-label": t("navigation"), children: _jsx(BarsIcon, {}) }) }), _jsx(MastheadBrand, Object.assign({}, brandProps, { children: _jsx("img", { src: src, alt: alt, className: className }) })), _jsx(MastheadContent, { children: _jsx(Toolbar, { children: _jsxs(ToolbarContent, { children: [toolbarItems === null || toolbarItems === void 0 ? void 0 : toolbarItems.map((item, index) => (_jsx(ToolbarItem, { align: { default: "alignRight" }, children: item }, index))), _jsx(ToolbarItem, { visibility: {
default: "hidden",
md: "visible",
}, children: _jsx(KeycloakDropdown, { "data-testid": "options", dropDownItems: [...dropdownItems, extraItems], title: hasUsername
? loggedInUserName(keycloak.idTokenParsed, t)
: undefined }) }), _jsx(ToolbarItem, { align: { default: "alignLeft" }, visibility: {
md: "hidden",
}, children: _jsx(KeycloakDropdown, { "data-testid": "options-kebab", isKebab: true, dropDownItems: [
...(kebabDropdownItems || dropdownItems),
extraItems,
] }) }), _jsx(ToolbarItem, { variant: "overflow-menu", align: { default: "alignRight" }, className: "pf-v5-u-m-0-on-lg", children: picture || (avatar === null || avatar === void 0 ? void 0 : avatar.src) ? (_jsx(Avatar, Object.assign({ src: picture, alt: t("avatar") }, avatar))) : (_jsx(DefaultAvatar, Object.assign({}, avatar))) })] }) }) })] })));
};
export default KeycloakMasthead;
//# sourceMappingURL=Masthead.js.map