@keycloakify/keycloak-account-ui 25.0.1-rc.0

package/src/api/request.ts

@@ -0,0 +1,74 @@
+import {
+  KeycloakContext,
+  type BaseEnvironment,
+} from "@keycloakify/keycloak-account-ui/ui-shared";
+import Keycloak from "keycloak-js";
+
+import { joinPath } from "@keycloakify/keycloak-account-ui/utils/joinPath";
+import { CONTENT_TYPE_HEADER, CONTENT_TYPE_JSON } from "@keycloakify/keycloak-account-ui/api/constants";
+
+export type RequestOptions = {
+  signal?: AbortSignal;
+  getAccessToken?: () => Promise<string | undefined>;
+  method?: "POST" | "PUT" | "DELETE";
+  searchParams?: Record<string, string>;
+  body?: unknown;
+};
+
+async function _request(
+  url: URL,
+  { signal, getAccessToken, method, searchParams, body }: RequestOptions = {},
+): Promise<Response> {
+  if (searchParams) {
+    Object.entries(searchParams).forEach(([key, value]) =>
+      url.searchParams.set(key, value),
+    );
+  }
+
+  return fetch(url, {
+    signal,
+    method,
+    body: body ? JSON.stringify(body) : undefined,
+    headers: {
+      [CONTENT_TYPE_HEADER]: CONTENT_TYPE_JSON,
+      authorization: `Bearer ${await getAccessToken?.()}`,
+    },
+  });
+}
+
+export async function request(
+  path: string,
+  { environment, keycloak }: KeycloakContext<BaseEnvironment>,
+  opts: RequestOptions = {},
+  fullUrl?: URL,
+) {
+  if (typeof fullUrl === "undefined") {
+    fullUrl = url(environment, path);
+  }
+  return _request(fullUrl, {
+    ...opts,
+    getAccessToken: token(keycloak),
+  });
+}
+
+export const url = (environment: BaseEnvironment, path: string) =>
+  new URL(
+    joinPath(
+      environment.serverBaseUrl,
+      "realms",
+      environment.realm,
+      "account",
+      path,
+    ),
+  );
+
+export const token = (keycloak: Keycloak) =>
+  async function getAccessToken() {
+    try {
+      await keycloak.updateToken(5);
+    } catch (error) {
+      await keycloak.login();
+    }
+
+    return keycloak.token;
+  };

package/src/api.ts

