Autoform Password 2

Standard HTML5 Password input with some extended features:

• toggle input visibility
• specifiy regex based rues to be fulfilled
• display rules to users and if they have been fulfilled or are pending
• display a fontawesome (4 or 5) icon
• Bootstrap 4 compatible (requires communitypackages:autoform-bootstrap4) but not restricted (and not depending) to it

Import this package

This package now splits between dynamic and static imports. If you need static imports, please use the following:

1import { AutoFormPassword2 } from  'meteor/jkuester:autoform-password2'
2
3AutoFormPassword2.load()

If you need this via dynamic import please import as the following:

1import { AutoFormPassword2 } from 'meteor/jkuester:autoform-password2/dynamic'
2
3AutoFormPassword2.load()
4  .catch(e => { ... })
5  .then(() => { ... })

Usage

Define the following schema to enable all options:

1{
2  password: {
3      type: String,
4      min: min, // min and max are used for validation
5      max: max, // beyond the internals of this component
6      autoform: {
7        type: 'password2',
8        rules: rules,
9        visibilityButton: true, // toggles password visibility
10        visible: visible, // default visibility
11        userIcon: 'lock', // font awesome name without prefixes
12        css: 'border-0' // custom Bootstrap 4 css
13      }
14  }
15}

Rules is a list of Objects with the following properties:

1{
2  test: value => Boolean,
3  message: value => String
4}

Each rule will be checked on input of a character against the test method and the message will be displayed below the input.

If a rule passes, it will be marked as green / successfull, if it failed it will be marked as red / failed, otherwise it will be neutral.

License

MIT, see license file