@isoftdata/svelte-user-configuration 1.0.28 → 1.1.1

package/README.md

@@ -15,24 +15,25 @@ npm i @isoftdata/svelte-user-configuration
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `userAccount` | `UserAccount` | ✅ | - | The user account information. |
-| `canToggleActive` | `CanToggleActive` | ❌ | `true` | Whether the user can be activated/deactivated. |
-| `canEditAccountInfo` | `CanEditAccountInfo` | ❌ | `true` | Whether account details can be edited. |
-| `doSendPasswordRecoveryToken` | `DoSendPasswordRecoveryToken` | ❌ | `false` | Whether to allow sending password recovery tokens. |
-| `hasPermissionToChangePassword` | `HasPermissionToChangePassword` | ❌ | `false` | Whether the user has permission to change passwords. |
+| `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` | `CanEditSiteAccess` | ❌ | `true` | Whether site access can be edited. |
+| `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` | `CanEditGroupMembership` | ❌ | `true` | Whether group memberships can be edited. |
+| `canEditGroupMembership` | boolean | ❌ | `true` | Whether group memberships can be edited. |
 
 ### Permission List Properties
 

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 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,19 @@ 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;
+        cardTitle?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        formFields: {};
         default: {};
     };
     exports?: {} | undefined;

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.28",
+	"version": "1.1.1",
 	"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",