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

package/root/Root.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { KeycloakProvider } from "../ui-shared";
+import { Page, Spinner } from "@patternfly/react-core";
+import { Suspense } from "react";
+import { Outlet } from "react-router-dom";
+import { environment } from "../environment";
+import { Header } from "../root/Header";
+import { PageNav } from "../root/PageNav";
+export const Root = () => {
+    return (_jsx(KeycloakProvider, { environment: environment, children: _jsx(Page, { header: _jsx(Header, {}), sidebar: _jsx(PageNav, {}), isManagedSidebar: true, children: _jsx(Suspense, { fallback: _jsx(Spinner, {}), children: _jsx(Outlet, {}) }) }) }));
+};
+//# sourceMappingURL=Root.js.map

package/root/Root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Root.js","sourceRoot":"","sources":["../src/root/Root.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,MAAM,8CAA8C,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,8CAA8C,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,+CAA+C,CAAC;AAExE,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,EAAE;IACvB,OAAO,CACL,KAAC,gBAAgB,IAAC,WAAW,EAAE,WAAW,YACxC,KAAC,IAAI,IAAC,MAAM,EAAE,KAAC,MAAM,KAAG,EAAE,OAAO,EAAE,KAAC,OAAO,KAAG,EAAE,gBAAgB,kBAC9D,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,OAAO,KAAG,YAC7B,KAAC,MAAM,KAAG,GACD,GACN,GACU,CACpB,CAAC;AACJ,CAAC,CAAC"}

package/root/header.module.css

@@ -0,0 +1,3 @@
+.brand {
+  height: 35px;
+}

package/routes.d.ts

@@ -0,0 +1,15 @@
+import type { IndexRouteObject, RouteObject } from "react-router-dom";
+export declare const DeviceActivityRoute: RouteObject;
+export declare const LinkedAccountsRoute: RouteObject;
+export declare const SigningInRoute: RouteObject;
+export declare const ApplicationsRoute: RouteObject;
+export declare const GroupsRoute: RouteObject;
+export declare const ResourcesRoute: RouteObject;
+export type ContentComponentParams = {
+    componentId: string;
+};
+export declare const ContentRoute: RouteObject;
+export declare const PersonalInfoRoute: IndexRouteObject;
+export declare const Oid4VciRoute: RouteObject;
+export declare const RootRoute: RouteObject;
+export declare const routes: RouteObject[];

package/routes.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { lazy } from "react";
+import { environment } from "./environment";
+import { ErrorPage } from "./root/ErrorPage";
+import { Root } from "./root/Root";
+const DeviceActivity = lazy(() => import("./account-security/DeviceActivity"));
+const LinkedAccounts = lazy(() => import("./account-security/LinkedAccounts"));
+const SigningIn = lazy(() => import("./account-security/SigningIn"));
+const Applications = lazy(() => import("./applications/Applications"));
+const Groups = lazy(() => import("./groups/Groups"));
+const PersonalInfo = lazy(() => import("./personal-info/PersonalInfo"));
+const Resources = lazy(() => import("./resources/Resources"));
+const ContentComponent = lazy(() => import("./content/ContentComponent"));
+const Oid4Vci = lazy(() => import("./oid4vci/Oid4Vci"));
+export const DeviceActivityRoute = {
+    path: "account-security/device-activity",
+    element: _jsx(DeviceActivity, {}),
+};
+export const LinkedAccountsRoute = {
+    path: "account-security/linked-accounts",
+    element: _jsx(LinkedAccounts, {}),
+};
+export const SigningInRoute = {
+    path: "account-security/signing-in",
+    element: _jsx(SigningIn, {}),
+};
+export const ApplicationsRoute = {
+    path: "applications",
+    element: _jsx(Applications, {}),
+};
+export const GroupsRoute = {
+    path: "groups",
+    element: _jsx(Groups, {}),
+};
+export const ResourcesRoute = {
+    path: "resources",
+    element: _jsx(Resources, {}),
+};
+export const ContentRoute = {
+    path: "content/:componentId",
+    element: _jsx(ContentComponent, {}),
+};
+export const PersonalInfoRoute = {
+    index: true,
+    element: _jsx(PersonalInfo, {}),
+};
+export const Oid4VciRoute = {
+    path: "oid4vci",
+    element: _jsx(Oid4Vci, {}),
+};
+export const RootRoute = {
+    path: decodeURIComponent(new URL(environment.baseUrl).pathname),
+    element: _jsx(Root, {}),
+    errorElement: _jsx(ErrorPage, {}),
+    children: [
+        PersonalInfoRoute,
+        DeviceActivityRoute,
+        LinkedAccountsRoute,
+        SigningInRoute,
+        ApplicationsRoute,
+        GroupsRoute,
+        PersonalInfoRoute,
+        ResourcesRoute,
+        ContentRoute,
+        Oid4VciRoute,
+    ],
+};
+export const routes = [RootRoute];
+//# sourceMappingURL=routes.js.map