@@ -0,0 +1,127 @@
+import {
+  KeycloakContext,
+  type BaseEnvironment,
+} from "@keycloakify/keycloak-account-ui/ui-shared";
+
+import { CallOptions } from "@keycloakify/keycloak-account-ui/api/methods";
+import { Links, parseLinks } from "@keycloakify/keycloak-account-ui/api/parse-links";
+import { parseResponse } from "@keycloakify/keycloak-account-ui/api/parse-response";
+import {
+  CredentialsIssuer,
+  Permission,
+  Resource,
+  Scope,
+  SupportedCredentialConfiguration,
+} from "@keycloakify/keycloak-account-ui/api/representations";
+import { request } from "@keycloakify/keycloak-account-ui/api/request";
+import { joinPath } from "@keycloakify/keycloak-account-ui/utils/joinPath";
+
+export const fetchResources = async (
+  { signal, context }: CallOptions,
+  requestParams: Record<string, string>,
+  shared: boolean | undefined = false,
+): Promise<{ data: Resource[]; links: Links }> => {
+  const response = await request(
+    `/resources${shared ? "/shared-with-me?" : "?"}`,
+    context,
+    { searchParams: shared ? requestParams : undefined, signal },
+  );
+
+  let links: Links;
+
+  try {
+    links = parseLinks(response);
+  } catch (error) {
+    links = {};
+  }
+
+  return {
+    data: checkResponse(await response.json()),
+    links,
+  };
+};
+
+export const fetchPermission = async (
+  { signal, context }: CallOptions,
+  resourceId: string,
+): Promise<Permission[]> => {
+  const response = await request(
+    `/resources/${resourceId}/permissions`,
+    context,
+    { signal },
+  );
+  return parseResponse<Permission[]>(response);
+};
+
+export const updateRequest = (
+  context: KeycloakContext<BaseEnvironment>,
+  resourceId: string,
+  username: string,
+  scopes: Scope[] | string[],
+) =>
+  request(`/resources/${resourceId}/permissions`, context, {
+    method: "PUT",
+    body: [{ username, scopes }],
+  });
+
+export const updatePermissions = (
+  context: KeycloakContext<BaseEnvironment>,
+  resourceId: string,
+  permissions: Permission[],
+) =>
+  request(`/resources/${resourceId}/permissions`, context, {
+    method: "PUT",
+    body: permissions,
+  });
+
+function checkResponse<T>(response: T) {
+  if (!response) throw new Error("Could not fetch");
+  return response;
+}
+
+export async function getIssuer(context: KeycloakContext<BaseEnvironment>) {
+  const response = await request(
+    joinPath(
+      "/realms/",
+      context.environment.realm,
+      "/.well-known/openid-credential-issuer",
+    ),
+    context,
+    {},
+    new URL(
+      joinPath(
+        context.environment.serverBaseUrl,
+        "/realms/",
+        context.environment.realm,
+        "/.well-known/openid-credential-issuer",
+      ),
+    ),
+  );
+  return parseResponse<CredentialsIssuer>(response);
+}
+
+export async function requestVCOffer(
+  context: KeycloakContext<BaseEnvironment>,
+  supportedCredentialConfiguration: SupportedCredentialConfiguration,
+  credentialsIssuer: CredentialsIssuer,
+) {
+  const response = await request(
+    "/protocol/oid4vc/credential-offer-uri",
+    context,
+    {
+      searchParams: {
+        credential_configuration_id: supportedCredentialConfiguration.id,
+        type: "qr-code",
+        width: "500",
+        height: "500",
+      },
+    },
+    new URL(
+      joinPath(
+        credentialsIssuer.credential_issuer +
+          "/protocol/oid4vc/credential-offer-uri",
+      ),
+    ),
+  );
+  return response.blob();
+}

package/src/applications/Applications.tsx

