PasswordConfirmController

Purpose

Controller to alert users when setting/changing their password, that their passwords don't match.

Actions

Action	Purpose
-	-

Targets

Target	Purpose	Default
password	All the <input>s you want to be included in the equality check	-

Classes

Class	Purpose	Default
error (Optional)	The class to apply to all password targets when they don't match	-

Values

Value	Type	Description	Default
-	-	-	-

Events

Event	When	Dispatched on	event.detail
password-confirm:match	When all inputs match	The controller element	-
password-confirm:no-match	When not all inputs match	The controller element	-

Side Effects

The controller will add change event listeners to all password targets.

How to Use

One, Two (or more, we don't presume) password fields, annotated as data-password-confirm-target='password'.

The controller will do nothing until all password target's values are filled in.

Once all passwords have a value:

• if all passwords do not match then the controller will add the error class (if specified) to all inputs, and emit an event for other controllers to hook into.
• if all passwords match then the controller will remove the error class (if specified) from all inputs, and emit an event for other controllers to hook into.

If the user then corrects an input, the process runs again - any applied error class will be removed, and the success event will fire.

Example