package/routes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"routes.js","sourceRoot":"","sources":["src/routes.tsx"],"names":[],"mappings":"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"}

package/src/KeycloakAccountUi.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useReducer } from "react";
+import "@patternfly/react-core/dist/styles/base.css";
+import "@patternfly/patternfly/patternfly-addons.css";
+
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+
+import { i18n } from "@keycloakify/keycloak-account-ui/i18n";
+import { routes } from "@keycloakify/keycloak-account-ui/routes";
+
+const router = createBrowserRouter(routes);
+const prI18nInitialized = i18n.init();
+
+export default function KeycloakAccountUi() {
+  const [isI18nInitialized, setI18nInitialized] = useReducer(() => true, false);
+
+  useEffect(() => {
+    let isActive = true;
+
+    prI18nInitialized.then(() => {
+      if (!isActive) {
+        return;
+      }
+      setI18nInitialized();
+    });
+
+    return () => {
+      isActive = false;
+    };
+  }, []);
+
+  if (!isI18nInitialized) {
+    return null;
+  }
+
+  return <RouterProvider router={router} />;
+}

package/src/account-security/AccountRow.tsx

@@ -0,0 +1,136 @@
+import {
+  Button,
+  DataListAction,
+  DataListCell,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  Icon,
+  Label,
+  Split,
+  SplitItem,
+} from "@patternfly/react-core";
+import { LinkIcon, UnlinkIcon } from "@patternfly/react-icons";
+import { useTranslation } from "react-i18next";
+import {
+  IconMapper,
+  useAlerts,
+  useEnvironment,
+} from "@keycloakify/keycloak-account-ui/ui-shared";
+import { linkAccount, unLinkAccount } from "@keycloakify/keycloak-account-ui/api/methods";
+import { LinkedAccountRepresentation } from "@keycloakify/keycloak-account-ui/api/representations";
+
+type AccountRowProps = {
+  account: LinkedAccountRepresentation;
+  isLinked?: boolean;
+  refresh: () => void;
+};
+
+export const AccountRow = ({
+  account,
+  isLinked = false,
+  refresh,
+}: AccountRowProps) => {
+  const { t } = useTranslation();
+  const context = useEnvironment();
+  const { addAlert, addError } = useAlerts();
+
+  const unLink = async (account: LinkedAccountRepresentation) => {
+    try {
+      await unLinkAccount(context, account);
+      addAlert(t("unLinkSuccess"));
+      refresh();
+    } catch (error) {
+      addError(t("unLinkError", { error }).toString());
+    }
+  };
+
+  const link = async (account: LinkedAccountRepresentation) => {
+    try {
+      const { accountLinkUri } = await linkAccount(context, account);
+      location.href = accountLinkUri;
+    } catch (error) {
+      addError(t("linkError", { error }).toString());
+    }
+  };
+
+  return (
+    <DataListItem
+      id={`${account.providerAlias}-idp`}
+      key={account.providerName}
+      aria-label={t("linkedAccounts")}
+    >
+      <DataListItemRow
+        key={account.providerName}
+        data-testid={`linked-accounts/${account.providerName}`}
+      >
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="idp">
+              <Split>
+                <SplitItem className="pf-v5-u-mr-sm">
+                  <IconMapper icon={account.providerName} />
+                </SplitItem>
+                <SplitItem className="pf-v5-u-my-xs" isFilled>
+                  <span id={`${account.providerAlias}-idp-name`}>
+                    {account.displayName}
+                  </span>
+                </SplitItem>
+              </Split>
+            </DataListCell>,
+            <DataListCell key="label">
+              <Split>
+                <SplitItem className="pf-v5-u-my-xs" isFilled>
+                  <span id={`${account.providerAlias}-idp-label`}>
+                    <Label color={account.social ? "blue" : "green"}>
+                      {t(account.social ? "socialLogin" : "systemDefined")}
+                    </Label>
+                  </span>
+                </SplitItem>
+              </Split>
+            </DataListCell>,
+            <DataListCell key="username" width={5}>
+              <Split>
+                <SplitItem className="pf-v5-u-my-xs" isFilled>
+                  <span id={`${account.providerAlias}-idp-username`}>
+                    {account.linkedUsername}
+                  </span>
+                </SplitItem>
+              </Split>
+            </DataListCell>,
+          ]}
+        />
+        <DataListAction
+          aria-labelledby={t("link")}
+          aria-label={t("unLink")}
+          id="setPasswordAction"
+        >
+          {isLinked && (
+            <Button
+              id={`${account.providerAlias}-idp-unlink`}
+              variant="link"
+              onClick={() => unLink(account)}
+            >
+              <Icon size="sm">
+                <UnlinkIcon />
+              </Icon>{" "}
+              {t("unLink")}
+            </Button>
+          )}
+          {!isLinked && (
+            <Button
+              id={`${account.providerAlias}-idp-link`}
+              variant="link"
+              onClick={() => link(account)}
+            >
+              <Icon size="sm">
+                <LinkIcon />
+              </Icon>{" "}
+              {t("link")}
+            </Button>
+          )}
+        </DataListAction>
+      </DataListItemRow>
+    </DataListItem>
+  );
+};

