@isoftdata/svelte-user-configuration 1.0.27 → 1.1.0

package/README.md

@@ -1,5 +1,7 @@
 # Svelte UserConfiguration
 
+This Svelte component provides a user configuration interface, including user account details, site access, group membership, and permissions.
+
 ## Install
 
 ```sh
@@ -7,23 +9,141 @@ npm i @isoftdata/svelte-user-configuration
 ```
 
 ## Props
-| Name | Type | Description | Default Value |
-|------|------|-------------|---------------|
-|      |      |             |               |
-|      |      |             |               |
-|      |      |             |               |
+
+### 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. |
+
+### 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 Map()` | A mapping of permissions to their values. |
+| `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
-* default - A brief description of the slot, if there is one
+This component provides named slots for injecting additional content.
 
-## Events
-* exampleEvent - A brief description of the event, if there are any
+| 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
 
-## Example
 ```svelte
 <script lang="ts">
-	import UserConfiguration from '@isoftdata/svelte-user-configuration'
+	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 prop='foo' />
+<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 Map(permissionValueMap)
+	}}
+/>
 ```

package/dist/DeactivateUserModal.svelte

@@ -1,5 +1,6 @@
 <script>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 = false;
@@ -14,7 +15,7 @@ export async function open(userAccountCtx) {
   await tick();
   textarea?.select();
 }
-const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+const { t: translate } = getContext("i18next") || { t: defaultTranslate };
 </script>
 
 <Modal

package/dist/PasswordRecoveryModal.svelte

@@ -1,7 +1,8 @@
 <script>import { getContext } from "svelte";
 import Modal from "@isoftdata/svelte-modal";
 import Input from "@isoftdata/svelte-input";
-const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+import { translate as defaultTranslate } from "@isoftdata/utility-string";
+const { t: translate } = getContext("i18next") || { t: defaultTranslate };
 export let sendPasswordRecoveryToken = void 0;
 export let doSendPasswordRecoveryToken;
 let resetDate = void 0;

package/dist/PasswordSetModal.svelte

@@ -1,8 +1,9 @@
-<script>import { tick, getContext } from "svelte";
+<script>import { klona } from "klona";
+import { tick, getContext } from "svelte";
 import Input from "@isoftdata/svelte-input";
 import Modal from "@isoftdata/svelte-modal";
 import PasswordFields from "@isoftdata/svelte-password-fields";
-import { klona } from "klona";
+import { translate as defaultTranslate } from "@isoftdata/utility-string";
 let show = false;
 let newPassword = "";
 let confirmPassword = "";
@@ -22,7 +23,7 @@ export async function open(userAccount) {
   await tick();
   input?.focus();
 }
-const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+const { t: translate } = getContext("i18next") || { t: defaultTranslate };
 </script>
 
 <Modal

package/dist/PermissionList.svelte

@@ -5,7 +5,8 @@ import Button from "@isoftdata/svelte-button";
 import Select from "@isoftdata/svelte-select";
 import { getEventValue } from "@isoftdata/browser-event";
 import { Table, Td } from "@isoftdata/svelte-table";
-const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+import { translate as defaultTranslate } from "@isoftdata/utility-string";
+const { t: translate } = getContext("i18next") || { t: defaultTranslate };
 export let permissions;
 export let siteLabel = "Site";
 export let permissionValueChange = void 0;

package/dist/UserAccountInfo.svelte

@@ -1,13 +1,15 @@
-<script>import { getContext } from "svelte";
+<script>import { getContext, tick } from "svelte";
 import Icon from "@isoftdata/svelte-icon";
 import Input from "@isoftdata/svelte-input";
-import { translate as defaultTranslate } from "@isoftdata/utility-string";
 import Button from "@isoftdata/svelte-button";
 import TextArea from "@isoftdata/svelte-textarea";
 import PasswordSetModal from "./PasswordSetModal.svelte";
+import { getEventValue } from "@isoftdata/browser-event";
 import PasswordFields from "@isoftdata/svelte-password-fields";
 import DeactivateUserModal from "./DeactivateUserModal.svelte";
 import PasswordRecoveryModal from "./PasswordRecoveryModal.svelte";
+import { translate as defaultTranslate } from "@isoftdata/utility-string";
+const { t: translate } = getContext("i18next") || { t: defaultTranslate };
 export let userAccount;
 export let icon = "user";
 export let canToggleActive = true;
@@ -23,12 +25,17 @@ export let doSendPasswordRecoveryToken = false;
 export let generateNewActivationPIN = () => Promise.resolve();
 export let usernameInput = void 0;
 export let cardHeight = 0;
+export let myAccountMode = false;
+export let passwordValidationRules = void 0;
+export let showPasswordChange = false;
 let isLoading = false;
 let passwordSetModal;
 let deactivateUserModal;
 let passwordRecoveryModal;
 let activationPINInput;
-const { t: translate } = getContext("i18next") || { t: defaultTranslate };
+let currentPasswordField;
+let cardTitle = translate("configuration.user.accountInfoHeader", "Account");
+let confirmPassword = "";
 async function getNewActivationPIN(sendEmail = false) {
   let confirmationMessage = sendEmail ? translate("configuration.user.permissions.sendNewActivationPINMessage", "Are you sure you want to send a new activation PIN? The user will receive an email with the new activation PIN.") : translate("configuration.user.permissions.generateNewActivationPINMessage", "Are you sure you want to generate a new activation PIN?");
   if (confirm(confirmationMessage)) {
@@ -83,9 +90,9 @@ $: isCreatingNewUser = userAccount.id === null;
 						{icon}
 						class="mr-1"
 					/>
-					{isCreatingNewUser ? translate('configuration.user.creatingNewAccountInfoHeader', 'New Account') : translate('configuration.user.accountInfoHeader', 'Account')}
+					{isCreatingNewUser ? translate('configuration.user.creatingNewAccountInfoHeader', 'New Account') : cardTitle}
 				</h5>
-				{#if !isCreatingNewUser && status === 'ACTIVE'}
+				{#if !myAccountMode && !isCreatingNewUser && status === 'ACTIVE'}
 					<Button
 						size="xs"
 						outline
@@ -96,7 +103,7 @@ $: isCreatingNewUser = userAccount.id === null;
 					>
 						<span>{translate('common:deactivate', 'Deactivate')}</span>
 					</Button>
-				{:else if (!isCreatingNewUser && status === 'DEACTIVATED') || status === 'LOCKED'}
+				{:else if !myAccountMode && ((!isCreatingNewUser && status === 'DEACTIVATED') || status === 'LOCKED')}
 					<Button
 						size="xs"
 						outline
@@ -160,6 +167,34 @@ $: isCreatingNewUser = userAccount.id === null;
 								>
 							{/if}
 						</div>
+					{:else if myAccountMode}
+						<div class="col-12">
+							<Button
+								size="sm"
+								outline
+								iconClass="key"
+								color={showPasswordChange ? 'danger' : 'primary'}
+								disabled={!canEditAccountInfo}
+								on:click={async () => {
+									showPasswordChange = !showPasswordChange
+									await tick()
+									if (showPasswordChange) {
+										currentPasswordField?.select()
+									} else {
+										//Clear the password fields
+										userAccount.currentPassword = ''
+										userAccount.newPassword = ''
+										confirmPassword = ''
+									}
+								}}
+							>
+								{#if !showPasswordChange}
+									{translate('configuration.user.changePassword', 'Change Password')}...
+								{:else}
+									{translate('configuration.user.cancelPasswordChange', 'Cancel Password Change')}
+								{/if}
+							</Button>
+						</div>
 					{:else}
 						<div class="col-12">
 							<Button
@@ -200,29 +235,33 @@ $: isCreatingNewUser = userAccount.id === null;
 							},
 						}}
 						bind:input={usernameInput}
+						readonly={myAccountMode || undefined}
+						tabindex={myAccountMode ? -1 : undefined}
 					/>
 				</div>
-				<div class="col-6">
+				<div class="col-12 col-md-6">
 					<Input
 						label={translate('configuration.user.accountInfo.firstName', 'First Name')}
 						bind:value={userAccount.firstName}
 						maxlength={100}
 					/>
 				</div>
-				<div class="col-6">
+				<div class="col-12 col-md-6">
 					<Input
 						label={translate('configuration.user.accountInfo.lastName', 'Last Name')}
 						bind:value={userAccount.lastName}
 						maxlength={100}
 					/>
 				</div>
-				<div class="col-12">
+				<div class="col-12 col-lg-6">
 					<Input
 						label={translate('configuration.user.accountInfo.workEmail', 'Work Email')}
 						bind:value={userAccount.workEmail}
 						autocomplete="email"
 						type="email"
 						inputmode="email"
+						readonly={myAccountMode || undefined}
+						tabindex={myAccountMode ? -1 : undefined}
 					/>
 					{#if workEmail && !isCreatingNewUser && status === 'PENDING_ACTIVATION'}
 						<Button
@@ -235,8 +274,19 @@ $: isCreatingNewUser = userAccount.id === null;
 						</Button>
 					{/if}
 				</div>
+				<div class="col-12 col-lg-6">
+					<Input
+						label={translate('configuration.user.accountInfo.passwordRecoveryModal.passwordRecoveryEmail', 'Password Recovery Email')}
+						bind:value={userAccount.recoveryEmail}
+						autocomplete="email"
+						type="email"
+						inputmode="email"
+						readonly={!myAccountMode || undefined}
+						tabindex={!myAccountMode ? -1 : undefined}
+					/>
+				</div>
 				<div class="col-12">
-					{#if !isCreatingNewUser}
+					{#if !isCreatingNewUser && !myAccountMode}
 						<TextArea
 							label={translate('configuration.user.accountInfo.lockNote', 'Lock Note')}
 							labelClass="py-0 mb-2"
@@ -244,16 +294,30 @@ $: isCreatingNewUser = userAccount.id === null;
 							bind:value={userAccount.lockNotes}
 							readonly
 						/>
-					{:else if hasPermissionToChangePassword}
+					{:else if (hasPermissionToChangePassword && !myAccountMode) || (myAccountMode && showPasswordChange)}
+						{#if myAccountMode}
+							<Input
+								bind:input={currentPasswordField}
+								label={translate('configuration.user.accountInfo.passwordManagementModal.currentPassword', 'Current Password')}
+								type="password"
+								value={userAccount.currentPassword ?? ''}
+								autocomplete="current-password"
+								on:change={e => (userAccount.currentPassword = getEventValue(e))}
+								required
+							/>
+						{/if}
 						<!-- TODO: When we migrate to Svelte 5, switch this and the other usage of PasswordFields to use a snippet-->
 						<PasswordFields
 							bind:password={userAccount.newPassword}
+							bind:confirmPassword
 							columnClass="col-12"
 							passwordLabel={translate('configuration.user.accountInfo.passwordManagementModal.newPassword', 'New Password')}
 							confirmPasswordLabel={translate('configuration.user.accountInfo.passwordManagementModal.confirmNewPassword', 'Confirm New Password')}
+							validationRules={passwordValidationRules}
 						/>
 					{/if}
 				</div>
+				<slot name="formFields"></slot>
 			</div>
 			<slot></slot>
 		</div>

package/dist/UserAccountInfo.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { ComponentProps } from 'svelte';
-import type { UserAccount, ConfirmPasswordSetFn, DeactivateUserFn, HTMLDivAttributes, IconName } from './';
+import type { UserAccount, ConfirmPasswordSetFn, DeactivateUserFn, HTMLDivAttributes, IconName, PasswordValidationRules } from './';
 import PasswordRecoveryModal from './PasswordRecoveryModal.svelte';
 declare const __propDef: {
     props: HTMLDivAttributes & {
@@ -21,15 +21,18 @@ declare const __propDef: {
         }) => void | Promise<void>) | undefined;
         accountInfoChanged?: (() => void | Promise<void>) | undefined;
         sendPasswordRecoveryToken?: ComponentProps<PasswordRecoveryModal>["sendPasswordRecoveryToken"];
-        doSendPasswordRecoveryToken: boolean;
+        doSendPasswordRecoveryToken?: boolean;
         icon?: IconName;
         usernameInput?: HTMLInputElement | undefined;
         cardHeight?: number;
+        myAccountMode?: boolean;
+        passwordValidationRules?: PasswordValidationRules | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        formFields: {};
         default: {};
     };
     exports?: {} | undefined;

package/dist/UserGroupMembership.svelte

@@ -1,7 +1,8 @@
 <script>import { getContext } from "svelte";
 import Icon from "@isoftdata/svelte-icon";
 import Checkbox from "@isoftdata/svelte-checkbox";
-const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+import { translate as defaultTranslate } from "@isoftdata/utility-string";
+const { t: translate } = getContext("i18next") || { t: defaultTranslate };
 export let groupMembership;
 export let canEditGroupMembership = true;
 export let groupMembershipChange = void 0;

package/dist/UserSiteAccess.svelte

@@ -1,7 +1,8 @@
 <script>import { getContext } from "svelte";
-import Checkbox from "@isoftdata/svelte-checkbox";
 import Icon from "@isoftdata/svelte-icon";
-const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+import Checkbox from "@isoftdata/svelte-checkbox";
+import { translate as defaultTranslate } from "@isoftdata/utility-string";
+const { t: translate } = getContext("i18next") || { t: defaultTranslate };
 export let userSites;
 export let siteLabel = "Site";
 export let canEditSiteAccess = true;

package/dist/index.d.ts

@@ -5,3 +5,4 @@ export { default as PermissionList } from './PermissionList.svelte';
 export { default as UserSiteAccess } from './UserSiteAccess.svelte';
 export * from './util';
 export type * from './util';
+export type { ValidationRules as PasswordValidationRules } from '@isoftdata/svelte-password-fields';

package/dist/util.d.ts

@@ -17,6 +17,7 @@ export interface UserAccount {
     recoveryEmail: string | null;
     status: 'ACTIVE' | 'DEACTIVATED' | 'LOCKED' | 'PENDING_ACTIVATION';
     newPassword?: string;
+    currentPassword?: string;
     lastPasswordResetDate?: Date;
     lastAccessDate?: Date;
     userActivationData?: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@isoftdata/svelte-user-configuration",
-	"version": "1.0.27",
+	"version": "1.1.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -32,6 +32,7 @@
 	"devDependencies": {
 		"@fortawesome/fontawesome-common-types": "^6.7.2",
 		"@isoftdata/prettier-config": "^1.0.3",
+		"@isoftdata/svelte-bootstrap-version-switcher": "^1.0.2",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/package": "^2.0.0",
@@ -63,7 +64,7 @@
 		"@isoftdata/svelte-icon": "^1.4.0",
 		"@isoftdata/svelte-input": "^1.6.0",
 		"@isoftdata/svelte-modal": "^1.3.1",
-		"@isoftdata/svelte-password-fields": "^1.3.0",
+		"@isoftdata/svelte-password-fields": "^1.4.1",
 		"@isoftdata/svelte-select": "^1.5.0",
 		"@isoftdata/svelte-table": "^1.16.0",
 		"@isoftdata/svelte-textarea": "^1.2.0",