git clone https://github.com/2rhop/password-dealer.git pwd
cd pwd
npm install
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">
Name | Properties | Description |
---|---|---|
buttons: array | tooltip: string | Sets the tooltip for the button |
innerHTML: HTML | Sets the HTML code inside the button. It is used for the image icon. Need to be an .svg file located in your PC or in an URL | |
callback: function | Calls the user function inside the eventListener body | |
passGenerator: null | function | object | Specifies the generator to be used. If it is null the default generator will be used otherwise you need to specify a new one. You can also set an object with PasswordGenerator options |
{
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
};
Property | Default value | Description |
---|---|---|
size: number | 10 | Sets the length of the password |
alphabet: boolean | true | Specifies whether the alphabet charset is gonna be used or not (If none charset is taken then this is the default one) |
uppercase: boolean | true | Specifies whether the uppercase charset is gonna be used or not |
numbers: boolean | true | Specifies whether the numbers charset is gonna be used or not |
symbols: boolean | true | Specifies whether the symbols charset is gonna be used or not |
note: This tool is also flexible it means you can customize the options whatever you prefer
- 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+**
Get update with all new versions here
Copyright (c) 2019 Rene Ricardo. Licensed under the MIT license.
Send me an email if you have some doubt or just add an issue