@@ -0,0 +1,282 @@
+import {
+  Button,
+  DataList,
+  DataListCell,
+  DataListContent,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  DataListToggle,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Grid,
+  GridItem,
+  Spinner,
+} from "@patternfly/react-core";
+import {
+  CheckIcon,
+  ExternalLinkAltIcon,
+  InfoAltIcon,
+} from "@patternfly/react-icons";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ContinueCancelModal,
+  useAlerts,
+  useEnvironment,
+} from "@keycloakify/keycloak-account-ui/ui-shared";
+import { deleteConsent, getApplications } from "@keycloakify/keycloak-account-ui/api/methods";
+import { ClientRepresentation } from "@keycloakify/keycloak-account-ui/api/representations";
+import { Page } from "@keycloakify/keycloak-account-ui/components/page/Page";
+import { TFuncKey } from "@keycloakify/keycloak-account-ui/i18n";
+import { formatDate } from "@keycloakify/keycloak-account-ui/utils/formatDate";
+import { usePromise } from "@keycloakify/keycloak-account-ui/utils/usePromise";
+
+type Application = ClientRepresentation & {
+  open: boolean;
+};
+
+export const Applications = () => {
+  const { t } = useTranslation();
+  const context = useEnvironment();
+  const { addAlert, addError } = useAlerts();
+
+  const [applications, setApplications] = useState<Application[]>();
+  const [key, setKey] = useState(1);
+  const refresh = () => setKey(key + 1);
+
+  usePromise(
+    (signal) => getApplications({ signal, context }),
+    (clients) => setApplications(clients.map((c) => ({ ...c, open: false }))),
+    [key],
+  );
+
+  const toggleOpen = (clientId: string) => {
+    setApplications([
+      ...applications!.map((a) =>
+        a.clientId === clientId ? { ...a, open: !a.open } : a,
+      ),
+    ]);
+  };
+
+  const removeConsent = async (id: string) => {
+    try {
+      await deleteConsent(context, id);
+      refresh();
+      addAlert(t("removeConsentSuccess"));
+    } catch (error) {
+      addError(t("removeConsentError", { error }).toString());
+    }
+  };
+
+  if (!applications) {
+    return <Spinner />;
+  }
+
+  return (
+    <Page title={t("application")} description={t("applicationsIntroMessage")}>
+      <DataList id="applications-list" aria-label={t("application")}>
+        <DataListItem
+          id="applications-list-header"
+          aria-labelledby="Columns names"
+        >
+          <DataListItemRow>
+            <span style={{ visibility: "hidden", height: 55 }}>
+              <DataListToggle
+                id="applications-list-header-invisible-toggle"
+                aria-controls="applications-list-content"
+              />
+            </span>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell
+                  key="applications-list-client-id-header"
+                  width={2}
+                  className="pf-v5-u-pt-md"
+                >
+                  <strong>{t("name")}</strong>
+                </DataListCell>,
+                <DataListCell
+                  key="applications-list-app-type-header"
+                  width={2}
+                  className="pf-v5-u-pt-md"
+                >
+                  <strong>{t("applicationType")}</strong>
+                </DataListCell>,
+                <DataListCell
+                  key="applications-list-status"
+                  width={2}
+                  className="pf-v5-u-pt-md"
+                >
+                  <strong>{t("status")}</strong>
+                </DataListCell>,
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        {applications.map((application) => (
+          <DataListItem
+            key={application.clientId}
+            aria-labelledby="applications-list"
+            data-testid="applications-list-item"
+            isExpanded={application.open}
+          >
+            <DataListItemRow className="pf-v5-u-align-items-center">
+              <DataListToggle
+                onClick={() => toggleOpen(application.clientId)}
+                isExpanded={application.open}
+                id={`toggle-${application.clientId}`}
+                aria-controls={`content-${application.clientId}`}
+              />
+              <DataListItemCells
+                className="pf-v5-u-align-items-center"
+                dataListCells={[
+                  <DataListCell width={2} key={`client${application.clientId}`}>
+                    {application.effectiveUrl && (
+                      <Button
+                        className="pf-v5-u-pl-0 title-case"
+                        component="a"
+                        variant="link"
+                        onClick={() => window.open(application.effectiveUrl)}
+                      >
+                        {application.clientName || application.clientId}{" "}
+                        <ExternalLinkAltIcon />
+                      </Button>
+                    )}
+                    {!application.effectiveUrl && (
+                      <span>
+                        {application.clientName || application.clientId}
+                      </span>
+                    )}
+                  </DataListCell>,
+                  <DataListCell
+                    width={2}
+                    key={`internal${application.clientId}`}
+                  >
+                    {application.userConsentRequired
+                      ? t("thirdPartyApp")
+                      : t("internalApp")}
+                    {application.offlineAccess ? ", " + t("offlineAccess") : ""}
+                  </DataListCell>,
+                  <DataListCell width={2} key={`status${application.clientId}`}>
+                    {application.inUse ? t("inUse") : t("notInUse")}
+                  </DataListCell>,
+                ]}
+              />
+            </DataListItemRow>
+
+            <DataListContent
+              id={`content-${application.clientId}`}
+              className="pf-v5-u-pl-4xl"
+              aria-label={t("applicationDetails", {
+                clientId: application.clientId,
+              })}
+              isHidden={!application.open}
+            >
+              <DescriptionList>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t("client")}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    {application.clientId}
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+                {application.description && (
+                  <DescriptionListGroup>
+                    <DescriptionListTerm>
+                      {t("description")}
+                    </DescriptionListTerm>
+                    <DescriptionListDescription>
+                      {application.description}
+                    </DescriptionListDescription>
+                  </DescriptionListGroup>
+                )}
+                {application.effectiveUrl && (
+                  <DescriptionListGroup>
+                    <DescriptionListTerm>URL</DescriptionListTerm>
+                    <DescriptionListDescription>
+                      {application.effectiveUrl.split('"')}
+                    </DescriptionListDescription>
+                  </DescriptionListGroup>
+                )}
+                {application.consent && (
+                  <>
+                    <DescriptionListGroup>
+                      <DescriptionListTerm>
+                        {t("hasAccessTo")}
+                      </DescriptionListTerm>
+                      {application.consent.grantedScopes.map((scope) => (
+                        <DescriptionListDescription key={`scope${scope.id}`}>
+                          <CheckIcon /> {t(scope.name as TFuncKey)}
+                        </DescriptionListDescription>
+                      ))}
+                    </DescriptionListGroup>
+                    {application.tosUri && (
+                      <DescriptionListGroup>
+                        <DescriptionListTerm>
+                          {t("termsOfService")}
+                        </DescriptionListTerm>
+                        <DescriptionListDescription>
+                          {application.tosUri}
+                        </DescriptionListDescription>
+                      </DescriptionListGroup>
+                    )}
+                    {application.policyUri && (
+                      <DescriptionListGroup>
+                        <DescriptionListTerm>
+                          {t("privacyPolicy")}
+                        </DescriptionListTerm>
+                        <DescriptionListDescription>
+                          {application.policyUri}
+                        </DescriptionListDescription>
+                      </DescriptionListGroup>
+                    )}
+                    {application.logoUri && (
+                      <DescriptionListGroup>
+                        <DescriptionListTerm>{t("logo")}</DescriptionListTerm>
+                        <DescriptionListDescription>
+                          <img src={application.logoUri} />
+                        </DescriptionListDescription>
+                      </DescriptionListGroup>
+                    )}
+                    <DescriptionListGroup>
+                      <DescriptionListTerm>
+                        {t("accessGrantedOn")}
+                      </DescriptionListTerm>
+                      <DescriptionListDescription>
+                        {formatDate(new Date(application.consent.createdDate))}
+                      </DescriptionListDescription>
+                    </DescriptionListGroup>
+                  </>
+                )}
+              </DescriptionList>
+              {(application.consent || application.offlineAccess) && (
+                <Grid hasGutter>
+                  <hr />
+                  <GridItem>
+                    <ContinueCancelModal
+                      buttonTitle={t("removeAccess")}
+                      modalTitle={t("removeAccess")}
+                      continueLabel={t("confirm")}
+                      cancelLabel={t("cancel")}
+                      buttonVariant="secondary"
+                      onContinue={() => removeConsent(application.clientId)}
+                    >
+                      {t("removeModalMessage", { name: application.clientId })}
+                    </ContinueCancelModal>
+                  </GridItem>
+                  <GridItem>
+                    <InfoAltIcon /> {t("infoMessage")}
+                  </GridItem>
+                </Grid>
+              )}
+            </DataListContent>
+          </DataListItem>
+        ))}
+      </DataList>
+    </Page>
+  );
+};
+
+export default Applications;

