@isoftdata/svelte-user-configuration 2.0.3 → 2.0.4

package/README.md

@@ -1,161 +1,161 @@
-# Svelte UserConfiguration
-
-This Svelte component provides a user configuration interface, including user account details, site access, group membership, and permissions.
-
-![Screenshot of the attachment component](screenshot.png?raw=true "Screenshot")
-![Screenshot of the attachment component](pre.png?raw=true "Screenshot")
-## Install
-
-```sh
-pnpm i @isoftdata/svelte-user-configuration
-```
-
-## Breaking changes
-
-### 2.0.0
-- Require Svelte 5
-- Slots -> Snippets
-- Events -> Callbacks
-
-## Props
-
-### User Account Properties
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `userAccount` | `UserAccount` | ✅ | - | The user account information. |
-| `canToggleActive` | boolean | ❌ | `true` | Whether the user can be activated/deactivated. |
-| `canEditAccountInfo` | boolean | ❌ | `true` | Whether account details can be edited. |
-| `doSendPasswordRecoveryToken` | boolean | ❌ | `false` | Whether to allow sending password recovery tokens. |
-| `hasPermissionToChangePassword` | boolean | ❌ | `false` | Whether the user has permission to change passwords. |
-| `myAccountMode` | boolean | ❌ | `false` | When `true`, admin controls will be hidden/disabled. This is designed to be used when using the user account info component standalone so the current session user can edit their own account info, including first & last name, password recovery email, & password. |
-| `passwordValidationRules` | `validationRules` of the [PasswordFields](<https://github.com/ISoft-Data-Systems/svelte-component-password-fields>) component | ❌ | `undefined` | Passwords rules to be enforced during password change. | 
-
-> The `passwordValidationRules` prop will be used during password setting when `hasPermissionToChangePassword` or `myAccountMode` are `true` .
-
-### Site Access Properties
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `userSites` | `UserSites` | ✅ | - | List of sites the user has access to. |
-| `canEditSiteAccess` | boolean | ❌ | `true` | Whether site access can be edited. |
-
-### Group Membership Properties
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `groupMembership` | `GroupMembership` | ✅ | - | The user's group membership information. |
-| `canEditGroupMembership` | boolean | ❌ | `true` | Whether group memberships can be edited. |
-
-### Permission List Properties
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `permissions` | `Permissions` | ✅ | - | The list of permissions for the user. |
-| `permissionValueMap` | `PermissionValueMap` | ✅ | `new SvelteMap()` | A mapping of permissions to their values. **Note this *must* be a `SvelteMap`** or reactivity will not work. |
-| `groupPermissionValueMap` | `GroupPermissionValueMap` | ❌ | `undefined` | A mapping of group-based permissions. |
-
-### Other Properties
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `siteLabel` | `SiteLabel` | ❌ | `"Site"` | Label for the site. |
-| `userAccountInfoIcon` | `IconName` | ❌ | `"user"` | Icon for the user account section. |
-| `groupMembershipIcon` | `IconName` | ❌ | `"users"` | Icon for the group membership section. |
-| `permissionListIcon` | `IconName` | ❌ | `"user-lock"` | Icon for the permission list section. |
-| `userSiteAccessIcon` | `IconName` | ❌ | `"industry-windows"` | Icon for the site access section. |
-| `permissionListCardHeaderTitle` | `PermissionListCardHeaderTitle` | ❌ | `"Permissions"` | Title for the permission list card header. |
-| `usernameInput` | `HTMLInputElement \| undefined` | ❌ | `undefined` | Reference to the username input element. |
-
-### Callbacks
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `error` | `ErrorFn` | Callback for handling errors. |
-| `success` | `SuccessFn` | Callback for handling success messages. |
-| `deactivateUser` | `DeactivateUserFn` | Function to deactivate a user. |
-| `confirmPasswordSet` | `ConfirmPasswordSetFn` | Function called when a password is set. |
-| `accountInfoChanged` | `AccountInfoChangedFn` | Function called when account info changes. |
-| `sendPasswordRecoveryToken` | `SendPasswordRecoveryTokenFn` | Function to send password recovery token. |
-| `generateNewActivationPIN` | `GenerateNewActivationPINFn` | Function to generate a new activation PIN. |
-| `permissionValueChange` | `PermissionValueChangeFn` | Function called when permissions change. |
-| `siteAccessChange` | `SiteAccessChangeFn` | Function called when site access is changed. |
-| `groupMembershipChange` | `GroupMembershipChangeFn` | Function called when group membership changes. |
-
-## Snippets
-This component provides snippets for injecting additional content.
-
-| Snippet Name | Description |
-|-----------|-------------|
-| `userAccountInfo` | Slot at the end of the `userAccountInfo` component's card body |
-| `siteAccess` | Slot at the end of the `siteAccess` component's card body |
-| `userGroupMembership` | Slot at the end of the `userGroupMembership` component's card body |
-| `permissionList` | Slot at the end of the `permissionList` component's card body |
-
-## Usage Example in Svelte 5 w/ Runes
-
-```svelte
-<script lang="ts">
-	import { UserConfiguration, getGroupHighestPermissionValueMap } from '@isoftdata/svelte-user-configuration'
-
-	interface Props {
-		plants: PlantsForDropdown$result['plants']['data']
-		groups: Array<Group>
-		permissions: UserConfigurationData$result['permissions']['data']
-		userAccount: UserAccount
-		permissionValueMap?: PermissionValueMap
-		groupPermissionMap?: GroupPermissionMap
-		authorizedSitesSet?: any
-		groupMembershipSet?: any
-	}
-
-	let {
-		plants,
-		groups,
-		permissions,
-		userAccount = $bindable(),
-		permissionValueMap = $bindable(new SvelteMap()),
-		groupPermissionMap = new SvelteMap(),
-		authorizedSitesSet = $bindable(new SvelteSet<number>()),
-		groupMembershipSet = $bindable(new SvelteSet<number>()),
-	}: Props = $props()
-
-	let userSites = $derived(
-		plants.map(({ id, code, name }) => {
-			return { id, code, name, isAuthorized: authorizedSitesSet.has(id) }
-		}),
-	)
-	let groupMembership = $derived(
-		groups.map(({ id, name }) => {
-			return { id, name, isMember: groupMembershipSet.has(id) }
-		}),
-	)
-	let groupPermissionValueMap = $derived(getGroupHighestPermissionValueMap(groupMembershipSet, groupPermissionMap))
-</script>
-
-<UserConfiguration
-	siteLabel="Plant"
-	bind:userAccount
-	bind:usernameInput
-	bind:doSendPasswordRecoveryToken={sendPasswordRecoveryToken}
-	{userSites}
-	{groupMembership}
-	{permissions}
-	{permissionValueMap}
-	{groupPermissionValueMap}
-	siteAccessChange={async site => {
-		site.isAuthorized ? authorizedSitesSet.add(site.id) : authorizedSitesSet.delete(site.id)
-		authorizedSitesSet = new Set(authorizedSitesSet)
-	}}
-	groupMembershipChange={async ({ id, isMember }) => {
-		isMember ? groupMembershipSet.add(id) : groupMembershipSet.delete(id)
-		groupMembershipSet = new Set(groupMembershipSet)
-	}}
-	permissionValueChange={async ({ permissionIds, value }) => {
-		for (const id of permissionIds) {
-			permissionValueMap.set(id, value)
-		}
-		permissionValueMap = new SvelteMap(permissionValueMap)
-	}}
-/>
-```
+# Svelte UserConfiguration
+
+This Svelte component provides a user configuration interface, including user account details, site access, group membership, and permissions.
+
+![Screenshot of the attachment component](screenshot.png?raw=true "Screenshot")
+![Screenshot of the attachment component](pre.png?raw=true "Screenshot")
+## Install
+
+```sh
+pnpm i @isoftdata/svelte-user-configuration
+```
+
+## Breaking changes
+
+### 2.0.0
+- Require Svelte 5
+- Slots -> Snippets
+- Events -> Callbacks
+
+## Props
+
+### User Account Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `userAccount` | `UserAccount` | ✅ | - | The user account information. |
+| `canToggleActive` | boolean | ❌ | `true` | Whether the user can be activated/deactivated. |
+| `canEditAccountInfo` | boolean | ❌ | `true` | Whether account details can be edited. |
+| `doSendPasswordRecoveryToken` | boolean | ❌ | `false` | Whether to allow sending password recovery tokens. |
+| `hasPermissionToChangePassword` | boolean | ❌ | `false` | Whether the user has permission to change passwords. |
+| `myAccountMode` | boolean | ❌ | `false` | When `true`, admin controls will be hidden/disabled. This is designed to be used when using the user account info component standalone so the current session user can edit their own account info, including first & last name, password recovery email, & password. |
+| `passwordValidationRules` | `validationRules` of the [PasswordFields](<https://github.com/ISoft-Data-Systems/svelte-component-password-fields>) component | ❌ | `undefined` | Passwords rules to be enforced during password change. | 
+
+> The `passwordValidationRules` prop will be used during password setting when `hasPermissionToChangePassword` or `myAccountMode` are `true` .
+
+### Site Access Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `userSites` | `UserSites` | ✅ | - | List of sites the user has access to. |
+| `canEditSiteAccess` | boolean | ❌ | `true` | Whether site access can be edited. |
+
+### Group Membership Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `groupMembership` | `GroupMembership` | ✅ | - | The user's group membership information. |
+| `canEditGroupMembership` | boolean | ❌ | `true` | Whether group memberships can be edited. |
+
+### Permission List Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `permissions` | `Permissions` | ✅ | - | The list of permissions for the user. |
+| `permissionValueMap` | `PermissionValueMap` | ✅ | `new SvelteMap()` | A mapping of permissions to their values. **Note this *must* be a `SvelteMap`** or reactivity will not work. |
+| `groupPermissionValueMap` | `GroupPermissionValueMap` | ❌ | `undefined` | A mapping of group-based permissions. |
+
+### Other Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `siteLabel` | `SiteLabel` | ❌ | `"Site"` | Label for the site. |
+| `userAccountInfoIcon` | `IconName` | ❌ | `"user"` | Icon for the user account section. |
+| `groupMembershipIcon` | `IconName` | ❌ | `"users"` | Icon for the group membership section. |
+| `permissionListIcon` | `IconName` | ❌ | `"user-lock"` | Icon for the permission list section. |
+| `userSiteAccessIcon` | `IconName` | ❌ | `"industry-windows"` | Icon for the site access section. |
+| `permissionListCardHeaderTitle` | `PermissionListCardHeaderTitle` | ❌ | `"Permissions"` | Title for the permission list card header. |
+| `usernameInput` | `HTMLInputElement \| undefined` | ❌ | `undefined` | Reference to the username input element. |
+
+### Callbacks
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `error` | `ErrorFn` | Callback for handling errors. |
+| `success` | `SuccessFn` | Callback for handling success messages. |
+| `deactivateUser` | `DeactivateUserFn` | Function to deactivate a user. |
+| `confirmPasswordSet` | `ConfirmPasswordSetFn` | Function called when a password is set. |
+| `accountInfoChanged` | `AccountInfoChangedFn` | Function called when account info changes. |
+| `sendPasswordRecoveryToken` | `SendPasswordRecoveryTokenFn` | Function to send password recovery token. |
+| `generateNewActivationPIN` | `GenerateNewActivationPINFn` | Function to generate a new activation PIN. |
+| `permissionValueChange` | `PermissionValueChangeFn` | Function called when permissions change. |
+| `siteAccessChange` | `SiteAccessChangeFn` | Function called when site access is changed. |
+| `groupMembershipChange` | `GroupMembershipChangeFn` | Function called when group membership changes. |
+
+## Snippets
+This component provides snippets for injecting additional content.
+
+| Snippet Name | Description |
+|-----------|-------------|
+| `userAccountInfo` | Slot at the end of the `userAccountInfo` component's card body |
+| `siteAccess` | Slot at the end of the `siteAccess` component's card body |
+| `userGroupMembership` | Slot at the end of the `userGroupMembership` component's card body |
+| `permissionList` | Slot at the end of the `permissionList` component's card body |
+
+## Usage Example in Svelte 5 w/ Runes
+
+```svelte
+<script lang="ts">
+	import { UserConfiguration, getGroupHighestPermissionValueMap } from '@isoftdata/svelte-user-configuration'
+
+	interface Props {
+		plants: PlantsForDropdown$result['plants']['data']
+		groups: Array<Group>
+		permissions: UserConfigurationData$result['permissions']['data']
+		userAccount: UserAccount
+		permissionValueMap?: PermissionValueMap
+		groupPermissionMap?: GroupPermissionMap
+		authorizedSitesSet?: any
+		groupMembershipSet?: any
+	}
+
+	let {
+		plants,
+		groups,
+		permissions,
+		userAccount = $bindable(),
+		permissionValueMap = $bindable(new SvelteMap()),
+		groupPermissionMap = new SvelteMap(),
+		authorizedSitesSet = $bindable(new SvelteSet<number>()),
+		groupMembershipSet = $bindable(new SvelteSet<number>()),
+	}: Props = $props()
+
+	let userSites = $derived(
+		plants.map(({ id, code, name }) => {
+			return { id, code, name, isAuthorized: authorizedSitesSet.has(id) }
+		}),
+	)
+	let groupMembership = $derived(
+		groups.map(({ id, name }) => {
+			return { id, name, isMember: groupMembershipSet.has(id) }
+		}),
+	)
+	let groupPermissionValueMap = $derived(getGroupHighestPermissionValueMap(groupMembershipSet, groupPermissionMap))
+</script>
+
+<UserConfiguration
+	siteLabel="Plant"
+	bind:userAccount
+	bind:usernameInput
+	bind:doSendPasswordRecoveryToken={sendPasswordRecoveryToken}
+	{userSites}
+	{groupMembership}
+	{permissions}
+	{permissionValueMap}
+	{groupPermissionValueMap}
+	siteAccessChange={async site => {
+		site.isAuthorized ? authorizedSitesSet.add(site.id) : authorizedSitesSet.delete(site.id)
+		authorizedSitesSet = new Set(authorizedSitesSet)
+	}}
+	groupMembershipChange={async ({ id, isMember }) => {
+		isMember ? groupMembershipSet.add(id) : groupMembershipSet.delete(id)
+		groupMembershipSet = new Set(groupMembershipSet)
+	}}
+	permissionValueChange={async ({ permissionIds, value }) => {
+		for (const id of permissionIds) {
+			permissionValueMap.set(id, value)
+		}
+		permissionValueMap = new SvelteMap(permissionValueMap)
+	}}
+/>
+```

package/dist/DeactivateUserModal.svelte

@@ -1,59 +1,59 @@
-<script lang="ts">
-	import type { UserAccount } from './'
-	import type { i18n } from 'i18next'
-
-	import { getContext, tick } from 'svelte'
-	import { klona } from 'klona'
-	import { translate as defaultTranslate } from '@isoftdata/utility-string'
-
-	import Modal from '@isoftdata/svelte-modal'
-	import TextArea from '@isoftdata/svelte-textarea'
-
-	let show: boolean = $state(false)
-	let userAccount: UserAccount | undefined = $state()
-	let lockNotes: UserAccount['lockNotes'] = $state(null)
-	let textarea: HTMLTextAreaElement | undefined = $state()
-
-	interface Props {
-		deactivateUser?: ((user: { id: UserAccount['id']; lockNotes: UserAccount['lockNotes'] }) => void | Promise<void>) | undefined;
-	}
-
-	let { deactivateUser = undefined }: Props = $props();
-	export async function open(userAccountCtx: UserAccount) {
-		userAccount = klona(userAccountCtx)
-		lockNotes = userAccount.lockNotes
-		show = true
-		await tick()
-		textarea?.select()
-	}
-
-	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
-</script>
-
-<Modal
-	title={translate('common:deactivate', 'Deactivate {{- userName}}', { userName: userAccount?.name ?? '' })}
-	confirmButtonText={translate('common:deactivate', 'Deactivate')}
-	confirmButtonColor="danger"
-	cancelButtonText={translate('common:close', 'Close')}
-	confirmButtonType="submit"
-	confirmButtonFormId="deactivateUserModalForm"
-	close={() => (show = false)}
-	bind:show
->
-	<form
-		id="deactivateUserModalForm"
-		onsubmit={async e => {
-			e.preventDefault()
-			userAccount ? await deactivateUser?.({ id: userAccount.id, lockNotes }) : undefined
-			show = false
-		}}
-	>
-		<TextArea
-			bind:textarea
-			label={translate('configuration.user.accountInfo.lockNote', 'Lock Notes')}
-			labelClass="py-0 mb-2"
-			style="min-height:83px;"
-			bind:value={lockNotes}
-		/>
-	</form>
-</Modal>
+<script lang="ts">
+	import type { UserAccount } from './'
+	import type { i18n } from 'i18next'
+
+	import { getContext, tick } from 'svelte'
+	import { klona } from 'klona'
+	import { translate as defaultTranslate } from '@isoftdata/utility-string'
+
+	import Modal from '@isoftdata/svelte-modal'
+	import TextArea from '@isoftdata/svelte-textarea'
+
+	let show: boolean = $state(false)
+	let userAccount: UserAccount | undefined = $state()
+	let lockNotes: UserAccount['lockNotes'] = $state(null)
+	let textarea: HTMLTextAreaElement | undefined = $state()
+
+	interface Props {
+		deactivateUser?: ((user: { id: UserAccount['id']; lockNotes: UserAccount['lockNotes'] }) => void | Promise<void>) | undefined;
+	}
+
+	let { deactivateUser = undefined }: Props = $props();
+	export async function open(userAccountCtx: UserAccount) {
+		userAccount = klona(userAccountCtx)
+		lockNotes = userAccount.lockNotes
+		show = true
+		await tick()
+		textarea?.select()
+	}
+
+	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
+</script>
+
+<Modal
+	title={translate('common:deactivate', 'Deactivate {{- userName}}', { userName: userAccount?.name ?? '' })}
+	confirmButtonText={translate('common:deactivate', 'Deactivate')}
+	confirmButtonColor="danger"
+	cancelButtonText={translate('common:close', 'Close')}
+	confirmButtonType="submit"
+	confirmButtonFormId="deactivateUserModalForm"
+	close={() => (show = false)}
+	bind:show
+>
+	<form
+		id="deactivateUserModalForm"
+		onsubmit={async e => {
+			e.preventDefault()
+			userAccount ? await deactivateUser?.({ id: userAccount.id, lockNotes }) : undefined
+			show = false
+		}}
+	>
+		<TextArea
+			bind:textarea
+			label={translate('configuration.user.accountInfo.lockNote', 'Lock Notes')}
+			labelClass="py-0 mb-2"
+			style="min-height:83px;"
+			bind:value={lockNotes}
+		/>
+	</form>
+</Modal>

package/dist/PasswordRecoveryModal.svelte

@@ -1,83 +1,83 @@
-<script lang="ts">
-	import type { i18n } from 'i18next'
-
-	import { getContext } from 'svelte'
-	import Modal from '@isoftdata/svelte-modal'
-	import Input from '@isoftdata/svelte-input'
-	import { translate as defaultTranslate } from '@isoftdata/utility-string'
-
-	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
-
-	interface Props {
-		sendPasswordRecoveryToken?: ((email: string | null) => void | Promise<void>) | undefined
-		doSendPasswordRecoveryToken: boolean
-	}
-
-	let { sendPasswordRecoveryToken = undefined, doSendPasswordRecoveryToken = $bindable() }: Props = $props()
-	let resetDate: Date | null | undefined = $state(undefined)
-	let email: string | null = $state(null)
-	let show: boolean = $state(false)
-
-	export function open(passwordRecoveryEmail: typeof email, lastResetDate: Date | null | undefined) {
-		email = passwordRecoveryEmail
-		resetDate = lastResetDate
-		show = true
-	}
-</script>
-
-<Modal
-	bind:show
-	title={translate('configuration.user.accountInfo.passwordRecovery.header', 'Password Recovery')}
-	confirmButtonText={translate(
-		'configuration.user.accountInfo.passwordManagementModal.requestResetToken',
-		'Request Reset Token',
-	)}
-	confirmButtonIcon="check"
-	confirmButtonDisabled={!email}
-	close={() => (show = false)}
-	confirmButtonType="submit"
-	confirmButtonFormId="passwordRecoveryForm"
->
-	<form
-		id="passwordRecoveryForm"
-		onsubmit={async event => {
-			event.preventDefault()
-			try {
-				doSendPasswordRecoveryToken = true
-				await sendPasswordRecoveryToken?.(email)
-				show = false
-			} catch (err) {
-				console.error(err)
-			}
-		}}
-	>
-		<div class="row">
-			<Input
-				label={translate(
-					'configuration.user.accountInfo.passwordManagementModal.lastPasswordSetDate',
-					'Last Password Set Date',
-				)}
-				value={resetDate?.toLocaleString() ?? ''}
-				labelParentClass="col-12 col-md-6 form-group mb-0"
-				readonly
-			/>
-			<Input
-				label={translate(
-					'configuration.user.accountInfo.passwordRecoveryModal.passwordRecoveryEmail',
-					'Password Recovery Email',
-				)}
-				value={email ?? ''}
-				labelParentClass="col-12 col-md-6 form-group mb-0"
-				readonly
-			/>
-			{#if !email}
-				<div class="alert alert-danger mt-3 mb-0">
-					{translate(
-						'configuration.user.accountInfo.passwordRecovery.noRecoveryEmail',
-						'No recovery email has been set for this user.',
-					)}
-				</div>
-			{/if}
-		</div>
-	</form>
-</Modal>
+<script lang="ts">
+	import type { i18n } from 'i18next'
+
+	import { getContext } from 'svelte'
+	import Modal from '@isoftdata/svelte-modal'
+	import Input from '@isoftdata/svelte-input'
+	import { translate as defaultTranslate } from '@isoftdata/utility-string'
+
+	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
+
+	interface Props {
+		sendPasswordRecoveryToken?: ((email: string | null) => void | Promise<void>) | undefined
+		doSendPasswordRecoveryToken: boolean
+	}
+
+	let { sendPasswordRecoveryToken = undefined, doSendPasswordRecoveryToken = $bindable() }: Props = $props()
+	let resetDate: Date | null | undefined = $state(undefined)
+	let email: string | null = $state(null)
+	let show: boolean = $state(false)
+
+	export function open(passwordRecoveryEmail: typeof email, lastResetDate: Date | null | undefined) {
+		email = passwordRecoveryEmail
+		resetDate = lastResetDate
+		show = true
+	}
+</script>
+
+<Modal
+	bind:show
+	title={translate('configuration.user.accountInfo.passwordRecovery.header', 'Password Recovery')}
+	confirmButtonText={translate(
+		'configuration.user.accountInfo.passwordManagementModal.requestResetToken',
+		'Request Reset Token',
+	)}
+	confirmButtonIcon="check"
+	confirmButtonDisabled={!email}
+	close={() => (show = false)}
+	confirmButtonType="submit"
+	confirmButtonFormId="passwordRecoveryForm"
+>
+	<form
+		id="passwordRecoveryForm"
+		onsubmit={async event => {
+			event.preventDefault()
+			try {
+				doSendPasswordRecoveryToken = true
+				await sendPasswordRecoveryToken?.(email)
+				show = false
+			} catch (err) {
+				console.error(err)
+			}
+		}}
+	>
+		<div class="row">
+			<Input
+				label={translate(
+					'configuration.user.accountInfo.passwordManagementModal.lastPasswordSetDate',
+					'Last Password Set Date',
+				)}
+				value={resetDate?.toLocaleString() ?? ''}
+				labelParentClass="col-12 col-md-6 form-group mb-0"
+				readonly
+			/>
+			<Input
+				label={translate(
+					'configuration.user.accountInfo.passwordRecoveryModal.passwordRecoveryEmail',
+					'Password Recovery Email',
+				)}
+				value={email ?? ''}
+				labelParentClass="col-12 col-md-6 form-group mb-0"
+				readonly
+			/>
+			{#if !email}
+				<div class="alert alert-danger mt-3 mb-0">
+					{translate(
+						'configuration.user.accountInfo.passwordRecovery.noRecoveryEmail',
+						'No recovery email has been set for this user.',
+					)}
+				</div>
+			{/if}
+		</div>
+	</form>
+</Modal>