app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings
This example shows how to enhance the passphrase strenght by setting diferent thresholds and lengths.
The meterSettings
array contains different settings for each rendered input. The handleStrengthCalculation
handles the strength calculation using those settings, showing different results for the same passphrase
input.
By default, minLength
is 12. Try typing any value in the Default Example
input. Notice that the bar won’t change from red until the minimum is met.
Adjust these props to tune the sensitivity of the bar.
Note: minimum length trumps strength and will set the bar to a red color, despite whatever strength is calculated.
This example depends on the zxcvbn
library.
You can use any library to achieve the same result, this example only intends to show how to add more features to the Passphrase
kit.