@keycloakify/keycloak-account-ui/account-security/AccountRow.js

<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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, DataListAction, DataListCell, DataListItem, DataListItemCells, DataListItemRow, Icon, Label, Split, SplitItem, } from "@patternfly/react-core";
import { LinkIcon, UnlinkIcon } from "@patternfly/react-icons";
import { useTranslation } from "react-i18next";
import { IconMapper, useAlerts, useEnvironment, } from "../ui-shared";
import { linkAccount, unLinkAccount } from "../api/methods";
export const AccountRow = ({ account, isLinked = false, refresh, }) => {
    const { t } = useTranslation();
    const context = useEnvironment();
    const { addAlert, addError } = useAlerts();
    const unLink = async (account) => {
        try {
            await unLinkAccount(context, account);
            addAlert(t("unLinkSuccess"));
            refresh();
        }
        catch (error) {
            addError(t("unLinkError", { error }).toString());
        }
    };
    const link = async (account) => {
        try {
            const { accountLinkUri } = await linkAccount(context, account);
            location.href = accountLinkUri;
        }
        catch (error) {
            addError(t("linkError", { error }).toString());
        }
    };
    return (_jsx(DataListItem, { id: `${account.providerAlias}-idp`, "aria-label": t("linkedAccounts"), children: _jsxs(DataListItemRow, { "data-testid": `linked-accounts/${account.providerName}`, children: [_jsx(DataListItemCells, { dataListCells: [
                        _jsx(DataListCell, { children: _jsxs(Split, { children: [_jsx(SplitItem, { className: "pf-v5-u-mr-sm", children: _jsx(IconMapper, { icon: account.providerName }) }), _jsx(SplitItem, { className: "pf-v5-u-my-xs", isFilled: true, children: _jsx("span", { id: `${account.providerAlias}-idp-name`, children: account.displayName }) })] }) }, "idp"),
                        _jsx(DataListCell, { children: _jsx(Split, { children: _jsx(SplitItem, { className: "pf-v5-u-my-xs", isFilled: true, children: _jsx("span", { id: `${account.providerAlias}-idp-label`, children: _jsx(Label, { color: account.social ? "blue" : "green", children: t(account.social ? "socialLogin" : "systemDefined") }) }) }) }) }, "label"),
                        _jsx(DataListCell, { width: 5, children: _jsx(Split, { children: _jsx(SplitItem, { className: "pf-v5-u-my-xs", isFilled: true, children: _jsx("span", { id: `${account.providerAlias}-idp-username`, children: account.linkedUsername }) }) }) }, "username"),
                    ] }), _jsxs(DataListAction, { "aria-labelledby": t("link"), "aria-label": t("unLink"), id: "setPasswordAction", children: [isLinked && (_jsxs(Button, { id: `${account.providerAlias}-idp-unlink`, variant: "link", onClick: () => unLink(account), children: [_jsx(Icon, { size: "sm", children: _jsx(UnlinkIcon, {}) }), " ", t("unLink")] })), !isLinked && (_jsxs(Button, { id: `${account.providerAlias}-idp-link`, variant: "link", onClick: () => link(account), children: [_jsx(Icon, { size: "sm", children: _jsx(LinkIcon, {}) }), " ", t("link")] }))] })] }, account.providerName) }, account.providerName));
};
//# sourceMappingURL=AccountRow.js.map