Components

Password Visibility

GitHub

A Stimulus controller to change a password input visibility.

Installation

  1. Install the package

    Terminal
    $ yarn add @stimulus-components/password-visibility

  2. Register the controller in your application

    app/javascript/controllers/index.js
    import { Application } from '@hotwired/stimulus'
import PasswordVisibility from '@stimulus-components/password-visibility'

const application = Application.start()
application.register('password-visibility', PasswordVisibility)

Example

Password Visibility

Usage

<div data-controller="password-visibility">
  <input type="password" data-password-visibility-target="input" spellcheck="false" />

  <button type="button" data-action="password-visibility#toggle">
    <span data-password-visibility-target="icon">Eye</span>
    <span data-password-visibility-target="icon" class="hidden">Eye Slash</span>
  </button>
</div>

Configuration

AttributeDefaultDescriptionOptional
data-password-visibility-hidden-classhiddenClass to toggle icons visibility.✅

Extending Controller

You can use inheritance to extend the functionality of any Stimulus component:

app/javascript/controllers/password_visibility_controller.js
import PasswordVisibility from "@stimulus-components/password-visibility"

export default class extends PasswordVisibility {
  connect() {
    super.connect()

    // Do what you want here.
  }

  toggle(event) {
    super.toggle()

    // Do what you want here
  }
}

This controller will automatically have access to targets defined in the parent class.

If you override the connect, disconnect or any other methods from the parent, you'll want to call super.method() to make sure the parent functionality is executed.