password field

Web component for password inputs

See a live demonstration

Featuring

An eyeball button that will change the visiblity of the password.

This state is tracked by the webcomponent itself, but it can also be set by an attribute, visible. If visible is present on the tag, then you can see the password.

See ./example for an example of using the attribute to control visiblity, and keeping two inputs in sync with each other.

• Install
• tl;dr
• API
  • Events
  • Attributes
  • ESM & CJS
  • ESM
  • Common JS
• CSS
• Example

Install

npm i -S @substrate-system/password-field

tl;dr

Import the JS component and CSS.

import { PasswordField } from '@substrate-system/password-field'
import '@substrate-system/password-field/css'
// or import minified css
import '@substrate-system/password-field/css/min'

Use the tag in HTML

<form>
    <password-field
        name="password"
        display-name="New Password"
    ></password-field>
</form>

Listen for events in JS

import { PasswordField } from '@substrate-system/password-field'
const eventName = PasswordField.event('change-visibility')

form?.addEventListener(eventName, ev => {
    const { isVisible } = ev.detail
    console.log('is visible', isVisible)
})

API

Events

• password-field:change-visiblity

  import { PasswordField } from '../src/index.js'
  PasswordField.event('change-visiblity')
  // => 'password-field:change-visiblity'

  Fired when someone clicks the eyeball button in the field. The event .detail has a property isVisible

  form?.addEventListener(PasswordField.event('change-visibility'), ev => {
      const { isVisible } = ev.detail
  })

Attributes

• visible
• display-name
• required
• autocomplete
• name

[!NOTE]
The name attribute is used for an id on the element also, so it should be unique.

ESM & CJS

This exposes ESM and common JS via package.json exports field.

ESM

import '@namespace/package/module'

Common JS

require('@namespace/package/module')

CSS

import '@namespace/package-name/css'

Or minified:

import '@namespace/package-name/css/min'

Example

Use event bubbling to attach a single listener to the parent form. Use the imported component, PasswordField, to get the namespaced event name.

import { PasswordField } from '@substrate-system/password-field'
import '@substrate-field/password-field/css'

const form = document.querySelector('form')

form?.addEventListener(PasswordField.event('change-visibility'), ev => {
    // synchronize changes in visibility, so
    // both inputs are either visible or not visible
    const { isVisible } = ev.detail
    document.querySelectorAll('password-field').forEach(el => {
        if (isVisible) {
            el.setAttribute('visible', '')
        } else {
            el.removeAttribute('visible')
        }
    })
})