@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

npm i @isoftdata/svelte-password-fields

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.

ValidationRules

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>