package/src/components/datalist/EmptyRow.tsx

@@ -0,0 +1,26 @@
+import {
+  DataListItem,
+  DataListItemRow,
+  DataListItemCells,
+  DataListCell,
+} from "@patternfly/react-core";
+
+type EmptyRowProps = {
+  message: string;
+};
+
+export const EmptyRow = ({ message, ...props }: EmptyRowProps) => {
+  return (
+    <DataListItem className="pf-v5-u-align-items-center pf-p-b-0">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="0" {...props}>
+              {message}
+            </DataListCell>,
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+  );
+};

package/src/components/page/Page.tsx

@@ -0,0 +1,27 @@
+import { PageSection, Text, TextContent, Title } from "@patternfly/react-core";
+import { PropsWithChildren } from "react";
+
+type PageProps = {
+  title: string;
+  description: string;
+};
+
+export const Page = ({
+  title,
+  description,
+  children,
+}: PropsWithChildren<PageProps>) => {
+  return (
+    <>
+      <PageSection variant="light">
+        <TextContent>
+          <Title headingLevel="h1" data-testid="page-heading">
+            {title}
+          </Title>
+          <Text component="p">{description}</Text>
+        </TextContent>
+      </PageSection>
+      <PageSection variant="light">{children}</PageSection>
+    </>
+  );
+};

