@keycloakify/keycloak-account-ui/account-security/LinkedAccounts.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 { DataList, Stack, StackItem, Title } from "@patternfly/react-core";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { getLinkedAccounts } from "../api/methods";
import { EmptyRow } from "../components/datalist/EmptyRow";
import { Page } from "../components/page/Page";
import { usePromise } from "../utils/usePromise";
import { AccountRow } from "../account-security/AccountRow";
import { useEnvironment } from "../ui-shared";
export const LinkedAccounts = () => {
    const { t } = useTranslation();
    const context = useEnvironment();
    const [accounts, setAccounts] = useState([]);
    const [key, setKey] = useState(1);
    const refresh = () => setKey(key + 1);
    usePromise((signal) => getLinkedAccounts({ signal, context }), setAccounts, [
        key,
    ]);
    const linkedAccounts = useMemo(() => accounts.filter((account) => account.connected), [accounts]);
    const unLinkedAccounts = useMemo(() => accounts.filter((account) => !account.connected), [accounts]);
    return (_jsx(Page, { title: t("linkedAccounts"), description: t("linkedAccountsIntroMessage"), children: _jsxs(Stack, { hasGutter: true, children: [_jsxs(StackItem, { children: [_jsx(Title, { headingLevel: "h2", className: "pf-v5-u-mb-lg", size: "xl", children: t("linkedLoginProviders") }), _jsx(DataList, { id: "linked-idps", "aria-label": t("linkedLoginProviders"), children: linkedAccounts.length > 0 ? (linkedAccounts.map((account) => (_jsx(AccountRow, { account: account, isLinked: true, refresh: refresh }, account.providerName)))) : (_jsx(EmptyRow, { message: t("linkedEmpty") })) })] }), _jsxs(StackItem, { children: [_jsx(Title, { headingLevel: "h2", className: "pf-v5-u-mt-xl pf-v5-u-mb-lg", size: "xl", children: t("unlinkedLoginProviders") }), _jsx(DataList, { id: "unlinked-idps", "aria-label": t("unlinkedLoginProviders"), children: unLinkedAccounts.length > 0 ? (unLinkedAccounts.map((account) => (_jsx(AccountRow, { account: account, refresh: refresh }, account.providerName)))) : (_jsx(EmptyRow, { message: t("unlinkedEmpty") })) })] })] }) }));
};
export default LinkedAccounts;
//# sourceMappingURL=LinkedAccounts.js.map