@keycloakify/keycloak-account-ui
Version:
<p align="center"> <img src="https://github.com/user-attachments/assets/e31c4910-7205-441c-9a35-e134b806b3a8"> </p> <p align="center"> <i>Repackaged Keycloak Account UI</i> <br> <br> <a href="https://github.com/keycloakify/keycloak-a
65 lines • 6.12 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, DataList, DataListAction, DataListCell, DataListItem, DataListItemCells, DataListItemRow, Dropdown, DropdownItem, MenuToggle, PageSection, Spinner, Split, SplitItem, Title, } from "@patternfly/react-core";
import { EllipsisVIcon } from "@patternfly/react-icons";
import { useState } from "react";
import { Trans, useTranslation } from "react-i18next";
import { useEnvironment } from "../ui-shared";
import { getCredentials } from "../api/methods";
import { EmptyRow } from "../components/datalist/EmptyRow";
import { Page } from "../components/page/Page";
import { formatDate } from "../utils/formatDate";
import { usePromise } from "../utils/usePromise";
const MobileLink = ({ title, onClick, testid }) => {
const [open, setOpen] = useState(false);
return (_jsxs(_Fragment, { children: [_jsx(Dropdown, { popperProps: {
position: "right",
}, onOpenChange: (isOpen) => setOpen(isOpen), toggle: (toggleRef) => (_jsx(MenuToggle, { className: "pf-v5-u-display-none-on-lg", ref: toggleRef, variant: "plain", onClick: () => setOpen(!open), isExpanded: open, children: _jsx(EllipsisVIcon, {}) })), isOpen: open, children: _jsx(DropdownItem, { onClick: onClick, children: title }, "1") }), _jsx(Button, { variant: "link", onClick: onClick, className: "pf-v5-u-display-none pf-v5-u-display-inline-flex-on-lg", "data-testid": testid, children: title })] }));
};
export const SigningIn = () => {
const { t } = useTranslation();
const context = useEnvironment();
const { login } = context.keycloak;
const [credentials, setCredentials] = useState();
usePromise((signal) => getCredentials({ signal, context }), setCredentials, []);
const credentialRowCells = (credMetadata) => {
const credential = credMetadata.credential;
const maxWidth = {
"--pf-v5-u-max-width--MaxWidth": "300px",
};
const items = [
_jsx(DataListCell, { "data-testrole": "label", className: "pf-v5-u-max-width", style: maxWidth, children: credential.userLabel || t(credential.type) }, "title"),
];
if (credential.createdDate) {
items.push(_jsx(DataListCell, { "data-testrole": "created-at", children: _jsxs(Trans, { i18nKey: "credentialCreatedAt", children: [_jsx("strong", { className: "pf-v5-u-mr-md" }), { date: formatDate(new Date(credential.createdDate)) }] }) }, "created" + credential.id));
}
return items;
};
if (!credentials) {
return _jsx(Spinner, {});
}
const credentialUniqueCategories = [
...new Set(credentials.map((c) => c.category)),
];
return (_jsx(Page, { title: t("signingIn"), description: t("signingInDescription"), children: credentialUniqueCategories.map((category) => (_jsxs(PageSection, { variant: "light", className: "pf-v5-u-px-0", children: [_jsx(Title, { headingLevel: "h2", size: "xl", id: `${category}-categ-title`, children: t(category) }), credentials
.filter((cred) => cred.category == category)
.map((container) => (_jsxs(_Fragment, { children: [_jsxs(Split, { className: "pf-v5-u-mt-lg pf-v5-u-mb-lg", children: [_jsxs(SplitItem, { children: [_jsx(Title, { headingLevel: "h3", size: "md", className: "pf-v5-u-mb-md", "data-testid": `${container.type}/help`, children: _jsx("span", { className: "cred-title pf-v5-u-display-block", "data-testid": `${container.type}/title`, children: t(container.displayName) }) }), _jsx("span", { "data-testid": `${container.type}/help-text`, children: t(container.helptext) })] }), container.createAction && (_jsx(SplitItem, { isFilled: true, children: _jsx("div", { className: "pf-v5-u-float-right", children: _jsx(MobileLink, { onClick: () => login({
action: container.createAction,
}), title: t("setUpNew", {
name: t(`${container.type}-display-name`),
}), testid: `${container.type}/create` }) }) }))] }), _jsxs(DataList, { "aria-label": "credential list", className: "pf-v5-u-mb-xl", "data-testid": `${container.type}/credential-list`, children: [container.userCredentialMetadatas.length === 0 && (_jsx(EmptyRow, { message: t("notSetUp", {
name: t(container.displayName),
}), "data-testid": `${container.type}/not-set-up` })), container.userCredentialMetadatas.map((meta) => (_jsx(DataListItem, { children: _jsx(DataListItemRow, { id: `cred-${meta.credential.id}`, children: _jsx(DataListItemCells, { className: "pf-v5-u-py-0", dataListCells: [
...credentialRowCells(meta),
_jsx(DataListAction, { id: `action-${meta.credential.id}`, "aria-label": t("updateCredAriaLabel"), "aria-labelledby": `cred-${meta.credential.id}`, children: container.removeable ? (_jsx(Button, { variant: "danger", "data-testrole": "remove", onClick: () => {
login({
action: "delete_credential:" +
meta.credential.id,
});
}, children: t("delete") })) : (_jsx(Button, { variant: "secondary", onClick: () => {
if (container.updateAction)
login({ action: container.updateAction });
}, "data-testrole": "update", children: t("update") })) }, "action"),
] }) }) }, meta.credential.id)))] })] })))] }, category))) }));
};
export default SigningIn;
//# sourceMappingURL=SigningIn.js.map