@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
121 lines • 9.57 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { FormErrorText, HelpItem, SwitchControl, TextControl, UserProfileFields, } from "../ui-shared";
import { AlertVariant, Button, Chip, ChipGroup, FormGroup, InputGroup, InputGroupItem, Switch, TextInput, } from "@patternfly/react-core";
import { useEffect, useState } from "react";
import { Controller, FormProvider } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useAdminClient } from "../admin-client";
import { DefaultSwitchControl } from "../components/SwitchControl";
import { useAlerts } from "../ui-shared";
import { FormAccess } from "../components/form/FormAccess";
import { GroupPickerDialog } from "../components/group/GroupPickerDialog";
import { useAccess } from "../context/access/Access";
import { useWhoAmI } from "../context/whoami/WhoAmI";
import { emailRegexPattern } from "../util";
import useFormatDate from "../utils/useFormatDate";
import { FederatedUserLink } from "../user/FederatedUserLink";
import { toUserFormFields } from "../user/form-state";
import { toUsers } from "../user/routes/Users";
import { FixedButtonsGroup } from "../components/form/FixedButtonGroup";
import { RequiredActionMultiSelect } from "../user/user-credentials/RequiredActionMultiSelect";
import { useNavigate } from "react-router-dom";
export const UserForm = ({ form, realm, user, bruteForce: { isBruteForceProtected, isLocked } = {
isBruteForceProtected: false,
isLocked: false,
}, userProfileMetadata, save, refresh, onGroupsUpdate, }) => {
var _a;
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const formatDate = useFormatDate();
const { addAlert, addError } = useAlerts();
const { hasAccess } = useAccess();
const isManager = hasAccess("manage-users");
const canViewFederationLink = hasAccess("view-realm");
const { whoAmI } = useWhoAmI();
const currentLocale = whoAmI.getLocale();
const { handleSubmit, setValue, control, reset, formState } = form;
const { errors } = formState;
const [selectedGroups, setSelectedGroups] = useState([]);
const [open, setOpen] = useState(false);
const [locked, setLocked] = useState(isLocked);
const navigate = useNavigate();
useEffect(() => {
setValue("requiredActions", (user === null || user === void 0 ? void 0 : user.requiredActions) || []);
}, [user, setValue]);
const unLockUser = async () => {
try {
await adminClient.users.update({ id: user.id }, { enabled: true });
addAlert(t("unlockSuccess"), AlertVariant.success);
if (refresh) {
refresh();
}
}
catch (error) {
addError("unlockError", error);
}
};
const deleteItem = (id) => {
setSelectedGroups(selectedGroups.filter((item) => item.name !== id));
onGroupsUpdate === null || onGroupsUpdate === void 0 ? void 0 : onGroupsUpdate(selectedGroups);
};
const addChips = async (groups) => {
setSelectedGroups([...selectedGroups, ...groups]);
onGroupsUpdate === null || onGroupsUpdate === void 0 ? void 0 : onGroupsUpdate([...selectedGroups, ...groups]);
};
const addGroups = async (groups) => {
const newGroups = groups;
newGroups.forEach(async (group) => {
try {
await adminClient.users.addToGroup({
id: user.id,
groupId: group.id,
});
addAlert(t("addedGroupMembership"), AlertVariant.success);
}
catch (error) {
addError("addedGroupMembershipError", error);
}
});
};
const toggleModal = () => {
setOpen(!open);
};
const onFormReset = () => {
if (user === null || user === void 0 ? void 0 : user.id) {
reset(toUserFormFields(user));
}
else {
navigate(toUsers({ realm: realm.realm }));
}
};
const allFieldsReadOnly = () => {
var _a, _b, _c;
return ((_a = user === null || user === void 0 ? void 0 : user.userProfileMetadata) === null || _a === void 0 ? void 0 : _a.attributes) &&
!((_c = (_b = user === null || user === void 0 ? void 0 : user.userProfileMetadata) === null || _b === void 0 ? void 0 : _b.attributes) === null || _c === void 0 ? void 0 : _c.map((a) => a.readOnly).reduce((p, c) => p && c, true));
};
return (_jsxs(FormAccess, { isHorizontal: true, onSubmit: handleSubmit(save), role: "query-users", fineGrainedAccess: (_a = user === null || user === void 0 ? void 0 : user.access) === null || _a === void 0 ? void 0 : _a.manage, className: "pf-v5-u-mt-lg", children: [_jsxs(FormProvider, { ...form, children: [open && (_jsx(GroupPickerDialog, { type: "selectMany", text: {
title: "selectGroups",
ok: "join",
}, canBrowse: isManager, onConfirm: (groups) => {
if (user === null || user === void 0 ? void 0 : user.id) {
addGroups(groups || []);
}
else {
addChips(groups || []);
}
setOpen(false);
}, onClose: () => setOpen(false), filterGroups: selectedGroups })), (user === null || user === void 0 ? void 0 : user.id) && (_jsxs(_Fragment, { children: [_jsx(FormGroup, { label: t("id"), fieldId: "kc-id", isRequired: true, children: _jsx(TextInput, { id: user.id, "aria-label": t("userID"), value: user.id, readOnly: true }) }), _jsx(FormGroup, { label: t("createdAt"), fieldId: "kc-created-at", isRequired: true, children: _jsx(TextInput, { value: formatDate(new Date(user.createdTimestamp)), id: "kc-created-at", readOnly: true }) })] })), _jsx(RequiredActionMultiSelect, { name: "requiredActions", label: "requiredUserActions", help: "requiredUserActionsHelp" }), (user === null || user === void 0 ? void 0 : user.federationLink) && canViewFederationLink && (_jsx(FormGroup, { label: t("federationLink"), labelIcon: _jsx(HelpItem, { helpText: t("federationLinkHelp"), fieldLabelId: "federationLink" }), children: _jsx(FederatedUserLink, { user: user }) })), userProfileMetadata ? (_jsxs(_Fragment, { children: [_jsx(DefaultSwitchControl, { name: "emailVerified", label: t("emailVerified"), labelIcon: t("emailVerifiedHelp") }), _jsx(UserProfileFields, { form: form, userProfileMetadata: userProfileMetadata, hideReadOnly: !user, supportedLocales: realm.supportedLocales || [], currentLocale: currentLocale, t: ((key, params) => t(key, params)) })] })) : (_jsxs(_Fragment, { children: [!realm.registrationEmailAsUsername && (_jsx(TextControl, { name: "username", label: t("username"), readOnly: !!(user === null || user === void 0 ? void 0 : user.id) &&
!realm.editUsernameAllowed &&
realm.editUsernameAllowed !== undefined, rules: {
required: t("required"),
} })), _jsx(TextControl, { name: "email", label: t("email"), type: "email", rules: {
pattern: {
value: emailRegexPattern,
message: t("emailInvalid"),
},
} }), _jsx(SwitchControl, { name: "emailVerified", label: t("emailVerified"), labelIcon: t("emailVerifiedHelp"), labelOn: t("yes"), labelOff: t("no") }), _jsx(TextControl, { name: "firstName", label: t("firstName") }), _jsx(TextControl, { name: "lastName", label: t("lastName") })] })), isBruteForceProtected && (_jsx(FormGroup, { label: t("temporaryLocked"), fieldId: "temporaryLocked", labelIcon: _jsx(HelpItem, { helpText: t("temporaryLockedHelp"), fieldLabelId: "temporaryLocked" }), children: _jsx(Switch, { "data-testid": "user-locked-switch", id: "temporaryLocked", onChange: (_event, value) => {
unLockUser();
setLocked(value);
}, isChecked: locked, isDisabled: !locked, label: t("on"), labelOff: t("off") }) })), !(user === null || user === void 0 ? void 0 : user.id) && (_jsxs(FormGroup, { label: t("groups"), fieldId: "kc-groups", labelIcon: _jsx(HelpItem, { helpText: t("groupsHelp"), fieldLabelId: "groups" }), children: [_jsx(Controller, { name: "groups", defaultValue: [], control: control, render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupItem, { children: _jsx(ChipGroup, { categoryName: " ", children: selectedGroups.map((currentChip) => (_jsx(Chip, { onClick: () => deleteItem(currentChip.name), children: currentChip.path }, currentChip.id))) }) }), _jsx(InputGroupItem, { children: _jsx(Button, { id: "kc-join-groups-button", onClick: toggleModal, variant: "secondary", "data-testid": "join-groups-button", children: t("joinGroups") }) })] })) }), errors.requiredActions && (_jsx(FormErrorText, { message: t("required") }))] }))] }), _jsx(FixedButtonsGroup, { name: "user-creation", saveText: (user === null || user === void 0 ? void 0 : user.id) ? t("save") : t("create"), reset: onFormReset, resetText: (user === null || user === void 0 ? void 0 : user.id) ? t("revert") : t("cancel"), isDisabled: allFieldsReadOnly(), isSubmit: true })] }));
};
//# sourceMappingURL=UserForm.js.map