package/src/content/ContentComponent.tsx

@@ -0,0 +1,62 @@
+import { Spinner } from "@patternfly/react-core";
+import { Suspense, lazy, useMemo, useState } from "react";
+import { useParams } from "react-router-dom";
+import { useEnvironment } from "@keycloakify/keycloak-account-ui/ui-shared";
+import { MenuItem } from "@keycloakify/keycloak-account-ui/root/PageNav";
+import { ContentComponentParams } from "@keycloakify/keycloak-account-ui/routes";
+import { joinPath } from "@keycloakify/keycloak-account-ui/utils/joinPath";
+import { usePromise } from "@keycloakify/keycloak-account-ui/utils/usePromise";
+import fetchContentJson from "@keycloakify/keycloak-account-ui/content/fetchContent";
+
+function findComponent(
+  content: MenuItem[],
+  componentId: string,
+): string | undefined {
+  for (const item of content) {
+    if (
+      "path" in item &&
+      item.path.endsWith(componentId) &&
+      "modulePath" in item
+    ) {
+      return item.modulePath;
+    }
+    if ("children" in item) {
+      return findComponent(item.children, componentId);
+    }
+  }
+  return undefined;
+}
+
+export const ContentComponent = () => {
+  const context = useEnvironment();
+
+  const [content, setContent] = useState<MenuItem[]>();
+  const { componentId } = useParams<ContentComponentParams>();
+
+  usePromise((signal) => fetchContentJson({ signal, context }), setContent);
+  const modulePath = useMemo(
+    () => findComponent(content || [], componentId!),
+    [content, componentId],
+  );
+
+  return modulePath && <Component modulePath={modulePath} />;
+};
+
+type ComponentProps = {
+  modulePath: string;
+};
+
+const Component = ({ modulePath }: ComponentProps) => {
+  const { environment } = useEnvironment();
+
+  const Element = lazy(
+    () => import(joinPath(environment.resourceUrl, modulePath)),
+  );
+  return (
+    <Suspense fallback={<Spinner />}>
+      <Element />
+    </Suspense>
+  );
+};
+
+export default ContentComponent;

package/src/content/fetchContent.ts

@@ -0,0 +1,13 @@
+import { CallOptions } from "@keycloakify/keycloak-account-ui/api/methods";
+import { MenuItem } from "@keycloakify/keycloak-account-ui/root/PageNav";
+import { joinPath } from "@keycloakify/keycloak-account-ui/utils/joinPath";
+
+export default async function fetchContentJson(
+  opts: CallOptions,
+): Promise<MenuItem[]> {
+  const response = await fetch(
+    joinPath(opts.context.environment.resourceUrl, "/content.json"),
+    opts,
+  );
+  return await response.json();
+}

package/src/environment.ts

@@ -0,0 +1,31 @@
+import {
+  getInjectedEnvironment,
+  type BaseEnvironment,
+} from "@keycloakify/keycloak-account-ui/ui-shared";
+
+export type Environment = BaseEnvironment & {
+  /** 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: Feature;
+};
+
+export type Feature = {
+  isRegistrationEmailAsUsername: boolean;
+  isEditUserNameAllowed: boolean;
+  isLinkedAccountsEnabled: boolean;
+  isMyResourcesEnabled: boolean;
+  deleteAccountAllowed: boolean;
+  updateEmailFeatureEnabled: boolean;
+  updateEmailActionEnabled: boolean;
+  isViewGroupsEnabled: boolean;
+  isOid4VciEnabled: boolean;
+};
+
+export const environment = getInjectedEnvironment<Environment>();

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}