@isoftdata/svelte-password-fields

Svelte PasswordFields

This component handled

• Check whether both password values are matched and meet(optionally) a set of validation rules.

Install

pnpm i @isoftdata/svelte-password-fields

Breaking changes

2.0.0

• Require Svelte 5

Props

Name	Type	Description	Default Value
password	string	The password string entered.	''
confirmPassword	string	The confirm password string entered.	''
passwordMismatch	boolean	Whether there is a mismatch with the password and confirm password. An error message will be shown when there is a mismatch	false
columnClass	string	The column with grid breakpoint bootstrap class for BOTH password and confirm password inputs	col-12 col-md-6
passwordLabel	string	The label of the password input.	Password
confirmPasswordLabel	string	The label of the confirm password input.	Confirm Password
validationRules	ValidationRules | undefined	An object containing validation rules to be enforced and show in the UI. If undefined	undefined, validation will be ignored.
passwordInput	HTMLInputElement | undefined	The first password input field.	undefined
passwordConfirmInput	HTMLInputElement | undefined	The confirm password input field.	undefined
passwordIsValid	boolean	Whether the password entered is valid based on the given validation rules. When validationRules are undefined, this will return true	false

bind: the passwordInput or passwordConfirmInput to access the the underlying input's in the component. This is useful when you need to focus on the input field when the component is rendered or when there is a validation error.

ValidationRules

When using validation rules, you can bind the passwordIsValid prop to check if the currently entered password is valid based on the given validation rules.

interface ValidationRules {
	minimumPasswordLength?: number
	maximumPasswordLength?: number
	numberOfRequiredLowercaseCharacters?: number
	numberOfRequiredUppercaseCharacters?: number
	numberOfRequiredNumericCharacters?: number
	numberOfRequiredSpecialCharacters?: number
}

Example

<script lang="ts">
	import PasswordFields from '@isoftdata/svelte-password-fields'
	let passwordMismatch: boolean = false
</script>

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

	<PasswordFields />
	<PasswordFields
		columnClass="col-12 col-md-4"
		passwordLabel="New Password"
		confirmPasswordLabel="Confirm New Password"
		bind:passwordMismatch
		validationRules={{
			minimumPasswordLength: 3,
			maximumPasswordLength: 10,
			numberOfRequiredLowercaseCharacters: 2,
			numberOfRequiredUppercaseCharacters: 2,
			numberOfRequiredNumericCharacters: 2,
			numberOfRequiredSpecialCharacters: 2,
		}}
	/>
	{#if passwordMismatch}
		<div class="alert alert-danger">Passwords do not match</div>
	{/if}
</div>