package/src/account-security/DeviceActivity.tsx

@@ -0,0 +1,253 @@
+import {
+  Button,
+  DataList,
+  DataListContent,
+  DataListItem,
+  DataListItemRow,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Grid,
+  GridItem,
+  Label,
+  Spinner,
+  Split,
+  SplitItem,
+  Title,
+} from "@patternfly/react-core";
+import {
+  DesktopIcon,
+  MobileAltIcon,
+  SyncAltIcon,
+} 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 { deleteSession, getDevices } from "@keycloakify/keycloak-account-ui/api/methods";
+import {
+  ClientRepresentation,
+  DeviceRepresentation,
+  SessionRepresentation,
+} 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";
+
+export const DeviceActivity = () => {
+  const { t } = useTranslation();
+  const context = useEnvironment();
+  const { addAlert, addError } = useAlerts();
+
+  const [devices, setDevices] = useState<DeviceRepresentation[]>();
+  const [key, setKey] = useState(0);
+  const refresh = () => setKey(key + 1);
+
+  const moveCurrentToTop = (devices: DeviceRepresentation[]) => {
+    let currentDevice = devices[0];
+
+    const index = devices.findIndex((d) => d.current);
+    currentDevice = devices.splice(index, 1)[0];
+    devices.unshift(currentDevice);
+
+    const sessionIndex = currentDevice.sessions.findIndex((s) => s.current);
+    const currentSession = currentDevice.sessions.splice(sessionIndex, 1)[0];
+    currentDevice.sessions.unshift(currentSession);
+
+    setDevices(devices);
+  };
+
+  usePromise((signal) => getDevices({ signal, context }), moveCurrentToTop, [
+    key,
+  ]);
+
+  const signOutAll = async () => {
+    await deleteSession(context);
+    context.keycloak.logout();
+  };
+
+  const signOutSession = async (
+    session: SessionRepresentation,
+    device: DeviceRepresentation,
+  ) => {
+    try {
+      await deleteSession(context, session.id);
+      addAlert(
+        t("signedOutSession", { browser: session.browser, os: device.os }),
+      );
+      refresh();
+    } catch (error) {
+      addError(t("errorSignOutMessage", { error }).toString());
+    }
+  };
+
+  const makeClientsString = (clients: ClientRepresentation[]): string => {
+    let clientsString = "";
+    clients.forEach((client, index) => {
+      let clientName: string;
+      if (client.clientName !== "") {
+        clientName = t(client.clientName as TFuncKey);
+      } else {
+        clientName = client.clientId;
+      }
+
+      clientsString += clientName;
+
+      if (clients.length > index + 1) clientsString += ", ";
+    });
+
+    return clientsString;
+  };
+
+  if (!devices) {
+    return <Spinner />;
+  }
+
+  return (
+    <Page
+      title={t("deviceActivity")}
+      description={t("signedInDevicesExplanation")}
+    >
+      <Split hasGutter className="pf-v5-u-mb-lg">
+        <SplitItem isFilled>
+          <Title headingLevel="h2" size="xl">
+            {t("signedInDevices")}
+          </Title>
+        </SplitItem>
+        <SplitItem>
+          <Button
+            id="refresh-page"
+            variant="link"
+            onClick={() => refresh()}
+            icon={<SyncAltIcon />}
+          >
+            {t("refreshPage")}
+          </Button>
+
+          {(devices.length > 1 || devices[0].sessions.length > 1) && (
+            <ContinueCancelModal
+              buttonTitle={t("signOutAllDevices")}
+              modalTitle={t("signOutAllDevices")}
+              continueLabel={t("confirm")}
+              cancelLabel={t("cancel")}
+              onContinue={() => signOutAll()}
+            >
+              {t("signOutAllDevicesWarning")}
+            </ContinueCancelModal>
+          )}
+        </SplitItem>
+      </Split>
+      <DataList
+        className="signed-in-device-list"
+        aria-label={t("signedInDevices")}
+      >
+        <DataListItem aria-labelledby={`sessions-${key}`}>
+          {devices.map((device) =>
+            device.sessions.map((session, index) => (
+              <DataListItemRow key={device.id} data-testid={`row-${index}`}>
+                <DataListContent
+                  aria-label="device-sessions-content"
+                  className="pf-v5-u-flex-grow-1"
+                >
+                  <Grid hasGutter>
+                    <GridItem span={1} rowSpan={2}>
+                      {device.mobile ? <MobileAltIcon /> : <DesktopIcon />}
+                    </GridItem>
+                    <GridItem sm={8} md={9} span={10}>
+                      <span className="pf-v5-u-mr-md session-title">
+                        {device.os.toLowerCase().includes("unknown")
+                          ? t("unknownOperatingSystem")
+                          : device.os}{" "}
+                        {!device.osVersion.toLowerCase().includes("unknown") &&
+                          device.osVersion}{" "}
+                        / {session.browser}
+                      </span>
+                      {session.current && (
+                        <Label color="green">{t("currentSession")}</Label>
+                      )}
+                    </GridItem>
+                    <GridItem
+                      className="pf-v5-u-text-align-right"
+                      sm={3}
+                      md={2}
+                      span={1}
+                    >
+                      {!session.current && (
+                        <ContinueCancelModal
+                          buttonTitle={t("signOut")}
+                          modalTitle={t("signOut")}
+                          continueLabel={t("confirm")}
+                          cancelLabel={t("cancel")}
+                          buttonVariant="secondary"
+                          onContinue={() => signOutSession(session, device)}
+                        >
+                          {t("signOutWarning")}
+                        </ContinueCancelModal>
+                      )}
+                    </GridItem>
+                    <GridItem span={11}>
+                      <DescriptionList
+                        className="signed-in-device-grid"
+                        columnModifier={{ sm: "2Col", lg: "3Col" }}
+                        cols={5}
+                        rows={1}
+                      >
+                        <DescriptionListGroup>
+                          <DescriptionListTerm>
+                            {t("ipAddress")}
+                          </DescriptionListTerm>
+                          <DescriptionListDescription>
+                            {session.ipAddress}
+                          </DescriptionListDescription>
+                        </DescriptionListGroup>
+                        <DescriptionListGroup>
+                          <DescriptionListTerm>
+                            {t("lastAccessedOn")}
+                          </DescriptionListTerm>
+                          <DescriptionListDescription>
+                            {formatDate(new Date(session.lastAccess * 1000))}
+                          </DescriptionListDescription>
+                        </DescriptionListGroup>
+                        <DescriptionListGroup>
+                          <DescriptionListTerm>
+                            {t("clients")}
+                          </DescriptionListTerm>
+                          <DescriptionListDescription>
+                            {makeClientsString(session.clients)}
+                          </DescriptionListDescription>
+                        </DescriptionListGroup>
+                        <DescriptionListGroup>
+                          <DescriptionListTerm>
+                            {t("started")}
+                          </DescriptionListTerm>
+                          <DescriptionListDescription>
+                            {formatDate(new Date(session.started * 1000))}
+                          </DescriptionListDescription>
+                        </DescriptionListGroup>
+                        <DescriptionListGroup>
+                          <DescriptionListTerm>
+                            {t("expires")}
+                          </DescriptionListTerm>
+                          <DescriptionListDescription>
+                            {formatDate(new Date(session.expires * 1000))}
+                          </DescriptionListDescription>
+                        </DescriptionListGroup>
+                      </DescriptionList>
+                    </GridItem>
+                  </Grid>
+                </DataListContent>
+              </DataListItemRow>
+            )),
+          )}
+        </DataListItem>
+      </DataList>
+    </Page>
+  );
+};
+
+export default DeviceActivity;

