@isoftdata/svelte-user-configuration

Svelte UserConfiguration

This Svelte component provides a user configuration interface, including user account details, site access, group membership, and permissions.

Install

npm 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.

Additionally, the validationRules & passwordIsValid props from the PasswordFields component can be passed and 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.

Slots

This component provides named slots for injecting additional content.

Slot 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

<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)
	}}
/>