Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
theme.keycloak.v2.admin.resources.assets.EditUser-c3171d23.js.map Maven / Gradle / Ivy
The user inferface to administrate the Keycloak server.
{"version":3,"file":"EditUser-c3171d23.js","sources":["../../../../node_modules/.pnpm/[email protected] /node_modules/lodash-es/_baseIntersection.js","../../../../node_modules/.pnpm/[email protected] /node_modules/lodash-es/_castArrayLikeObject.js","../../../../node_modules/.pnpm/[email protected] /node_modules/lodash-es/intersectionBy.js","../../../../node_modules/.pnpm/[email protected] /node_modules/lodash-es/isEmpty.js","../../src/user/UserAttributes.tsx","../../src/user/UserConsents.tsx","../../src/user/user-credentials/CredentialDataDialog.tsx","../../src/user/user-credentials/CredentialRow.tsx","../../src/user/user-credentials/InlineLabelEdit.tsx","../../src/user/user-credentials/LifespanField.tsx","../../src/user/user-credentials/ResetCredentialDialog.tsx","../../src/user/user-credentials/ResetPasswordDialog.tsx","../../src/user/UserCredentials.tsx","../../src/user/UserGroups.tsx","../../src/user/UserIdPModal.tsx","../../src/user/UserIdentityProviderLinks.tsx","../../src/user/UserRoleMapping.tsx","../../src/user/UserSessions.tsx","../../src/user/EditUser.tsx"],"sourcesContent":["import SetCache from './_SetCache.js';\nimport arrayIncludes from './_arrayIncludes.js';\nimport arrayIncludesWith from './_arrayIncludesWith.js';\nimport arrayMap from './_arrayMap.js';\nimport baseUnary from './_baseUnary.js';\nimport cacheHas from './_cacheHas.js';\n\n/* Built-in method references for those with the same name as other `lodash` methods. */\nvar nativeMin = Math.min;\n\n/**\n * The base implementation of methods like `_.intersection`, without support\n * for iteratee shorthands, that accepts an array of arrays to inspect.\n *\n * @private\n * @param {Array} arrays The arrays to inspect.\n * @param {Function} [iteratee] The iteratee invoked per element.\n * @param {Function} [comparator] The comparator invoked per element.\n * @returns {Array} Returns the new array of shared values.\n */\nfunction baseIntersection(arrays, iteratee, comparator) {\n var includes = comparator ? arrayIncludesWith : arrayIncludes,\n length = arrays[0].length,\n othLength = arrays.length,\n othIndex = othLength,\n caches = Array(othLength),\n maxLength = Infinity,\n result = [];\n\n while (othIndex--) {\n var array = arrays[othIndex];\n if (othIndex && iteratee) {\n array = arrayMap(array, baseUnary(iteratee));\n }\n maxLength = nativeMin(array.length, maxLength);\n caches[othIndex] = !comparator && (iteratee || (length >= 120 && array.length >= 120))\n ? new SetCache(othIndex && array)\n : undefined;\n }\n array = arrays[0];\n\n var index = -1,\n seen = caches[0];\n\n outer:\n while (++index < length && result.length < maxLength) {\n var value = array[index],\n computed = iteratee ? iteratee(value) : value;\n\n value = (comparator || value !== 0) ? value : 0;\n if (!(seen\n ? cacheHas(seen, computed)\n : includes(result, computed, comparator)\n )) {\n othIndex = othLength;\n while (--othIndex) {\n var cache = caches[othIndex];\n if (!(cache\n ? cacheHas(cache, computed)\n : includes(arrays[othIndex], computed, comparator))\n ) {\n continue outer;\n }\n }\n if (seen) {\n seen.push(computed);\n }\n result.push(value);\n }\n }\n return result;\n}\n\nexport default baseIntersection;\n","import isArrayLikeObject from './isArrayLikeObject.js';\n\n/**\n * Casts `value` to an empty array if it's not an array like object.\n *\n * @private\n * @param {*} value The value to inspect.\n * @returns {Array|Object} Returns the cast array-like object.\n */\nfunction castArrayLikeObject(value) {\n return isArrayLikeObject(value) ? value : [];\n}\n\nexport default castArrayLikeObject;\n","import arrayMap from './_arrayMap.js';\nimport baseIntersection from './_baseIntersection.js';\nimport baseIteratee from './_baseIteratee.js';\nimport baseRest from './_baseRest.js';\nimport castArrayLikeObject from './_castArrayLikeObject.js';\nimport last from './last.js';\n\n/**\n * This method is like `_.intersection` except that it accepts `iteratee`\n * which is invoked for each element of each `arrays` to generate the criterion\n * by which they're compared. The order and references of result values are\n * determined by the first array. The iteratee is invoked with one argument:\n * (value).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {...Array} [arrays] The arrays to inspect.\n * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n * @returns {Array} Returns the new array of intersecting values.\n * @example\n *\n * _.intersectionBy([2.1, 1.2], [2.3, 3.4], Math.floor);\n * // => [2.1]\n *\n * // The `_.property` iteratee shorthand.\n * _.intersectionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');\n * // => [{ 'x': 1 }]\n */\nvar intersectionBy = baseRest(function(arrays) {\n var iteratee = last(arrays),\n mapped = arrayMap(arrays, castArrayLikeObject);\n\n if (iteratee === last(mapped)) {\n iteratee = undefined;\n } else {\n mapped.pop();\n }\n return (mapped.length && mapped[0] === arrays[0])\n ? baseIntersection(mapped, baseIteratee(iteratee, 2))\n : [];\n});\n\nexport default intersectionBy;\n","import baseKeys from './_baseKeys.js';\nimport getTag from './_getTag.js';\nimport isArguments from './isArguments.js';\nimport isArray from './isArray.js';\nimport isArrayLike from './isArrayLike.js';\nimport isBuffer from './isBuffer.js';\nimport isPrototype from './_isPrototype.js';\nimport isTypedArray from './isTypedArray.js';\n\n/** `Object#toString` result references. */\nvar mapTag = '[object Map]',\n setTag = '[object Set]';\n\n/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/** Used to check objects for own properties. */\nvar hasOwnProperty = objectProto.hasOwnProperty;\n\n/**\n * Checks if `value` is an empty object, collection, map, or set.\n *\n * Objects are considered empty if they have no own enumerable string keyed\n * properties.\n *\n * Array-like values such as `arguments` objects, arrays, buffers, strings, or\n * jQuery-like collections are considered empty if they have a `length` of `0`.\n * Similarly, maps and sets are considered empty if they have a `size` of `0`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is empty, else `false`.\n * @example\n *\n * _.isEmpty(null);\n * // => true\n *\n * _.isEmpty(true);\n * // => true\n *\n * _.isEmpty(1);\n * // => true\n *\n * _.isEmpty([1, 2, 3]);\n * // => false\n *\n * _.isEmpty({ 'a': 1 });\n * // => false\n */\nfunction isEmpty(value) {\n if (value == null) {\n return true;\n }\n if (isArrayLike(value) &&\n (isArray(value) || typeof value == 'string' || typeof value.splice == 'function' ||\n isBuffer(value) || isTypedArray(value) || isArguments(value))) {\n return !value.length;\n }\n var tag = getTag(value);\n if (tag == mapTag || tag == setTag) {\n return !value.size;\n }\n if (isPrototype(value)) {\n return !baseKeys(value).length;\n }\n for (var key in value) {\n if (hasOwnProperty.call(value, key)) {\n return false;\n }\n }\n return true;\n}\n\nexport default isEmpty;\n","import type UserRepresentation from \"@keycloak/keycloak-admin-client/lib/defs/userRepresentation\";\nimport { PageSection, PageSectionVariants } from \"@patternfly/react-core\";\nimport { useFormContext } from \"react-hook-form\";\n\nimport { AttributesForm } from \"../components/key-value-form/AttributeForm\";\nimport { UserFormFields, toUserFormFields } from \"./form-state\";\n\ntype UserAttributesProps = {\n user: UserRepresentation;\n save: (user: UserFormFields) => void;\n};\n\nexport const UserAttributes = ({ user, save }: UserAttributesProps) => {\n const form = useFormContext();\n\n return (\n \n \n form.reset({\n ...form.getValues(),\n attributes: toUserFormFields(user).attributes,\n })\n }\n />\n \n );\n};\n","import type UserConsentRepresentation from \"@keycloak/keycloak-admin-client/lib/defs/userConsentRepresentation\";\nimport {\n AlertVariant,\n ButtonVariant,\n Chip,\n ChipGroup,\n} from \"@patternfly/react-core\";\nimport { CubesIcon } from \"@patternfly/react-icons\";\nimport { cellWidth } from \"@patternfly/react-table\";\nimport { sortBy } from \"lodash-es\";\nimport { useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { adminClient } from \"../admin-client\";\nimport { useAlerts } from \"../components/alert/Alerts\";\nimport { useConfirmDialog } from \"../components/confirm-dialog/ConfirmDialog\";\nimport { ListEmptyState } from \"../components/list-empty-state/ListEmptyState\";\nimport {\n Action,\n KeycloakDataTable,\n} from \"../components/table-toolbar/KeycloakDataTable\";\nimport { emptyFormatter } from \"../util\";\nimport useFormatDate from \"../utils/useFormatDate\";\nimport { useParams } from \"../utils/useParams\";\n\nexport const UserConsents = () => {\n const [selectedClient, setSelectedClient] =\n useState();\n const { t } = useTranslation(\"roles\");\n const { addAlert, addError } = useAlerts();\n const formatDate = useFormatDate();\n const [key, setKey] = useState(0);\n\n const { id } = useParams<{ id: string }>();\n const alphabetize = (consentsList: UserConsentRepresentation[]) => {\n return sortBy(consentsList, (client) => client.clientId?.toUpperCase());\n };\n\n const refresh = () => setKey(new Date().getTime());\n\n const loader = async () => {\n const getConsents = await adminClient.users.listConsents({ id });\n\n return alphabetize(getConsents);\n };\n\n const clientScopesRenderer = ({\n grantedClientScopes,\n }: UserConsentRepresentation) => {\n return (\n \n {grantedClientScopes!.map((currentChip) => (\n \n {currentChip}\n \n ))}\n \n );\n };\n\n const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({\n titleKey: \"users:revokeClientScopesTitle\",\n messageKey: t(\"users:revokeClientScopes\", {\n clientId: selectedClient?.clientId,\n }),\n continueButtonLabel: \"common:revoke\",\n continueButtonVariant: ButtonVariant.danger,\n onConfirm: async () => {\n try {\n await adminClient.users.revokeConsent({\n id,\n clientId: selectedClient!.clientId!,\n });\n\n refresh();\n\n addAlert(t(\"deleteGrantsSuccess\"), AlertVariant.success);\n } catch (error) {\n addError(\"roles:deleteGrantsError\", error);\n }\n },\n });\n\n return (\n <>\n \n createDate ? formatDate(new Date(createDate)) : \"—\",\n },\n {\n name: \"lastUpdatedDate\",\n displayKey: \"clients:lastUpdated\",\n transforms: [cellWidth(10)],\n cellRenderer: ({ lastUpdatedDate }) =>\n lastUpdatedDate ? formatDate(new Date(lastUpdatedDate)) : \"—\",\n },\n ]}\n actions={[\n {\n title: t(\"users:revoke\"),\n onRowClick: (client) => {\n setSelectedClient(client);\n toggleDeleteDialog();\n },\n } as Action,\n ]}\n emptyState={\n \n \n = JSON.parse(\n credential.credentialData,\n );\n return localeSort(Object.entries(credentialData), ([key]) => key).map<\n [string, string]\n >(([key, value]) => {\n if (typeof value === \"string\") {\n return [key, value];\n }\n\n return [key, JSON.stringify(value)];\n });\n }, [credential.credentialData]);\n\n return (\n <>\n {showData && Object.keys(credential).length !== 0 && (\n {\n toggleShow();\n }}\n />\n )}\n\n {children} \n \n \n {t(\"showDataBtn\")}\n \n \n {credential.type === \"password\" ? (\n \n \n {t(\"resetPasswordBtn\")}\n \n \n ) : (\n \n {\n toggleDelete();\n toggleKebab();\n }}\n >\n {t(\"deleteBtn\")}\n ,\n ]}\n />\n \n \n );\n};\n","import type CredentialRepresentation from \"@keycloak/keycloak-admin-client/lib/defs/credentialRepresentation\";\nimport { AlertVariant, Button, Form, FormGroup } from \"@patternfly/react-core\";\nimport { CheckIcon, PencilAltIcon, TimesIcon } from \"@patternfly/react-icons\";\nimport { useForm } from \"react-hook-form\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { adminClient } from \"../../admin-client\";\nimport { useAlerts } from \"../../components/alert/Alerts\";\nimport { KeycloakTextInput } from \"../../components/keycloak-text-input/KeycloakTextInput\";\n\ntype UserLabelForm = {\n userLabel: string;\n};\n\ntype InlineLabelEditProps = {\n userId: string;\n credential: CredentialRepresentation;\n isEditable: boolean;\n toggle: () => void;\n};\n\nexport const InlineLabelEdit = ({\n userId,\n credential,\n isEditable,\n toggle,\n}: InlineLabelEditProps) => {\n const { t } = useTranslation(\"users\");\n const { register, handleSubmit } = useForm();\n\n const { addAlert, addError } = useAlerts();\n\n const saveUserLabel = async (userLabel: UserLabelForm) => {\n try {\n await adminClient.users.updateCredentialLabel(\n {\n id: userId,\n credentialId: credential.id!,\n },\n userLabel.userLabel || \"\",\n );\n addAlert(t(\"updateCredentialUserLabelSuccess\"), AlertVariant.success);\n toggle();\n } catch (error) {\n addError(\"users:updateCredentialUserLabelError\", error);\n }\n };\n\n return (\n \n \n \n {isEditable ? (\n <>\n
\n
\n
\n \n ) : (\n <>\n {credential.userLabel}\n
}\n />\n \n )}\n
\n \n );\n};\n","import { FormGroup } from \"@patternfly/react-core\";\nimport { Controller, useFormContext } from \"react-hook-form\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { HelpItem } from \"ui-shared\";\nimport { TimeSelector } from \"../../components/time-selector/TimeSelector\";\nimport { credResetFormDefaultValues } from \"./ResetCredentialDialog\";\n\nexport const LifespanField = () => {\n const { t } = useTranslation(\"users\");\n const { control } = useFormContext();\n\n return (\n (\n ({\n defaultValues: credResetFormDefaultValues,\n });\n const { handleSubmit, control } = form;\n\n const resetActionWatcher = useWatch({\n control,\n name: \"actions\",\n });\n const resetIsNotDisabled = !isEmpty(resetActionWatcher);\n\n const { addAlert, addError } = useAlerts();\n\n const sendCredentialsResetEmail = async ({\n actions,\n lifespan,\n }: CredentialResetForm) => {\n if (isEmpty(actions)) {\n return;\n }\n\n try {\n await adminClient.users.executeActionsEmail({\n id: userId,\n actions,\n lifespan,\n });\n addAlert(t(\"credentialResetEmailSuccess\"), AlertVariant.success);\n onClose();\n } catch (error) {\n addError(\"users:credentialResetEmailError\", error);\n }\n };\n\n return (\n {\n handleSubmit(sendCredentialsResetEmail)();\n }}\n confirmButtonDisabled={!resetIsNotDisabled}\n >\n \n \n \n \n \n );\n};\n","import type UserRepresentation from \"@keycloak/keycloak-admin-client/lib/defs/userRepresentation\";\nimport {\n AlertVariant,\n ButtonVariant,\n Form,\n FormGroup,\n Switch,\n ValidatedOptions,\n} from \"@patternfly/react-core\";\nimport { Controller, useForm } from \"react-hook-form\";\nimport { useTranslation } from \"react-i18next\";\nimport { HelpItem } from \"ui-shared\";\n\nimport { adminClient } from \"../../admin-client\";\nimport { useAlerts } from \"../../components/alert/Alerts\";\nimport {\n ConfirmDialogModal,\n useConfirmDialog,\n} from \"../../components/confirm-dialog/ConfirmDialog\";\nimport { PasswordInput } from \"../../components/password-input/PasswordInput\";\nimport useToggle from \"../../utils/useToggle\";\n\ntype ResetPasswordDialogProps = {\n user: UserRepresentation;\n isResetPassword: boolean;\n refresh: () => void;\n onClose: () => void;\n};\n\nexport type CredentialsForm = {\n password: string;\n passwordConfirmation: string;\n temporaryPassword: boolean;\n};\n\nconst credFormDefaultValues: CredentialsForm = {\n password: \"\",\n passwordConfirmation: \"\",\n temporaryPassword: true,\n};\n\nexport const ResetPasswordDialog = ({\n user,\n isResetPassword,\n refresh,\n onClose,\n}: ResetPasswordDialogProps) => {\n const { t } = useTranslation(\"users\");\n const {\n register,\n control,\n formState: { isValid, errors },\n watch,\n handleSubmit,\n clearErrors,\n setError,\n } = useForm({\n defaultValues: credFormDefaultValues,\n mode: \"onChange\",\n });\n\n const [confirm, toggle] = useToggle(true);\n const password = watch(\"password\", \"\");\n const passwordConfirmation = watch(\"passwordConfirmation\", \"\");\n\n const { addAlert, addError } = useAlerts();\n\n const [toggleConfirmSaveModal, ConfirmSaveModal] = useConfirmDialog({\n titleKey: isResetPassword\n ? \"users:resetPasswordConfirm\"\n : \"users:setPasswordConfirm\",\n messageKey: isResetPassword\n ? t(\"resetPasswordConfirmText\", { username: user.username })\n : t(\"setPasswordConfirmText\", { username: user.username }),\n continueButtonLabel: isResetPassword\n ? \"users:resetPassword\"\n : \"users:savePassword\",\n continueButtonVariant: ButtonVariant.danger,\n onConfirm: () => handleSubmit(saveUserPassword)(),\n });\n\n const saveUserPassword = async ({\n password,\n temporaryPassword,\n }: CredentialsForm) => {\n try {\n await adminClient.users.resetPassword({\n id: user.id!,\n credential: {\n temporary: temporaryPassword,\n type: \"password\",\n value: password,\n },\n });\n const credentials = await adminClient.users.getCredentials({\n id: user.id!,\n });\n const credentialLabel = credentials.find((c) => c.type === \"password\");\n if (credentialLabel) {\n await adminClient.users.updateCredentialLabel(\n {\n id: user.id!,\n credentialId: credentialLabel.id!,\n },\n t(\"defaultPasswordLabel\"),\n );\n }\n addAlert(\n isResetPassword\n ? t(\"resetCredentialsSuccess\")\n : t(\"savePasswordSuccess\"),\n AlertVariant.success,\n );\n refresh();\n } catch (error) {\n addError(\n isResetPassword\n ? \"users:resetPasswordError\"\n : \"users:savePasswordError\",\n error,\n );\n }\n\n onClose();\n };\n\n const { onChange, ...rest } = register(\"password\", { required: true });\n return (\n <>\n \n \n \n {\n onChange(e);\n if (passwordConfirmation !== e.currentTarget.value) {\n setError(\"passwordConfirmation\", {\n message: t(\"confirmPasswordDoesNotMatch\").toString(),\n });\n } else {\n clearErrors(\"passwordConfirmation\");\n }\n }}\n {...rest}\n />\n \n \n \n value === password ||\n t(\"confirmPasswordDoesNotMatch\").toString(),\n })}\n />\n \n (\n ({});\n const [isResetPassword, setIsResetPassword] = useState(false);\n const [isUserLabelEdit, setIsUserLabelEdit] = useState<{\n status: boolean;\n rowKey: string;\n }>();\n\n const bodyRef = useRef(null);\n const [state, setState] = useState({\n draggedItemId: \"\",\n draggingToItemIndex: -1,\n dragging: false,\n tempItemOrder: [\"\"],\n });\n\n useFetch(\n () => adminClient.users.getCredentials({ id: user.id! }),\n (credentials) => {\n setUserCredentials(credentials);\n\n const groupedCredentials = credentials.reduce((r, a) => {\n r[a.type!] = r[a.type!] || [];\n r[a.type!].push(a);\n return r;\n }, Object.create(null));\n\n const groupedCredentialsArray = Object.keys(groupedCredentials).map(\n (key) => ({ key, value: groupedCredentials[key] }),\n );\n\n setGroupedUserCredentials(\n groupedCredentialsArray.map((groupedCredential) => ({\n ...groupedCredential,\n isExpanded: false,\n })),\n );\n },\n [key],\n );\n\n const passwordTypeFinder = userCredentials.find(\n (credential) => credential.type === \"password\",\n );\n\n const toggleModal = () => setIsOpen(!isOpen);\n\n const toggleCredentialsResetModal = () => {\n setOpenCredentialReset(!openCredentialReset);\n };\n\n const resetPassword = () => {\n setIsResetPassword(true);\n toggleModal();\n };\n\n const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({\n titleKey: t(\"deleteCredentialsConfirmTitle\"),\n messageKey: t(\"deleteCredentialsConfirm\"),\n continueButtonLabel: t(\"common:delete\"),\n continueButtonVariant: ButtonVariant.danger,\n onConfirm: async () => {\n try {\n await adminClient.users.deleteCredential({\n id: user.id!,\n credentialId: selectedCredential.id!,\n });\n addAlert(t(\"deleteCredentialsSuccess\"), AlertVariant.success);\n setKey((key) => key + 1);\n } catch (error) {\n addError(\"users:deleteCredentialsError\", error);\n }\n },\n });\n\n const Row = ({ credential }: { credential: CredentialRepresentation }) => (\n {\n setSelectedCredential(credential);\n toggleDeleteDialog();\n }}\n resetPassword={resetPassword}\n >\n {\n setIsUserLabelEdit({\n status: !isUserLabelEdit?.status,\n rowKey: credential.id!,\n });\n if (isUserLabelEdit?.status) {\n refresh();\n }\n }}\n />\n \n );\n\n const itemOrder = useMemo(\n () =>\n groupedUserCredentials.flatMap((groupedCredential) => [\n groupedCredential.value.map(({ id }) => id).toString(),\n ...(groupedCredential.isExpanded\n ? groupedCredential.value.map((c) => c.id!)\n : []),\n ]),\n [groupedUserCredentials],\n );\n\n const onDragStart = (evt: ReactDragEvent) => {\n evt.dataTransfer.effectAllowed = \"move\";\n evt.dataTransfer.setData(\"text/plain\", evt.currentTarget.id);\n const draggedItemId = evt.currentTarget.id;\n evt.currentTarget.classList.add(styles.modifiers.ghostRow);\n evt.currentTarget.setAttribute(\"aria-pressed\", \"true\");\n setState({ ...state, draggedItemId, dragging: true });\n };\n\n const moveItem = (items: string[], targetItem: string, toIndex: number) => {\n const fromIndex = items.indexOf(targetItem);\n if (fromIndex === toIndex) {\n return items;\n }\n const result = [...items];\n result.splice(toIndex, 0, result.splice(fromIndex, 1)[0]);\n return result;\n };\n\n const move = (itemOrder: string[]) => {\n if (!bodyRef.current) return;\n const ulNode = bodyRef.current;\n const nodes = Array.from(ulNode.children);\n if (nodes.every(({ id }, i) => id === itemOrder[i])) {\n return;\n }\n ulNode.replaceChildren();\n itemOrder.forEach((itemId) => {\n ulNode.appendChild(nodes.find(({ id }) => id === itemId)!);\n });\n };\n\n const onDragCancel = () => {\n if (!bodyRef.current) return;\n Array.from(bodyRef.current.children).forEach((el) => {\n el.classList.remove(styles.modifiers.ghostRow);\n el.setAttribute(\"aria-pressed\", \"false\");\n });\n setState({\n ...state,\n draggedItemId: \"\",\n draggingToItemIndex: -1,\n dragging: false,\n });\n };\n\n const onDragLeave = (evt: ReactDragEvent) => {\n if (!isValidDrop(evt)) {\n move(itemOrder);\n setState({ ...state, draggingToItemIndex: -1 });\n }\n };\n\n const isValidDrop = (evt: ReactDragEvent) => {\n if (!bodyRef.current) return false;\n const ulRect = bodyRef.current.getBoundingClientRect();\n return (\n evt.clientX > ulRect.x &&\n evt.clientX < ulRect.x + ulRect.width &&\n evt.clientY > ulRect.y &&\n evt.clientY < ulRect.y + ulRect.height\n );\n };\n\n const onDrop = (evt: ReactDragEvent) => {\n if (isValidDrop(evt)) {\n onDragFinish(state.draggedItemId, state.tempItemOrder);\n } else {\n onDragCancel();\n }\n };\n\n const onDragOver = (evt: ReactDragEvent) => {\n evt.preventDefault();\n const td = evt.target as HTMLTableCellElement;\n const curListItem = td.closest(\"tr\");\n if (\n !curListItem ||\n (bodyRef.current && !bodyRef.current.contains(curListItem)) ||\n curListItem.id === state.draggedItemId\n ) {\n return;\n } else {\n const dragId = curListItem.id;\n const draggingToItemIndex = Array.from(\n bodyRef.current?.children || [],\n ).findIndex((item) => item.id === dragId);\n if (draggingToItemIndex === state.draggingToItemIndex) {\n return;\n }\n const tempItemOrder = moveItem(\n itemOrder,\n state.draggedItemId,\n draggingToItemIndex,\n );\n move(tempItemOrder);\n setState({\n ...state,\n draggingToItemIndex,\n tempItemOrder,\n });\n }\n };\n\n const onDragEnd = ({ target }: ReactDragEvent) => {\n if (!(target instanceof HTMLTableRowElement)) {\n return;\n }\n target.classList.remove(styles.modifiers.ghostRow);\n target.setAttribute(\"aria-pressed\", \"false\");\n setState({\n ...state,\n draggedItemId: \"\",\n draggingToItemIndex: -1,\n dragging: false,\n });\n };\n\n const onDragFinish = async (dragged: string, newOrder: string[]) => {\n const oldIndex = itemOrder.findIndex((key) => key === dragged);\n const newIndex = newOrder.findIndex((key) => key === dragged);\n const times = newIndex - oldIndex;\n\n const ids = dragged.split(\",\");\n\n try {\n for (const id of ids)\n for (let index = 0; index < Math.abs(times); index++) {\n if (times > 0) {\n await adminClient.users.moveCredentialPositionDown({\n id: user.id!,\n credentialId: id,\n newPreviousCredentialId: itemOrder[newIndex],\n });\n } else {\n await adminClient.users.moveCredentialPositionUp({\n id: user.id!,\n credentialId: id,\n });\n }\n }\n\n refresh();\n addAlert(t(\"users:updatedCredentialMoveSuccess\"), AlertVariant.success);\n } catch (error) {\n addError(\"users:updatedCredentialMoveError\", error);\n }\n };\n\n const useFederatedCredentials = user.federationLink || user.origin;\n const [credentialTypes, setCredentialTypes] = useState([]);\n\n useFetch(\n () => adminClient.users.getUserStorageCredentialTypes({ id: user.id! }),\n setCredentialTypes,\n [],\n );\n\n if (!credentialTypes) {\n return setIsOpen(false)}\n />\n )}\n {openCredentialReset && (\n setOpenCredentialReset(false)}\n />\n )}\n setOpenCredentialReset(true)}\n >\n {t(\"credentialResetBtn\")}\n \n )}\n {userCredentials.length !== 0 && passwordTypeFinder === undefined && (\n <>\n {\n setIsOpen(true);\n }}\n >\n {t(\"setPassword\")}\n \n \n \n \n \n \n \n {t(\"type\")} \n {t(\"userLabel\")} \n {t(\"data\")} \n \n \n \n {groupedUserCredentials.map((groupedCredential, rowIndex) => (\n \n id).toString()}\n draggable={groupedUserCredentials.length > 1}\n onDrop={onDrop}\n onDragEnd={onDragEnd}\n onDragStart={onDragStart}\n >\n id,\n )}`,\n }}\n />\n {groupedCredential.value.length > 1 ? (\n {\n const rows = groupedUserCredentials.map(\n (credential, index) =>\n index === rowIndex\n ? {\n ...credential,\n isExpanded: !credential.isExpanded,\n }\n : credential,\n );\n setGroupedUserCredentials(rows);\n },\n }}\n />\n ) : (\n \n {toUpperCase(groupedCredential.key)}\n \n {groupedCredential.value.length <= 1 &&\n groupedCredential.value.map((credential) => (\n |
\n ))}\n \n {groupedCredential.isExpanded &&\n groupedCredential.value.map((credential) => (\n \n id,\n )}`,\n }}\n />\n \n {toUpperCase(credential.type!)}\n \n |
\n \n ))}\n \n ))}\n \n \n \n )}\n {useFederatedCredentials && hasCredentialTypes && (\n \n \n \n \n {t(\"type\")} \n {t(\"providedBy\")} \n \n \n \n {credentialTypes.map((credential) => (\n \n \n {credential} \n \n \n \n {credential === \"password\" && (\n \n \n {t(\"setPassword\")}\n \n \n )}\n \n ))}\n \n \n \n )}\n {emptyState && (\n (\n [],\n );\n\n const [isDirectMembership, setDirectMembership] = useState(true);\n const [directMembershipList, setDirectMembershipList] = useState<\n GroupRepresentation[]\n >([]);\n const [open, setOpen] = useState(false);\n\n const { enabled } = useHelp();\n\n const { hasAccess } = useAccess();\n const isManager = hasAccess(\"manage-users\");\n\n const alphabetize = (groupsList: GroupRepresentation[]) => {\n return sortBy(groupsList, (group) => group.path?.toUpperCase());\n };\n\n const loader = async (first?: number, max?: number, search?: string) => {\n const params: { [name: string]: string | number } = {\n first: first!,\n max: max!,\n };\n\n const searchParam = search || \"\";\n if (searchParam) {\n params.search = searchParam;\n }\n\n const joinedUserGroups = await adminClient.users.listGroups({\n ...params,\n id: user.id!,\n });\n\n setDirectMembershipList([...joinedUserGroups]);\n\n const indirect: GroupRepresentation[] = [];\n if (!isDirectMembership)\n joinedUserGroups.forEach((g) => {\n const paths = g.path?.substring(1).split(\"/\").slice(0, -1) || [];\n indirect.push(\n ...paths.map((p) => ({\n name: p,\n path: g.path?.substring(0, g.path.indexOf(p) + p.length),\n })),\n );\n });\n\n return alphabetize(uniqBy([...joinedUserGroups, ...indirect], \"path\"));\n };\n\n const toggleModal = () => {\n setOpen(!open);\n };\n\n const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({\n titleKey: t(\"leaveGroup\", {\n count: selectedGroups.length,\n name: selectedGroups[0]?.name,\n }),\n messageKey: t(\"leaveGroupConfirmDialog\", {\n count: selectedGroups.length,\n groupname: selectedGroups[0]?.name,\n username: user.username,\n }),\n continueButtonLabel: \"leave\",\n continueButtonVariant: ButtonVariant.danger,\n onConfirm: async () => {\n try {\n await Promise.all(\n selectedGroups.map((group) =>\n adminClient.users.delFromGroup({\n id: user.id!,\n groupId: group.id!,\n }),\n ),\n );\n\n addAlert(t(\"removedGroupMembership\"), AlertVariant.success);\n } catch (error) {\n addError(\"users:removedGroupMembershipError\", error);\n }\n refresh();\n },\n });\n\n const leave = (group: GroupRepresentation[]) => {\n setSelectedGroups(group);\n toggleDeleteDialog();\n };\n\n const addGroups = async (groups: GroupRepresentation[]): Promise => {\n try {\n await Promise.all(\n groups.map((group) =>\n adminClient.users.addToGroup({\n id: user.id!,\n groupId: group.id!,\n }),\n ),\n );\n\n addAlert(t(\"addedGroupMembership\"), AlertVariant.success);\n } catch (error) {\n addError(\"users:addedGroupMembershipError\", error);\n }\n refresh();\n };\n\n return (\n <>\n setOpen(false)}\n onConfirm={async (groups = []) => {\n await addGroups(groups);\n setOpen(false);\n }}\n />\n )}\n \n isDirectMembership\n ? setSelectedGroups(groups)\n : setSelectedGroups(\n intersectionBy(groups, directMembershipList, \"id\"),\n )\n }\n isRowDisabled={(group) =>\n !isDirectMembership &&\n directMembershipList.every((item) => item.id !== group.id)\n }\n toolbarItem={\n <>\n \n {t(\"joinGroup\")}\n \n {\n setDirectMembership(!isDirectMembership);\n refresh();\n }}\n isChecked={isDirectMembership}\n className=\"direct-membership-check\"\n />\n leave(selectedGroups)}\n data-testid=\"leave-group-button\"\n variant=\"link\"\n isDisabled={selectedGroups.length === 0}\n >\n {t(\"leave\")}\n \n\n {enabled && (\n {t(\"whoWillAppearPopoverText\")} 