@keycloakify/keycloak-account-ui
Version:
Repackaged Keycloak Account UI
40 lines • 4.25 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEnvironment } from "../ui-shared";
import { DataList, Stack, StackItem, Title } from "@patternfly/react-core";
import { 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 { LinkedAccountsToolbar } from "../account-security/LinkedAccountsToolbar";
export const LinkedAccounts = () => {
const { t } = useTranslation();
const context = useEnvironment();
const [linkedAccounts, setLinkedAccounts] = useState([]);
const [unlinkedAccounts, setUninkedAccounts] = useState([]);
const [paramsUnlinked, setParamsUnlinked] = useState({
first: 0,
max: 6,
linked: false,
});
const [paramsLinked, setParamsLinked] = useState({
first: 0,
max: 6,
linked: true,
});
const [key, setKey] = useState(1);
const refresh = () => setKey(key + 1);
usePromise((signal) => getLinkedAccounts({ signal, context }, paramsUnlinked), setUninkedAccounts, [paramsUnlinked, key]);
usePromise((signal) => getLinkedAccounts({ signal, context }, paramsLinked), setLinkedAccounts, [paramsLinked, key]);
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(LinkedAccountsToolbar, { onFilter: (search) => setParamsLinked(Object.assign(Object.assign({}, paramsLinked), { first: 0, search })), count: linkedAccounts.length, first: paramsLinked["first"], max: paramsLinked["max"], onNextClick: () => {
setParamsLinked(Object.assign(Object.assign({}, paramsLinked), { first: paramsLinked.first + paramsLinked.max - 1 }));
}, onPreviousClick: () => setParamsLinked(Object.assign(Object.assign({}, paramsLinked), { first: paramsLinked.first - paramsLinked.max + 1 })), onPerPageSelect: (first, max) => setParamsLinked(Object.assign(Object.assign({}, paramsLinked), { first,
max })), hasNext: linkedAccounts.length > paramsLinked.max - 1 }), _jsx(DataList, { id: "linked-idps", "aria-label": t("linkedLoginProviders"), children: linkedAccounts.length > 0 ? (linkedAccounts.map((account, index) => index !== paramsLinked.max - 1 && (_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(LinkedAccountsToolbar, { onFilter: (search) => setParamsUnlinked(Object.assign(Object.assign({}, paramsUnlinked), { first: 0, search })), count: unlinkedAccounts.length, first: paramsUnlinked["first"], max: paramsUnlinked["max"], onNextClick: () => {
setParamsUnlinked(Object.assign(Object.assign({}, paramsUnlinked), { first: paramsUnlinked.first + paramsUnlinked.max - 1 }));
}, onPreviousClick: () => setParamsUnlinked(Object.assign(Object.assign({}, paramsUnlinked), { first: paramsUnlinked.first - paramsUnlinked.max + 1 })), onPerPageSelect: (first, max) => setParamsUnlinked(Object.assign(Object.assign({}, paramsUnlinked), { first,
max })), hasNext: unlinkedAccounts.length > paramsUnlinked.max - 1 }), _jsx(DataList, { id: "unlinked-idps", "aria-label": t("unlinkedLoginProviders"), children: unlinkedAccounts.length > 0 ? (unlinkedAccounts.map((account, index) => index !== paramsUnlinked.max - 1 && (_jsx(AccountRow, { account: account, refresh: refresh }, account.providerName)))) : (_jsx(EmptyRow, { message: t("unlinkedEmpty") })) })] })] }) }));
};
export default LinkedAccounts;
//# sourceMappingURL=LinkedAccounts.js.map