@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
65 lines • 6.28 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { ActionGroup, AlertVariant, Button, ButtonVariant, Chip, ChipGroup, FormGroup, PageSection, Radio, } from "@patternfly/react-core";
import { useEffect, useMemo } from "react";
import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { HelpItem, NumberControl, SelectControl, SwitchControl, } from "../../ui-shared";
import { useAdminClient } from "../../admin-client";
import { useAlerts } from "../../ui-shared";
import { FormAccess } from "../../components/form/FormAccess";
import { TimeSelectorControl } from "../../components/time-selector/TimeSelectorControl";
import { useRealm } from "../../context/realm-context/RealmContext";
import useLocaleSort from "../../utils/useLocaleSort";
import "./otp-policy.css";
const POLICY_TYPES = ["totp", "hotp"];
const OTP_HASH_ALGORITHMS = ["SHA1", "SHA256", "SHA512"];
const NUMBER_OF_DIGITS = [6, 8];
export const OtpPolicy = ({ realm, realmUpdated }) => {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const form = useForm({ mode: "onChange", defaultValues: realm });
const { control, reset, handleSubmit, formState: { isValid, isDirty }, } = form;
const { realm: realmName } = useRealm();
const { addAlert, addError } = useAlerts();
const localeSort = useLocaleSort();
const otpType = useWatch({
name: "otpPolicyType",
control,
defaultValue: POLICY_TYPES[0],
});
const setupForm = (formValues) => reset(formValues);
useEffect(() => setupForm(realm), []);
const supportedApplications = useMemo(() => {
var _a;
const labels = ((_a = realm.otpSupportedApplications) !== null && _a !== void 0 ? _a : []).map((key) => t(`otpSupportedApplications.${key}`));
return localeSort(labels, (label) => label);
}, [realm.otpSupportedApplications]);
const onSubmit = async (formValues) => {
try {
await adminClient.realms.update({ realm: realmName }, formValues);
const updatedRealm = await adminClient.realms.findOne({
realm: realmName,
});
realmUpdated(updatedRealm);
setupForm(updatedRealm);
addAlert(t("updateOtpSuccess"), AlertVariant.success);
}
catch (error) {
addError("updateOtpError", error);
}
};
return (_jsx(PageSection, { variant: "light", children: _jsx(FormAccess, { role: "manage-realm", isHorizontal: true, onSubmit: handleSubmit(onSubmit), className: "keycloak__otp_policies_authentication__form", children: _jsxs(FormProvider, { ...form, children: [_jsx(FormGroup, { label: t("otpType"), labelIcon: _jsx(HelpItem, { helpText: t("otpTypeHelp"), fieldLabelId: "otpType" }), hasNoPaddingTop: true, children: _jsx(Controller, { name: "otpPolicyType", "data-testid": "otpPolicyType", defaultValue: POLICY_TYPES[0], control: control, render: ({ field }) => (_jsx(_Fragment, { children: POLICY_TYPES.map((type) => (_jsx(Radio, { id: type, "data-testid": type, isChecked: field.value === type, name: "otpPolicyType", onChange: () => field.onChange(type), label: t(`policyType.${type}`), className: "keycloak__otp_policies_authentication__policy-type" }, type))) })) }) }), _jsx(SelectControl, { name: "otpPolicyAlgorithm", label: t("otpHashAlgorithm"), labelIcon: t("otpHashAlgorithmHelp"), options: OTP_HASH_ALGORITHMS.map((type) => ({
key: `Hmac${type}`,
value: type,
})), controller: { defaultValue: `Hmac${OTP_HASH_ALGORITHMS[0]}` } }), _jsx(FormGroup, { label: t("otpPolicyDigits"), labelIcon: _jsx(HelpItem, { helpText: t("otpPolicyDigitsHelp"), fieldLabelId: "otpPolicyDigits" }), hasNoPaddingTop: true, children: _jsx(Controller, { name: "otpPolicyDigits", "data-testid": "otpPolicyDigits", defaultValue: NUMBER_OF_DIGITS[0], control: control, render: ({ field }) => (_jsx(_Fragment, { children: NUMBER_OF_DIGITS.map((type) => (_jsx(Radio, { id: `digit-${type}`, "data-testid": `digit-${type}`, isChecked: field.value === type, name: "otpPolicyDigits", onChange: () => field.onChange(type), label: type, className: "keycloak__otp_policies_authentication__number-of-digits" }, type))) })) }) }), _jsx(NumberControl, { name: "otpPolicyLookAheadWindow", label: t("lookAround"), labelIcon: t("lookAroundHelp"), controller: { defaultValue: 1, rules: { min: 0 } } }), otpType === POLICY_TYPES[0] && (_jsx(TimeSelectorControl, { name: "otpPolicyPeriod", label: t("otpPolicyPeriod"), labelIcon: t("otpPolicyPeriodHelp"), units: ["second", "minute"], controller: {
defaultValue: 30,
rules: {
min: 1,
max: {
value: 120,
message: t("maxLength", { length: "2 " + t("minutes") }),
},
},
} })), otpType === POLICY_TYPES[1] && (_jsx(NumberControl, { name: "otpPolicyInitialCounter", label: t("initialCounter"), labelIcon: t("initialCounterHelp"), controller: { defaultValue: 30, rules: { min: 1, max: 120 } } })), _jsx(FormGroup, { label: t("supportedApplications"), labelIcon: _jsx(HelpItem, { helpText: t("supportedApplicationsHelp"), fieldLabelId: "supportedApplications" }), children: _jsx("span", { "data-testid": "supportedApplications", children: _jsx(ChipGroup, { children: supportedApplications.map((label) => (_jsx(Chip, { isReadOnly: true, children: label }, label))) }) }) }), otpType === POLICY_TYPES[0] && (_jsx(SwitchControl, { name: "otpPolicyCodeReusable", label: t("otpPolicyCodeReusable"), labelIcon: t("otpPolicyCodeReusableHelp"), labelOn: t("on"), labelOff: t("off") })), _jsxs(ActionGroup, { children: [_jsx(Button, { "data-testid": "save", variant: "primary", type: "submit", isDisabled: !isValid || !isDirty, children: t("save") }), _jsx(Button, { "data-testid": "reload", variant: ButtonVariant.link, onClick: () => reset({ ...realm }), children: t("reload") })] })] }) }) }));
};
//# sourceMappingURL=OtpPolicy.js.map