@keycloakify/keycloak-account-ui
Version:
<p align="center"> <img src="https://github.com/user-attachments/assets/e31c4910-7205-441c-9a35-e134b806b3a8"> </p> <p align="center"> <i>Repackaged Keycloak Account UI</i> <br> <br> <a href="https://github.com/keycloakify/keycloak-a
70 lines • 6.21 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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 "../ui-shared";
import { deleteSession, getDevices } from "../api/methods";
import { Page } from "../components/page/Page";
import { formatDate } from "../utils/formatDate";
import { usePromise } from "../utils/usePromise";
export const DeviceActivity = () => {
const { t } = useTranslation();
const context = useEnvironment();
const { addAlert, addError } = useAlerts();
const [devices, setDevices] = useState();
const [key, setKey] = useState(0);
const refresh = () => setKey(key + 1);
const moveCurrentToTop = (devices) => {
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, device) => {
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) => {
let clientsString = "";
clients.forEach((client, index) => {
let clientName;
if (client.clientName !== "") {
clientName = t(client.clientName);
}
else {
clientName = client.clientId;
}
clientsString += clientName;
if (clients.length > index + 1)
clientsString += ", ";
});
return clientsString;
};
if (!devices) {
return _jsx(Spinner, {});
}
return (_jsxs(Page, { title: t("deviceActivity"), description: t("signedInDevicesExplanation"), children: [_jsxs(Split, { hasGutter: true, className: "pf-v5-u-mb-lg", children: [_jsx(SplitItem, { isFilled: true, children: _jsx(Title, { headingLevel: "h2", size: "xl", children: t("signedInDevices") }) }), _jsxs(SplitItem, { children: [_jsx(Button, { id: "refresh-page", variant: "link", onClick: () => refresh(), icon: _jsx(SyncAltIcon, {}), children: t("refreshPage") }), (devices.length > 1 || devices[0].sessions.length > 1) && (_jsx(ContinueCancelModal, { buttonTitle: t("signOutAllDevices"), modalTitle: t("signOutAllDevices"), continueLabel: t("confirm"), cancelLabel: t("cancel"), onContinue: () => signOutAll(), children: t("signOutAllDevicesWarning") }))] })] }), _jsx(DataList, { className: "signed-in-device-list", "aria-label": t("signedInDevices"), children: _jsx(DataListItem, { "aria-labelledby": `sessions-${key}`, children: devices.map((device) => device.sessions.map((session, index) => (_jsx(DataListItemRow, { "data-testid": `row-${index}`, children: _jsx(DataListContent, { "aria-label": "device-sessions-content", className: "pf-v5-u-flex-grow-1", children: _jsxs(Grid, { hasGutter: true, children: [_jsx(GridItem, { span: 1, rowSpan: 2, children: device.mobile ? _jsx(MobileAltIcon, {}) : _jsx(DesktopIcon, {}) }), _jsxs(GridItem, { sm: 8, md: 9, span: 10, children: [_jsxs("span", { className: "pf-v5-u-mr-md session-title", children: [device.os.toLowerCase().includes("unknown")
? t("unknownOperatingSystem")
: device.os, " ", !device.osVersion.toLowerCase().includes("unknown") &&
device.osVersion, " ", "/ ", session.browser] }), session.current && (_jsx(Label, { color: "green", children: t("currentSession") }))] }), _jsx(GridItem, { className: "pf-v5-u-text-align-right", sm: 3, md: 2, span: 1, children: !session.current && (_jsx(ContinueCancelModal, { buttonTitle: t("signOut"), modalTitle: t("signOut"), continueLabel: t("confirm"), cancelLabel: t("cancel"), buttonVariant: "secondary", onContinue: () => signOutSession(session, device), children: t("signOutWarning") })) }), _jsx(GridItem, { span: 11, children: _jsxs(DescriptionList, { className: "signed-in-device-grid", columnModifier: { sm: "2Col", lg: "3Col" }, cols: 5, rows: 1, children: [_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: t("ipAddress") }), _jsx(DescriptionListDescription, { children: session.ipAddress })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: t("lastAccessedOn") }), _jsx(DescriptionListDescription, { children: formatDate(new Date(session.lastAccess * 1000)) })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: t("clients") }), _jsx(DescriptionListDescription, { children: makeClientsString(session.clients) })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: t("started") }), _jsx(DescriptionListDescription, { children: formatDate(new Date(session.started * 1000)) })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: t("expires") }), _jsx(DescriptionListDescription, { children: formatDate(new Date(session.expires * 1000)) })] })] }) })] }) }) }, device.id)))) }) })] }));
};
export default DeviceActivity;
//# sourceMappingURL=DeviceActivity.js.map