package/src/account-security/LinkedAccounts.tsx

@@ -0,0 +1,86 @@
+import { DataList, Stack, StackItem, Title } from "@patternfly/react-core";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { getLinkedAccounts } from "@keycloakify/keycloak-account-ui/api/methods";
+import { LinkedAccountRepresentation } from "@keycloakify/keycloak-account-ui/api/representations";
+import { EmptyRow } from "@keycloakify/keycloak-account-ui/components/datalist/EmptyRow";
+import { Page } from "@keycloakify/keycloak-account-ui/components/page/Page";
+import { usePromise } from "@keycloakify/keycloak-account-ui/utils/usePromise";
+import { AccountRow } from "@keycloakify/keycloak-account-ui/account-security/AccountRow";
+import { useEnvironment } from "@keycloakify/keycloak-account-ui/ui-shared";
+
+export const LinkedAccounts = () => {
+  const { t } = useTranslation();
+  const context = useEnvironment();
+  const [accounts, setAccounts] = useState<LinkedAccountRepresentation[]>([]);
+
+  const [key, setKey] = useState(1);
+  const refresh = () => setKey(key + 1);
+
+  usePromise((signal) => getLinkedAccounts({ signal, context }), setAccounts, [
+    key,
+  ]);
+
+  const linkedAccounts = useMemo(
+    () => accounts.filter((account) => account.connected),
+    [accounts],
+  );
+
+  const unLinkedAccounts = useMemo(
+    () => accounts.filter((account) => !account.connected),
+    [accounts],
+  );
+
+  return (
+    <Page
+      title={t("linkedAccounts")}
+      description={t("linkedAccountsIntroMessage")}
+    >
+      <Stack hasGutter>
+        <StackItem>
+          <Title headingLevel="h2" className="pf-v5-u-mb-lg" size="xl">
+            {t("linkedLoginProviders")}
+          </Title>
+          <DataList id="linked-idps" aria-label={t("linkedLoginProviders")}>
+            {linkedAccounts.length > 0 ? (
+              linkedAccounts.map((account) => (
+                <AccountRow
+                  key={account.providerName}
+                  account={account}
+                  isLinked
+                  refresh={refresh}
+                />
+              ))
+            ) : (
+              <EmptyRow message={t("linkedEmpty")} />
+            )}
+          </DataList>
+        </StackItem>
+        <StackItem>
+          <Title
+            headingLevel="h2"
+            className="pf-v5-u-mt-xl pf-v5-u-mb-lg"
+            size="xl"
+          >
+            {t("unlinkedLoginProviders")}
+          </Title>
+          <DataList id="unlinked-idps" aria-label={t("unlinkedLoginProviders")}>
+            {unLinkedAccounts.length > 0 ? (
+              unLinkedAccounts.map((account) => (
+                <AccountRow
+                  key={account.providerName}
+                  account={account}
+                  refresh={refresh}
+                />
+              ))
+            ) : (
+              <EmptyRow message={t("unlinkedEmpty")} />
+            )}
+          </DataList>
+        </StackItem>
+      </Stack>
+    </Page>
+  );
+};
+
+export default LinkedAccounts;