@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
119 lines • 7.25 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { FormPanel, HelpItem, useAlerts, useFetch, } from "../../ui-shared";
import { ActionGroup, AlertVariant, Button, Card, CardBody, Form, FormGroup, PageSection, Switch, Text, TextContent, } from "@patternfly/react-core";
import { saveAs } from "file-saver";
import { Fragment, useState } from "react";
import { Controller, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useAdminClient } from "../../admin-client";
import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
import { FormAccess } from "../../components/form/FormAccess";
import { convertAttributeNameToForm } from "../../util";
import useToggle from "../../utils/useToggle";
import { Certificate } from "../../clients/keys/Certificate";
import { ExportSamlKeyDialog } from "../../clients/keys/ExportSamlKeyDialog";
import { SamlImportKeyDialog } from "../../clients/keys/SamlImportKeyDialog";
import { SamlKeysDialog } from "../../clients/keys/SamlKeysDialog";
const KEYS = ["saml.signing", "saml.encryption"];
const KEYS_MAPPING = {
"saml.signing": {
name: convertAttributeNameToForm("attributes.saml.client.signature"),
title: "signingKeysConfig",
key: "clientSignature",
},
"saml.encryption": {
name: convertAttributeNameToForm("attributes.saml.encrypt"),
title: "encryptionKeysConfig",
key: "encryptAssertions",
},
};
const KeySection = ({ clientId, keyInfo, attr, onChanged, onGenerate, onImport, }) => {
const { t } = useTranslation();
const { control, watch } = useFormContext();
const title = KEYS_MAPPING[attr].title;
const key = KEYS_MAPPING[attr].key;
const name = KEYS_MAPPING[attr].name;
const [showImportDialog, toggleImportDialog] = useToggle();
const section = watch(name);
return (_jsxs(_Fragment, { children: [showImportDialog && (_jsx(ExportSamlKeyDialog, { keyType: attr, clientId: clientId, close: toggleImportDialog })), _jsxs(FormPanel, { title: t(title), className: "kc-form-panel__panel", children: [_jsx(TextContent, { className: "pf-v5-u-pb-lg", children: _jsx(Text, { children: t(`${title}Explain`) }) }), _jsx(FormAccess, { role: "manage-clients", isHorizontal: true, children: _jsx(FormGroup, { labelIcon: _jsx(HelpItem, { helpText: t(`${key}Help`), fieldLabelId: key }), label: t(key), fieldId: key, hasNoPaddingTop: true, children: _jsx(Controller, { name: name, control: control, defaultValue: "false", render: ({ field }) => (_jsx(Switch, { "data-testid": key, id: key, label: t("on"), labelOff: t("off"), isChecked: field.value === "true", onChange: (_event, value) => {
const v = value.toString();
if (v === "true") {
onChanged(attr);
field.onChange(v);
}
else {
onGenerate(attr, false);
}
}, "aria-label": t(key) })) }) }) })] }), (keyInfo === null || keyInfo === void 0 ? void 0 : keyInfo.certificate) && section === "true" && (_jsx(Card, { isFlat: true, children: _jsx(CardBody, { className: "kc-form-panel__body", children: _jsxs(Form, { isHorizontal: true, children: [_jsx(Certificate, { keyInfo: keyInfo }), _jsxs(ActionGroup, { children: [_jsx(Button, { variant: "secondary", onClick: () => onGenerate(attr, true), children: t("regenerate") }), _jsx(Button, { variant: "secondary", onClick: () => onImport(attr), children: t("importKey") }), _jsx(Button, { variant: "tertiary", onClick: toggleImportDialog, children: t("export") })] })] }) }) }))] }));
};
export const SamlKeys = ({ clientId, save }) => {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const [isChanged, setIsChanged] = useState();
const [keyInfo, setKeyInfo] = useState();
const [selectedType, setSelectedType] = useState();
const [openImport, setImportOpen] = useState();
const [refresh, setRefresh] = useState(0);
const { setValue } = useFormContext();
const { addAlert, addError } = useAlerts();
useFetch(() => Promise.all(KEYS.map((attr) => adminClient.clients.getKeyInfo({ id: clientId, attr }))), (info) => setKeyInfo(info), [refresh]);
const generate = async (attr) => {
const index = KEYS.indexOf(attr);
try {
const info = [...(keyInfo || [])];
info[index] = await adminClient.clients.generateKey({
id: clientId,
attr,
});
setKeyInfo(info);
saveAs(new Blob([info[index].privateKey], {
type: "application/octet-stream",
}), "private.key");
addAlert(t("generateSuccess"), AlertVariant.success);
}
catch (error) {
addError("generateError", error);
}
};
const key = selectedType ? KEYS_MAPPING[selectedType].key : "";
const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({
titleKey: t("disableSigning", {
key: t(key),
}),
messageKey: t("disableSigningExplain", {
key: t(key),
}),
continueButtonLabel: "yes",
cancelButtonLabel: "no",
onConfirm: () => {
setValue(KEYS_MAPPING[selectedType].name, "false");
save();
},
});
const [toggleReGenerateDialog, ReGenerateConfirm] = useConfirmDialog({
titleKey: "reGenerateSigning",
messageKey: "reGenerateSigningExplain",
continueButtonLabel: "yes",
cancelButtonLabel: "no",
onConfirm: () => {
generate(selectedType);
},
});
return (_jsxs(PageSection, { variant: "light", className: "keycloak__form", children: [isChanged && (_jsx(SamlKeysDialog, { id: clientId, attr: isChanged, onClose: () => {
setIsChanged(undefined);
save();
setRefresh(refresh + 1);
}, onCancel: () => {
setValue(KEYS_MAPPING[selectedType].name, "false");
setIsChanged(undefined);
} })), _jsx(DisableConfirm, {}), _jsx(ReGenerateConfirm, {}), KEYS.map((attr, index) => (_jsxs(Fragment, { children: [openImport === attr && (_jsx(SamlImportKeyDialog, { id: clientId, attr: attr, onClose: () => setImportOpen(undefined) })), _jsx(KeySection, { clientId: clientId, keyInfo: keyInfo === null || keyInfo === void 0 ? void 0 : keyInfo[index], attr: attr, onChanged: setIsChanged, onGenerate: (type, isNew) => {
setSelectedType(type);
if (!isNew) {
toggleDisableDialog();
}
else {
toggleReGenerateDialog();
}
}, onImport: () => setImportOpen(attr) })] }, attr)))] }));
};
//# sourceMappingURL=SamlKeys.js.map