Issue 2618 (#2623)

public/resources/en/common.json

@@ -201,5 +201,7 @@
   "password": "Password",
   "passwordConfirmation": "Password confirmation",
   "temporaryPassword": "Temporary",
-  "temporaryPasswordHelpText": "If enabled, the user must change the password on next login"
+  "temporaryPasswordHelpText": "If enabled, the user must change the password on next login",
+  "forbidden_one": "Forbidden, permission needed:",
+  "forbidden_other": "Forbidden, permissions needed:"
 }

src/App.tsx

@@ -71,7 +71,7 @@ const SecuredRoute = ({ route }: SecuredRouteProps) => {
       </Suspense>
     );
 
-  return <ForbiddenSection />;
+  return <ForbiddenSection permissionNeeded={route.access} />;
 };
 
 export const App = ({ adminClient }: AdminClientProps) => {

src/ForbiddenSection.tsx

@@ -1,5 +1,22 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
+import { PageSection } from "@patternfly/react-core";
 
-export const ForbiddenSection = () => {
-  return <>Forbidden</>;
+import type { AccessType } from "@keycloak/keycloak-admin-client/lib/defs/whoAmIRepresentation";
+
+type ForbiddenSectionProps = {
+  permissionNeeded: AccessType | AccessType[];
+};
+
+export const ForbiddenSection = ({
+  permissionNeeded,
+}: ForbiddenSectionProps) => {
+  const { t } = useTranslation("common");
+  const count = Array.isArray(permissionNeeded) ? permissionNeeded.length : 1;
+
+  return (
+    <PageSection>
+      {t("forbidden", { count })} {permissionNeeded}
+    </PageSection>
+  );
 };