Jb-password-input NPM

jb-password-input

this superset component on jb-input , just for password input with ready to use validators & show icon

using with JS frameworks

to use this component in react see jb-password-input/react;

instructions

install

using npm

1- install npm package

npm i jb-password-input

2- import module in one of your js in page

import 'jb-password-input';

3- use component in your html or jsx file like any other html tag

<jb-password-input label="password:" message="subtitle of input box"></jb-password-input>

using cdn

1- add script tag to your html file.

<script src="https://unpkg.com/jb-input/dist/jb-input.umd.js"></script>
<script src="https://unpkg.com/jb-password-input/dist/jb-password-input.umd.js"></script>

2- use web component like any other html tag whenever you need

<div class="some-app-div">
  <jb-password-input label="password:" message="subtitle of input box"></jb-password-input>
</div>

get/set value

//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

//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

<jb-password-input level="PRO"></jb-password-input>

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 custom style list.