@keycloakify/keycloak-ui-shared 26.0.6001

package/LICENSE

@@ -0,0 +1,2 @@
+This is a re-package of https://github.com/keycloak/keycloak/tree/25.0.1/js/apps/account-ui
+The license of the original project is Apache-2.0

package/README.md

@@ -0,0 +1,6 @@
+
+# @keycloakify/keycloak-ui-shared
+
+> WARNING: This is a work in progress, do not attempt to use it yet.
+
+This module is a repackage of `@keycloak/keycloak-ui-shared` meant to be used in the context of Keycloakify.  

package/keycloak-theme/shared/keycloak-ui-shared/alerts/AlertPanel.tsx

@@ -0,0 +1,43 @@
+import {
+  AlertGroup,
+  Alert,
+  AlertActionCloseButton,
+  AlertVariant,
+} from "@patternfly/react-core";
+
+import type { AlertEntry } from "./Alerts";
+
+export type AlertPanelProps = {
+  alerts: AlertEntry[];
+  onCloseAlert: (id: number) => void;
+};
+
+export function AlertPanel({ alerts, onCloseAlert }: AlertPanelProps) {
+  return (
+    <AlertGroup
+      data-testid="global-alerts"
+      isToast
+      style={{ whiteSpace: "pre-wrap" }}
+    >
+      {alerts.map(({ id, variant, message, description }, index) => (
+        <Alert
+          key={id}
+          data-testid={index === 0 ? "last-alert" : undefined}
+          isLiveRegion
+          variant={AlertVariant[variant]}
+          component="p"
+          variantLabel=""
+          title={message}
+          actionClose={
+            <AlertActionCloseButton
+              title={message}
+              onClose={() => onCloseAlert(id)}
+            />
+          }
+        >
+          {description && <p>{description}</p>}
+        </Alert>
+      ))}
+    </AlertGroup>
+  );
+}

package/keycloak-theme/shared/keycloak-ui-shared/alerts/Alerts.tsx

