udp-react-enterprise-component-library 25.18.3 → 25.18.4-beta.2

package/dist/UserForm-BopQlbgF.js

@@ -0,0 +1,355 @@
+import { t as Form } from "./Form-kH10DtvM.js";
+import { t as Field } from "./Field-BSE8Fwr1.js";
+import { n as SubmitButton, t as FormButtons } from "./FormButtons-BTCO-pzW.js";
+import { t as useUser } from "./useUser-B_mCveqm.js";
+import { t as FluentTextField } from "./FluentTextField-BsEmi6u7.js";
+import { t as FluentCheckbox } from "./FluentCheckbox-CX7XgoFz.js";
+import { n as FluentRadioGroup, t as FluentRadio } from "./FluentRadio-neACxaR8.js";
+import React, { Fragment, useCallback, useEffect, useMemo, useState } from "react";
+import { Chip, Divider, FormControlLabel, FormLabel, IconButton, InputAdornment, TextField, makeStyles } from "@material-ui/core";
+import Autocomplete from "@material-ui/lab/Autocomplete";
+import { useTranslation } from "react-i18next";
+import { Visibility, VisibilityOff } from "@material-ui/icons";
+
+//#region src/shell/ui/user/PasswordValidator.jsx
+const validatePassword = (password, lengthRestriction = 0, upperCaseRestriction = false, specialCharacterRestriction = false, numberRestriction = false, lowerCaseRestriction = false) => {
+	let issues = [];
+	if (!password) return [];
+	if (lengthRestriction && password.length < lengthRestriction) issues.push(`Password must be at least ${lengthRestriction} characters long.`);
+	if (upperCaseRestriction && !/[A-Z]/.test(password)) issues.push("Password must contain at least one uppercase letter.");
+	if (specialCharacterRestriction && !/[!@#$%^&*(),.?":{}|<>]/.test(password)) issues.push("Password must contain at least one special character.");
+	if (numberRestriction && !/\d/.test(password)) issues.push("Password must contain at least one number.");
+	if (lowerCaseRestriction && !/[a-z]/.test(password)) issues.push("Password must contain at least one lowercase letter.");
+	return issues;
+};
+const isPasswordValid = (password, lengthRestriction = 0, upperCaseRestriction = false, specialCharacterRestriction = false, numberRestriction = false, lowerCaseRestriction = false) => {
+	return validatePassword(password, lengthRestriction, upperCaseRestriction, specialCharacterRestriction, numberRestriction, lowerCaseRestriction).length === 0;
+};
+const PasswordValidator = ({ password, lengthRestriction, upperCaseRestriction, specialCharacterRestriction, numberRestriction, lowerCaseRestriction }) => {
+	const issues = useMemo(() => {
+		return validatePassword(password, lengthRestriction, upperCaseRestriction, specialCharacterRestriction, numberRestriction, lowerCaseRestriction);
+	}, [
+		password,
+		lengthRestriction,
+		upperCaseRestriction,
+		specialCharacterRestriction,
+		numberRestriction,
+		lowerCaseRestriction
+	]);
+	if (!password || issues.length === 0) return null;
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { style: { color: "red" } }, issues.map((issue, index) => /* @__PURE__ */ React.createElement(Fragment, { key: `${issue}-${index}` }, issue, /* @__PURE__ */ React.createElement("br", null)))));
+};
+
+//#endregion
+//#region src/shell/ui/user/form/UserRoleAutoComplete.jsx
+const UserRoleAutoComplete = (props) => {
+	const { id, label, placeholder, options, textFieldProps, disabled, onChange: onChangeProp, initialValue, value, optionLabel, groupBy, userRoles, setUserRoles, isFormField = false, ...other } = props;
+	const [acValue, setACValue] = useState(initialValue);
+	const onChange = useCallback((e, value) => onChangeProp?.(value), [onChangeProp]);
+	const parseMultiple = useCallback((value) => value, []);
+	const formatMultiple = useCallback((...args) => args[0] || [], []);
+	const handleChange = (e, value) => {
+		onChange(e, value);
+		if (userRoles && setUserRoles) {
+			const userId = id.replace("_role", "");
+			const updatedUserRoles = [...userRoles];
+			const userRole = updatedUserRoles.find((ur) => ur.id === userId);
+			if (userRole) userRole.roles = value;
+			else updatedUserRoles.push({
+				id: userId,
+				roles: value
+			});
+			setUserRoles(updatedUserRoles);
+			setACValue(value);
+		} else setACValue(value);
+	};
+	useEffect(() => {
+		if (!userRoles) return;
+		const userId = id.replace("_role", "");
+		const foundUserRole = userRoles.find((ur) => ur.id === userId);
+		if (foundUserRole) {
+			const roleIds = foundUserRole.roles.map((role) => role.roleId);
+			setACValue(options.filter((option) => roleIds.includes(option.roleId)));
+		}
+	}, [
+		options,
+		userRoles,
+		id
+	]);
+	useEffect(() => {
+		if (isFormField && initialValue) {
+			onChange(null, initialValue);
+			setACValue(initialValue);
+		}
+	}, [initialValue, isFormField]);
+	return /* @__PURE__ */ React.createElement(Autocomplete, {
+		multiple: true,
+		id,
+		disabled,
+		options: options || [],
+		getOptionLabel: optionLabel ? (option) => option[optionLabel] || "" : (option) => option.name,
+		onChange: (e, value) => handleChange(e, value),
+		value: acValue,
+		groupBy: groupBy ? (option) => option[groupBy] : "",
+		parse: parseMultiple,
+		format: formatMultiple,
+		renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ React.createElement(Chip, {
+			key: index,
+			color: "primary",
+			label: /* @__PURE__ */ React.createElement("span", { style: { color: "white" } }, optionLabel ? option[optionLabel] ? option[optionLabel] : "" : option),
+			...getTagProps({ index })
+		})),
+		renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, {
+			...textFieldProps,
+			...params,
+			...other,
+			label,
+			variant: "outlined",
+			fullWidth: true,
+			size: "small"
+		})
+	});
+};
+
+//#endregion
+//#region src/shell/ui/user/form/UserFormFields.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	field: { marginBottom: theme.spacing(2) },
+	selectors: {
+		display: "flex",
+		flexDirection: "row",
+		marginBottom: theme.spacing(1)
+	},
+	alert: {
+		marginTop: theme.spacing(-2),
+		marginBottom: theme.spacing(2)
+	},
+	accountDisabledCheckbox: { height: "auto" },
+	accountDisabledCheckboxLabel: { marginTop: theme.spacing(1) }
+}));
+const UserFormFields = (props) => {
+	const { creationMethod, editedUser, handlePasswordTypeChange, handleCreationMethodChange, hideEmailField, passwordType, rolesData, showRolesField = true, altFieldMapping } = props;
+	const classes = useStyles$1();
+	const user = useUser();
+	const [showPassword, setShowPassword] = useState(false);
+	const { t } = useTranslation();
+	const userMapping = useMemo(() => {
+		if (altFieldMapping) return altFieldMapping;
+		else return {
+			userId: "userId",
+			firstName: "firstName",
+			lastName: "lastName",
+			email: "email",
+			roles: "systemWideSecurityRoles"
+		};
+	}, [altFieldMapping]);
+	const roles = useMemo(() => {
+		if (!rolesData) return [];
+		rolesData.forEach((r) => {
+			r.label = r.name;
+			r.value = r.name;
+		});
+		return rolesData.sort((a, b) => a.label.localeCompare(b.label)).sort((a, b) => a.productName.localeCompare(b.productName));
+	}, [rolesData]);
+	const initialRolesValue = useMemo(() => {
+		if (!editedUser) return [];
+		return roles.filter((r) => !!editedUser[userMapping.roles]?.find((edur) => edur.roleId === r.roleId));
+	}, [
+		editedUser,
+		roles,
+		userMapping
+	]);
+	const handleClickShowPassword = useCallback(() => {
+		setShowPassword(!showPassword);
+	}, [showPassword]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, editedUser && /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextField,
+		label: "User ID",
+		id: "user-id",
+		name: userMapping.userId,
+		fullWidth: true,
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		initialValue: editedUser?.[userMapping.userId],
+		disabled: true
+	}), !editedUser && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FormLabel, { component: "legend" }, t("Creation Method")), /* @__PURE__ */ React.createElement(FluentRadioGroup, {
+		"aria-labelledby": "creation-method",
+		name: "creation-method",
+		value: creationMethod,
+		onChange: handleCreationMethodChange
+	}, /* @__PURE__ */ React.createElement(FormControlLabel, {
+		value: "standard",
+		control: /* @__PURE__ */ React.createElement(FluentRadio, null),
+		label: t("Standard (Email & Password)")
+	}), /* @__PURE__ */ React.createElement(FormControlLabel, {
+		value: "invite",
+		control: /* @__PURE__ */ React.createElement(FluentRadio, null),
+		label: t("Invite Entra User (Secure Email Invite Link)")
+	}))), /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextField,
+		label: "First Name",
+		id: "first-name",
+		name: userMapping.firstName,
+		fullWidth: true,
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		required: true,
+		initialValue: editedUser?.[userMapping.firstName],
+		disabled: !user.can.CAN_MANAGE_USERS
+	}), /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextField,
+		label: "Last Name",
+		id: "last-name",
+		name: userMapping.lastName,
+		fullWidth: true,
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		required: true,
+		initialValue: editedUser?.[userMapping.lastName],
+		disabled: !user.can.CAN_MANAGE_USERS
+	}), !hideEmailField && /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextField,
+		label: "Email",
+		id: "email",
+		name: userMapping.email,
+		fullWidth: true,
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		required: true,
+		initialValue: editedUser?.[userMapping.email],
+		disabled: editedUser && !user.can.CAN_MODIFY_EMAIL,
+		validate: (value) => {
+			if (!/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value) || 64 < value.split("@")[0].length) return "Invalid email address";
+		}
+	}), showRolesField && /* @__PURE__ */ React.createElement(Field, {
+		component: UserRoleAutoComplete,
+		ComponentProps: {
+			initialValue: initialRolesValue,
+			isFormField: true
+		},
+		label: "Select Role",
+		id: "roles",
+		name: userMapping.roles,
+		fullWidth: true,
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		options: roles || [],
+		initialValue: initialRolesValue,
+		textFieldProps: {
+			id: "roles",
+			name: "roles"
+		},
+		optionLabel: "label",
+		groupBy: "productName",
+		required: true
+	}), !editedUser && creationMethod !== "invite" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FluentRadioGroup, {
+		"aria-labelledby": "password-type",
+		name: "password-type",
+		value: passwordType,
+		onChange: handlePasswordTypeChange
+	}, /* @__PURE__ */ React.createElement(FormControlLabel, {
+		value: "autoGeneratePassword",
+		control: /* @__PURE__ */ React.createElement(FluentRadio, null),
+		label: "Auto-generate password"
+	}), /* @__PURE__ */ React.createElement(FormControlLabel, {
+		value: "createPassword",
+		control: /* @__PURE__ */ React.createElement(FluentRadio, null),
+		label: "Let me create the password"
+	})), passwordType === "createPassword" && /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextField,
+		label: "Password",
+		id: "passwordProfile",
+		name: "passwordProfile",
+		type: showPassword ? "text" : "password",
+		fullWidth: true,
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		autoComplete: "new-password",
+		validate: (value) => !isPasswordValid(value, 8, true, true, true, true) && /* @__PURE__ */ React.createElement(PasswordValidator, {
+			password: value,
+			numberRestriction: true,
+			lowerCaseRestriction: true,
+			upperCaseRestriction: true,
+			lengthRestriction: 8,
+			specialCharacterRestriction: true
+		}),
+		InputProps: { endAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(IconButton, {
+			"aria-label": "toggle password visibility",
+			onClick: handleClickShowPassword
+		}, showPassword ? /* @__PURE__ */ React.createElement(Visibility, null) : /* @__PURE__ */ React.createElement(VisibilityOff, null))) }
+	}), /* @__PURE__ */ React.createElement(FormControlLabel, {
+		className: classes.accountDisabledCheckboxLabel,
+		label: "Do not activate account and do not send a welcome email.",
+		control: /* @__PURE__ */ React.createElement(Field, {
+			component: FluentCheckbox,
+			id: "account-locked",
+			name: "locked",
+			type: "checkbox",
+			disabled: !user.can.CAN_MANAGE_USERS,
+			classes
+		})
+	})));
+};
+
+//#endregion
+//#region src/shell/ui/user/form/UserForm.jsx
+const useStyles = makeStyles((theme) => ({
+	divider: {
+		marginTop: theme.spacing(2),
+		marginBottom: theme.spacing(2)
+	},
+	loadingBar: {
+		bottom: theme.spacing(-2),
+		marginLeft: theme.spacing(-2),
+		marginRight: theme.spacing(-2)
+	}
+}));
+const UserForm = (props) => {
+	const { editedUser, rolesData, showRolesField = true, submitUser, updateCreatedUser, formLoading, altFieldMapping } = props;
+	const classes = useStyles();
+	const user = useUser();
+	const [passwordType, setPasswordType] = useState("autoGeneratePassword");
+	const [creationMethod, setCreationMethod] = useState("standard");
+	const handlePasswordTypeChange = useCallback((event) => {
+		setPasswordType(event.target.value);
+	}, []);
+	const handleCreationMethodChange = useCallback((event) => {
+		setCreationMethod(event.target.value);
+	}, []);
+	const handleSubmitUser = useCallback((values) => {
+		if (submitUser) {
+			if (passwordType === "autoGeneratePassword") values.passwordProfile = null;
+			updateCreatedUser && editedUser ? updateCreatedUser(values) : submitUser(values);
+		}
+	}, [
+		submitUser,
+		passwordType,
+		updateCreatedUser,
+		editedUser
+	]);
+	return /* @__PURE__ */ React.createElement(Form, { onSubmit: handleSubmitUser }, /* @__PURE__ */ React.createElement(UserFormFields, {
+		rolesData,
+		editedUser,
+		showRolesField,
+		handlePasswordTypeChange,
+		passwordType,
+		handleCreationMethodChange,
+		creationMethod,
+		altFieldMapping
+	}), user.can.CAN_MANAGE_USERS && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(FormButtons, null, /* @__PURE__ */ React.createElement(SubmitButton, {
+		variant: "contained",
+		color: "primary",
+		disablePristine: false,
+		disabled: formLoading
+	}, editedUser ? "Update" : "Create"))));
+};
+
+//#endregion
+export { isPasswordValid as i, UserFormFields as n, UserRoleAutoComplete as r, UserForm as t };
+//# sourceMappingURL=UserForm-BopQlbgF.js.map

