{"id":23039298,"url":"https://github.com/javadbat/jb-password-input","last_synced_at":"2025-08-14T18:33:10.884Z","repository":{"id":249372727,"uuid":"830031097","full_name":"javadbat/jb-password-input","owner":"javadbat","description":"password input","archived":false,"fork":false,"pushed_at":"2024-11-14T09:45:57.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-12T18:18:21.116Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/javadbat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-17T13:12:21.000Z","updated_at":"2024-11-14T09:46:01.000Z","dependencies_parsed_at":"2024-07-20T10:26:09.681Z","dependency_job_id":"03303ab7-43b8-402b-9fd7-8a71246d0ced","html_url":"https://github.com/javadbat/jb-password-input","commit_stats":null,"previous_names":["javadbat/jb-password-input"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-password-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-password-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-password-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-password-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javadbat","download_url":"https://codeload.github.com/javadbat/jb-password-input/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229859741,"owners_count":18135504,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-15T18:30:04.611Z","updated_at":"2025-08-14T18:33:10.875Z","avatar_url":"https://github.com/javadbat.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jb-password-input\n\nthis superset component on [jb-input](https://github.com/javadbat/jb-input) , just for password input with ready to use validators \u0026 show icon\n\n## using with JS frameworks\n\nto use this component in **react** see [`jb-password-input/react`](https://github.com/javadbat/jb-password-input/tree/main/react);\n\n## instructions\n\n### install\n\n#### using npm\n\n1- install npm package\n```cmd\nnpm i jb-password-input\n```\n\n2- import module in one of your js in page\n\n```js\nimport 'jb-password-input';\n\n```\n\n3- use component in your html or jsx file like any other html tag\n\n```html\n\u003cjb-password-input label=\"password:\" message=\"subtitle of input box\"\u003e\u003c/jb-password-input\u003e\n```\n#### using cdn\n\n1- add script tag to your html file.\n\n```HTML\n\u003cscript src=\"https://unpkg.com/jb-input/dist/jb-input.umd.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/jb-password-input/dist/jb-password-input.umd.js\"\u003e\u003c/script\u003e\n```\n2- use web component like any other html tag whenever you need\n\n```html\n\u003cdiv class=\"some-app-div\"\u003e\n  \u003cjb-password-input label=\"password:\" message=\"subtitle of input box\"\u003e\u003c/jb-password-input\u003e\n\u003c/div\u003e\n```\n### get/set value\n\n```js\n//get value\nconst inputValue = document.getElementByTagName('jb-password-input').value;\n//set value\ndocument.getElementByTagName('jb-password-input').value = \"new string\";\n```\n### set password level\n\njb-password has some default validation check series that you can set by just set the `level` of the component\n\n```ts\n//level list\ntype PasswordValidationLevel =\"NONE\" | \"BASIC\" | \"PRO\"\n//NONE is no default validation\n//BASIC just check for password length\n//PRO check password length + numeric and special char included\n```\n```html\n\u003cjb-password-input level=\"PRO\"\u003e\u003c/jb-password-input\u003e\n```\n```js\ndocument.getElementByTagName('jb-password-input').level = \"PRO\";\n```\nyou may not set the level and just set your own validation but we put this option for ease of use.\n\n### set custom style\n\nin 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.    \nif 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.\nsince jb-payment-input use jb-input underneath, read [jb-input](https://github.com/javadbat/jb-input) custom style list.\n\n## Other Related Docs:\n\n- see [`jb-password-input/react`](https://github.com/javadbat/jb-password-input/tree/main/react) if you want to use this as a React component.\n\n- see [All JB Design system Component List](https://javadbat.github.io/design-system/) for more components.\n\n- use [Contribution Guide](https://github.com/javadbat/design-system/blob/main/docs/contribution-guide.md) if you want to contribute in this component.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavadbat%2Fjb-password-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavadbat%2Fjb-password-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavadbat%2Fjb-password-input/lists"}