{"_id":"@arsloptima/password-strength","_rev":"1-ece8ea79fd0a1a935917ac3fdb66a8dd","name":"@arsloptima/password-strength","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@arsloptima/password-strength","version":"0.0.1","scripts":{"ng":"ng","start":"ng serve --port 4510","build":"ng build --statsJson","build:client-and-server-bundles:ghpages":"npm run build:prod:ghpages && ng run password-strength:server:production --bundleDependencies all","build:docs":"npx compodoc -p projects/angular-material-extensions/password-strength/tsconfig.lib.json --hideGenerator --disableCoverage -d dist/browser/doc/","build:lib":"ng build @angular-material-extensions/password-strength","build:lib:Watch":"ng build @angular-material-extensions/password-strength --watch","build:prod":"ng build --prod","build:prod:ghpages":"ng build --preserve-symlinks --prod --aot --build-optimizer --base-href /password-strength/ --deploy-url /password-strength/","build:prerender":"npm run build:client-and-server-bundles && npm run compile:server && npm run generate:prerender","build:prerender:ghpages":"npm run build:client-and-server-bundles:ghpages && npm run compile:server && npm run generate:prerender","deploy":"ng deploy --base-href=/password-strength/ --no-build","generate:prerender":"cd dist && node prerender","test":"jest","lint":"ng lint","e2e":"ng e2e","postinstall":"ngcc","release":"release-it","test:watch":"jest --watch","compile:server_bak":"webpack --config webpack.server.config.js --progress --colors","build:ssr_bak":"npm run build:client-and-server-bundles && npm run compile:server","serve:ssr_bak":"node dist/server","build:client-and-server-bundles_bak":"ng build --prod && ng run password-strength:server:production --bundleDependencies all","dev:ssr":"ng run password-strength:serve-ssr","serve:ssr":"node dist/server/main.js","build:ssr":"ng build --prod && ng run password-strength:server:production","bundle-report":"webpack-bundle-analyzer dist/browser/stats-es2015.json","serve:prerender":"cd dist/password-strength/browser && http-server","prerender":"ng run password-strength:prerender"},"dependencies":{"@angular-material-extensions/pages":"^4.0.0","@angular/animations":"^13.1.1","@angular/cdk":"^13.1.1","@angular/common":"^13.1.1","@angular/compiler":"^13.1.1","@angular/core":"^13.1.1","@angular/flex-layout":"^13.0.0-beta.36","@angular/forms":"^13.1.1","@angular/material":"^13.1.1","@angular/platform-browser":"^13.1.1","@angular/platform-browser-dynamic":"^13.1.1","@angular/platform-server":"^13.1.1","@angular/router":"^13.1.1","@nguniversal/express-engine":"^13.0.1","@ngx-translate/core":"^14.0.0","@ngx-translate/http-loader":"^7.0.0","express":"^4.15.2","ngx-clipboard":"^12.3.1","ngx-highlightjs":"^4.1.3","ngx-markdown":"^8.2.2","rxjs":"^7.5.2","tslib":"^2.3.1","zone.js":"~0.11.4"},"devDependencies":{"@angular-devkit/build-angular":"^13.1.2","@angular-devkit/build-ng-packagr":"^0.1000.8","@angular/cli":"^13.1.2","@angular/compiler-cli":"^13.1.1","@angular/language-service":"^13.1.1","@nguniversal/builders":"^13.0.1","@release-it/conventional-changelog":"^3.3.0","@schematics/angular":"^11.2.10","@types/express":"^4.17.11","@types/jasmine":"^3.6.10","@types/jasminewd2":"~2.0.3","@types/node":"^12.20.10","angular-cli-ghpages":"^1.0.0","codelyzer":"^6.0.1","http-server":"^14.0.0","jasmine-core":"~3.5.0","jasmine-spec-reporter":"~5.0.0","karma":"~6.3.3","karma-chrome-launcher":"~3.1.0","karma-coverage-istanbul-reporter":"~3.0.2","karma-jasmine":"~3.3.0","karma-jasmine-html-reporter":"^1.5.0","ng-packagr":"^13.0.3","protractor":"~7.0.0","release-it":"^14.11.6","ts-node":"~8.3.0","tslint":"~6.1.0","typescript":"^4.4.4","webpack-bundle-analyzer":"^3.9.0"},"description":"

\"angular-material-extensions's \"angular-material-extensions's\n \"angular-material-extensions's\n

\n\n# @angular-material-extensions/password-strength - Material password strength meter to indicate how secure is the provided password - Angular V12 supported incl. schematics\n\n[![npm version](https://badge.fury.io/js/%40angular-material-extensions%2Fpassword-strength.svg)](https://badge.fury.io/js/%40angular-material-extensions%2Fpassword-strength)\n[![npm demo](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://angular-material-extensions.github.io/password-strength)\n[![docs: typedoc](https://img.shields.io/badge/docs-typedoc-4D0080.svg)](https://angular-material-extensions.github.io/password-strength/doc/index.html)\n[![Join the chat at https://gitter.im/angular-material-extensions/Lobby](https://badges.gitter.im/angular-material-extensions/Lobby.svg)](https://gitter.im/angular-material-extensions/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)\n[![CircleCI branch](https://img.shields.io/circleci/project/github/angular-material-extensions/password-strength/master.svg?label=circleci)](https://circleci.com/gh/angular-material-extensions/password-strength)\n[![Build Status](https://travis-ci.org/angular-material-extensions/password-strength.svg?branch=master)](https://travis-ci.org/angular-material-extensions/password-strength)\n[![codecov](https://codecov.io/gh/angular-material-extensions/password-strength/branch/master/graph/badge.svg)](https://codecov.io/gh/angular-material-extensions/password-strength)\n[![dependency Status](https://david-dm.org/angular-material-extensions/password-strength/status.svg)](https://david-dm.org/angular-material-extensions/password-strength)\n[![devDependency Status](https://david-dm.org/angular-material-extensions/password-strength/dev-status.svg?branch=master)](https://david-dm.org/angular-material-extensions/password-strength#info=devDependencies)\n[![Greenkeeper Badge](https://badges.greenkeeper.io/angular-material-extensions/password-strength.svg)](https://greenkeeper.io/)\n[![license](https://img.shields.io/github/license/angular-material-extensions/password-strength.svg?style=flat-square)](https://github.com/angular-material-extensions/password-strength/blob/master/LICENSE)\n[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/gdi2290/awesome-angular)\n\n\n

\n \"@angular-material-extensions/password-strength\n

\n\n## Built by and for developers :heart:\n\nDo you have any question or suggestion ? Please do not hesitate to contact us!\nAlternatively, provide a PR | open an appropriate issue [here](https://github.com/angular-material-extensions/password-strength/issues)\n\nIf you like this project, support [angular-material-extensions](https://github.com/angular-material-extensions)\nby starring :star: and sharing it :loudspeaker:\n\n## Table of Contents\n\n- [Demo](#demo)\n- [Components](#components)\n- [Dependencies](#dependencies)\n- [Installation](#installation)\n- [API](#api)\n- [Usage](#usage)\n- [Run Demo App Locally](#run-demo-app-locally)\n- [Development](#development)\n- [Other Angular Libraries](#other-angular-libraries)\n- [Support](#support)\n- [License](#license)\n\n\n\n## [Demo](https://angular-material-extensions.github.io/password-strength)\n\nView all the directives and components in action at [https://angular-material-extensions.github.io/password-strength](https://angular-material-extensions.github.io/password-strength)\n\n\n\n## Library's components\n\n- `` used to calculate and display the strength of a provided password\n\n1. strength score <= 20%\n\n

\n \"@angular-material-extensions/password-strength\n

\n\n2. strength score <= 80%\n\n

\n \"@angular-material-extensions/password-strength\n

\n\n1. strength score > 80%\n\n

\n \"@angular-material-extensions/password-strength\n

\n\n- `` used to display more information about the strength of a provided password\n\n

\n \"@angular-material-extensions/password-strength's\n

\n\n- `` used to show/hide the password provided in the input element\n\n

\n \"@angular-material-extensions/password-strength's\n

\n\n---\n\n\n\n## Dependencies\n* [Angular](https://angular.io) developed and tested with `12.x`\n\n---\n\n\n\n## [Installation](https://angular-material-extensions.github.io/password-strength/getting-started)\n\n## 1. Install via _ng add_. (Recommended)\n\nIf Angular Material Design is not setup, just run `ng add @angular/material` [learn more](https://material.angular.io/guide/getting-started)\n\nNow add the library via the `angular schematics`\n\n```shell\nng add @angular-material-extensions/password-strength\n```\n\n## 2. Install via _npm_. (Alternative)\n\nNow install `@angular-material-extensions/password-strength` via:\n\n```shell\nnpm install --save @angular-material-extensions/password-strength\n```\n\n---\n\n##### SystemJS\n\n> **Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle.\n> In your systemjs config file, `map` needs to tell the System loader where to look for `@angular-material-extensions/password-strength`:\n\n```js\n{\n '@angular-material-extensions/password-strength';: 'node_modules/@angular-material-extensions/password-strength/bundles/password-strength.umd.js',\n}\n```\n\n`-> follow the instructions` [here](https://github.com/angular-material-extensions/password-strength/tree/master/docs/INSTRUCTIONS.md)\n\n---\n\n## Import the library\n\nOnce installed you need to import the main module:\n\n```js\nimport { MatPasswordStrengthModule } from \"@angular-material-extensions/password-strength\";\n```\n\nThe only remaining part is to list the imported module in your application module. The exact method will be slightly\ndifferent for the root (top-level) module for which you should end up with the code similar to (notice ` MatPasswordStrengthModule .forRoot()`):\n\n```js\nimport { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';\n\n@NgModule({\n declarations: [AppComponent, ...],\n imports: [MatPasswordStrengthModule.forRoot(), ...],\n bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nOther modules in your application can simply import `MatPasswordStrengthModule`:\n\n```js\nimport { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';\n\n@NgModule({\n declarations: [OtherComponent, ...],\n imports: [MatPasswordStrengthModule, ...],\n})\nexport class OtherModule {\n}\n```\n\n\n\n## API\n\n### `` used to calculate and display the strength of a provided password - [see the demo examples](https://angular-material-extensions.github.io/password-strength/examples)\n\n| option | bind | type | default | description |\n| :------------------------ | :--------: | :-------: | :-----: | :------------------------------------------------------------------------------- |\n| password | `Input() ` | string | - | the password to calculate its strength |\n| customValidator | `Input() ` | RegExp | - | custom regex validator |\n| externalError | `Input() ` | `boolean` | `false` | used to change the color of the password to warn if an external error occurs |\n| enableLengthRule | `Input() ` | `boolean` | `true` | whether to validate the length of the password |\n| enableLowerCaseLetterRule | `Input() ` | `boolean` | `true` | whether a lowercase letter is optional |\n| enableUpperCaseLetterRule | `Input() ` | `boolean` | `true` | whether a uppercase letter is optional |\n| enableDigitRule | `Input() ` | `boolean` | `true` | whether a digit char is optional |\n| enableSpecialCharRule | `Input() ` | `boolean` | true | whether a special char is optional |\n| min | `Input() ` | `number` | 8 | the minimum length of the password |\n| max | `Input() ` | `number` | 30 | the maximum length of the password |\n| warnThreshold | `Input() ` | `number` | 21 | password strength less than this number shows the warn color |\n| accentThreshold | `Input() ` | `number` | 81 | password strength less than this number shows the accent color |\n| onStrengthChanged | Output() | `number` | - | emits the strength of the provided password in % e.g: 20%, 40%, 60%, 80% or 100% |\n\n### `` used to display more information about the strength of a provided password - [see the demo examples](https://angular-material-extensions.github.io/password-strength/examples/mat-password-strength-info)\n\n| option | bind | type | default | description |\n| :---------------------- | :--------: | :-----------------------: | :---------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------- |\n| passwordComponent | `Input() ` | PasswordStrengthComponent | - | the password component used in the template in order to display more info related to the provided password |\n| enableScoreInfo | `Input() ` | `boolean` | `false` | whether to show the password's score in % |\n| lowerCaseCriteriaMsg | `Input() ` | `string` | contains at least one lower character | an appropriate msg for the lower case % |\n| upperCaseCriteriaMsg | `Input() ` | `string` | contains at least one upper character | an appropriate msg for the upper case % |\n| digitsCriteriaMsg | `Input() ` | `string` | contains at least one digit character | an appropriate msg for the digit case % |\n| specialCharsCriteriaMsg | `Input() ` | `string` | contains at least one special character | an appropriate msg for the special case % |\n| customCharsCriteriaMsg | `Input() ` | `string` | contains at least one custom character | an appropriate msg for the custom validator case % |\n| minCharsCriteriaMsg | `Input() ` | `string` | contains at least \\${this.passwordComponent.min} characters | an appropriate msg for the minimum `number` of chars % |\n\n### `` used to show/hide the password provided in the input element\n\n| option | bind | type | default | description |\n| :-------- | :--------: | :-------: | :-----: | :-------------------------------------------------------------- |\n| isVisible | `Input() ` | `boolean` | `false` | whether the password is visible or hidden |\n| tabindex | `Input() ` | `string` | `null` | set the desired tabindex value of the toggle visibility button. |\n\n---\n\n\n\n## [Usage](https://angular-material-extensions.github.io/password-strength/getting-started)\n\nadd the `@angular-material-extensions/password-strength` element to your template:\n\n```html\n \n```\n\nThis will display only the material password strength meter in form of a progress without any input fields\nor similar.\n\n### In the following example, we integration a material input container with `@angular-material-extensions/password-strength` 's component.\n\nNOTE: In order to repaint the mat-form-field correctly after changing the value of the password's strength, please consider\nto change the detection strategy for the parent component -->\n\n```typescript\nimport {\n ChangeDetectionStrategy,\n Component,\n OnInit,\n ViewEncapsulation,\n} from \"@angular/core\";\nimport { Title } from \"@angular/platform-browser\";\nimport { MatSlideToggleChange } from \"@angular/material\";\nimport { MatPasswordStrengthComponent } from \"@angular-material-extensions/password-strength\";\n\n@Component({\n selector: \"app-home\",\n templateUrl: \"./home.component.html\",\n styleUrls: [\"./home.component.scss\"],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HomeComponent implements OnInit {}\n```\n\n```html\n
\n \n Password\n \n \n {{password.value.length}} / 25\n \n \n\n \n \n
\n```\n\n[learn more about mat-form-field](https://material.angular.io/components/input/overview)\n\n### Example of how to use the emitted strength of the password in your template\n\n```html\n
\n
\n \n done\n \n \n error\n \n
\n

Password's strength = {{passwordComponent.strength}} %100

\n
\n
\n```\n\n### Use the toggle visibility component\n\n- add the `mat-pass-toggle-visibility` to your `mat-form-field`\n- give it a name to use it in the html file like `toggle`\n- set the type of the input to that value emitted from the `mat-pass-toggle-visibility` component ``\n\n```html\n\n Password\n \n \n \n \n \n {{password.value.length}} / 25\n \n\n```\n\n### Client Side password's validation using a built in angular formController\n\n1. add an input element to your template with an appropriate @angular-material-extensions/password-strength's component\n2. hold a reference of the @angular-material-extensions/password-strength's component by adding `passwordComponentWithValidation` (or whatever you want) inside the element\n\ne.g:\n\n```html\n\n\n```\n\n3. bind the form controller of the mat-password-strength to the input element\n\n- you can access the form controller of @angular-material-extensions/password-strength using the chile view --> `passwordComponentWithValidation.passwordFormControl`\n- bind the form controller to an input element --> `[formControl]=\"passwordComponentWithValidation.passwordFormControl\"`\n\n4. Full example - see below\n\n```html\n
\n \n Password\n \n \n {{passwordWithValidation.value.length}} / 25\n \n \n Password is required\n \n \n Password is not valid\n \n \n \n \n \n \n \n
\n```\n\nthis will looks like -->\n\n

\n \"@angular-material-extensions/password-strength\"\n

\n\n---\n\n### custom regex validation\n\nplease consider to use the `customValidator` input (see below)\n\n```html\nShow Password Details\n\n\n Password\n \n \n \n {{password.value.length}} / {{passwordComponent.max}}\n \n\n\n\n\n\n\n\n```\n\n```ts\npattern = new RegExp(/^(?=.*?[äöüÄÖÜß])/);\n```\n\n### Confirm the password with built in angular form controllers - [see the live example](https://angular-material-extensions.github.io/password-strength)\n\n

\n \"@angular-material-extensions/password-strength\n

\n\n

\n \"@angular-material-extensions/password-strength\n

\n\n### Use always the green color for a strong password just by adding the `green` css class to the `mat-password-strength`\n\n```html\n\n\n```\n\n### Supporting custom messages and ngx-translate for the info component please check the example demo [here](https://angular-material-extensions.github.io/password-strength/examples/mat-password-strength-info)\n\n

\n \"@angular-material-extensions/password-strength\n

\n\nfor more examples please visit this URL : [(https://angular-material-extensions.github.io/password-strength/examples]((https://angular-material-extensions.github.io/password-strength/examples)\n\nPlease checkout the full documentation [here](https://angular-material-extensions.github.io//password-strength/doc/index.html)\nor follow the official [tutorial](https://angular-material-extensions.github.io/password-strength/getting-started)\n\n---\n\n\n\n### [ Run Demo App Locally](https://github.com/angular-material-extensions/password-strength/tree/master/docs/INSTRUCTIONS_DEMO.md)\n\n\n\n### [Development](https://github.com/angular-material-extensions/password-strength/tree/master/docs/INSTRUCTIONS_DEV.md)\n\n## Other Angular Libraries\n\n- [ngx-auth-firebaseui](https://github.com/AnthonyNahas/ngx-auth-firebaseui)\n- [ngx-mailto](https://github.com/AnthonyNahas/ngx-mailto)\n- [ngx-linkifyjs](https://github.com/AnthonyNahas/ngx-linkifyjs)\n- [@angular-material-extensions/google-maps-autocomplete](https://github.com/angular-material-extensions/google-maps-autocomplete)\n- [@angular-material-extensions/select-country](https://github.com/angular-material-extensions/select-country)\n- [@angular-material-extensions/select-icon](https://github.com/angular-material-extensions/select-icon)\n- [@angular-material-extensions/fab-menu](https://github.com/angular-material-extensions/fab-menu)\n- [@angular-material-extensions/link-preview](https://github.com/angular-material-extensions/link-preview)\n- [@angular-material-extensions/pages](https://github.com/angular-material-extensions/pages)\n- [@angular-material-extensions/contacts](https://github.com/angular-material-extensions/contacts)\n- [@angular-material-extensions/faq](https://github.com/angular-material-extensions/faq)\n- [@angular-material-extensions/combination-generator](https://github.com/angular-material-extensions/combination-generator)\n\n---\n\n\n\n## Support\n\n- Drop an email to: [Anthony Nahas](mailto:anthony.na@hotmail.de)\n- or open an appropriate [issue](https://github.com/angular-material-extensions/password-strength/issues)\n- let us chat on [Gitter](https://gitter.im/angular-material-extensions/Lobby)\n\nBuilt by and for developers :heart: we will help you :punch:\n\n---\n\n![jetbrains logo](https://raw.githubusercontent.com/angular-material-extensions/password-strength/HEAD/assets/jetbrains-variant-4_logos/jetbrains-variant-4.png)\n\nThis project is supported by [jetbrains](https://www.jetbrains.com/) with 1 ALL PRODUCTS PACK OS LICENSE incl. [webstorm](https://www.jetbrains.com/webstorm)\n\n---\n\n\n\n## License\n\nCopyright (c) 2019-2021 [Anthony Nahas](https://github.com/AnthonyNahas). Licensed under the MIT License (MIT)\n","readmeFilename":"README.md"}