2021-01-26 19:39:01 +00:00
|
|
|
import React, { useState } from "react";
|
2021-08-09 08:47:34 +00:00
|
|
|
import { Link } from "react-router-dom";
|
2021-01-26 19:39:01 +00:00
|
|
|
import { Trans, useTranslation } from "react-i18next";
|
|
|
|
import {
|
|
|
|
AlertVariant,
|
|
|
|
Button,
|
|
|
|
ButtonVariant,
|
|
|
|
Label,
|
|
|
|
PageSection,
|
|
|
|
Popover,
|
|
|
|
Tab,
|
|
|
|
TabTitleText,
|
2021-08-09 08:47:34 +00:00
|
|
|
ToolbarItem,
|
2021-01-26 19:39:01 +00:00
|
|
|
} from "@patternfly/react-core";
|
|
|
|
import { CheckCircleIcon } from "@patternfly/react-icons";
|
2020-09-09 09:07:17 +00:00
|
|
|
|
2021-08-26 08:39:35 +00:00
|
|
|
import type AuthenticationFlowRepresentation from "@keycloak/keycloak-admin-client/lib/defs/authenticationFlowRepresentation";
|
2021-01-26 19:39:01 +00:00
|
|
|
import { useAdminClient } from "../context/auth/AdminClient";
|
|
|
|
import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
|
|
|
|
import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
|
|
|
|
import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
|
|
|
|
import { ViewHeader } from "../components/view-header/ViewHeader";
|
|
|
|
import { useRealm } from "../context/realm-context/RealmContext";
|
|
|
|
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
|
|
|
|
import { useAlerts } from "../components/alert/Alerts";
|
|
|
|
import { toUpperCase } from "../util";
|
2021-11-30 13:07:44 +00:00
|
|
|
import useToggle from "../utils/useToggle";
|
2021-01-26 19:39:01 +00:00
|
|
|
import { DuplicateFlowModal } from "./DuplicateFlowModal";
|
2021-08-09 08:47:34 +00:00
|
|
|
import { toCreateFlow } from "./routes/CreateFlow";
|
|
|
|
import { toFlow } from "./routes/Flow";
|
2021-10-19 15:30:57 +00:00
|
|
|
import { RequiredActions } from "./RequiredActions";
|
2021-12-01 09:24:46 +00:00
|
|
|
import { Policies } from "./policies/Policies";
|
2021-01-26 19:39:01 +00:00
|
|
|
|
|
|
|
import "./authentication-section.css";
|
|
|
|
|
2021-08-09 08:47:34 +00:00
|
|
|
type UsedBy = "specificClients" | "default" | "specificProviders";
|
2021-01-26 19:39:01 +00:00
|
|
|
|
|
|
|
type AuthenticationType = AuthenticationFlowRepresentation & {
|
|
|
|
usedBy: { type?: UsedBy; values: string[] };
|
|
|
|
};
|
|
|
|
|
|
|
|
const realmFlows = [
|
|
|
|
"browserFlow",
|
|
|
|
"registrationFlow",
|
|
|
|
"directGrantFlow",
|
|
|
|
"resetCredentialsFlow",
|
|
|
|
"clientAuthenticationFlow",
|
|
|
|
"dockerAuthenticationFlow",
|
|
|
|
];
|
|
|
|
|
2021-10-29 16:11:06 +00:00
|
|
|
export default function AuthenticationSection() {
|
2021-01-26 19:39:01 +00:00
|
|
|
const { t } = useTranslation("authentication");
|
|
|
|
const adminClient = useAdminClient();
|
|
|
|
const { realm } = useRealm();
|
|
|
|
const [key, setKey] = useState(0);
|
|
|
|
const refresh = () => setKey(new Date().getTime());
|
2021-07-28 12:01:42 +00:00
|
|
|
const { addAlert, addError } = useAlerts();
|
2021-01-26 19:39:01 +00:00
|
|
|
|
|
|
|
const [selectedFlow, setSelectedFlow] = useState<AuthenticationType>();
|
2021-11-30 13:07:44 +00:00
|
|
|
const [open, toggleOpen, setOpen] = useToggle();
|
2021-01-26 19:39:01 +00:00
|
|
|
|
|
|
|
const loader = async () => {
|
|
|
|
const clients = await adminClient.clients.find();
|
|
|
|
const idps = await adminClient.identityProviders.find();
|
|
|
|
const realmRep = await adminClient.realms.findOne({ realm });
|
2021-09-30 08:58:48 +00:00
|
|
|
if (!realmRep) {
|
|
|
|
throw new Error(t("common:notFound"));
|
|
|
|
}
|
|
|
|
|
2021-01-26 19:39:01 +00:00
|
|
|
const defaultFlows = Object.entries(realmRep)
|
|
|
|
.filter((entry) => realmFlows.includes(entry[0]))
|
|
|
|
.map((entry) => entry[1]);
|
|
|
|
|
2021-07-05 11:24:10 +00:00
|
|
|
const flows =
|
|
|
|
(await adminClient.authenticationManagement.getFlows()) as AuthenticationType[];
|
2021-01-26 19:39:01 +00:00
|
|
|
for (const flow of flows) {
|
|
|
|
flow.usedBy = { values: [] };
|
|
|
|
const client = clients.find(
|
|
|
|
(client) =>
|
|
|
|
client.authenticationFlowBindingOverrides &&
|
|
|
|
(client.authenticationFlowBindingOverrides["direct_grant"] ===
|
|
|
|
flow.id ||
|
|
|
|
client.authenticationFlowBindingOverrides["browser"] === flow.id)
|
|
|
|
);
|
|
|
|
if (client) {
|
2021-08-09 08:47:34 +00:00
|
|
|
flow.usedBy.type = "specificClients";
|
2021-01-26 19:39:01 +00:00
|
|
|
flow.usedBy.values.push(client.clientId!);
|
|
|
|
}
|
|
|
|
|
|
|
|
const idp = idps.find(
|
|
|
|
(idp) =>
|
|
|
|
idp.firstBrokerLoginFlowAlias === flow.alias ||
|
|
|
|
idp.postBrokerLoginFlowAlias === flow.alias
|
|
|
|
);
|
|
|
|
if (idp) {
|
2021-08-09 08:47:34 +00:00
|
|
|
flow.usedBy.type = "specificProviders";
|
2021-01-26 19:39:01 +00:00
|
|
|
flow.usedBy.values.push(idp.alias!);
|
|
|
|
}
|
|
|
|
|
|
|
|
const isDefault = defaultFlows.includes(flow.alias);
|
|
|
|
if (isDefault) {
|
|
|
|
flow.usedBy.type = "default";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return flows;
|
|
|
|
};
|
|
|
|
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
|
|
|
|
titleKey: "authentication:deleteConfirmFlow",
|
|
|
|
children: (
|
|
|
|
<Trans i18nKey="authentication:deleteConfirmFlowMessage">
|
|
|
|
{" "}
|
|
|
|
<strong>{{ flow: selectedFlow ? selectedFlow.alias : "" }}</strong>.
|
|
|
|
</Trans>
|
|
|
|
),
|
|
|
|
continueButtonLabel: "common:delete",
|
|
|
|
continueButtonVariant: ButtonVariant.danger,
|
|
|
|
onConfirm: async () => {
|
|
|
|
try {
|
|
|
|
await adminClient.authenticationManagement.deleteFlow({
|
|
|
|
flowId: selectedFlow!.id!,
|
|
|
|
});
|
|
|
|
refresh();
|
|
|
|
addAlert(t("deleteFlowSuccess"), AlertVariant.success);
|
|
|
|
} catch (error) {
|
2021-07-28 12:01:42 +00:00
|
|
|
addError("authentication:deleteFlowError", error);
|
2021-01-26 19:39:01 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
const UsedBy = ({ id, usedBy: { type, values } }: AuthenticationType) => (
|
|
|
|
<>
|
2021-08-09 08:47:34 +00:00
|
|
|
{(type === "specificProviders" || type === "specificClients") && (
|
2021-01-26 19:39:01 +00:00
|
|
|
<Popover
|
|
|
|
key={id}
|
2021-08-09 08:47:34 +00:00
|
|
|
aria-label={t("usedBy")}
|
2021-01-26 19:39:01 +00:00
|
|
|
bodyContent={
|
|
|
|
<div key={`usedBy-${id}-${values}`}>
|
2021-08-09 08:47:34 +00:00
|
|
|
{t(
|
|
|
|
"appliedBy" +
|
|
|
|
(type === "specificClients" ? "Clients" : "Providers")
|
|
|
|
)}{" "}
|
2021-01-26 19:39:01 +00:00
|
|
|
{values.map((used, index) => (
|
|
|
|
<>
|
|
|
|
<strong>{used}</strong>
|
|
|
|
{index < values.length - 1 ? ", " : ""}
|
|
|
|
</>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<Button variant={ButtonVariant.link} key={`button-${id}`}>
|
|
|
|
<CheckCircleIcon
|
|
|
|
className="keycloak_authentication-section__usedby"
|
|
|
|
key={`icon-${id}`}
|
|
|
|
/>{" "}
|
2021-08-09 08:47:34 +00:00
|
|
|
{t(type)}
|
2021-01-26 19:39:01 +00:00
|
|
|
</Button>
|
|
|
|
</Popover>
|
|
|
|
)}
|
|
|
|
{type === "default" && (
|
|
|
|
<Button key={id} variant={ButtonVariant.link} isDisabled>
|
|
|
|
<CheckCircleIcon
|
|
|
|
className="keycloak_authentication-section__usedby"
|
|
|
|
key={`icon-${id}`}
|
|
|
|
/>{" "}
|
|
|
|
{t("default")}
|
|
|
|
</Button>
|
|
|
|
)}
|
|
|
|
{!type && (
|
|
|
|
<Button key={id} variant={ButtonVariant.link} isDisabled>
|
|
|
|
{t("notInUse")}
|
|
|
|
</Button>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
2021-08-09 08:47:34 +00:00
|
|
|
const AliasRenderer = ({
|
|
|
|
id,
|
|
|
|
alias,
|
|
|
|
usedBy,
|
|
|
|
builtIn,
|
|
|
|
}: AuthenticationType) => (
|
2021-01-26 19:39:01 +00:00
|
|
|
<>
|
2021-08-09 08:47:34 +00:00
|
|
|
<Link
|
|
|
|
to={toFlow({
|
|
|
|
realm,
|
|
|
|
id: id!,
|
|
|
|
usedBy: usedBy.type || "notInUse",
|
|
|
|
builtIn: builtIn ? "builtIn" : undefined,
|
|
|
|
})}
|
|
|
|
key={`link-${id}`}
|
|
|
|
>
|
2021-01-26 19:39:01 +00:00
|
|
|
{toUpperCase(alias!)}
|
|
|
|
</Link>{" "}
|
|
|
|
{builtIn && <Label key={`label-${id}`}>{t("buildIn")}</Label>}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<DeleteConfirm />
|
|
|
|
{open && (
|
|
|
|
<DuplicateFlowModal
|
|
|
|
name={selectedFlow ? selectedFlow.alias! : ""}
|
|
|
|
description={selectedFlow?.description!}
|
2021-11-30 13:07:44 +00:00
|
|
|
toggleDialog={toggleOpen}
|
2021-01-26 19:39:01 +00:00
|
|
|
onComplete={() => {
|
|
|
|
refresh();
|
|
|
|
setOpen(false);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)}
|
2021-04-21 13:18:45 +00:00
|
|
|
<ViewHeader titleKey="authentication:title" divider={false} />
|
2021-03-31 13:16:58 +00:00
|
|
|
<PageSection variant="light" className="pf-u-p-0">
|
2021-01-26 19:39:01 +00:00
|
|
|
<KeycloakTabs isBox>
|
|
|
|
<Tab
|
|
|
|
eventKey="flows"
|
|
|
|
title={<TabTitleText>{t("flows")}</TabTitleText>}
|
|
|
|
>
|
|
|
|
<KeycloakDataTable
|
|
|
|
key={key}
|
|
|
|
loader={loader}
|
|
|
|
ariaLabelKey="authentication:title"
|
2021-10-14 14:54:07 +00:00
|
|
|
searchPlaceholderKey="authentication:searchForFlow"
|
2021-08-09 08:47:34 +00:00
|
|
|
toolbarItem={
|
|
|
|
<ToolbarItem>
|
|
|
|
<Button
|
2021-10-01 10:52:45 +00:00
|
|
|
component={(props) => (
|
|
|
|
<Link {...props} to={toCreateFlow({ realm })} />
|
|
|
|
)}
|
2021-08-09 08:47:34 +00:00
|
|
|
>
|
|
|
|
{t("createFlow")}
|
|
|
|
</Button>
|
|
|
|
</ToolbarItem>
|
|
|
|
}
|
2021-01-26 19:39:01 +00:00
|
|
|
actionResolver={({ data }) => {
|
|
|
|
const defaultActions = [
|
|
|
|
{
|
|
|
|
title: t("duplicate"),
|
|
|
|
onClick: () => {
|
|
|
|
setOpen(true);
|
|
|
|
setSelectedFlow(data);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
];
|
|
|
|
// remove delete when it's in use or default flow
|
|
|
|
if (data.builtIn || data.usedBy.values.length > 0) {
|
|
|
|
return defaultActions;
|
|
|
|
} else {
|
|
|
|
return [
|
|
|
|
{
|
|
|
|
title: t("common:delete"),
|
|
|
|
onClick: () => {
|
|
|
|
setSelectedFlow(data);
|
|
|
|
toggleDeleteDialog();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
...defaultActions,
|
|
|
|
];
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
columns={[
|
|
|
|
{
|
|
|
|
name: "alias",
|
|
|
|
displayKey: "authentication:flowName",
|
|
|
|
cellRenderer: AliasRenderer,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "usedBy",
|
|
|
|
displayKey: "authentication:usedBy",
|
|
|
|
cellRenderer: UsedBy,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "description",
|
|
|
|
displayKey: "common:description",
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
emptyState={
|
|
|
|
<ListEmptyState
|
|
|
|
message={t("emptyEvents")}
|
|
|
|
instructions={t("emptyEventsInstructions")}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</Tab>
|
2021-10-19 15:30:57 +00:00
|
|
|
<Tab
|
|
|
|
id="requiredActions"
|
|
|
|
eventKey="requiredActions"
|
|
|
|
title={<TabTitleText>{t("requiredActions")}</TabTitleText>}
|
|
|
|
>
|
|
|
|
<RequiredActions />
|
|
|
|
</Tab>
|
2021-12-01 09:24:46 +00:00
|
|
|
<Tab
|
|
|
|
id="policies"
|
|
|
|
eventKey="policies"
|
|
|
|
title={<TabTitleText>{t("policies")}</TabTitleText>}
|
|
|
|
>
|
|
|
|
<Policies />
|
|
|
|
</Tab>
|
2021-01-26 19:39:01 +00:00
|
|
|
</KeycloakTabs>
|
|
|
|
</PageSection>
|
|
|
|
</>
|
|
|
|
);
|
2021-10-29 16:11:06 +00:00
|
|
|
}
|