https://github.com/mladenilic/pwd_toggle

Minimalist tool for creating password input visibility toggle
https://github.com/mladenilic/pwd_toggle

js password password-manager toggle vanilla-js

Last synced: 25 days ago
JSON representation

Minimalist tool for creating password input visibility toggle

• Host: GitHub
• URL: https://github.com/mladenilic/pwd_toggle
• Owner: mladenilic
• Created: 2018-03-15T23:04:16.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-11-16T12:32:48.000Z (about 6 years ago)
• Last Synced: 2024-03-26T07:20:26.993Z (10 months ago)
• Topics: js, password, password-manager, toggle, vanilla-js
• Language: JavaScript
• Homepage: https://mladenilic.github.io/pwd_toggle/
• Size: 152 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Password Toggle

Minimalist tool bult for developers and written in vanila js that simplifies adding password visibility toggle button.

Demo: [https://mladenilic.github.io/pwd_toggle/](https://mladenilic.github.io/pwd_toggle/)

### Dependencies

None.

### Example

```js

var pwd = new PwdToggle(document.getElementById('password'), {

  focus: true,

  onShow: function () {

    console.log('show');

  },

  onHide: function () {

    console.log('hide');

  },

  onToggle: function () {

    console.log('toggle');

  }

});

```

### Options

```js

{

  focus: false,             // Should password field be focused after toggle

  onShow: function () {},   // Callback caled after password is shown

  onHide: function () {},   // Callback caled after password is hidden

  onToggle: function () {}, // Callback caled after each toggle (both show and hide)

}

```

### Methods

```js

pwd.show();

pwd.hide();

pwd.toggle();

pwd.isShown();

pwd.isHidden();

```

### Styling the password input element

`PwdToggle` adds `pwd-toggle-input` class to password element on initialization. Further more, `PwdToggle` does not include any styles nor does it add password toggle element itelf.

Here's full example:

```html



  

  Toggle Password



```


```js

var toggle = document.getElementById('password-toggle');

var pwd = new PwdToggle(document.getElementById('password'), {

  focus: true,

  onToggle: function () {

    // .pwd-toggle-shown is added to toggle element

    // when password is shown, to allow easier styling

    toggle.classList.toggle('pwd-toggle-shown', this.isShown());

  }

});

toggle.addEventListener('click', function (e) {

  e.preventDefault();

  pwd.toggle();

});

```