@isoftdata/svelte-user-configuration 2.3.2 → 2.4.0

package/dist/UserAccountInfo.svelte

@@ -1,445 +1,447 @@
-<script lang="ts">
-	import type { i18n } from 'i18next'
-	import type { HTMLDivAttributes } from './'
-	import type { ComponentProps, Snippet } from 'svelte'
-	import type { UserAccount, ConfirmPasswordSetFn, DeactivateUserFn, IconName, PasswordValidationRules } from './'
-
-	import { getContext } 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 DeactivateUserModal from './DeactivateUserModal.svelte'
-	import PasswordRecoveryModal from './PasswordRecoveryModal.svelte'
-	import { translate as defaultTranslate } from '@isoftdata/utility-string'
-
-	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
-
-	interface Props extends HTMLDivAttributes {
-		userAccount: UserAccount
-		canEditAccountInfo?: boolean
-		canToggleActive?: boolean
-		hasPermissionToChangePassword?: boolean
-		generateNewActivationPIN?: (userName: string, hasWorkEmail: boolean) => Promise<void>
-		confirmPasswordSet?: ConfirmPasswordSetFn
-		deactivateUser?: DeactivateUserFn
-		success?: ((info: { heading: string; message: string }) => void | Promise<void>) | undefined
-		error?: ((info: { heading: string; message: string }) => void | Promise<void>) | undefined
-		accountInfoChanged?: ((userAccount: UserAccount) => void | Promise<void>) | undefined
-		sendPasswordRecoveryToken?: ComponentProps<typeof PasswordRecoveryModal>['sendPasswordRecoveryToken']
-		doSendPasswordRecoveryToken?: boolean
-		icon?: IconName
-		usernameInput?: HTMLInputElement | undefined
-		cardHeight?: number
-		myAccountMode?: boolean
-		passwordValidationRules?: PasswordValidationRules | undefined
-		cardTitle?: string
-		recoveryEmailIsValid?: boolean
-		workEmailIsValid?: boolean
-		formFields?: Snippet
-		children?: Snippet
-	}
-
-	let {
-		userAccount = $bindable(),
-		canEditAccountInfo = true,
-		canToggleActive = true,
-		hasPermissionToChangePassword = false,
-		generateNewActivationPIN = () => Promise.resolve(),
-		confirmPasswordSet = undefined,
-		deactivateUser = undefined,
-		success = undefined,
-		error = undefined,
-		accountInfoChanged = undefined,
-		sendPasswordRecoveryToken = undefined,
-		doSendPasswordRecoveryToken = $bindable(false),
-		icon = 'user',
-		usernameInput = $bindable(undefined),
-		cardHeight = $bindable(),
-		myAccountMode = false,
-		passwordValidationRules = undefined,
-		cardTitle = translate('configuration.user.accountInfoHeader', 'Account'),
-		recoveryEmailIsValid = $bindable(true),
-		workEmailIsValid = $bindable(true),
-		formFields,
-		children,
-		...rest
-	}: Props = $props()
-
-	let isLoading = $state(false)
-	let passwordSetModal: PasswordSetModal | undefined = $state()
-	let passwordRecoveryModal: PasswordRecoveryModal | undefined = $state()
-	let deactivateUserModal: DeactivateUserModal | undefined = $state()
-	let activationPINInput: HTMLInputElement | undefined = $state()
-
-	async function getNewActivationPIN(sendEmail: boolean = false) {
-		let confirmationMessage: string = 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)) {
-			try {
-				isLoading = true
-				await generateNewActivationPIN(userAccount.name, !!userAccount.workEmail)
-
-				let successMessage: string = sendEmail
-					? translate(
-							'configuration.user.permissions.activationPINSent',
-							'Email with new activation PIN has been sent successfully.',
-						)
-					: translate('configuration.user.permissions.activationPINGenerated', 'Activation PIN generated successfully.')
-				let successHeading: string = sendEmail
-					? translate('configuration.messageHeading.activationPINSent', 'New Activation PIN Sent!')
-					: translate('configuration.messageHeading.activationPINGenerated', 'New Activation PIN Generated!')
-
-				await success?.({ heading: successHeading, message: successMessage })
-
-				isLoading = false
-				await accountInfoChanged?.(userAccount)
-			} catch (err) {
-				console.error(err)
-				await error?.({
-					heading: translate('configuration.messageHeading.failedToGenerateNewPIN', 'Failed To Generate New PIN'),
-					message:
-						err instanceof Error ? err.message : translate('workOrder.unknownError', 'An unknown error occurred'),
-				})
-			}
-		}
-	}
-
-	async function copyTextToClipboard() {
-		if (activationPINInput) {
-			navigator.clipboard.writeText(activationPINInput.value)
-			await success?.({
-				heading: translate('configuration.messageHeading.activationPINCopied', 'Activation PIN Copied!'),
-				message: translate(
-					'configuration.user.permissions.activationPINCopied',
-					'Activation PIN copied to clipboard successfully.',
-				),
-			})
-		}
-	}
-
-	async function reactivateUserAccount() {
-		if (
-			confirm(
-				translate(
-					'configuration.user.permissions.reactivateUserConfirmation',
-					'Are you sure you want to reactivate this user?',
-				),
-			)
-		) {
-			userAccount.status = 'ACTIVE'
-			userAccount.lockNotes = null
-			await accountInfoChanged?.(userAccount)
-		}
-	}
-
-	const emailAddressRegex =
-		/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-	const emailIsValid = (emailAddress: string): boolean => emailAddressRegex.test(emailAddress)
-
-	let workEmail = $derived(userAccount.workEmail)
-	let status = $derived(userAccount.status)
-	let activationPIN = $derived(userAccount.userActivationData?.activationPIN)
-	let isCreatingNewUser = $derived(userAccount.id === null)
-</script>
-
-<div
-	class="card"
-	bind:offsetHeight={cardHeight}
-	{...rest}
->
-	<fieldset disabled={!canEditAccountInfo}>
-		<div class="card-header">
-			<div class="d-flex justify-content-between align-items-center">
-				<h5 class="mb-0">
-					<Icon
-						{icon}
-						class="mr-1 me-1"
-					/>
-					{isCreatingNewUser ? translate('configuration.user.creatingNewAccountInfoHeader', 'New Account') : cardTitle}
-				</h5>
-				{#if !myAccountMode && !isCreatingNewUser && (status === 'ACTIVE' || status === 'PENDING_ACTIVATION')}
-					<Button
-						size="xs"
-						outline
-						color="danger"
-						iconClass="xmark"
-						onclick={() => deactivateUserModal?.open(userAccount)}
-						disabled={!canEditAccountInfo || !canToggleActive}
-					>
-						<span>{translate('common:deactivate', 'Deactivate')}</span>
-					</Button>
-				{:else if !myAccountMode && ((!isCreatingNewUser && status === 'DEACTIVATED') || status === 'LOCKED')}
-					<Button
-						size="xs"
-						outline
-						color="success"
-						iconClass="check"
-						onclick={() => reactivateUserAccount()}
-						disabled={!canEditAccountInfo || !canToggleActive}
-					>
-						<span>{translate('common:activate', 'Activate')}</span>
-					</Button>
-				{/if}
-			</div>
-		</div>
-		<div class="card-body">
-			<div class="row">
-				{#if !isCreatingNewUser && status === 'PENDING_ACTIVATION'}
-					<div class="col-12">
-						{#if activationPIN && workEmail}
-							<div class="alert alert-info mb-0">
-								{translate(
-									'configuration.user.accountInfo.activationPINSent',
-									'An activation PIN has been sent to {{email}}.',
-									{ email: workEmail },
-								)}
-							</div>
-						{:else}
-							<label for="activationPIN">{translate('configuration.user.activationPIN', 'Activation PIN')}</label>
-							<div class="input-group input-group-sm">
-								<input
-									bind:this={activationPINInput}
-									type="text"
-									class="form-control"
-									placeholder="###-###"
-									value={activationPIN}
-									readonly
-								/>
-								<div class="input-group-append">
-									<!-- When this button is hit, the function will call an API endpoint that will write the new PIN into the db -->
-									<!-- Therefore, this button will ignore the save function, as we need the new PIN to display it here -->
-									<Button
-										size="sm"
-										outline
-										{isLoading}
-										iconClass="refresh"
-										onclick={() => getNewActivationPIN()}
-										title={translate('configuration.user.generateNewActivationPIN', 'Generate New PIN')}
-									/>
-									<Button
-										size="sm"
-										outline
-										iconClass="copy"
-										onclick={() => copyTextToClipboard()}
-										disabled={!activationPIN}
-										title={translate('configuration.user.copyActivationPIN', 'Copy Activation PIN')}
-									/>
-								</div>
-							</div>
-						{/if}
-						{#if activationPIN && userAccount.userActivationData?.activationPINExpiration}
-							<small class="text-danger"
-								>{translate('configuration.user.activationPINExpireText', 'Activation PIN expires on {{- date}}', {
-									date: userAccount.userActivationData.activationPINExpiration.toLocaleString(),
-								})}</small
-							>
-						{/if}
-					</div>
-				{/if}
-				<div class="col-12 col-lg-6">
-					<Input
-						label={translate('configuration.user.accountInfo.username', 'Username')}
-						bind:value={userAccount.name}
-						maxlength={320}
-						required={isCreatingNewUser}
-						validation={{
-							validator: value => {
-								if (!value) return 'Username is required.'
-								else return value.length > 320 ? 'Username must be less than 320 characters.' : true
-							},
-						}}
-						bind:input={usernameInput}
-						readonly={myAccountMode || undefined}
-						tabindex={myAccountMode ? -1 : undefined}
-						onchange={() => accountInfoChanged?.(userAccount)}
-					/>
-				</div>
-				<div class="col-12 col-lg-6"></div>
-				<div class="col-12 col-md-6">
-					<Input
-						label={translate('configuration.user.accountInfo.firstName', 'First Name')}
-						bind:value={userAccount.firstName}
-						maxlength={100}
-						onchange={() => accountInfoChanged?.(userAccount)}
-					/>
-				</div>
-				<div class="col-12 col-md-6">
-					<Input
-						label={translate('configuration.user.accountInfo.lastName', 'Last Name')}
-						bind:value={userAccount.lastName}
-						maxlength={100}
-						onchange={() => accountInfoChanged?.(userAccount)}
-					/>
-				</div>
-				<div class="col-12 col-lg-6">
-					<Input
-						label={translate('configuration.user.accountInfo.workEmail', 'Work Email')}
-						bind:value={userAccount.workEmail}
-						onchange={() => {
-							workEmailIsValid = !myAccountMode && userAccount.workEmail ? emailIsValid(userAccount.workEmail) : true
-							accountInfoChanged?.(userAccount)
-						}}
-						autocomplete="email"
-						type="email"
-						inputmode="email"
-						readonly={myAccountMode || undefined}
-						tabindex={myAccountMode ? -1 : undefined}
-						hint={!workEmailIsValid ? translate('common:invalidEmailAddress', 'Invalid Email') : undefined}
-						hintClass="text-danger"
-					/>
-					{#if workEmail && !isCreatingNewUser && status === 'PENDING_ACTIVATION'}
-						<Button
-							size="sm"
-							color="link"
-							class="p-0 mb-2"
-							onclick={() => getNewActivationPIN(true)}
-						>
-							{translate('configuration.user.sendNewActivationPIN', 'Send New Activation PIN')}...
-						</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}
-						onchange={() => {
-							recoveryEmailIsValid =
-								myAccountMode && userAccount.recoveryEmail ? emailIsValid(userAccount.recoveryEmail) : true
-							accountInfoChanged?.(userAccount)
-						}}
-						autocomplete="email"
-						type="email"
-						inputmode="email"
-						readonly={!myAccountMode || undefined}
-						tabindex={!myAccountMode ? -1 : undefined}
-						hint={!recoveryEmailIsValid ? translate('common:invalidEmailAddress', 'Invalid Email') : undefined}
-						hintClass="text-danger"
-					/>
-				</div>
-				{#if !isCreatingNewUser && !myAccountMode}
-					<div class="col-12">
-						<TextArea
-							readonly
-							label={translate('configuration.user.accountInfo.lockNote', 'Lock Note')}
-							labelClass="py-0 mb-2"
-							style="min-height:83px;"
-							bind:value={userAccount.lockNotes}
-							onchange={() => accountInfoChanged?.(userAccount)}
-						/>
-					</div>
-				{/if}
-				{@render formFields?.()}
-			</div>
-			{@render children?.()}
-		</div>
-		<div class="card-footer">
-			{#if !myAccountMode && sendPasswordRecoveryToken}
-				<Button
-					size="sm"
-					outline
-					iconClass="paper-plane"
-					disabled={!canEditAccountInfo}
-					onclick={() => {
-						passwordRecoveryModal?.open(userAccount.recoveryEmail, userAccount.lastPasswordResetDate)
-					}}
-				>
-					{translate('configuration.user.sendResetToken', 'Send Reset Token')}...
-				</Button>
-			{/if}
-			{#if (!myAccountMode && hasPermissionToChangePassword) || (myAccountMode && !userAccount.newPassword)}
-				<Button
-					size="sm"
-					outline
-					iconClass="key"
-					disabled={!myAccountMode && !canEditAccountInfo}
-					onclick={() => passwordSetModal?.open(userAccount)}
-				>
-					{#if myAccountMode}
-						{translate('configuration.user.changePassword', 'Change Password')}...
-					{:else}
-						{translate('configuration.user.setPassword', 'Set Password')}...
-					{/if}
-				</Button>
-			{:else if myAccountMode && userAccount.newPassword}
-				<Button
-					outline
-					color="danger"
-					onclick={() => {
-						userAccount.currentPassword = ''
-						userAccount.newPassword = ''
-					}}
-				>
-					{translate('configuration.user.cancelPasswordChange', 'Cancel Password Change')}</Button
-				>
-			{/if}
-		</div>
-	</fieldset>
-</div>
-
-<PasswordRecoveryModal
-	bind:this={passwordRecoveryModal}
-	bind:doSendPasswordRecoveryToken
-	{sendPasswordRecoveryToken}
-/>
-
-<DeactivateUserModal
-	bind:this={deactivateUserModal}
-	deactivateUser={async ({ lockNotes }) => {
-		userAccount.status = 'DEACTIVATED'
-		userAccount.lockNotes = lockNotes
-		try {
-			await deactivateUser?.({ id: userAccount.id, lockNotes })
-			await accountInfoChanged?.(userAccount)
-		} catch (err) {
-			console.error(err)
-			await error?.({
-				heading: translate('configuration.user.messageHeading.failedToDeactivateUser', 'Failed To Deactivate User'),
-				message: err instanceof Error ? err.message : translate('workOrder.unknownError', 'An unknown error occurred'),
-			})
-		}
-	}}
-/>
-
-<PasswordSetModal
-	bind:this={passwordSetModal}
-	changePasswordMode={myAccountMode}
-	confirmPasswordSet={async ({ currentPassword, newPassword }) => {
-		if (hasPermissionToChangePassword || myAccountMode) {
-			if (confirmPasswordSet) {
-				try {
-					await confirmPasswordSet({ currentPassword, newPassword })
-					await success?.({
-						heading: translate('configuration.user.passwordChangeSuccessHeading', 'Password Changed!'),
-						message: translate('configuration.user.passwordChangeSuccessMessage', 'Password changed successfully'),
-					})
-				} catch (err) {
-					console.error(err)
-					await error?.({
-						heading: translate('configuration.user.passwordChangeErrorHeading', 'Failed To Change Password'),
-						message:
-							err instanceof Error ? err.message : translate('workOrder.unknownError', 'An unknown error occurred'),
-					})
-					throw err
-				}
-			} else {
-				//Guess if they didn't give us a confirmPasswordSet function to call we'll just update the userAccount object and they can handle it later
-				userAccount.currentPassword = currentPassword
-				userAccount.newPassword = newPassword
-			}
-		}
-	}}
-	validationRules={passwordValidationRules}
-/>
+<script lang="ts">
+	import type { i18n } from 'i18next'
+	import type { HTMLDivAttributes } from './'
+	import type { ComponentProps, Snippet } from 'svelte'
+	import type { UserAccount, ConfirmPasswordSetFn, DeactivateUserFn, IconName, PasswordValidationRules } from './'
+
+	import { getContext } 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 DeactivateUserModal from './DeactivateUserModal.svelte'
+	import PasswordRecoveryModal from './PasswordRecoveryModal.svelte'
+	import { translate as defaultTranslate } from '@isoftdata/utility-string'
+
+	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
+
+	interface Props extends HTMLDivAttributes {
+		userAccount: UserAccount
+		canEditAccountInfo?: boolean
+		canToggleActive?: boolean
+		hasPermissionToChangePassword?: boolean
+		hasPermissionToChangeUsername?: boolean
+		generateNewActivationPIN?: (userName: string, hasWorkEmail: boolean) => Promise<void>
+		confirmPasswordSet?: ConfirmPasswordSetFn
+		deactivateUser?: DeactivateUserFn
+		success?: ((info: { heading: string; message: string }) => void | Promise<void>) | undefined
+		error?: ((info: { heading: string; message: string }) => void | Promise<void>) | undefined
+		accountInfoChanged?: ((userAccount: UserAccount) => void | Promise<void>) | undefined
+		sendPasswordRecoveryToken?: ComponentProps<typeof PasswordRecoveryModal>['sendPasswordRecoveryToken']
+		doSendPasswordRecoveryToken?: boolean
+		icon?: IconName
+		usernameInput?: HTMLInputElement | undefined
+		cardHeight?: number
+		myAccountMode?: boolean
+		passwordValidationRules?: PasswordValidationRules | undefined
+		cardTitle?: string
+		recoveryEmailIsValid?: boolean
+		workEmailIsValid?: boolean
+		formFields?: Snippet
+		children?: Snippet
+	}
+
+	let {
+		userAccount = $bindable(),
+		canEditAccountInfo = true,
+		canToggleActive = true,
+		hasPermissionToChangePassword = false,
+		hasPermissionToChangeUsername = true,
+		generateNewActivationPIN = () => Promise.resolve(),
+		confirmPasswordSet = undefined,
+		deactivateUser = undefined,
+		success = undefined,
+		error = undefined,
+		accountInfoChanged = undefined,
+		sendPasswordRecoveryToken = undefined,
+		doSendPasswordRecoveryToken = $bindable(false),
+		icon = 'user',
+		usernameInput = $bindable(undefined),
+		cardHeight = $bindable(),
+		myAccountMode = false,
+		passwordValidationRules = undefined,
+		cardTitle = translate('configuration.user.accountInfoHeader', 'Account'),
+		recoveryEmailIsValid = $bindable(true),
+		workEmailIsValid = $bindable(true),
+		formFields,
+		children,
+		...rest
+	}: Props = $props()
+
+	let isLoading = $state(false)
+	let passwordSetModal: PasswordSetModal | undefined = $state()
+	let passwordRecoveryModal: PasswordRecoveryModal | undefined = $state()
+	let deactivateUserModal: DeactivateUserModal | undefined = $state()
+	let activationPINInput: HTMLInputElement | undefined = $state()
+
+	async function getNewActivationPIN(sendEmail: boolean = false) {
+		let confirmationMessage: string = 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)) {
+			try {
+				isLoading = true
+				await generateNewActivationPIN(userAccount.name, !!userAccount.workEmail)
+
+				let successMessage: string = sendEmail
+					? translate(
+							'configuration.user.permissions.activationPINSent',
+							'Email with new activation PIN has been sent successfully.',
+						)
+					: translate('configuration.user.permissions.activationPINGenerated', 'Activation PIN generated successfully.')
+				let successHeading: string = sendEmail
+					? translate('configuration.messageHeading.activationPINSent', 'New Activation PIN Sent!')
+					: translate('configuration.messageHeading.activationPINGenerated', 'New Activation PIN Generated!')
+
+				await success?.({ heading: successHeading, message: successMessage })
+
+				isLoading = false
+				await accountInfoChanged?.(userAccount)
+			} catch (err) {
+				console.error(err)
+				await error?.({
+					heading: translate('configuration.messageHeading.failedToGenerateNewPIN', 'Failed To Generate New PIN'),
+					message:
+						err instanceof Error ? err.message : translate('workOrder.unknownError', 'An unknown error occurred'),
+				})
+			}
+		}
+	}
+
+	async function copyTextToClipboard() {
+		if (activationPINInput) {
+			navigator.clipboard.writeText(activationPINInput.value)
+			await success?.({
+				heading: translate('configuration.messageHeading.activationPINCopied', 'Activation PIN Copied!'),
+				message: translate(
+					'configuration.user.permissions.activationPINCopied',
+					'Activation PIN copied to clipboard successfully.',
+				),
+			})
+		}
+	}
+
+	async function reactivateUserAccount() {
+		if (
+			confirm(
+				translate(
+					'configuration.user.permissions.reactivateUserConfirmation',
+					'Are you sure you want to reactivate this user?',
+				),
+			)
+		) {
+			userAccount.status = 'ACTIVE'
+			userAccount.lockNotes = null
+			await accountInfoChanged?.(userAccount)
+		}
+	}
+
+	const emailAddressRegex =
+		/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+	const emailIsValid = (emailAddress: string): boolean => emailAddressRegex.test(emailAddress)
+
+	let workEmail = $derived(userAccount.workEmail)
+	let status = $derived(userAccount.status)
+	let activationPIN = $derived(userAccount.userActivationData?.activationPIN)
+	let isCreatingNewUser = $derived(userAccount.id === null)
+</script>
+
+<div
+	class="card"
+	bind:offsetHeight={cardHeight}
+	{...rest}
+>
+	<fieldset disabled={!canEditAccountInfo}>
+		<div class="card-header">
+			<div class="d-flex justify-content-between align-items-center">
+				<h5 class="mb-0">
+					<Icon
+						{icon}
+						class="mr-1 me-1"
+					/>
+					{isCreatingNewUser ? translate('configuration.user.creatingNewAccountInfoHeader', 'New Account') : cardTitle}
+				</h5>
+				{#if !myAccountMode && !isCreatingNewUser && (status === 'ACTIVE' || status === 'PENDING_ACTIVATION')}
+					<Button
+						size="xs"
+						outline
+						color="danger"
+						iconClass="xmark"
+						onclick={() => deactivateUserModal?.open(userAccount)}
+						disabled={!canEditAccountInfo || !canToggleActive}
+					>
+						<span>{translate('common:deactivate', 'Deactivate')}</span>
+					</Button>
+				{:else if !myAccountMode && ((!isCreatingNewUser && status === 'DEACTIVATED') || status === 'LOCKED')}
+					<Button
+						size="xs"
+						outline
+						color="success"
+						iconClass="check"
+						onclick={() => reactivateUserAccount()}
+						disabled={!canEditAccountInfo || !canToggleActive}
+					>
+						<span>{translate('common:activate', 'Activate')}</span>
+					</Button>
+				{/if}
+			</div>
+		</div>
+		<div class="card-body">
+			<div class="row">
+				{#if !isCreatingNewUser && status === 'PENDING_ACTIVATION'}
+					<div class="col-12">
+						{#if activationPIN && workEmail}
+							<div class="alert alert-info mb-0">
+								{translate(
+									'configuration.user.accountInfo.activationPINSent',
+									'An activation PIN has been sent to {{email}}.',
+									{ email: workEmail },
+								)}
+							</div>
+						{:else}
+							<label for="activationPIN">{translate('configuration.user.activationPIN', 'Activation PIN')}</label>
+							<div class="input-group input-group-sm">
+								<input
+									bind:this={activationPINInput}
+									type="text"
+									class="form-control"
+									placeholder="###-###"
+									value={activationPIN}
+									readonly
+								/>
+								<div class="input-group-append">
+									<!-- When this button is hit, the function will call an API endpoint that will write the new PIN into the db -->
+									<!-- Therefore, this button will ignore the save function, as we need the new PIN to display it here -->
+									<Button
+										size="sm"
+										outline
+										{isLoading}
+										iconClass="refresh"
+										onclick={() => getNewActivationPIN()}
+										title={translate('configuration.user.generateNewActivationPIN', 'Generate New PIN')}
+									/>
+									<Button
+										size="sm"
+										outline
+										iconClass="copy"
+										onclick={() => copyTextToClipboard()}
+										disabled={!activationPIN}
+										title={translate('configuration.user.copyActivationPIN', 'Copy Activation PIN')}
+									/>
+								</div>
+							</div>
+						{/if}
+						{#if activationPIN && userAccount.userActivationData?.activationPINExpiration}
+							<small class="text-danger"
+								>{translate('configuration.user.activationPINExpireText', 'Activation PIN expires on {{- date}}', {
+									date: userAccount.userActivationData.activationPINExpiration.toLocaleString(),
+								})}</small
+							>
+						{/if}
+					</div>
+				{/if}
+				<div class="col-12 col-lg-6">
+					<Input
+						label={translate('configuration.user.accountInfo.username', 'Username')}
+						bind:value={userAccount.name}
+						maxlength={320}
+						required={isCreatingNewUser}
+						validation={{
+							validator: value => {
+								if (!value) return 'Username is required.'
+								else return value.length > 320 ? 'Username must be less than 320 characters.' : true
+							},
+						}}
+						bind:input={usernameInput}
+						readonly={myAccountMode || !hasPermissionToChangeUsername || undefined}
+						tabindex={myAccountMode ? -1 : undefined}
+						onchange={() => accountInfoChanged?.(userAccount)}
+					/>
+				</div>
+				<div class="col-12 col-lg-6"></div>
+				<div class="col-12 col-md-6">
+					<Input
+						label={translate('configuration.user.accountInfo.firstName', 'First Name')}
+						bind:value={userAccount.firstName}
+						maxlength={100}
+						onchange={() => accountInfoChanged?.(userAccount)}
+					/>
+				</div>
+				<div class="col-12 col-md-6">
+					<Input
+						label={translate('configuration.user.accountInfo.lastName', 'Last Name')}
+						bind:value={userAccount.lastName}
+						maxlength={100}
+						onchange={() => accountInfoChanged?.(userAccount)}
+					/>
+				</div>
+				<div class="col-12 col-lg-6">
+					<Input
+						label={translate('configuration.user.accountInfo.workEmail', 'Work Email')}
+						bind:value={userAccount.workEmail}
+						onchange={() => {
+							workEmailIsValid = !myAccountMode && userAccount.workEmail ? emailIsValid(userAccount.workEmail) : true
+							accountInfoChanged?.(userAccount)
+						}}
+						autocomplete="email"
+						type="email"
+						inputmode="email"
+						readonly={myAccountMode || undefined}
+						tabindex={myAccountMode ? -1 : undefined}
+						hint={!workEmailIsValid ? translate('common:invalidEmailAddress', 'Invalid Email') : undefined}
+						hintClass="text-danger"
+					/>
+					{#if workEmail && !isCreatingNewUser && status === 'PENDING_ACTIVATION'}
+						<Button
+							size="sm"
+							color="link"
+							class="p-0 mb-2"
+							onclick={() => getNewActivationPIN(true)}
+						>
+							{translate('configuration.user.sendNewActivationPIN', 'Send New Activation PIN')}...
+						</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}
+						onchange={() => {
+							recoveryEmailIsValid =
+								myAccountMode && userAccount.recoveryEmail ? emailIsValid(userAccount.recoveryEmail) : true
+							accountInfoChanged?.(userAccount)
+						}}
+						autocomplete="email"
+						type="email"
+						inputmode="email"
+						readonly={!myAccountMode || undefined}
+						tabindex={!myAccountMode ? -1 : undefined}
+						hint={!recoveryEmailIsValid ? translate('common:invalidEmailAddress', 'Invalid Email') : undefined}
+						hintClass="text-danger"
+					/>
+				</div>
+				{#if !isCreatingNewUser && !myAccountMode}
+					<div class="col-12">
+						<TextArea
+							readonly
+							label={translate('configuration.user.accountInfo.lockNote', 'Lock Note')}
+							labelClass="py-0 mb-2"
+							style="min-height:83px;"
+							bind:value={userAccount.lockNotes}
+							onchange={() => accountInfoChanged?.(userAccount)}
+						/>
+					</div>
+				{/if}
+				{@render formFields?.()}
+			</div>
+			{@render children?.()}
+		</div>
+		<div class="card-footer">
+			{#if !myAccountMode && sendPasswordRecoveryToken}
+				<Button
+					size="sm"
+					outline
+					iconClass="paper-plane"
+					disabled={!canEditAccountInfo}
+					onclick={() => {
+						passwordRecoveryModal?.open(userAccount.recoveryEmail, userAccount.lastPasswordResetDate)
+					}}
+				>
+					{translate('configuration.user.sendResetToken', 'Send Reset Token')}...
+				</Button>
+			{/if}
+			{#if (!myAccountMode && hasPermissionToChangePassword) || (myAccountMode && !userAccount.newPassword)}
+				<Button
+					size="sm"
+					outline
+					iconClass="key"
+					disabled={!myAccountMode && !canEditAccountInfo}
+					onclick={() => passwordSetModal?.open(userAccount)}
+				>
+					{#if myAccountMode}
+						{translate('configuration.user.changePassword', 'Change Password')}...
+					{:else}
+						{translate('configuration.user.setPassword', 'Set Password')}...
+					{/if}
+				</Button>
+			{:else if myAccountMode && userAccount.newPassword}
+				<Button
+					outline
+					color="danger"
+					onclick={() => {
+						userAccount.currentPassword = ''
+						userAccount.newPassword = ''
+					}}
+				>
+					{translate('configuration.user.cancelPasswordChange', 'Cancel Password Change')}</Button
+				>
+			{/if}
+		</div>
+	</fieldset>
+</div>
+
+<PasswordRecoveryModal
+	bind:this={passwordRecoveryModal}
+	bind:doSendPasswordRecoveryToken
+	{sendPasswordRecoveryToken}
+/>
+
+<DeactivateUserModal
+	bind:this={deactivateUserModal}
+	deactivateUser={async ({ lockNotes }) => {
+		userAccount.status = 'DEACTIVATED'
+		userAccount.lockNotes = lockNotes
+		try {
+			await deactivateUser?.({ id: userAccount.id, lockNotes })
+			await accountInfoChanged?.(userAccount)
+		} catch (err) {
+			console.error(err)
+			await error?.({
+				heading: translate('configuration.user.messageHeading.failedToDeactivateUser', 'Failed To Deactivate User'),
+				message: err instanceof Error ? err.message : translate('workOrder.unknownError', 'An unknown error occurred'),
+			})
+		}
+	}}
+/>
+
+<PasswordSetModal
+	bind:this={passwordSetModal}
+	changePasswordMode={myAccountMode}
+	confirmPasswordSet={async ({ currentPassword, newPassword }) => {
+		if (hasPermissionToChangePassword || myAccountMode) {
+			if (confirmPasswordSet) {
+				try {
+					await confirmPasswordSet({ currentPassword, newPassword })
+					await success?.({
+						heading: translate('configuration.user.passwordChangeSuccessHeading', 'Password Changed!'),
+						message: translate('configuration.user.passwordChangeSuccessMessage', 'Password changed successfully'),
+					})
+				} catch (err) {
+					console.error(err)
+					await error?.({
+						heading: translate('configuration.user.passwordChangeErrorHeading', 'Failed To Change Password'),
+						message:
+							err instanceof Error ? err.message : translate('workOrder.unknownError', 'An unknown error occurred'),
+					})
+					throw err
+				}
+			} else {
+				//Guess if they didn't give us a confirmPasswordSet function to call we'll just update the userAccount object and they can handle it later
+				userAccount.currentPassword = currentPassword
+				userAccount.newPassword = newPassword
+			}
+		}
+	}}
+	validationRules={passwordValidationRules}
+/>