diff --git a/js/apps/admin-ui/src/clients/credentials/Credentials.tsx b/js/apps/admin-ui/src/clients/credentials/Credentials.tsx index ffe49eaece..c6407aac52 100644 --- a/js/apps/admin-ui/src/clients/credentials/Credentials.tsx +++ b/js/apps/admin-ui/src/clients/credentials/Credentials.tsx @@ -16,17 +16,20 @@ import { CardBody, ClipboardCopy, Divider, + Form, FormGroup, PageSection, Split, SplitItem, } from "@patternfly/react-core"; -import { useState } from "react"; +import { useMemo, useState } from "react"; import { useFormContext, useWatch } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { useAdminClient } from "../../admin-client"; import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog"; +import { DynamicComponents } from "../../components/dynamic/DynamicComponents"; import { FormAccess } from "../../components/form/FormAccess"; +import { useServerInfo } from "../../context/server-info/ServerInfoProvider"; import { FormFields } from "../ClientDetails"; import { ClientSecret } from "./ClientSecret"; import { SignedJWT } from "./SignedJWT"; @@ -72,6 +75,15 @@ export const Credentials = ({ client, save, refresh }: CredentialsProps) => { (provider) => provider.id === clientAuthenticatorType, ); + const { componentTypes } = useServerInfo(); + const providerProperties = useMemo( + () => + componentTypes?.["org.keycloak.authentication.ClientAuthenticator"]?.find( + (p) => p.id === clientAuthenticatorType, + )?.properties, + [clientAuthenticatorType, componentTypes], + ); + useFetch( () => Promise.all([ @@ -170,6 +182,11 @@ export const Credentials = ({ client, save, refresh }: CredentialsProps) => { )} {clientAuthenticatorType === "client-x509" && } + {providerProperties && ( +
+ + + )}