@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
79 lines • 5.74 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { HelpItem, SelectControl, useAlerts, useFetch, } from "../../ui-shared";
import { ActionGroup, Alert, AlertVariant, Button, Card, CardBody, ClipboardCopy, Divider, FormGroup, PageSection, Split, SplitItem, } from "@patternfly/react-core";
import { useState } from "react";
import { useFormContext, useWatch } 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 { ClientSecret } from "../../clients/credentials/ClientSecret";
import { SignedJWT } from "../../clients/credentials/SignedJWT";
import { X509 } from "../../clients/credentials/X509";
export const Credentials = ({ client, save, refresh }) => {
var _a;
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const { addAlert, addError } = useAlerts();
const clientId = client.id;
const [providers, setProviders] = useState([]);
const { control, formState: { isDirty }, handleSubmit, } = useFormContext();
const clientAuthenticatorType = useWatch({
control: control,
name: "clientAuthenticatorType",
defaultValue: "",
});
const [secret, setSecret] = useState("");
const [accessToken, setAccessToken] = useState("");
const selectedProvider = providers.find((provider) => provider.id === clientAuthenticatorType);
useFetch(() => Promise.all([
adminClient.authenticationManagement.getClientAuthenticatorProviders(),
adminClient.clients.getClientSecret({
id: clientId,
}),
]), ([providers, secret]) => {
setProviders(providers);
setSecret(secret.value);
}, []);
async function regenerate(call, message) {
try {
const data = await call(clientId);
addAlert(t(`${message}Success`), AlertVariant.success);
return data;
}
catch (error) {
addError(`${message}Error`, error);
}
}
const regenerateClientSecret = async () => {
const secret = await regenerate((clientId) => adminClient.clients.generateNewClientSecret({ id: clientId }), "clientSecret");
setSecret((secret === null || secret === void 0 ? void 0 : secret.value) || "");
refresh();
};
const [toggleClientSecretConfirm, ClientSecretConfirm] = useConfirmDialog({
titleKey: "confirmClientSecretTitle",
messageKey: "confirmClientSecretBody",
continueButtonLabel: "yes",
cancelButtonLabel: "no",
onConfirm: regenerateClientSecret,
});
const regenerateAccessToken = async () => {
const accessToken = await regenerate((clientId) => adminClient.clients.generateRegistrationAccessToken({ id: clientId }), "accessToken");
setAccessToken((accessToken === null || accessToken === void 0 ? void 0 : accessToken.registrationAccessToken) || "");
};
const [toggleAccessTokenConfirm, AccessTokenConfirm] = useConfirmDialog({
titleKey: "confirmAccessTokenTitle",
messageKey: "confirmAccessTokenBody",
continueButtonLabel: "yes",
cancelButtonLabel: "no",
onConfirm: regenerateAccessToken,
});
return (_jsx(PageSection, { children: _jsxs(FormAccess, { onSubmit: handleSubmit(save), isHorizontal: true, className: "pf-v5-u-mt-md", role: "manage-clients", fineGrainedAccess: (_a = client.access) === null || _a === void 0 ? void 0 : _a.configure, children: [_jsx(ClientSecretConfirm, {}), _jsx(AccessTokenConfirm, {}), _jsxs(Card, { isFlat: true, children: [_jsxs(CardBody, { children: [_jsx(SelectControl, { name: "clientAuthenticatorType", label: t("clientAuthenticator"), labelIcon: t("clientAuthenticatorTypeHelp"), controller: {
defaultValue: "",
}, options: providers.map(({ id, displayName }) => ({
key: id,
value: displayName || id,
})) }), (clientAuthenticatorType === "client-jwt" ||
clientAuthenticatorType === "client-secret-jwt") && (_jsx(SignedJWT, { clientAuthenticatorType: clientAuthenticatorType })), clientAuthenticatorType === "client-jwt" && (_jsx(FormGroup, { children: _jsx(Alert, { variant: "info", isInline: true, title: t("signedJWTConfirm") }) })), clientAuthenticatorType === "client-x509" && _jsx(X509, {}), _jsx(ActionGroup, { children: _jsx(Button, { variant: "primary", type: "submit", isDisabled: !isDirty, children: t("save") }) })] }), (selectedProvider === null || selectedProvider === void 0 ? void 0 : selectedProvider.supportsSecret) && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(CardBody, { children: _jsx(ClientSecret, { client: client, secret: secret, toggle: toggleClientSecretConfirm }) })] }))] }), _jsx(Card, { isFlat: true, children: _jsx(CardBody, { children: _jsx(FormGroup, { label: t("registrationAccessToken"), fieldId: "kc-access-token", labelIcon: _jsx(HelpItem, { helpText: t("registrationAccessTokenHelp"), fieldLabelId: "registrationAccessToken" }), children: _jsxs(Split, { hasGutter: true, children: [_jsx(SplitItem, { isFilled: true, children: _jsx(ClipboardCopy, { id: "kc-access-token", isReadOnly: true, children: accessToken }) }), _jsx(SplitItem, { children: _jsx(Button, { variant: "secondary", onClick: toggleAccessTokenConfirm, children: t("regenerate") }) })] }) }) }) })] }) }));
};
//# sourceMappingURL=Credentials.js.map