Password-dealer NPM

password-dealer

license

This is an standalone javascript tool that improves your password fields

Table of topics

Installation

For development

git clone https://github.com/2rhop/password-dealer.git pwd
cd pwd
npm install

For production

npm install password-dealer --save

Import from HTML:

<head>
    ...
    <link rel="stylesheet" href="<path-to-package>/dist/password-dealer.min.css">
</head>

<body>
    ...
    <script src="<path-to-package>/dist/password-dealer.min.js"></script>
    <script>
         PasswordDealer(<options>).init();
    </script>
</body>

Import from javascript:

import 'password-dealer/dist/password-dealer.min.css';
import 'password-dealer';

$(function () { // using jQuery with document.ready lifecycle
    PasswordDealer(<options>).init();
});

Adding css class to the input:

<input type="password" class="pwd">

API

The default options are:

{
            buttons: [
                {
                    tooltip: 'Show/Hide password',
                    innerHTML: `<svg class="pwd-toolbox__icon">
                    <use xlink:href="images/sprite.svg#icon-eye"></use>
                    <use xlink:href="images/sprite.svg#icon-eye-blocked" display="none"></use>
                    </svg>`,// icon stored locally
                    callback: (event) => {
                        ((p) => {
                            const $this = event.target;
                            const useChildren = $this.childNodes[0].children;
                            if (!$this.classList.contains('reveal')) {
                                $this.classList.add('reveal');
                                useChildren[1].style.display = 'block';
                                useChildren[0].style.display = 'none';
                            } else {
                                $this.classList.remove('reveal');
                                useChildren[0].style.display = 'block';
                                useChildren[1].style.display = 'none';
                            }
                            $this.parentNode.parentNode.childNodes.forEach(e => {
                                if (e.classList.contains('pwd-item__input')) {
                                    p.changeType(e);
                                }
                            })
                        })(this);
                    }
                },
                {
                    tooltip: 'Generate password',
                    innerHTML: `<svg class="pwd-toolbox__icon">
                    <use xlink:href="images/sprite.svg#icon-key"></use></svg>`,// icon stored locally
                    callback: (event) => {
                        ((p) => {
                            event.target.parentNode.parentNode.childNodes.forEach(e => {
                                if (e.classList.contains('pwd-item__input')) {
                                    e.value = p.getGeneratedPass()
                                }
                            });
                        })(this)
                    }
                },
            ],
            passGenerator:  null, // we set this as null and PasswordGenerator class will be used by default
        };

These are the browsers that show up pretty well the styles:

- Google Chrome **74+**
- Opera **62+**
- Microsoft Edge **41+**
- Microsoft Internet Exporer **11+**
- Mozilla Firefox **64+**

This tools uses ResizeObserver api for correctly set the dimensions of the input wrapper. These are some browsers that support it:

- Google Chrome **74+**
- Opera **62+**

Changelog

Get update with all new versions here

Licence

Help

Send me an email if you have some doubt or just add an issue

password generator viewer

@infinitebrahmanuniverse/nolb-passw @everything-registry/sub-chunk-2415

0.2.0

5 years ago

0.1.0

5 years ago