password-dealer
v0.2.0
Published
javascript tool that improves your password fields
Downloads
3
Readme
password-dealer
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 installFor production
npm install password-dealer --saveImport 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
};note: This tool is also flexible it means you can customize the options whatever you prefer
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
Copyright (c) 2019 Rene Ricardo. Licensed under the MIT license.
Help
Send me an email if you have some doubt or just add an issue