@keycloakify/keycloak-admin-ui/client-scopes/details/ScopeForm.js

Repackaged Keycloak Admin UI

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { ActionGroup, Button } from "@patternfly/react-core";
import { useEffect } from "react";
import { FormProvider, useForm, useWatch } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { FormSubmitButton, SelectControl, TextAreaControl, TextControl, } from "../../ui-shared";
import { getProtocolName } from "../../clients/utils";
import { DefaultSwitchControl } from "../../components/SwitchControl";
import { allClientScopeTypes, } from "../../components/client-scope/ClientScopeTypes";
import { FormAccess } from "../../components/form/FormAccess";
import { useRealm } from "../../context/realm-context/RealmContext";
import { useLoginProviders } from "../../context/server-info/ServerInfoProvider";
import { convertAttributeNameToForm, convertToFormValues } from "../../util";
import useIsFeatureEnabled, { Feature } from "../../utils/useIsFeatureEnabled";
import { toClientScopes } from "../../client-scopes/routes/ClientScopes";
export const ScopeForm = ({ clientScope, save }) => {
    var _a, _b;
    const { t } = useTranslation();
    const form = useForm({ mode: "onChange" });
    const { control, handleSubmit, setValue, formState } = form;
    const { isDirty, isValid } = formState;
    const { realm } = useRealm();
    const providers = useLoginProviders();
    const isFeatureEnabled = useIsFeatureEnabled();
    const isDynamicScopesEnabled = isFeatureEnabled(Feature.DynamicScopes);
    const displayOnConsentScreen = useWatch({
        control,
        name: convertAttributeNameToForm("attributes.display.on.consent.screen"),
        defaultValue: (_b = (_a = clientScope === null || clientScope === void 0 ? void 0 : clientScope.attributes) === null || _a === void 0 ? void 0 : _a["display.on.consent.screen"]) !== null && _b !== void 0 ? _b : "true",
    });
    const dynamicScope = useWatch({
        control,
        name: convertAttributeNameToForm("attributes.is.dynamic.scope"),
        defaultValue: "false",
    });
    const setDynamicRegex = (value, append) => setValue(convertAttributeNameToForm("attributes.dynamic.scope.regexp"), append ? `${value}:*` : value, { shouldDirty: true });
    useEffect(() => {
        convertToFormValues(clientScope !== null && clientScope !== void 0 ? clientScope : {}, setValue);
    }, [clientScope]);
    return (_jsx(FormAccess, { role: "manage-clients", onSubmit: handleSubmit(save), isHorizontal: true, children: _jsxs(FormProvider, { ...form, children: [_jsx(TextControl, { name: "name", label: t("name"), labelIcon: t("scopeNameHelp"), rules: {
                        required: {
                            value: true,
                            message: t("required"),
                        },
                        onChange: (e) => {
                            if (isDynamicScopesEnabled)
                                setDynamicRegex(e.target.validated, true);
                        },
                    } }), isDynamicScopesEnabled && (_jsxs(_Fragment, { children: [_jsx(DefaultSwitchControl, { name: convertAttributeNameToForm("attributes.is.dynamic.scope"), label: t("dynamicScope"), labelIcon: t("dynamicScopeHelp"), onChange: (event, value) => {
                                setDynamicRegex(value ? form.getValues("name") || "" : "", value);
                            }, stringify: true }), dynamicScope === "true" && (_jsx(TextControl, { name: convertAttributeNameToForm("attributes.dynamic.scope.regexp"), label: t("dynamicScopeFormat"), labelIcon: t("dynamicScopeFormatHelp"), isDisabled: true }))] })), _jsx(TextAreaControl, { name: "description", label: t("description"), labelIcon: t("scopeDescriptionHelp"), rules: {
                        maxLength: {
                            value: 255,
                            message: t("maxLength"),
                        },
                    } }), _jsx(SelectControl, { id: "kc-type", name: "type", label: t("type"), labelIcon: t("scopeTypeHelp"), controller: { defaultValue: allClientScopeTypes[0] }, options: allClientScopeTypes.map((key) => ({
                        key,
                        value: t(`clientScopeType.${key}`),
                    })) }), !clientScope && (_jsx(SelectControl, { id: "kc-protocol", name: "protocol", label: t("protocol"), labelIcon: t("protocolHelp"), controller: { defaultValue: providers[0] }, options: providers.map((option) => ({
                        key: option,
                        value: getProtocolName(t, option),
                    })) })), _jsx(DefaultSwitchControl, { name: convertAttributeNameToForm("attributes.display.on.consent.screen"), defaultValue: displayOnConsentScreen, label: t("displayOnConsentScreen"), labelIcon: t("displayOnConsentScreenHelp"), stringify: true }), displayOnConsentScreen === "true" && (_jsx(TextAreaControl, { name: convertAttributeNameToForm("attributes.consent.screen.text"), label: t("consentScreenText"), labelIcon: t("consentScreenTextHelp") })), _jsx(DefaultSwitchControl, { name: convertAttributeNameToForm("attributes.include.in.token.scope"), label: t("includeInTokenScope"), labelIcon: t("includeInTokenScopeHelp"), stringify: true }), _jsx(TextControl, { name: convertAttributeNameToForm("attributes.gui.order"), label: t("guiOrder"), labelIcon: t("guiOrderHelp"), type: "number", min: 0 }), _jsxs(ActionGroup, { children: [_jsx(FormSubmitButton, { formState: formState, disabled: !isDirty || !isValid, children: t("save") }), _jsx(Button, { variant: "link", component: (props) => (_jsx(Link, { ...props, to: toClientScopes({ realm }) })), children: t("cancel") })] })] }) }));
};
//# sourceMappingURL=ScopeForm.js.map