@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
151 lines • 9.57 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { fetchWithError } from "@keycloak/keycloak-admin-client";
import { useAlerts } from "../ui-shared";
import { AlertVariant, Button, ButtonVariant, Label, PageSection, Tab, TabTitleText, ToolbarItem, } from "@patternfly/react-core";
import { sortBy } from "lodash-es";
import { useState } from "react";
import { Trans, useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { useAdminClient } from "../admin-client";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { KeycloakSpinner } from "../ui-shared";
import { ListEmptyState } from "../ui-shared";
import { RoutableTabs, useRoutableTab, } from "../components/routable-tabs/RoutableTabs";
import { KeycloakDataTable } from "../ui-shared";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { useRealm } from "../context/realm-context/RealmContext";
import helpUrls from "../help-urls";
import { addTrailingSlash } from "../util";
import { getAuthorizationHeaders } from "../utils/getAuthorizationHeaders";
import useLocaleSort, { mapByKey } from "../utils/useLocaleSort";
import useToggle from "../utils/useToggle";
import { BindFlowDialog } from "../authentication/BindFlowDialog";
import { DuplicateFlowModal } from "../authentication/DuplicateFlowModal";
import { RequiredActions } from "../authentication/RequiredActions";
import { UsedBy } from "../authentication/components/UsedBy";
import { Policies } from "../authentication/policies/Policies";
import { toAuthentication } from "../authentication/routes/Authentication";
import { toCreateFlow } from "../authentication/routes/CreateFlow";
import { toFlow } from "../authentication/routes/Flow";
export const REALM_FLOWS = new Map([
["browserFlow", "browser"],
["registrationFlow", "registration"],
["directGrantFlow", "direct grant"],
["resetCredentialsFlow", "reset credentials"],
["clientAuthenticationFlow", "clients"],
["dockerAuthenticationFlow", "docker auth"],
["firstBrokerLoginFlow", "firstBrokerLogin"],
]);
const AliasRenderer = ({ id, alias, usedBy, builtIn }) => {
const { t } = useTranslation();
const { realm } = useRealm();
return (_jsxs(_Fragment, { children: [_jsx(Link, { to: toFlow({
realm,
id: id,
usedBy: (usedBy === null || usedBy === void 0 ? void 0 : usedBy.type) || "notInUse",
builtIn: builtIn ? "builtIn" : undefined,
}), children: alias }, `link-${id}`), " ", builtIn && _jsx(Label, { children: t("buildIn") }, `label-${id}`)] }));
};
export default function AuthenticationSection() {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const { realm: realmName, realmRepresentation: realm } = useRealm();
const [key, setKey] = useState(0);
const refresh = () => setKey(key + 1);
const { addAlert, addError } = useAlerts();
const localeSort = useLocaleSort();
const [selectedFlow, setSelectedFlow] = useState();
const [open, toggleOpen] = useToggle();
const [bindFlowOpen, toggleBindFlow] = useToggle();
const loader = async () => {
const flowsRequest = await fetchWithError(`${addTrailingSlash(adminClient.baseUrl)}admin/realms/${realmName}/ui-ext/authentication-management/flows`, {
method: "GET",
headers: getAuthorizationHeaders(await adminClient.getAccessToken()),
});
const flows = await flowsRequest.json();
if (!flows) {
return [];
}
return sortBy(localeSort(flows, mapByKey("alias")), (flow) => { var _a; return (_a = flow.usedBy) === null || _a === void 0 ? void 0 : _a.type; });
};
const useTab = (tab) => useRoutableTab(toAuthentication({ realm: realmName, tab }));
const flowsTab = useTab("flows");
const requiredActionsTab = useTab("required-actions");
const policiesTab = useTab("policies");
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: "deleteConfirmFlow",
children: (_jsxs(Trans, { i18nKey: "deleteConfirmFlowMessage", children: [" ", _jsx("strong", { children: { flow: selectedFlow ? selectedFlow.alias : "" } }), "."] })),
continueButtonLabel: "delete",
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
try {
await adminClient.authenticationManagement.deleteFlow({
flowId: selectedFlow.id,
});
refresh();
addAlert(t("deleteFlowSuccess"), AlertVariant.success);
}
catch (error) {
addError("deleteFlowError", error);
}
},
});
if (!realm)
return _jsx(KeycloakSpinner, {});
return (_jsxs(_Fragment, { children: [_jsx(DeleteConfirm, {}), open && (_jsx(DuplicateFlowModal, { name: selectedFlow ? selectedFlow.alias : "", description: selectedFlow === null || selectedFlow === void 0 ? void 0 : selectedFlow.description, toggleDialog: toggleOpen, onComplete: () => {
refresh();
toggleOpen();
} })), bindFlowOpen && (_jsx(BindFlowDialog, { onClose: () => {
toggleBindFlow();
refresh();
}, flowAlias: selectedFlow === null || selectedFlow === void 0 ? void 0 : selectedFlow.alias })), _jsx(ViewHeader, { titleKey: "titleAuthentication", subKey: "authenticationExplain", helpUrl: helpUrls.authenticationUrl, divider: false }), _jsx(PageSection, { variant: "light", className: "pf-v5-u-p-0", children: _jsxs(RoutableTabs, { isBox: true, defaultLocation: toAuthentication({ realm: realmName, tab: "flows" }), children: [_jsx(Tab, { "data-testid": "flows", title: _jsx(TabTitleText, { children: t("flows") }), ...flowsTab, children: _jsx(KeycloakDataTable, { loader: loader, ariaLabelKey: "titleAuthentication", searchPlaceholderKey: "searchForFlow", toolbarItem: _jsx(ToolbarItem, { children: _jsx(Button, { component: (props) => (_jsx(Link, { ...props, to: toCreateFlow({ realm: realmName }) })), children: t("createFlow") }) }), actionResolver: ({ data }) => {
var _a;
return [
{
title: t("duplicate"),
onClick: () => {
toggleOpen();
setSelectedFlow(data);
},
},
...(((_a = data.usedBy) === null || _a === void 0 ? void 0 : _a.type) !== "DEFAULT"
? [
{
title: t("bindFlow"),
onClick: () => {
toggleBindFlow();
setSelectedFlow(data);
},
},
]
: []),
...(!data.builtIn && !data.usedBy
? [
{
title: t("delete"),
onClick: () => {
setSelectedFlow(data);
toggleDeleteDialog();
},
},
]
: []),
];
}, columns: [
{
name: "alias",
displayKey: "flowName",
cellRenderer: (row) => _jsx(AliasRenderer, { ...row }),
},
{
name: "usedBy",
displayKey: "usedBy",
cellRenderer: (row) => _jsx(UsedBy, { authType: row }),
},
{
name: "description",
displayKey: "description",
},
], emptyState: _jsx(ListEmptyState, { message: t("emptyEvents"), instructions: t("emptyEventsInstructions") }) }, key) }), _jsx(Tab, { "data-testid": "requiredActions", title: _jsx(TabTitleText, { children: t("requiredActions") }), ...requiredActionsTab, children: _jsx(RequiredActions, {}) }), _jsx(Tab, { "data-testid": "policies", title: _jsx(TabTitleText, { children: t("policies") }), ...policiesTab, children: _jsx(Policies, {}) })] }) })] }));
}
//# sourceMappingURL=AuthenticationSection.js.map