package/dist/UserForm-BopQlbgF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserForm-BopQlbgF.js","names":["useStyles"],"sources":["../src/shell/ui/user/PasswordValidator.jsx","../src/shell/ui/user/form/UserRoleAutoComplete.jsx","../src/shell/ui/user/form/UserFormFields.jsx","../src/shell/ui/user/form/UserForm.jsx"],"sourcesContent":["import React, { useMemo, Fragment } from 'react';\nconst validatePassword = (\n  password,\n  lengthRestriction = 0,\n  upperCaseRestriction = false,\n  specialCharacterRestriction = false,\n  numberRestriction = false,\n  lowerCaseRestriction = false\n) => {\n  let issues = [];\n  if (!password) return [];\n  if (lengthRestriction && password.length < lengthRestriction) {\n    issues.push(\n      `Password must be at least ${lengthRestriction} characters long.`\n    );\n  }\n  if (upperCaseRestriction && !/[A-Z]/.test(password)) {\n    issues.push('Password must contain at least one uppercase letter.');\n  }\n  if (specialCharacterRestriction && !/[!@#$%^&*(),.?\":{}|<>]/.test(password)) {\n    issues.push('Password must contain at least one special character.');\n  }\n  if (numberRestriction && !/\\d/.test(password)) {\n    issues.push('Password must contain at least one number.');\n  }\n  if (lowerCaseRestriction && !/[a-z]/.test(password)) {\n    issues.push('Password must contain at least one lowercase letter.');\n  }\n  return issues;\n};\nexport const isPasswordValid = (\n  password,\n  lengthRestriction = 0,\n  upperCaseRestriction = false,\n  specialCharacterRestriction = false,\n  numberRestriction = false,\n  lowerCaseRestriction = false\n) => {\n  return (\n    validatePassword(\n      password,\n      lengthRestriction,\n      upperCaseRestriction,\n      specialCharacterRestriction,\n      numberRestriction,\n      lowerCaseRestriction\n    ).length === 0\n  );\n};\nconst PasswordValidator = ({\n  password,\n  lengthRestriction,\n  upperCaseRestriction,\n  specialCharacterRestriction,\n  numberRestriction,\n  lowerCaseRestriction,\n}) => {\n  const issues = useMemo(() => {\n    return validatePassword(\n      password,\n      lengthRestriction,\n      upperCaseRestriction,\n      specialCharacterRestriction,\n      numberRestriction,\n      lowerCaseRestriction\n    );\n  }, [\n    password,\n    lengthRestriction,\n    upperCaseRestriction,\n    specialCharacterRestriction,\n    numberRestriction,\n    lowerCaseRestriction\n  ]);\n\n  // Check for length on both to avoid unnecessary empty divs\n  if (!password || issues.length === 0) return null;\n\n  return (\n    <div>\n      <p style={{ color: 'red' }}>\n        {issues.map((issue, index) => (\n          <Fragment key={`${issue}-${index}`}>\n            {issue}\n            <br />\n          </Fragment>\n        ))}\n      </p>\n    </div>\n  );\n};\n\nexport default PasswordValidator;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { Chip, TextField } from '@material-ui/core';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\n// import { FluentTextField } from '../../../../UI/inputs/textField';\n\nexport const UserRoleAutoComplete = props => {\n  const {\n    id,\n    label,\n    placeholder,\n    options,\n    textFieldProps,\n    disabled,\n    onChange: onChangeProp,\n    initialValue,\n    value,\n    optionLabel,\n    groupBy,\n    userRoles,\n    setUserRoles,\n    isFormField = false,\n    ...other\n  } = props;\n\n  const [acValue, setACValue] = useState(initialValue);\n\n  // Fix onChange to something Field can understand\n  const onChange = useCallback((e, value) => onChangeProp?.(value), [\n    onChangeProp,\n  ]);\n\n  const parseMultiple = useCallback(value => value, []);\n  const formatMultiple = useCallback((...args) => args[0] || [], []);\n\n  const handleChange = (e, value) => {\n    onChange(e, value);\n    if (userRoles && setUserRoles) {\n      const userId = id.replace('_role', '');\n      const updatedUserRoles = [...userRoles];\n      const userRole = updatedUserRoles.find(ur => ur.id === userId);\n      if (userRole) {\n        userRole.roles = value;\n      } else {\n        updatedUserRoles.push({ id: userId, roles: value });\n      }\n      setUserRoles(updatedUserRoles);\n      setACValue(value);\n    }\n    else {\n      setACValue(value);\n    }\n  };\n\n  useEffect(() => {\n    if (!userRoles) {\n      return;\n    }\n    const userId = id.replace('_role', '');\n    const foundUserRole = userRoles.find(ur => ur.id === userId);\n    if (foundUserRole) {\n      const roleIds = foundUserRole.roles.map(role => role.roleId);\n      const roleValues = options.filter(option =>\n        roleIds.includes(option.roleId)\n      );\n      setACValue(roleValues);\n    }\n  }, [options, userRoles, id]);\n\n  // need to NOT include onChange in dependency list, or it will re-render on every change\n  useEffect(() => {\n    if (isFormField && initialValue) {\n      onChange(null, initialValue);\n      setACValue(initialValue);\n    }\n  }, [initialValue, isFormField]);\n\n  return (\n    <Autocomplete\n      multiple\n      id={id}\n      disabled={disabled}\n      options={options || []}\n      getOptionLabel={\n        optionLabel\n          ? option => option[optionLabel] || ''\n          : option => option.name\n      }\n      onChange={(e, value) => handleChange(e, value)}\n      value={acValue}\n      groupBy={groupBy ? option => option[groupBy] : ''}\n      parse={parseMultiple}\n      format={formatMultiple}\n      renderTags={(value, getTagProps) =>\n        value.map((option, index) => (\n          <Chip\n            key={index}\n            color=\"primary\"\n            label={\n              <span style={{ color: 'white' }}>\n                {optionLabel\n                  ? option[optionLabel]\n                    ? option[optionLabel]\n                    : ''\n                  : option}\n              </span>\n            }\n            {...getTagProps({ index })}\n          />\n        ))\n      }\n      renderInput={params => (\n        <TextField\n          {...textFieldProps}\n          {...params}\n          {...other}\n          label={label}\n          variant=\"outlined\"\n          fullWidth\n          size=\"small\"\n        />\n      )}\n    />\n  );\n};\n","import {\n  FormControlLabel,\n  FormLabel,\n  IconButton,\n  InputAdornment,\n  makeStyles,\n} from '@material-ui/core';\nimport { Visibility, VisibilityOff } from '@material-ui/icons';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Field } from '../../../../utilities/form/Field';\nimport PasswordValidator, { isPasswordValid } from '../PasswordValidator';\nimport { UserRoleAutoComplete } from './UserRoleAutoComplete';\nimport { FluentCheckbox } from '../../../../UI/inputs/checkbox';\nimport { FluentRadio, FluentRadioGroup } from '../../../../UI/inputs/radio';\nimport { FluentTextField } from '../../../../UI/inputs/textField';\nimport { useUser } from '../../../../utilities/auth';\nimport { useTranslation } from 'react-i18next';\n\n\nconst useStyles = makeStyles(theme => ({\n  field: {\n    marginBottom: theme.spacing(2),\n  },\n  selectors: {\n    display: 'flex',\n    flexDirection: 'row',\n    marginBottom: theme.spacing(1),\n  },\n  alert: {\n    marginTop: theme.spacing(-2),\n    marginBottom: theme.spacing(2),\n  },\n  accountDisabledCheckbox: {\n    height: 'auto',\n  },\n  accountDisabledCheckboxLabel: {\n    marginTop: theme.spacing(1),\n  },\n}));\n\nexport const UserFormFields = props => {\n  const {\n    creationMethod,\n    editedUser,\n    handlePasswordTypeChange,\n    handleCreationMethodChange,\n    hideEmailField,\n    passwordType,\n    rolesData,\n    showRolesField = true,\n    altFieldMapping,\n  } = props;\n  const classes = useStyles();\n  const user = useUser();\n  const [showPassword, setShowPassword] = useState(false);\n  const { t } = useTranslation();\n\n  const userMapping = useMemo(() => {\n    if (altFieldMapping) {\n      return altFieldMapping;\n    } else {\n      // Default mapping for code generated User object\n      return {\n        userId: 'userId',\n        firstName: 'firstName',\n        lastName: 'lastName',\n        email: 'email',\n        roles: 'systemWideSecurityRoles',\n      }\n    }\n  }, [altFieldMapping]);\n\n  const roles = useMemo(() => {\n    if (!rolesData) {\n      return [];\n    }\n    rolesData.forEach(r => {\n      r.label = r.name;\n      r.value = r.name;\n    });\n    return rolesData\n      .sort((a, b) => a.label.localeCompare(b.label))\n      .sort((a, b) => a.productName.localeCompare(b.productName));\n  }, [rolesData]);\n\n  const initialRolesValue = useMemo(() => {\n    if (!editedUser) {\n      return [];\n    }\n    return roles.filter(\n      r => !!editedUser[userMapping.roles]?.find(edur => edur.roleId === r.roleId)\n    );\n  }, [editedUser, roles, userMapping]);\n\n  const handleClickShowPassword = useCallback(() => {\n    setShowPassword(!showPassword);\n  }, [showPassword]);\n\n  return (\n    <>\n      {editedUser && (\n        <Field\n          component={FluentTextField}\n          label=\"User ID\"\n          id=\"user-id\"\n          name={userMapping.userId}\n          fullWidth\n          variant=\"outlined\"\n          margin=\"normal\"\n          size=\"small\"\n          initialValue={editedUser?.[userMapping.userId]}\n          disabled={true}\n        />\n      )}\n      {!editedUser && (\n        <>\n          <FormLabel component=\"legend\">{t('Creation Method')}</FormLabel>\n          <FluentRadioGroup\n            aria-labelledby=\"creation-method\"\n            name=\"creation-method\"\n            value={creationMethod}\n            onChange={handleCreationMethodChange}\n          >\n            <FormControlLabel\n              value=\"standard\"\n              control={<FluentRadio />}\n              label={t('Standard (Email & Password)')}\n            />\n            <FormControlLabel\n              value=\"invite\"\n              control={<FluentRadio />}\n              label={t('Invite Entra User (Secure Email Invite Link)')}\n            />\n          </FluentRadioGroup>\n        </>\n      )}\n      <Field\n        component={FluentTextField}\n        label=\"First Name\"\n        id=\"first-name\"\n        name={userMapping.firstName}\n        fullWidth\n        variant=\"outlined\"\n        margin=\"normal\"\n        size=\"small\"\n        required\n        initialValue={editedUser?.[userMapping.firstName]}\n        disabled={!user.can.CAN_MANAGE_USERS}\n      />\n      <Field\n        component={FluentTextField}\n        label=\"Last Name\"\n        id=\"last-name\"\n        name={userMapping.lastName}\n        fullWidth\n        variant=\"outlined\"\n        margin=\"normal\"\n        size=\"small\"\n        required\n        initialValue={editedUser?.[userMapping.lastName]}\n        disabled={!user.can.CAN_MANAGE_USERS}\n      />\n      {!hideEmailField && (\n        <Field\n          component={FluentTextField}\n          label=\"Email\"\n          id=\"email\"\n          name={userMapping.email}\n          fullWidth\n          variant=\"outlined\"\n          margin=\"normal\"\n          size=\"small\"\n          required\n          initialValue={editedUser?.[userMapping.email]}\n          disabled={editedUser && !user.can.CAN_MODIFY_EMAIL}\n          validate={value => {\n            if (\n              !/^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/.test(\n                value\n              ) ||\n              64 < value.split('@')[0].length\n            ) {\n              return 'Invalid email address';\n            }\n          }}\n        />\n      )}\n      {showRolesField && (\n        <Field\n          component={UserRoleAutoComplete}\n          ComponentProps={{\n            initialValue: initialRolesValue,\n            isFormField: true,\n          }}\n          label=\"Select Role\"\n          id=\"roles\"\n          name={userMapping.roles}\n          fullWidth\n          variant=\"outlined\"\n          margin=\"normal\"\n          size=\"small\"\n          options={roles || []}\n          initialValue={initialRolesValue}\n          textFieldProps={{\n            id: 'roles',\n            name: 'roles',\n          }}\n          optionLabel={'label'}\n          groupBy={'productName'}\n          required\n        />\n      )}\n      {!editedUser && (creationMethod !== 'invite') && (\n        <>\n          <FluentRadioGroup\n            aria-labelledby=\"password-type\"\n            name=\"password-type\"\n            value={passwordType}\n            onChange={handlePasswordTypeChange}\n          >\n            <FormControlLabel\n              value=\"autoGeneratePassword\"\n              control={<FluentRadio />}\n              label=\"Auto-generate password\"\n            />\n            <FormControlLabel\n              value=\"createPassword\"\n              control={<FluentRadio />}\n              label=\"Let me create the password\"\n            />\n          </FluentRadioGroup>\n          {passwordType === 'createPassword' && (\n            <Field\n              component={FluentTextField}\n              label=\"Password\"\n              id=\"passwordProfile\"\n              name=\"passwordProfile\"\n              type={showPassword ? 'text' : 'password'}\n              fullWidth\n              variant=\"outlined\"\n              margin=\"normal\"\n              size=\"small\"\n              autoComplete=\"new-password\"\n              validate={value =>\n                !isPasswordValid(value, 8, true, true, true, true) && (\n                  <PasswordValidator\n                    password={value}\n                    numberRestriction\n                    lowerCaseRestriction\n                    upperCaseRestriction\n                    lengthRestriction={8}\n                    specialCharacterRestriction\n                  />\n                )\n              }\n              InputProps={{\n                // <-- This is where the toggle button is added.\n                endAdornment: (\n                  <InputAdornment position=\"end\">\n                    <IconButton\n                      aria-label=\"toggle password visibility\"\n                      onClick={handleClickShowPassword}\n                    >\n                      {showPassword ? <Visibility /> : <VisibilityOff />}\n                    </IconButton>\n                  </InputAdornment>\n                ),\n              }}\n            />\n          )}\n          <FormControlLabel\n            className={classes.accountDisabledCheckboxLabel}\n            label={\n              'Do not activate account and do not send a welcome email.'\n            }\n            control={\n              <Field\n                component={FluentCheckbox}\n                id=\"account-locked\"\n                name='locked'\n                type=\"checkbox\"\n                disabled={!user.can.CAN_MANAGE_USERS}\n                classes={classes}\n              />\n            }\n          />\n        </>\n      )}\n\n      {/* @TODO: uncomment if we decide to allow user to select user type for an AD user */}\n      {/* <Field\n            component={TextField}\n            label=\"User Type\"\n            id=\"user-type\"\n            name=\"userType\"\n            fullWidth\n            variant=\"outlined\"\n            margin=\"normal\"\n            size=\"small\"\n            select\n            required\n            initialValue={user?.userType?.toLowerCase()}\n          >\n            <MenuItem value=\"guest\">Guest</MenuItem>\n            <MenuItem value=\"member\">Member</MenuItem>\n          </Field> */}\n      {/* @TODO handle country, state and province values. And handle custom fields */}\n      {/* Support will be added in the future, need to use 3rd party library for countries and states. */}\n      {/* <div className={classes.selectors}>\n            <CountrySelector />\n            {defaultUS && <StateSelector />}\n            {!defaultUS && <ProvinceSelector />}\n          </div>\n\n          {city} */}\n    </>\n  );\n};\n","import { Divider, makeStyles } from '@material-ui/core';\nimport React, { useCallback, useState } from 'react';\nimport { UserFormFields } from './UserFormFields';\nimport { useUser } from '../../../../utilities/auth';\nimport { Form, FormButtons, SubmitButton } from '../../../../utilities/form';\n\nconst useStyles = makeStyles(theme => ({\n  divider: {\n    marginTop: theme.spacing(2),\n    marginBottom: theme.spacing(2),\n  },\n  loadingBar: {\n    bottom: theme.spacing(-2),\n    marginLeft: theme.spacing(-2),\n    marginRight: theme.spacing(-2),\n  },\n}));\n\nexport const UserForm = props => {\n  const {\n    editedUser,\n    rolesData,\n    showRolesField = true,\n    submitUser,\n    updateCreatedUser,\n    formLoading,\n    altFieldMapping,\n  } = props;\n  const classes = useStyles();\n  const user = useUser();\n\n  const [passwordType, setPasswordType] = useState('autoGeneratePassword');\n  const [creationMethod, setCreationMethod] = useState('standard'); // 'standard' | 'invite'\n\n  const handlePasswordTypeChange = useCallback(event => {\n    setPasswordType(event.target.value);\n  }, []);\n\n  const handleCreationMethodChange = useCallback(event => {\n    setCreationMethod(event.target.value);\n  }, []);\n\n  const handleSubmitUser = useCallback(\n    values => {\n      if (submitUser) {\n        if (passwordType === 'autoGeneratePassword') {\n          values.passwordProfile = null;\n        }\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n        updateCreatedUser && editedUser\n          ? updateCreatedUser(values)\n          : submitUser(values);\n      }\n    },\n    [submitUser, passwordType, updateCreatedUser, editedUser]\n  );\n\n  return (\n    <Form onSubmit={handleSubmitUser}>\n      <UserFormFields\n        rolesData={rolesData}\n        editedUser={editedUser}\n        showRolesField={showRolesField}\n        handlePasswordTypeChange={handlePasswordTypeChange}\n        passwordType={passwordType}\n        handleCreationMethodChange={handleCreationMethodChange}\n        creationMethod={creationMethod}\n        altFieldMapping={altFieldMapping}\n      />\n      {user.can.CAN_MANAGE_USERS && (\n        <>\n          <div className={classes.divider}>\n            <Divider />\n          </div>\n          <FormButtons>\n            <SubmitButton\n              variant=\"contained\"\n              color=\"primary\"\n              disablePristine={false}\n              disabled={formLoading}\n            >\n              {editedUser ? 'Update' : 'Create'}\n            </SubmitButton>\n          </FormButtons>\n        </>\n      )}\n    </Form>\n  );\n};\n"],"mappings":"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"}

package/dist/UserFormSideSheet-DciiQaou.js

@@ -0,0 +1,102 @@
+import { t as __exportAll } from "./chunk-BYypO7fO.js";
+import { ConfigService } from "./configService/index.js";
+import { i as useHandleAxiosSnackbar } from "./apiHelpers-CQSnEbMA.js";
+import { t as apiMutate } from "./useAxiosMutate-DfnYYAzN.js";
+import { n as SideSheet } from "./SideSheet-B7N-AM_z.js";
+import { t as useTenant } from "./useTenant-6MaSjnVs.js";
+import { t as UserForm } from "./UserForm-BopQlbgF.js";
+import React, { useCallback, useState } from "react";
+import { useSnackbar } from "notistack";
+import { cloneDeep } from "lodash";
+import { useTranslation } from "react-i18next";
+
+//#region src/shell/ui/user/UserFormSideSheet.jsx
+var UserFormSideSheet_exports = /* @__PURE__ */ __exportAll({ default: () => UserFormSideSheet });
+const UserFormSideSheet = ({ open, onClose }) => {
+	const [loading, setLoading] = useState(false);
+	const tenant = useTenant();
+	const { t } = useTranslation();
+	const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
+	const getUserByEmail = useCallback(async (email) => {
+		return await apiMutate(ConfigService.securityV1ApiUrl, `users/email/${email}`, { method: "get" });
+	}, []);
+	const createUser = useCallback(async (data) => {
+		return await apiMutate(ConfigService.securityV1ApiUrl, `users/${tenant?.activeTenant?.tenantId ?? ""}`, { method: "post" }, data);
+	}, [tenant]);
+	const inviteUser = useCallback(async (data) => {
+		return await apiMutate(ConfigService.securityV1ApiUrl, `users/${tenant?.activeTenant?.tenantId ?? ""}/invite`, { method: "post" }, data);
+	}, [tenant]);
+	const addUserToTenant = useCallback(async (email) => {
+		return await apiMutate(ConfigService.tenantV1ApiUrl, `tenants/${tenant?.activeTenant?.tenantId ?? ""}/${email}`, { method: "post" });
+	}, [tenant]);
+	const updateExistingUser = useCallback(async (data) => {
+		return await apiMutate(ConfigService.securityV1ApiUrl, `users/aad/${data.id}`, { method: "patch" }, data);
+	}, []);
+	const fillInValues = (oldValues, newValues) => {
+		const invalidFields = [
+			"id",
+			"displayName",
+			"mail",
+			"userType",
+			"email",
+			"accountEnabled",
+			"mailNickname",
+			"identities",
+			"password",
+			"passwordProfile",
+			"unityId",
+			"unityDefaultTenantId"
+		];
+		for (let field in oldValues) if (!invalidFields.includes(field)) {
+			if (!oldValues[field]) oldValues[field] = newValues[field];
+		}
+		return oldValues;
+	};
+	const handleSubmit = useCallback(async (values) => {
+		setLoading(true);
+		try {
+			if (values.email) values.email = values.email.toLowerCase().trim();
+			const userExists = (await getUserByEmail(values.email)).data;
+			if (userExists) {
+				await updateExistingUser({ data: fillInValues(cloneDeep(userExists), values) });
+				await addUserToTenant(values.email);
+				handleSuccessSnackbar(t("User has been updated and added to the tenant"));
+			} else if (values.isInvite) {
+				await inviteUser({ data: values });
+				handleSuccessSnackbar(t("User invitation sent successfully"));
+			} else {
+				await createUser({ data: values });
+				handleSuccessSnackbar(t("User has been created successfully"));
+			}
+			onClose();
+		} catch (error) {
+			handleErrorSnackbar(error.message || t("An error occurred, please ensure you are creating a new user"));
+		} finally {
+			setLoading(false);
+		}
+	}, [
+		getUserByEmail,
+		createUser,
+		inviteUser,
+		addUserToTenant,
+		updateExistingUser,
+		handleErrorSnackbar,
+		handleSuccessSnackbar,
+		onClose,
+		t
+	]);
+	return /* @__PURE__ */ React.createElement(SideSheet, {
+		open,
+		onClose,
+		title: t("Add User"),
+		width: 600
+	}, /* @__PURE__ */ React.createElement(UserForm, {
+		submitUser: handleSubmit,
+		creatingUser: loading,
+		tenant: tenant?.activeTenant
+	}));
+};
+
+//#endregion
+export { UserFormSideSheet_exports as t };
+//# sourceMappingURL=UserFormSideSheet-DciiQaou.js.map

package/dist/UserFormSideSheet-DciiQaou.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserFormSideSheet-DciiQaou.js","names":[],"sources":["../src/shell/ui/user/UserFormSideSheet.jsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { SideSheet } from '../../../UI/surfaces/SideSheet';\nimport { UserForm } from './form/UserForm';\nimport { useSnackbar } from 'notistack';\nimport { apiMutate } from '../../../utilities/useAxiosMutate';\nimport { useTenant } from '../../../utilities/tenant/useTenant';\nimport { useHandleAxiosSnackbar } from '../../../utilities/apiHelpers';\nimport { cloneDeep } from 'lodash';\nimport { useTranslation } from 'react-i18next';\nimport { ConfigService } from '../../../configService';\n\n\nconst UserFormSideSheet = ({\n  open,\n  onClose,\n}) => {\n  const [loading, setLoading] = useState(false);\n  const tenant = useTenant();\n  const { t } = useTranslation();\n  const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();\n\n  // Helper functions\n  const getUserByEmail = useCallback(\n    async email => {\n      return await apiMutate(\n        ConfigService.securityV1ApiUrl,\n        `users/email/${email}`,\n        { method: 'get' }\n      );\n    },\n    []\n  );\n\n  const createUser = useCallback(\n    async data => {\n      return await apiMutate(\n        ConfigService.securityV1ApiUrl,\n        `users/${tenant?.activeTenant?.tenantId ?? ''}`,\n        { method: 'post' },\n        data\n      );\n    },\n    [tenant]\n  );\n\n  const inviteUser = useCallback(\n    async data => {\n      return await apiMutate(\n        ConfigService.securityV1ApiUrl,\n        `users/${tenant?.activeTenant?.tenantId ?? ''}/invite`,\n        { method: 'post' },\n        data\n      );\n    },\n    [tenant]\n  );\n\n  const addUserToTenant = useCallback(\n    async email => {\n      return await apiMutate(\n        ConfigService.tenantV1ApiUrl,\n        `tenants/${tenant?.activeTenant?.tenantId ?? ''}/${email}`,\n        { method: 'post' }\n      );\n    },\n    [tenant]\n  );\n\n  const updateExistingUser = useCallback(\n    async data => {\n      return await apiMutate(\n        ConfigService.securityV1ApiUrl,\n        `users/aad/${data.id}`,\n        { method: 'patch' },\n        data\n      );\n    },\n    []\n  );\n\n  const fillInValues = (oldValues, newValues) => {\n    const invalidFields = [\n      'id', 'displayName', 'mail', 'userType', 'email',\n      'accountEnabled', 'mailNickname', 'identities',\n      'password', 'passwordProfile', 'unityId',\n      'unityDefaultTenantId'\n    ];\n    for (let field in oldValues) {\n      if (!invalidFields.includes(field)) {\n        if (!oldValues[field]) {\n          oldValues[field] = newValues[field];\n        }\n      }\n    }\n    return oldValues;\n  };\n\n  const handleSubmit = useCallback(\n    async values => {\n      setLoading(true);\n      try {\n        if (values.email) {\n          values.email = values.email.toLowerCase().trim();\n        }\n\n        const userExistsResponse = await getUserByEmail(values.email);\n        const userExists = userExistsResponse.data;\n\n        if (userExists) {\n          const existingUser = cloneDeep(userExists);\n          const updatedValues = fillInValues(existingUser, values);\n\n          // Update existing user and add to tenant\n          await updateExistingUser({ data: updatedValues });\n          await addUserToTenant(values.email);\n          handleSuccessSnackbar(t('User has been updated and added to the tenant'))\n        } else {\n          // Check if this is an invite flow or standard create\n          if (values.isInvite) {\n            await inviteUser({ data: values });\n            handleSuccessSnackbar(t('User invitation sent successfully'));\n          } else {\n            // Create a new user\n            await createUser({ data: values });\n            handleSuccessSnackbar(t('User has been created successfully'));\n          }\n        }\n\n        onClose(); // Close the SideSheet after successful submission\n      } catch (error) {\n        handleErrorSnackbar(error.message || t('An error occurred, please ensure you are creating a new user'))\n      } finally {\n        setLoading(false);\n      }\n    },\n    [\n      getUserByEmail,\n      createUser,\n      inviteUser,\n      addUserToTenant,\n      updateExistingUser,\n      handleErrorSnackbar,\n      handleSuccessSnackbar,\n      onClose,\n      t\n    ]\n  );\n\n  return (\n    <SideSheet\n      open={open}\n      onClose={onClose}\n      title={t(\"Add User\")}\n      width={600} // Adjust the width as needed\n    >\n      <UserForm\n        submitUser={handleSubmit}\n        creatingUser={loading}\n        tenant={tenant?.activeTenant}\n      />\n    </SideSheet>\n  );\n};\n\nexport default UserFormSideSheet;\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAM,qBAAqB,EACzB,MACA,cACI;CACJ,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,SAAS,WAAW;CAC1B,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,qBAAqB,0BAA0B,wBAAwB;CAG/E,MAAM,iBAAiB,YACrB,OAAM,UAAS;AACb,SAAO,MAAM,UACX,cAAc,kBACd,eAAe,SACf,EAAE,QAAQ,OAAO,CAClB;IAEH,EAAE,CACH;CAED,MAAM,aAAa,YACjB,OAAM,SAAQ;AACZ,SAAO,MAAM,UACX,cAAc,kBACd,SAAS,QAAQ,cAAc,YAAY,MAC3C,EAAE,QAAQ,QAAQ,EAClB,KACD;IAEH,CAAC,OAAO,CACT;CAED,MAAM,aAAa,YACjB,OAAM,SAAQ;AACZ,SAAO,MAAM,UACX,cAAc,kBACd,SAAS,QAAQ,cAAc,YAAY,GAAG,UAC9C,EAAE,QAAQ,QAAQ,EAClB,KACD;IAEH,CAAC,OAAO,CACT;CAED,MAAM,kBAAkB,YACtB,OAAM,UAAS;AACb,SAAO,MAAM,UACX,cAAc,gBACd,WAAW,QAAQ,cAAc,YAAY,GAAG,GAAG,SACnD,EAAE,QAAQ,QAAQ,CACnB;IAEH,CAAC,OAAO,CACT;CAED,MAAM,qBAAqB,YACzB,OAAM,SAAQ;AACZ,SAAO,MAAM,UACX,cAAc,kBACd,aAAa,KAAK,MAClB,EAAE,QAAQ,SAAS,EACnB,KACD;IAEH,EAAE,CACH;CAED,MAAM,gBAAgB,WAAW,cAAc;EAC7C,MAAM,gBAAgB;GACpB;GAAM;GAAe;GAAQ;GAAY;GACzC;GAAkB;GAAgB;GAClC;GAAY;GAAmB;GAC/B;GACD;AACD,OAAK,IAAI,SAAS,UAChB,KAAI,CAAC,cAAc,SAAS,MAAM,EAChC;OAAI,CAAC,UAAU,OACb,WAAU,SAAS,UAAU;;AAInC,SAAO;;CAGT,MAAM,eAAe,YACnB,OAAM,WAAU;AACd,aAAW,KAAK;AAChB,MAAI;AACF,OAAI,OAAO,MACT,QAAO,QAAQ,OAAO,MAAM,aAAa,CAAC,MAAM;GAIlD,MAAM,cADqB,MAAM,eAAe,OAAO,MAAM,EACvB;AAEtC,OAAI,YAAY;AAKd,UAAM,mBAAmB,EAAE,MAHL,aADD,UAAU,WAAW,EACO,OAAO,EAGR,CAAC;AACjD,UAAM,gBAAgB,OAAO,MAAM;AACnC,0BAAsB,EAAE,gDAAgD,CAAC;cAGrE,OAAO,UAAU;AACnB,UAAM,WAAW,EAAE,MAAM,QAAQ,CAAC;AAClC,0BAAsB,EAAE,oCAAoC,CAAC;UACxD;AAEL,UAAM,WAAW,EAAE,MAAM,QAAQ,CAAC;AAClC,0BAAsB,EAAE,qCAAqC,CAAC;;AAIlE,YAAS;WACF,OAAO;AACd,uBAAoB,MAAM,WAAW,EAAE,+DAA+D,CAAC;YAC/F;AACR,cAAW,MAAM;;IAGrB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAED,QACE,oCAAC;EACO;EACG;EACT,OAAO,EAAE,WAAW;EACpB,OAAO;IAEP,oCAAC;EACC,YAAY;EACZ,cAAc;EACd,QAAQ,QAAQ;GAChB,CACQ"}