@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
sendPasswordRecoveryEmailMutation	() => Promise<Account>	The function that calls the API to send the password recovery code to an account's recovery email.

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

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.

Events

changePassword

• fire this event with dispatch()
• it will pass on data (resetToken, currentPassword, newPassword, account) with the detail prop.

Example

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

	type Account = {
		userName: string
		recoveryEmail: string
	}

	let changePasswordComponent: ChangePassword

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

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

	<ChangePassword
		bind:this={changePasswordComponent}
		sendPasswordRecoveryEmailMutation={sendRecoveryEmailMutation}
		on:changePassword={e => console.log('changePassword', e.detail)}
	/>
	<button on:click={() => changePasswordComponent.initiatePasswordRecovery('test', true)}>Initiate Password Recovery</button>
</div>