@keycloakify/keycloak-admin-ui/realm-settings/ThemesTab.js

Repackaged Keycloak Admin UI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { HelpItem, KeycloakSelect, SelectVariant, } from "../ui-shared";
import { ActionGroup, Button, FormGroup, PageSection, SelectOption, } from "@patternfly/react-core";
import { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { FormAccess } from "../components/form/FormAccess";
import { useServerInfo } from "../context/server-info/ServerInfoProvider";
import { convertToFormValues } from "../util";
export const RealmSettingsThemesTab = ({ realm, save, }) => {
    const { t } = useTranslation();
    const [loginThemeOpen, setLoginThemeOpen] = useState(false);
    const [accountThemeOpen, setAccountThemeOpen] = useState(false);
    const [adminUIThemeOpen, setAdminUIThemeOpen] = useState(false);
    const [emailThemeOpen, setEmailThemeOpen] = useState(false);
    const { control, handleSubmit, setValue } = useForm();
    const themeTypes = useServerInfo().themes;
    const setupForm = () => {
        convertToFormValues(realm, setValue);
    };
    useEffect(setupForm, []);
    return (_jsx(PageSection, { variant: "light", children: _jsxs(FormAccess, { isHorizontal: true, role: "manage-realm", className: "pf-v5-u-mt-lg", onSubmit: handleSubmit(save), children: [_jsx(FormGroup, { label: t("loginTheme"), fieldId: "kc-login-theme", labelIcon: _jsx(HelpItem, { helpText: t("loginThemeHelp"), fieldLabelId: "loginTheme" }), children: _jsx(Controller, { name: "loginTheme", control: control, defaultValue: "", render: ({ field }) => (_jsx(KeycloakSelect, { toggleId: "kc-login-theme", onToggle: () => setLoginThemeOpen(!loginThemeOpen), onSelect: (value) => {
                                field.onChange(value);
                                setLoginThemeOpen(false);
                            }, selections: field.value, variant: SelectVariant.single, isOpen: loginThemeOpen, placeholderText: t("selectATheme"), "data-testid": "select-login-theme", "aria-label": t("selectLoginTheme"), children: themeTypes.login.map((theme, idx) => (_jsx(SelectOption, { selected: theme.name === field.value, value: theme.name, children: theme.name }, `login-theme-${idx}`))) })) }) }), _jsx(FormGroup, { label: t("accountTheme"), fieldId: "kc-account-theme", labelIcon: _jsx(HelpItem, { helpText: t("accountThemeHelp"), fieldLabelId: "accountTheme" }), children: _jsx(Controller, { name: "accountTheme", control: control, defaultValue: "", render: ({ field }) => (_jsx(KeycloakSelect, { toggleId: "kc-account-theme", onToggle: () => setAccountThemeOpen(!accountThemeOpen), onSelect: (value) => {
                                field.onChange(value);
                                setAccountThemeOpen(false);
                            }, selections: field.value, variant: SelectVariant.single, "aria-label": t("selectAccountTheme"), isOpen: accountThemeOpen, placeholderText: t("selectATheme"), "data-testid": "select-account-theme", children: themeTypes.account
                                .filter((theme) => theme.name !== "base")
                                .map((theme, idx) => (_jsx(SelectOption, { selected: theme.name === field.value, value: theme.name, children: t(theme.name) }, `account-theme-${idx}`))) })) }) }), _jsx(FormGroup, { label: t("adminTheme"), fieldId: "kc-admin-ui-theme", labelIcon: _jsx(HelpItem, { helpText: t("adminThemeHelp"), fieldLabelId: "adminTheme" }), children: _jsx(Controller, { name: "adminTheme", control: control, defaultValue: "", render: ({ field }) => (_jsx(KeycloakSelect, { toggleId: "kc-admin-ui-theme", onToggle: () => setAdminUIThemeOpen(!adminUIThemeOpen), onSelect: (value) => {
                                field.onChange(value);
                                setAdminUIThemeOpen(false);
                            }, selections: field.value, variant: SelectVariant.single, isOpen: adminUIThemeOpen, placeholderText: t("selectATheme"), "data-testid": "select-admin-theme", "aria-label": t("selectAdminTheme"), children: themeTypes.admin
                                .filter((theme) => theme.name !== "base")
                                .map((theme, idx) => (_jsx(SelectOption, { selected: theme.name === field.value, value: theme.name, children: t(theme.name) }, `admin-theme-${idx}`))) })) }) }), _jsx(FormGroup, { label: t("emailTheme"), fieldId: "kc-email-theme", labelIcon: _jsx(HelpItem, { helpText: t("emailThemeHelp"), fieldLabelId: "emailTheme" }), children: _jsx(Controller, { name: "emailTheme", control: control, defaultValue: "", render: ({ field }) => (_jsx(KeycloakSelect, { toggleId: "kc-email-theme", onToggle: () => setEmailThemeOpen(!emailThemeOpen), onSelect: (value) => {
                                field.onChange(value);
                                setEmailThemeOpen(false);
                            }, selections: field.value, variant: SelectVariant.single, isOpen: emailThemeOpen, placeholderText: t("selectATheme"), "data-testid": "select-email-theme", "aria-label": t("selectEmailTheme"), children: themeTypes.email.map((theme, idx) => (_jsx(SelectOption, { selected: theme.name === field.value, value: theme.name, children: t(theme.name) }, `email-theme-${idx}`))) })) }) }), _jsxs(ActionGroup, { children: [_jsx(Button, { variant: "primary", type: "submit", "data-testid": "themes-tab-save", children: t("save") }), _jsx(Button, { variant: "link", onClick: setupForm, children: t("revert") })] })] }) }));
};
//# sourceMappingURL=ThemesTab.js.map