@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
68 lines • 4.62 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Alert, Button, FormGroup, InputGroup, InputGroupItem, Split, SplitItem, } from "@patternfly/react-core";
import { useEffect, useState } from "react";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { PasswordInput } from "../../ui-shared";
import { useAdminClient } from "../../admin-client";
import { useAlerts } from "../../ui-shared";
import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
import { useAccess } from "../../context/access/Access";
import useFormatDate from "../../utils/useFormatDate";
import { CopyToClipboardButton } from "../../clients/scopes/CopyToClipboardButton";
const SecretInput = ({ id, buttonLabel, client, secret, toggle, }) => {
var _a;
const { t } = useTranslation();
const form = useFormContext();
const { hasAccess } = useAccess();
const isManager = hasAccess("manage-clients") || ((_a = client.access) === null || _a === void 0 ? void 0 : _a.configure);
return (_jsxs(Split, { hasGutter: true, children: [_jsx(SplitItem, { isFilled: true, children: _jsxs(InputGroup, { children: [_jsx(InputGroupItem, { isFill: true, children: _jsx(PasswordInput, { id: id, value: secret, readOnly: true }) }), _jsx(InputGroupItem, { children: _jsx(CopyToClipboardButton, { id: id, text: secret, label: "clientSecret", variant: "control" }) })] }) }), _jsx(SplitItem, { children: _jsx(Button, { variant: "secondary", isDisabled: form.formState.isDirty || !isManager, onClick: toggle, children: t(buttonLabel) }) })] }));
};
const ExpireDateFormatter = ({ time }) => {
const { t } = useTranslation();
const formatDate = useFormatDate();
const unixTimeToString = (time) => time
? t("secretExpiresOn", {
time: formatDate(new Date(time * 1000), {
dateStyle: "full",
timeStyle: "long",
}),
})
: undefined;
return _jsx("div", { className: "pf-v5-u-my-md", children: unixTimeToString(time) });
};
export const ClientSecret = ({ client, secret, toggle }) => {
var _a, _b, _c;
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const { addAlert, addError } = useAlerts();
const [secretRotated, setSecretRotated] = useState((_a = client.attributes) === null || _a === void 0 ? void 0 : _a["client.secret.rotated"]);
const secretExpirationTime = (_b = client.attributes) === null || _b === void 0 ? void 0 : _b["client.secret.expiration.time"];
const secretRotatedExpirationTime = (_c = client.attributes) === null || _c === void 0 ? void 0 : _c["client.secret.rotated.expiration.time"];
const expired = (time) => new Date().getTime() >= time * 1000;
const [toggleInvalidateConfirm, InvalidateConfirm] = useConfirmDialog({
titleKey: "invalidateRotatedSecret",
messageKey: "invalidateRotatedSecretExplain",
continueButtonLabel: "confirm",
onConfirm: async () => {
try {
await adminClient.clients.invalidateSecret({
id: client.id,
});
setSecretRotated(undefined);
addAlert(t("invalidateRotatedSuccess"));
}
catch (error) {
addError("invalidateRotatedError", error);
}
},
});
useEffect(() => {
var _a, _b;
if (secretRotated !== ((_a = client.attributes) === null || _a === void 0 ? void 0 : _a["client.secret.rotated"])) {
setSecretRotated((_b = client.attributes) === null || _b === void 0 ? void 0 : _b["client.secret.rotated"]);
}
}, [client, secretRotated]);
return (_jsxs(_Fragment, { children: [_jsx(InvalidateConfirm, {}), _jsxs(FormGroup, { label: t("clientSecret"), fieldId: "kc-client-secret", className: "pf-v5-u-my-md", children: [_jsx(SecretInput, { id: "kc-client-secret", client: client, secret: secret, toggle: toggle, buttonLabel: "regenerate" }), _jsx(ExpireDateFormatter, { time: secretExpirationTime }), expired(secretExpirationTime) && (_jsx(Alert, { variant: "warning", isInline: true, title: t("secretHasExpired") }))] }), secretRotated && (_jsxs(FormGroup, { label: t("secretRotated"), fieldId: "secretRotated", children: [_jsx(SecretInput, { id: "secretRotated", client: client, secret: secretRotated, toggle: toggleInvalidateConfirm, buttonLabel: "invalidateSecret" }), _jsx(ExpireDateFormatter, { time: secretRotatedExpirationTime })] }))] }));
};
//# sourceMappingURL=ClientSecret.js.map