diff --git a/src/clients/help.ts b/src/clients/help.ts index 4a6f45f011..c08b97c179 100644 --- a/src/clients/help.ts +++ b/src/clients/help.ts @@ -6,6 +6,8 @@ export default { "'OpenID Connect' allows Clients to verify the identity of the End-User based on the authentication performed by an Authorization Server.'SAML' enables web-based authentication and authorization scenarios including cross-domain single sign-on (SSO) and uses security tokens containing assertions to pass information.", serviceAccount: "Allows you to authenticate this client to Keycloak and retrieve access token dedicated to this client. In terms of OAuth2 specification, this enables support of 'Client Credentials Grant' for this client.", + manageServiceAccountUser: + "To manage detail and group mappings, click on the username <1>{{link}}", authentication: "This defines the type of the OIDC client. When it's ON, the OIDC type is set to confidential access type. When it's OFF, it is set to public access type", authorization: diff --git a/src/clients/service-account/ServiceAccount.tsx b/src/clients/service-account/ServiceAccount.tsx index e8b8d3e652..729e37b478 100644 --- a/src/clients/service-account/ServiceAccount.tsx +++ b/src/clients/service-account/ServiceAccount.tsx @@ -1,6 +1,8 @@ import React, { useState } from "react"; -import { useTranslation } from "react-i18next"; -import { AlertVariant } from "@patternfly/react-core"; +import { Link } from "react-router-dom"; +import { Trans, useTranslation } from "react-i18next"; +import { AlertVariant, PageSection } from "@patternfly/react-core"; +import { InfoCircleIcon } from "@patternfly/react-icons"; import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation"; import type { RoleMappingPayload } from "@keycloak/keycloak-admin-client/lib/defs/roleRepresentation"; @@ -12,6 +14,11 @@ import { RoleMapping, Row, } from "../../components/role-mapping/RoleMapping"; +import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner"; +import { toUser } from "../../user/routes/User"; +import { useRealm } from "../../context/realm-context/RealmContext"; + +import "./service-account.css"; type ServiceAccountProps = { client: ClientRepresentation; @@ -21,6 +28,7 @@ export const ServiceAccount = ({ client }: ServiceAccountProps) => { const { t } = useTranslation("clients"); const adminClient = useAdminClient(); const { addAlert, addError } = useAlerts(); + const { realm } = useRealm(); const [hide, setHide] = useState(false); const [serviceAccount, setServiceAccount] = useState(); @@ -98,13 +106,30 @@ export const ServiceAccount = ({ client }: ServiceAccountProps) => { } }; return serviceAccount ? ( - setHide(!hide)} - /> - ) : null; + <> + + + + + {""} + + {{ link: serviceAccount.username }} + + + + + setHide(!hide)} + /> + + ) : ( + + ); }; diff --git a/src/clients/service-account/service-account.css b/src/clients/service-account/service-account.css new file mode 100644 index 0000000000..93ad24c562 --- /dev/null +++ b/src/clients/service-account/service-account.css @@ -0,0 +1,6 @@ + +.keycloak--service-account--info-text { + color: var(--pf-global--info-color--100); + display: inline; + font-size: var(--pf-global--FontSize--lg); +} \ No newline at end of file