Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/javadbat/jb-password-input
password input
https://github.com/javadbat/jb-password-input
Last synced: 7 days ago
JSON representation
password input
- Host: GitHub
- URL: https://github.com/javadbat/jb-password-input
- Owner: javadbat
- License: mit
- Created: 2024-07-17T13:12:21.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-11-14T09:45:57.000Z (about 1 month ago)
- Last Synced: 2024-12-12T18:18:21.116Z (10 days ago)
- Language: TypeScript
- Size: 12.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jb-password-input
this superset component on [jb-input](https://github.com/javadbat/jb-input) , just for password input with ready to use validators & show icon
## instructions
### install
#### using npm
1- install npm package
```cmd
npm i jb-password-input
```
2- import module in one of your js in page
```js
import 'jb-password-input';
```
3- use component in your html or jsx file like any other html tag
```html
```
#### using cdn
1- add script tag to your html file.
```HTML
```
2- use web component like any other html tag whenever you need
```html
```
### get/set value
```js
//get value
const inputValue = document.getElementByTagName('jb-password-input').value;
//set value
document.getElementByTagName('jb-password-input').value = "new string";
```
### set password level
jb-password has some default validation check series that you can set by just set the `level` of the component
```ts
//level list
type PasswordValidationLevel ="NONE" | "BASIC" | "PRO"
//NONE is no default validation
//BASIC just check for password length
//PRO check password length + numeric and special char included
```
```html
```
```js
document.getElementByTagName('jb-password-input').level = "PRO";
```
you may not set the level and just set your own validation but we put this option for ease of use.
### set custom style
in some cases in your project you need to change default style of web-component for example you need zero margin or different border-radius and etc.
if you want to set a custom style to this web-component all you need is to set css variable in parent scope of web-component.
since jb-payment-input use jb-input underneath, read [jb-input](https://github.com/javadbat/jb-input) custom style list.
## Other Related Docs:
- see [jb-password-input-react](https://github.com/javadbat/jb-password-input-react) if you want to use this as a React component.
- see [All JB Design system Component List](https://github.com/javadbat/design-system/blob/master/docs/component-list.md) for more components.
- use [Contribution Guide](https://github.com/javadbat/design-system/blob/master/docs/contribution-guide.md) if you want to contribute in this component.