@isoftdata/svelte-change-password

Svelte ChangePassword

This component handles

• Initiate password recovery process
• Setting a new password when a reset token is already known (e.g. from a link in an email)
• Provide fields for current/new password inputs

To trigger/show the UI in the component

• the initiatePasswordRecovery() function must be called, or
• the initiatePasswordReset() 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.

initiatePasswordReset(userName, token)

• userName (string): the user account's userName
• token (string): a reset token that has already been issued for this account (e.g. embedded in a link the user clicked from an email)
• Usage: This function shows the component with the new password fields immediately, skipping the recovery email step, since the reset token is already known. It puts the user's focus in the "New Password" field.

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>