@isoftdata/svelte-change-password

Svelte ChangePassword

This component handles

• Initiate password recovery process
• Provide fields for current/new password inputs

To trigger/show the UI in the component

• the initiatePasswordRecovery() function must be called

Install

pnpm i @isoftdata/svelte-change-password

Breaking changes

2.0.0

• Require Svelte 5

Props

Name	Type	Description	Default Value
sendPasswordResetTokenEmail	(userName: string) => Promise<Account>	The function that calls the API to send the password recovery code to an account's recovery email.	Required
changePassword	(resetToken: string, currentPassword: string, newPassword: string, userName: string) => Promise<void>	The function that calls the API to change the user's password.	Required
passwordRules	Password Rules Object	The password rules use to validate new password entered.	undefined

Account Object Type

Name	Type	Description	Default Value
userName	string	The username of the user account.	''
recoveryEmail	string	The recovery email of the user account.	''

Password Rules Object Type

Name	Type	Description	Default Value
minimumPasswordLength	number	The minimum length of the new password.	optional
maximumPasswordLength	number	The maximum length of the new password.	optional
numberOfRequiredLowercaseCharacters	number	The number of required lowercase characters in the new password.	optional
numberOfRequiredUppercaseCharacters	number	The number of required uppercase characters in the new password.	optional
numberOfRequiredNumericCharacters	number	The number of required numeric characters in the new password.	optional
numberOfRequiredSpecialCharacters	number	The number of required special characters in the new password.	optional

Functions

Call these on the component instance using bind:this

initiatePasswordRecovery(userName, resendEmail)

• userName (string): the user account's userName
• resendEmail (boolean): a boolean to decide whether it will send a password recovery token to the user account's recovery email
• Usage: This function is used to initiate a password recovery that will then show the components.

Example

<script lang="ts">
	import ChangePassword from '../lib/ChangePassword.svelte'

	type Account = {
		userName: string
		recoveryEmail: string
	}

	let changePasswordComponent: ChangePassword

	function sendPasswordResetTokenEmail(userName: string): Promise<Account> {
		console.log('Hit API call!', userName)
		return Promise.resolve({
			userName,
			recoveryEmail: '',
		})
	}

	function changePassword(resetToken: string, currentPassword: string, newPassword: string, userName: string): Promise<void> {
		console.log('Hit the API to change the user\'s password!')
		return Promise.resolve()
	}
</script>

<div class="container">
	<h1>ChangePassword</h1>

	<ChangePassword
		bind:this={changePasswordComponent}
		{sendPasswordResetTokenEmail}
		{changePassword}
	/>
	<button onclick={() => changePasswordComponent.initiatePasswordRecovery('test', true)}>Initiate Password Recovery</button>
</div>