https://pneumotox.com/assets/controllers/password_visibility_controller-IndESEk.js

1import { Controller } from '@hotwired/stimulus';
2
3export default class extends Controller {
4    static targets = ['input', 'showIcon', 'hideIcon', 'button'];
5
6    toggle() {
7        const visible = this.inputTarget.type === 'password';
8        this.inputTarget.type = visible ? 'text' : 'password';
9
10        if (this.hasShowIconTarget) {
11            this.showIconTarget.classList.toggle('hidden', visible);
12        }
13        if (this.hasHideIconTarget) {
14            this.hideIconTarget.classList.toggle('hidden', !visible);
15        }
16        if (this.hasButtonTarget) {
17            this.buttonTarget.setAttribute(
18                'aria-label',
19                visible ? 'Hide password' : 'Show password',
20            );
21        }
22    }
23}