@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

npm i @isoftdata/svelte-change-password

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

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

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 on:click={() => changePasswordComponent.initiatePasswordRecovery('test', true)}>Initiate Password Recovery</button>
</div>