A bootstrap style pattern lock component. Responsive to both mouse and touch event.
Include jquery and pattern-lock.js in your html.
Set class="pattern-lock" on a container element, along with options like data-mode="validate", data-min-length=5.
<div class="pattern-lock" data-mode="validate" data-min-length=5></div>$('#lock').patternLock(options);As in bootstrap, options can be passed via data attributes or JavaScript.
Values: set(default) or validate
Whether the component is waiting for user to set a password or to validate.
Only useful when mode is set to validate, it determines the password to compare with.
Values: An interger between 0-9
The minimum length of a valid password.
Values: An Interger.
Width of the track line.
Values: A css style color string
Color of the track line.
Values: A css style color string
The stroke color of the circle by default.
Values: A css style color string
The stroke color of the circle when activated.
Values: A css style color string
The fill color of the circle when activated.
Set the component mode to 'set'.
Set the component mode to 'validate'.
Disable the component temporarily.
Enable the component again.
The component fires several events including:
The event fires when the user set a too short password.
The event fires after the user set a password for the first time.
The event fires after the user set a password different from the first one.
The event fires after the user set a password successfully.
The event fires when a validation is failed.
The event fires when user input a correct password.
You can listen to those events via
$(document).on('wrong.patternLock', function (e) {
// do something
})https://guochen-whu.github.io/pattern-lock/example/general/
https://guochen-whu.github.io/pattern-lock/example/set/
https://guochen-whu.github.io/pattern-lock/example/validate/