@@ -0,0 +1,82 @@
+import { AlertVariant } from "@patternfly/react-core";
+import { PropsWithChildren, useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { createNamedContext } from "../utils/createNamedContext";
+import { getErrorDescription, getErrorMessage } from "../utils/errors";
+import { generateId } from "../utils/generateId";
+import { useRequiredContext } from "../utils/useRequiredContext";
+import { useSetTimeout } from "../utils/useSetTimeout";
+import { AlertPanel } from "./AlertPanel";
+
+const ALERT_TIMEOUT = 8000;
+
+export type AddAlertFunction = (
+  message: string,
+  variant?: AlertVariant,
+  description?: string,
+) => void;
+
+export type AddErrorFunction = (messageKey: string, error: unknown) => void;
+
+export type AlertProps = {
+  addAlert: AddAlertFunction;
+  addError: AddErrorFunction;
+};
+
+const AlertContext = createNamedContext<AlertProps | undefined>(
+  "AlertContext",
+  undefined,
+);
+
+export const useAlerts = () => useRequiredContext(AlertContext);
+
+export type AlertEntry = {
+  id: number;
+  message: string;
+  variant: AlertVariant;
+  description?: string;
+};
+
+export const AlertProvider = ({ children }: PropsWithChildren) => {
+  const { t } = useTranslation();
+  const setTimeout = useSetTimeout();
+  const [alerts, setAlerts] = useState<AlertEntry[]>([]);
+
+  const removeAlert = (id: number) =>
+    setAlerts((alerts) => alerts.filter((alert) => alert.id !== id));
+
+  const addAlert = useCallback<AddAlertFunction>(
+    (message, variant = AlertVariant.success, description) => {
+      const alert: AlertEntry = {
+        id: generateId(),
+        message,
+        variant,
+        description,
+      };
+
+      setAlerts((alerts) => [alert, ...alerts]);
+      setTimeout(() => removeAlert(alert.id), ALERT_TIMEOUT);
+    },
+    [setTimeout],
+  );
+
+  const addError = useCallback<AddErrorFunction>(
+    (messageKey, error) => {
+      const message = t(messageKey, { error: getErrorMessage(error) });
+      const description = getErrorDescription(error);
+
+      addAlert(message, AlertVariant.danger, description);
+    },
+    [addAlert, t],
+  );
+
+  const value = useMemo(() => ({ addAlert, addError }), [addAlert, addError]);
+
+  return (
+    <AlertContext.Provider value={value}>
+      <AlertPanel alerts={alerts} onCloseAlert={removeAlert} />
+      {children}
+    </AlertContext.Provider>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/buttons/FormSubmitButton.tsx

@@ -0,0 +1,47 @@
+import { Button, ButtonProps } from "@patternfly/react-core";
+import { PropsWithChildren } from "react";
+import { FieldValues, FormState } from "react-hook-form";
+
+export type FormSubmitButtonProps = Omit<ButtonProps, "isDisabled"> & {
+  formState: FormState<FieldValues>;
+  allowNonDirty?: boolean;
+  allowInvalid?: boolean;
+  isDisabled?: boolean;
+};
+
+const isSubmittable = (
+  formState: FormState<FieldValues>,
+  allowNonDirty: boolean,
+  allowInvalid: boolean,
+) => {
+  return (
+    (formState.isValid || allowInvalid) &&
+    (formState.isDirty || allowNonDirty) &&
+    !formState.isLoading &&
+    !formState.isValidating &&
+    !formState.isSubmitting
+  );
+};
+
+export const FormSubmitButton = ({
+  formState,
+  isDisabled = false,
+  allowInvalid = false,
+  allowNonDirty = false,
+  children,
+  ...rest
+}: PropsWithChildren<FormSubmitButtonProps>) => {
+  return (
+    <Button
+      variant="primary"
+      isDisabled={
+        (formState && !isSubmittable(formState, allowNonDirty, allowInvalid)) ||
+        isDisabled
+      }
+      {...rest}
+      type="submit"
+    >
+      {children}
+    </Button>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/context/ErrorPage.tsx

@@ -0,0 +1,60 @@
+import {
+  Button,
+  Modal,
+  ModalVariant,
+  Page,
+  Text,
+  TextContent,
+  TextVariants,
+} from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+
+type ErrorPageProps = {
+  error?: unknown;
+};
+
+export const ErrorPage = (props: ErrorPageProps) => {
+  const { t } = useTranslation();
+  const error = props.error;
+  const errorMessage = getErrorMessage(error);
+
+  function onRetry() {
+    location.href = location.origin + location.pathname;
+  }
+
+  return (
+    <Page>
+      <Modal
+        variant={ModalVariant.small}
+        title={t("somethingWentWrong")}
+        titleIconVariant="danger"
+        showClose={false}
+        isOpen
+        actions={[
+          <Button key="tryAgain" variant="primary" onClick={onRetry}>
+            {t("tryAgain")}
+          </Button>,
+        ]}
+      >
+        <TextContent>
+          <Text>{t("somethingWentWrongDescription")}</Text>
+          {errorMessage && (
+            <Text component={TextVariants.small}>{errorMessage}</Text>
+          )}
+        </TextContent>
+      </Modal>
+    </Page>
+  );
+};
+
+function getErrorMessage(error: unknown): string | null {
+  if (typeof error === "string") {
+    return error;
+  }
+
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return null;
+}

package/keycloak-theme/shared/keycloak-ui-shared/context/HelpContext.tsx

@@ -0,0 +1,30 @@
+import { PropsWithChildren } from "react";
+import { createNamedContext } from "../utils/createNamedContext";
+import { useRequiredContext } from "../utils/useRequiredContext";
+import { useStoredState } from "../utils/useStoredState";
+
+type HelpContextProps = {
+  enabled: boolean;
+  toggleHelp: () => void;
+};
+
+export const HelpContext = createNamedContext<HelpContextProps | undefined>(
+  "HelpContext",
+  undefined,
+);
+
+export const useHelp = () => useRequiredContext(HelpContext);
+
+export const Help = ({ children }: PropsWithChildren) => {
+  const [enabled, setHelp] = useStoredState(localStorage, "helpEnabled", true);
+
+  function toggleHelp() {
+    setHelp(!enabled);
+  }
+
+  return (
+    <HelpContext.Provider value={{ enabled, toggleHelp }}>
+      {children}
+    </HelpContext.Provider>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/context/KeycloakContext.tsx

@@ -0,0 +1,97 @@
+import { Spinner } from "@patternfly/react-core";
+import Keycloak from "keycloak-js";
+import {
+  PropsWithChildren,
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { AlertProvider } from "../alerts/Alerts";
+import { ErrorPage } from "./ErrorPage";
+import { Help } from "./HelpContext";
+import { BaseEnvironment } from "./environment";
+
+export type KeycloakContext<T extends BaseEnvironment = BaseEnvironment> =
+  KeycloakContextProps<T> & {
+    keycloak: Keycloak;
+  };
+
+const createKeycloakEnvContext = <T extends BaseEnvironment>() =>
+  createContext<KeycloakContext<T> | undefined>(undefined);
+
+let KeycloakEnvContext: any;
+
+export const useEnvironment = <
+  T extends BaseEnvironment = BaseEnvironment,
+>() => {
+  const context = useContext<KeycloakContext<T>>(KeycloakEnvContext);
+  if (!context)
+    throw Error(
+      "no environment provider in the hierarchy make sure to add the provider",
+    );
+  return context;
+};
+
+interface KeycloakContextProps<T extends BaseEnvironment> {
+  environment: T;
+}
+
+export const KeycloakProvider = <T extends BaseEnvironment>({
+  environment,
+  children,
+}: PropsWithChildren<KeycloakContextProps<T>>) => {
+  KeycloakEnvContext = createKeycloakEnvContext<T>();
+  const calledOnce = useRef(false);
+  const [init, setInit] = useState(false);
+  const [error, setError] = useState<unknown>();
+  const keycloak = useMemo(() => {
+    const keycloak = new Keycloak({
+      url: environment.serverBaseUrl,
+      realm: environment.realm,
+      clientId: environment.clientId,
+    });
+
+    keycloak.onAuthLogout = () => keycloak.login();
+
+    return keycloak;
+  }, [environment]);
+
+  useEffect(() => {
+    // only needed in dev mode
+    if (calledOnce.current) {
+      return;
+    }
+
+    const init = () =>
+      keycloak.init({
+        onLoad: "check-sso",
+        pkceMethod: "S256",
+        responseMode: "query",
+      });
+
+    init()
+      .then(() => setInit(true))
+      .catch((error) => setError(error));
+
+    calledOnce.current = true;
+  }, [keycloak]);
+
+  if (error) {
+    return <ErrorPage error={error} />;
+  }
+
+  if (!init) {
+    return <Spinner />;
+  }
+
+  return (
+    <KeycloakEnvContext.Provider value={{ environment, keycloak }}>
+      <AlertProvider>
+        <Help>{children}</Help>
+      </AlertProvider>
+    </KeycloakEnvContext.Provider>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/context/environment.ts

@@ -0,0 +1,50 @@
+/** The base environment variables that are shared between the Admin and Account Consoles. */
+export type BaseEnvironment = {
+  /**
+   * 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;
+};
+
+/**
+ *  Extracts the environment variables from the document, these variables are injected by Keycloak as a script tag, the contents of which can be parsed as JSON. For example:
+ *
+ *```html
+ * <script id="environment" type="application/json">
+ *   {
+ *     "realm": "master",
+ *     "clientId": "security-admin-console",
+ *     "etc": "..."
+ *   }
+ * </script>
+ * ```
+ */
+export function getInjectedEnvironment<T>(): T {
+  const element = document.getElementById("environment");
+  const contents = element?.textContent;
+
+  if (typeof contents !== "string") {
+    throw new Error("Environment variables not found in the document.");
+  }
+
+  try {
+    return JSON.parse(contents);
+  } catch {
+    throw new Error("Unable to parse environment variables as JSON.");
+  }
+}

package/keycloak-theme/shared/keycloak-ui-shared/continue-cancel/ContinueCancelModal.tsx

@@ -0,0 +1,75 @@
+import { ReactNode, useState } from "react";
+import { Button, ButtonProps, Modal, ModalProps } from "@patternfly/react-core";
+
+export type ContinueCancelModalProps = Omit<ModalProps, "ref" | "children"> & {
+  modalTitle: string;
+  continueLabel: string;
+  cancelLabel: string;
+  buttonTitle: string | ReactNode;
+  buttonVariant?: ButtonProps["variant"];
+  buttonTestRole?: string;
+  isDisabled?: boolean;
+  onContinue: () => void;
+  component?: React.ElementType<any> | React.ComponentType<any>;
+  children?: ReactNode;
+};
+
+export const ContinueCancelModal = ({
+  modalTitle,
+  continueLabel,
+  cancelLabel,
+  buttonTitle,
+  isDisabled,
+  buttonVariant,
+  buttonTestRole,
+  onContinue,
+  component = Button,
+  children,
+  ...rest
+}: ContinueCancelModalProps) => {
+  const [open, setOpen] = useState(false);
+  const Component = component;
+
+  return (
+    <>
+      <Component
+        variant={buttonVariant}
+        onClick={() => setOpen(true)}
+        isDisabled={isDisabled}
+        data-testrole={buttonTestRole}
+      >
+        {buttonTitle}
+      </Component>
+      <Modal
+        variant="small"
+        {...rest}
+        title={modalTitle}
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        actions={[
+          <Button
+            id="modal-confirm"
+            key="confirm"
+            variant="primary"
+            onClick={() => {
+              setOpen(false);
+              onContinue();
+            }}
+          >
+            {continueLabel}
+          </Button>,
+          <Button
+            id="modal-cancel"
+            key="cancel"
+            variant="secondary"
+            onClick={() => setOpen(false)}
+          >
+            {cancelLabel}
+          </Button>,
+        ]}
+      >
+        {children}
+      </Modal>
+    </>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/controls/FormErrorText.tsx

@@ -0,0 +1,23 @@
+import {
+  FormHelperText,
+  FormHelperTextProps,
+  HelperText,
+  HelperTextItem,
+} from "@patternfly/react-core";
+import { ExclamationCircleIcon } from "@patternfly/react-icons";
+
+export type FormErrorTextProps = FormHelperTextProps & {
+  message: string;
+};
+
+export const FormErrorText = ({ message, ...props }: FormErrorTextProps) => {
+  return (
+    <FormHelperText {...props}>
+      <HelperText>
+        <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
+          {message}
+        </HelperTextItem>
+      </HelperText>
+    </FormHelperText>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/controls/FormLabel.tsx

@@ -0,0 +1,40 @@
+import { FormGroup, FormGroupProps } from "@patternfly/react-core";
+import { PropsWithChildren, ReactNode } from "react";
+import { FieldError, FieldValues, Merge } from "react-hook-form";
+import { FormErrorText } from "./FormErrorText";
+import { HelpItem } from "./HelpItem";
+
+export type FieldProps<T extends FieldValues = FieldValues> = {
+  label?: string;
+  name: string;
+  labelIcon?: string | ReactNode;
+  error?: FieldError | Merge<FieldError, T>;
+  isRequired: boolean;
+};
+
+type FormLabelProps = FieldProps & Omit<FormGroupProps, "label" | "labelIcon">;
+
+export const FormLabel = ({
+  name,
+  label,
+  labelIcon,
+  error,
+  children,
+  ...rest
+}: PropsWithChildren<FormLabelProps>) => (
+  <FormGroup
+    label={label || name}
+    fieldId={name}
+    labelIcon={
+      labelIcon ? (
+        <HelpItem helpText={labelIcon} fieldLabelId={name} />
+      ) : undefined
+    }
+    {...rest}
+  >
+    {children}
+    {error && (
+      <FormErrorText data-testid={`${name}-helper`} message={error.message} />
+    )}
+  </FormGroup>
+);

package/keycloak-theme/shared/keycloak-ui-shared/controls/HelpItem.tsx

@@ -0,0 +1,43 @@
+import { Icon, Popover } from "@patternfly/react-core";
+import { HelpIcon } from "@patternfly/react-icons";
+import { ReactNode } from "react";
+import { useHelp } from "../context/HelpContext";
+
+type HelpItemProps = {
+  helpText: string | ReactNode;
+  fieldLabelId: string;
+  noVerticalAlign?: boolean;
+  unWrap?: boolean;
+};
+
+export const HelpItem = ({
+  helpText,
+  fieldLabelId,
+  noVerticalAlign = true,
+  unWrap = false,
+}: HelpItemProps) => {
+  const { enabled } = useHelp();
+  return enabled ? (
+    <Popover bodyContent={helpText}>
+      <>
+        {!unWrap && (
+          <button
+            data-testid={`help-label-${fieldLabelId}`}
+            aria-label={fieldLabelId}
+            onClick={(e) => e.preventDefault()}
+            className="pf-v5-c-form__group-label-help"
+          >
+            <Icon isInline={noVerticalAlign}>
+              <HelpIcon />
+            </Icon>
+          </button>
+        )}
+        {unWrap && (
+          <Icon isInline={noVerticalAlign}>
+            <HelpIcon />
+          </Icon>
+        )}
+      </>
+    </Popover>
+  ) : null;
+};

package/keycloak-theme/shared/keycloak-ui-shared/controls/KeycloakSpinner.tsx

@@ -0,0 +1,12 @@
+import { Bullseye, Spinner } from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+
+export const KeycloakSpinner = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Bullseye>
+      <Spinner aria-label={t("spinnerLoading")} />
+    </Bullseye>
+  );
+};