diff --git a/public/resources/en/clients.json b/public/resources/en/clients.json index db89e6ddb4..2687c4ea11 100644 --- a/public/resources/en/clients.json +++ b/public/resources/en/clients.json @@ -48,6 +48,8 @@ "evaluate": "Evaluate", "reevaluate": "Re-evaluate", "showAuthData": "Show authorization data", + "authData": "Authorization data", + "authDataDescription": "Represents a token carrying authorization data as a result of the processing of an authorization request. This representation is basically what Keycloak issues to clients asking for permission. Check the `authorization` claim for the permissions that where granted based on the current authorization request. ", "results": "Results", "allResults": "All results", "resultPermit": "Result-Permit", diff --git a/src/clients/authorization/AuthorizationDataModal.tsx b/src/clients/authorization/AuthorizationDataModal.tsx new file mode 100644 index 0000000000..ab7604bfc0 --- /dev/null +++ b/src/clients/authorization/AuthorizationDataModal.tsx @@ -0,0 +1,61 @@ +import React from "react"; +import { useTranslation } from "react-i18next"; +import { + Button, + Modal, + ModalVariant, + TextContent, + Text, + TextVariants, +} from "@patternfly/react-core"; + +import type AccessTokenRepresentation from "@keycloak/keycloak-admin-client/lib/defs/accessTokenAuthorization"; +import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea"; +import useToggle from "../../utils/useToggle"; +import { prettyPrintJSON } from "../../util"; + +type AuthorizationDataModalProps = { + data: AccessTokenRepresentation; +}; + +export const AuthorizationDataModal = ({ + data, +}: AuthorizationDataModalProps) => { + const { t } = useTranslation("clients"); + const [show, toggle] = useToggle(); + + return ( + <> + + + {t("authData")} + {t("authDataDescription")} + + } + onClose={toggle} + actions={[ + , + ]} + > + + + + ); +}; diff --git a/src/clients/authorization/AuthorizationEvaluate.tsx b/src/clients/authorization/AuthorizationEvaluate.tsx index e18ae3beac..37697e2555 100644 --- a/src/clients/authorization/AuthorizationEvaluate.tsx +++ b/src/clients/authorization/AuthorizationEvaluate.tsx @@ -26,6 +26,7 @@ import { HelpItem } from "../../components/help-enabler/HelpItem"; import { FormPanel } from "../../components/scroll-form/FormPanel"; import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation"; import type RoleRepresentation from "@keycloak/keycloak-admin-client/lib/defs/roleRepresentation"; +import type AccessTokenRepresentation from "@keycloak/keycloak-admin-client/lib/defs/accessTokenAuthorization"; import { useAdminClient, useFetch } from "../../context/auth/AdminClient"; import type ResourceEvaluation from "@keycloak/keycloak-admin-client/lib/defs/resourceEvaluation"; import { useRealm } from "../../context/realm-context/RealmContext"; @@ -36,13 +37,15 @@ import type ResourceRepresentation from "@keycloak/keycloak-admin-client/lib/def import type ScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/scopeRepresentation"; import type { KeyValueType } from "../../components/key-value-form/key-value-convert"; import { TableComposable, Th, Thead, Tr } from "@patternfly/react-table"; -import "./auth-evaluate.css"; import { AuthorizationEvaluateResource } from "./AuthorizationEvaluateResource"; import { SearchIcon } from "@patternfly/react-icons"; import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState"; import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput"; import { useAccess } from "../../context/access/Access"; import { ForbiddenSection } from "../../ForbiddenSection"; +import { AuthorizationDataModal } from "./AuthorizationDataModal"; + +import "./auth-evaluate.css"; interface EvaluateFormInputs extends Omit { @@ -121,6 +124,7 @@ export const AuthorizationEvaluate = ({ client }: Props) => { const [evaluateResults, setEvaluateResults] = useState< EvaluationResultRepresentation[] >([]); + const [access, setAccess] = useState(); const [showEvaluateResults, setShowEvaluateResults] = useState(false); const searchQueryRef = useRef(""); const [searchQuery, setSearchQuery] = useState(""); @@ -210,6 +214,7 @@ export const AuthorizationEvaluate = ({ client }: Props) => { ); setEvaluateResults(evaluation.results); + setAccess(evaluation.rpt); setShowEvaluateResults(true); return evaluateResults; }; @@ -340,9 +345,7 @@ export const AuthorizationEvaluate = ({ client }: Props) => { > {t("clients:reevaluate")} - + ) : ( @@ -644,14 +647,6 @@ export const AuthorizationEvaluate = ({ client }: Props) => { > {t("common:revert")} -