@keycloakify/keycloak-account-ui 260007.0.3 → 260200.0.0-rc.0

package/keycloak-theme/account/root/Root.tsx

@@ -2,23 +2,65 @@
 
 // @ts-nocheck
 
-import { KeycloakProvider } from "../../shared/keycloak-ui-shared";
+import { ErrorPage, useEnvironment } from "../../shared/keycloak-ui-shared";
 import { Page, Spinner } from "../../shared/@patternfly/react-core";
-import { Suspense } from "react";
-import { Outlet } from "react-router-dom";
-
-import { environment } from "../environment";
+import { Suspense, useState } from "react";
+import {
+  createBrowserRouter,
+  Outlet,
+  RouteObject,
+  RouterProvider,
+} from "react-router-dom";
+import fetchContentJson from "../content/fetchContent";
+import { Environment, environment } from "../environment";
+import { usePromise } from "../utils/usePromise";
 import { Header } from "./Header";
-import { PageNav } from "./PageNav";
+import { MenuItem, PageNav } from "./PageNav";
+import { routes } from "../routes";
+
+function mapRoutes(content: MenuItem[]): RouteObject[] {
+  return content
+    .map((item) => {
+      if ("children" in item) {
+        return mapRoutes(item.children);
+      }
+      return {
+        ...item,
+        element:
+          "path" in item
+            ? routes.find((r) => r.path === (item.id ?? item.path))?.element
+            : undefined,
+      };
+    })
+    .flat();
+}
 
 export const Root = () => {
-  return (
-    <KeycloakProvider environment={environment}>
-      <Page header={<Header />} sidebar={<PageNav />} isManagedSidebar>
-        <Suspense fallback={<Spinner />}>
-          <Outlet />
-        </Suspense>
-      </Page>
-    </KeycloakProvider>
+  const context = useEnvironment<Environment>();
+  const [content, setContent] = useState<RouteObject[]>();
+
+  usePromise(
+    (signal) => fetchContentJson({ signal, context }),
+    (content) => {
+      setContent([
+        {
+          path: decodeURIComponent(new URL(environment.baseUrl).pathname),
+          element: (
+            <Page header={<Header />} sidebar={<PageNav />} isManagedSidebar>
+              <Suspense fallback={<Spinner />}>
+                <Outlet />
+              </Suspense>
+            </Page>
+          ),
+          errorElement: <ErrorPage />,
+          children: mapRoutes(content),
+        },
+      ]);
+    },
   );
+
+  if (!content) {
+    return <Spinner />;
+  }
+  return <RouterProvider router={createBrowserRouter(content)} />;
 };

package/keycloak-theme/account/routes.tsx

@@ -4,11 +4,8 @@
 
 import { lazy } from "react";
 import type { IndexRouteObject, RouteObject } from "react-router-dom";
-
 import { environment } from "./environment";
 import { Organizations } from "./organizations/Organizations";
-import { ErrorPage } from "./root/ErrorPage";
-import { Root } from "./root/Root";
 
 const DeviceActivity = lazy(() => import("./account-security/DeviceActivity"));
 const LinkedAccounts = lazy(() => import("./account-security/LinkedAccounts"));
@@ -62,6 +59,7 @@ export const ContentRoute: RouteObject = {
 export const PersonalInfoRoute: IndexRouteObject = {
   index: true,
   element: <PersonalInfo />,
+  path: "",
 };
 
 export const OrganizationsRoute: RouteObject = {
@@ -74,23 +72,16 @@ export const Oid4VciRoute: RouteObject = {
   element: <Oid4Vci />,
 };
 
-export const RootRoute: RouteObject = {
-  path: decodeURIComponent(new URL(environment.baseUrl).pathname),
-  element: <Root />,
-  errorElement: <ErrorPage />,
-  children: [
-    PersonalInfoRoute,
-    DeviceActivityRoute,
-    LinkedAccountsRoute,
-    SigningInRoute,
-    ApplicationsRoute,
-    GroupsRoute,
-    OrganizationsRoute,
-    PersonalInfoRoute,
-    ResourcesRoute,
-    ContentRoute,
-    Oid4VciRoute,
-  ],
-};
-
-export const routes: RouteObject[] = [RootRoute];
+export const routes: RouteObject[] = [
+  PersonalInfoRoute,
+  DeviceActivityRoute,
+  LinkedAccountsRoute,
+  SigningInRoute,
+  ApplicationsRoute,
+  GroupsRoute,
+  OrganizationsRoute,
+  PersonalInfoRoute,
+  ResourcesRoute,
+  ContentRoute,
+  ...(environment.features.isOid4VciEnabled ? [Oid4VciRoute] : []),
+];

package/package.json

@@ -2,7 +2,7 @@
   "name": "@keycloakify/keycloak-account-ui",
   "main": "index.js",
   "types": "index.d.ts",
-  "version": "260007.0.3",
+  "version": "260200.0.0-rc.0",
   "repository": {
     "type": "git",
     "url": "git://github.com/keycloakify/keycloak-account-ui.git"
@@ -19,20 +19,20 @@
     "tsafe": "^1.8.5"
   },
   "peerDependencies": {
-    "@patternfly/patternfly": "^5.4.0",
-    "@patternfly/react-core": "^5.4.1",
-    "@patternfly/react-icons": "^5.4.0",
-    "@patternfly/react-table": "^5.4.1",
-    "i18next": "^23.15.1",
-    "i18next-http-backend": "^2.6.1",
+    "@patternfly/patternfly": "^5.4.2",
+    "@patternfly/react-core": "^5.4.14",
+    "@patternfly/react-icons": "^5.4.2",
+    "@patternfly/react-table": "^5.4.16",
+    "i18next": "^24.2.3",
+    "i18next-fetch-backend": "^6.0.0",
+    "keycloak-js": "^26.2.0",
     "lodash-es": "^4.17.21",
     "react": "^18.3.1",
-    "react-hook-form": "^7.53.0",
-    "react-i18next": "^15.0.2",
-    "react-router-dom": "^6.26.2",
-    "keycloak-js": "26.0.7",
-    "@keycloakify/keycloak-ui-shared": "~260007.0.2",
+    "react-hook-form": "^7.54.2",
+    "react-i18next": "^15.4.1",
+    "react-router-dom": "^6.30.0",
+    "@keycloakify/keycloak-ui-shared": "~260200.0.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.3.11"
+    "@types/react": "^18.3.18"
   }
 }

package/src/KcAccountUiLoader.tsx

@@ -8,16 +8,37 @@ import { getI18n } from "react-i18next";
 import type { AccountEnvironment as Environment_target } from "@keycloak/keycloak-account-ui";
 
 type Environment = {
+    /**
+     * The URL to the root of the Keycloak server, including the path if present, this is **NOT** always equivalent to the URL of the Admin Console.
+     * For example, the Keycloak server could be hosted on `auth.example.com` and Admin Console may be hosted on `admin.example.com/some/path`.
+     *
+     * Note that this URL is normalized not to include a trailing slash, so take this into account when constructing URLs.
+     *
+     * @see {@link https://www.keycloak.org/server/hostname#_administration_console}
+     */
     serverBaseUrl: string;
+    /** The identifier of the realm used to authenticate the user. */
     realm: string;
+    /** The identifier of the client used to authenticate the user. */
     clientId: string;
+    /** The base URL of the resources. */
     resourceUrl: string;
+    /** The source URL for the the logo image. */
     logo: string;
+    /** The URL to be followed when the logo is clicked. */
     logoUrl: string;
+    /** The scopes to be requested when sending authorization requests*/
+    scope?: string;
+
+    /** The URL to the root of the account console. */
     baseUrl: string;
+    /** The locale of the user */
     locale: string;
+    /** Name of the referrer application in the back link */
     referrerName?: string;
+    /** UR to the referrer application in the back link */
     referrerUrl?: string;
+    /** Feature flags */
     features: {
         isRegistrationEmailAsUsername: boolean;
         isEditUserNameAllowed: boolean;