Skip to content

Commit 7db3857

Browse files
committed
docs(project): updated the readme (password confirmation)
1 parent f3fcfce commit 7db3857

File tree

1 file changed

+23
-21
lines changed

1 file changed

+23
-21
lines changed

README.md

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -173,24 +173,23 @@ export class OtherModule {
173173

174174
## API
175175

176-
### `<mat-password-strength>` used to calculate and display the strength of a provided password
176+
### `<mat-password-strength>` used to calculate and display the strength of a provided password - [see the demo examples](https://angular-material-extensions.github.io/password-strength/examples)
177177

178178
| option | bind | type | default | description |
179179
|:-------------------|:--------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|
180180
| password | `Input() ` | string | - | the password to calculate its strength
181-
| validators | `Input() ` | Criteria[] | see inside the class ;) | custom form validator used to validate the password
182181
| customValidator | `Input() ` | RegExp | - | custom regex validator
183-
| externalError | `Input() ` | boolean | `false` | used to change the color of the password to warn if an external error occurs
184-
| enableLengthRule | `Input() ` | boolean | true | whether to validate the length of the password
185-
| enableLowerCaseLetterRule | `Input() ` | boolean | true | whether a lowercase letter is optional
186-
| enableUpperCaseLetterRule | `Input() ` | boolean | true | whether a uppercase letter is optional
187-
| enableDigitRule | `Input() ` | boolean | true | whether a digit char is optional
188-
| enableSpecialCharRule | `Input() ` | boolean | true | whether a special char is optional
189-
| min | `Input() ` | number | 8 | the minimum length of the password
190-
| max | `Input() ` | number | 30 | the maximum length of the password
191-
| onStrengthChanged | Output() | number | - | emits the strength of the provided password in % e.g: 20%, 40%, 60%, 80% or 100%
192-
193-
### `<mat-password-strength-info>` used to display more information about the strength of a provided password
182+
| externalError | `Input() ` | `boolean` | `false` | used to change the color of the password to warn if an external error occurs
183+
| enableLengthRule | `Input() ` | `boolean` | `true` | whether to validate the length of the password
184+
| enableLowerCaseLetterRule | `Input() ` | `boolean` | `true` | whether a lowercase letter is optional
185+
| enableUpperCaseLetterRule | `Input() ` | `boolean` | `true` | whether a uppercase letter is optional
186+
| enableDigitRule | `Input() ` | `boolean` | `true` | whether a digit char is optional
187+
| enableSpecialCharRule | `Input() ` | `boolean` | true | whether a special char is optional
188+
| min | `Input() ` | `number` | 8 | the minimum length of the password
189+
| max | `Input() ` | `number` | 30 | the maximum length of the password
190+
| onStrengthChanged | Output() | `number` | - | emits the strength of the provided password in % e.g: 20%, 40%, 60%, 80% or 100%
191+
192+
### `<mat-password-strength-info>` 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)
194193

195194
| option | bind | type | default | description |
196195
|:-------------------|:--------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|
@@ -201,7 +200,7 @@ export class OtherModule {
201200
| digitsCriteriaMsg | `Input() ` | `string` | contains at least one digit character | an appropriate msg for the digit case %
202201
| specialCharsCriteriaMsg | `Input() ` | `string` | contains at least one special character | an appropriate msg for the special case %
203202
| customCharsCriteriaMsg | `Input() ` | `string` | contains at least one custom character | an appropriate msg for the custom validator case %
204-
| minCharsCriteriaMsg | `Input() ` | `string` | contains at least ${this.passwordComponent.min} characters | an appropriate msg for the minimum number of chars %
203+
| minCharsCriteriaMsg | `Input() ` | `string` | contains at least ${this.passwordComponent.min} characters | an appropriate msg for the minimum `number` of chars %
205204

206205

207206
### `<mat-pass-toggle-visibility>` used to show/hide the password provided in the input element
@@ -226,7 +225,7 @@ add the `@angular-material-extensions/password-strength` element to your templat
226225
This will display only the material password strength meter in form of a progress without any input fields
227226
or similar.
228227

229-
#### In the following example, we integration a material input container with `@angular-material-extensions/password-strength` 's component.
228+
### In the following example, we integration a material input container with `@angular-material-extensions/password-strength` 's component.
230229

231230
NOTE: In order to repaint the mat-form-field correctly after changing the value of the password's strength, please consider
232231
to change the detection strategy for the parent component -->
@@ -269,7 +268,7 @@ export class HomeComponent implements OnInit {}
269268

270269
[learn more about mat-form-field](https://material.angular.io/components/input/overview)
271270

272-
#### Example of how to use the emitted strength of the password in your template
271+
### Example of how to use the emitted strength of the password in your template
273272

274273
```html
275274
<div fxLayout="row" fxLayoutGap="10px">
@@ -287,7 +286,7 @@ export class HomeComponent implements OnInit {}
287286
</div>
288287
```
289288

290-
#### Use the toggle visibility component
289+
### Use the toggle visibility component
291290

292291
- add the `mat-pass-toggle-visibility` to your `mat-form-field`
293292
- give it a name to use it in the html file like `toggle`
@@ -309,7 +308,7 @@ export class HomeComponent implements OnInit {}
309308
</mat-form-field>
310309
```
311310

312-
#### Client Side password's validation using a built in angular formController
311+
### Client Side password's validation using a built in angular formController
313312

314313
1. add an input element to your template with an appropriate @angular-material-extensions/password-strength's component
315314
2. hold a reference of the @angular-material-extensions/password-strength's component by adding `passwordComponentWithValidation` (or whatever you want) inside the element
@@ -367,7 +366,7 @@ this will looks like -->
367366

368367
---
369368

370-
#### custom regex validation
369+
### custom regex validation
371370

372371
please consider to use the `customValidator` input (see below)
373372

@@ -407,9 +406,12 @@ please consider to use the `customValidator` input (see below)
407406
pattern = new RegExp(/^(?=.*?[äöüÄÖÜß])/);
408407
```
409408

409+
### Confirm the password with built in angular form controllers - [see the live example](https://angular-material-extensions.github.io/password-strength)
410410

411411

412-
#### 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)
412+
413+
414+
### 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)
413415

414416
<p align="center">
415417
<img alt="@angular-material-extensions/password-strength demonstration" style="text-align: center;"
@@ -467,5 +469,5 @@ This project is supported by [jetbrains](https://www.jetbrains.com/) with 1 ALL
467469

468470
## License
469471

470-
Copyright (c) 2018 [Anthony Nahas](https://github.com/AnthonyNahas). Licensed under the MIT License (MIT)
472+
Copyright (c) 2019 [Anthony Nahas](https://github.com/AnthonyNahas). Licensed under the MIT License (MIT)
471473

0 commit comments

Comments
 (0)