Skip to content

Commit 4008483

Browse files
AnthonyNahasAnthonyNahas
committed
docs(project): updated the readme for the new component #153 
1 parent ea62081 commit 4008483

File tree

2 files changed

+59
-28
lines changed

2 files changed

+59
-28
lines changed

‎README.md‎

Lines changed: 54 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,14 @@ View all the directives and components in action at [https://angular-material-ex
8585
src="https://raw.githubusercontent.com/angular-material-extensions/password-strength/HEAD/assets/v2.1.0/ngx-material-strength-password-info.png">
8686
</p>
8787

88+
- `<mat-pass-toggle-visibility>` used to show/hide the password provided in the input element
89+
90+
<p align="center">
91+
<img alt="@angular-material-extensions/password-strength's info" style="text-align: center;"
92+
src="https://raw.githubusercontent.com/angular-material-extensions/password-strength/HEAD/assets/v3.6.0/mat-pass-toggle-visibility.gif">
93+
</p>
94+
95+
8896
---
8997

9098
<a name="dependencies"/>
@@ -169,29 +177,36 @@ export class OtherModule {
169177

170178
| option | bind | type | default | description |
171179
|:-------------------|:--------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|
172-
| password | Input() | string | - | the password to calculate its strength
173-
| validators | Input() | Criteria[] | see inside the class ;) | custom form validator used to validate the password
174-
| externalError | Input() | boolean | false | used to change the color of the password to warn if an external error occurs
175-
| enableLengthRule | Input() | boolean | true | whether to validate the length of the password
176-
| enableLowerCaseLetterRule | Input() | boolean | true | whether a lowercase letter is optional
177-
| enableUpperCaseLetterRule | Input() | boolean | true | whether a uppercase letter is optional
178-
| enableDigitRule | Input() | boolean | true | whether a digit char is optional
179-
| enableSpecialCharRule | Input() | boolean | true | whether a special char is optional
180-
| min | Input() | number | 8 | the minimum length of the password
181-
| max | Input() | number | 30 | the maximum length of the password
180+
| 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
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
182190
| onStrengthChanged | Output() | number | - | emits the strength of the provided password in % e.g: 20%, 40%, 60%, 80% or 100%
183191

184192
### `<mat-password-strength-info>` used to display more information about the strength of a provided password
185193

186194
| option | bind | type | default | description |
187195
|:-------------------|:--------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|
188-
| passwordComponent | Input() | PasswordStrengthComponent | - | the password component used in the template in order to display more info related to the provided password
189-
| enableScoreInfo | Input() | boolean| false | whether to show the password's score in %
190-
| lowerCaseCriteriaMsg | Input() | string | contains at least one lower character | an appropriate msg for the lower case %
191-
| upperCaseCriteriaMsg | Input() | string | contains at least one upper character | an appropriate msg for the upper case %
192-
| digitsCriteriaMsg | Input() | string | contains at least one digit character | an appropriate msg for the digit case %
193-
| specialCharsCriteriaMsg | Input() | string | contains at least one special character | an appropriate msg for the special case %
194-
| minCharsCriteriaMsg | Input() | string | contains at least ${this.passwordComponent.min} characters | an appropriate msg for the minimum number of chars %
196+
| passwordComponent | `Input() ` | PasswordStrengthComponent | - | the password component used in the template in order to display more info related to the provided password
197+
| enableScoreInfo | `Input() ` | `boolean`| `false` | whether to show the password's score in %
198+
| lowerCaseCriteriaMsg | `Input() ` | `string` | contains at least one lower character | an appropriate msg for the lower case %
199+
| upperCaseCriteriaMsg | `Input() ` | `string` | contains at least one upper character | an appropriate msg for the upper case %
200+
| digitsCriteriaMsg | `Input() ` | `string` | contains at least one digit character | an appropriate msg for the digit case %
201+
| specialCharsCriteriaMsg | `Input() ` | `string` | contains at least one special character | an appropriate msg for the special case %
202+
| minCharsCriteriaMsg | `Input() ` | `string` | contains at least ${this.passwordComponent.min} characters | an appropriate msg for the minimum number of chars %
203+
204+
205+
### `<mat-pass-toggle-visibility>` used to show/hide the password provided in the input element
206+
207+
| option | bind | type | default | description |
208+
|:-------------------|:--------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|
209+
| isVisible | `Input() ` | `boolean` | `false` | whether the password is visible or hidden
195210

196211
---
197212

@@ -270,6 +285,28 @@ export class HomeComponent implements OnInit {}
270285
</div>
271286
```
272287

288+
#### Use the toggle visibility component
289+
290+
- add the `mat-pass-toggle-visibility` to your `mat-form-field`
291+
- give it a name to use it in the html file like `toggle`
292+
- set the type of the input to that value emitted from the `mat-pass-toggle-visibility` component `<input matInput [type]="toggle.type"/>`
293+
294+
```html
295+
<mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">
296+
<mat-label>Password</mat-label>
297+
<!-- HERE DOWN :D-->
298+
<mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
299+
<!-- THERE ABOVE ;)-->
300+
<input matInput #password
301+
[type]="toggle.type"
302+
required
303+
placeholder="Password">
304+
<mat-hint align="end" aria-live="polite">
305+
{{password.value.length}} / 25
306+
</mat-hint>
307+
</mat-form-field>
308+
```
309+
273310
#### Client Side password's validation using a built in angular formController
274311

275312
1. add an input element to your template with an appropriate @angular-material-extensions/password-strength's component

‎demo/src/app/home/home.component.ts‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ export class HomeComponent implements OnInit {
1414
}
1515

1616
password: string;
17-
inputType = 'password';
1817
showDetails: boolean;
1918
showDetails2: boolean;
2019

@@ -35,7 +34,6 @@ import {MatSlideToggleChange} from '@angular/material';
3534
export class HomeComponent implements OnInit {
3635
3736
password: string;
38-
inputType = 'password';
3937
showDetails: boolean;
4038
showDetails2: boolean;
4139
@@ -53,10 +51,6 @@ export class HomeComponent implements OnInit {
5351
onStrengthChanged(strength: number) {
5452
console.log('password strength = ', strength);
5553
}
56-
57-
onSlideToggleChange(event: MatSlideToggleChange) {
58-
event.checked ? this.inputType = 'text' : this.inputType = 'password';
59-
}
6054
}
6155
`;
6256

@@ -68,19 +62,19 @@ export class HomeComponent implements OnInit {
6862
stand alone password component
6963
</mat-card-subtitle>
7064
71-
<mat-card-subtitle fxLayout="row" fxLayoutGap="10px">
72-
<mat-slide-toggle (change)="onSlideToggleChange($event)">Show Password</mat-slide-toggle>
73-
<mat-slide-toggle [(ngModel)]="showDetails">Show Password Details</mat-slide-toggle>
74-
</mat-card-subtitle>
65+
<mat-card-subtitle>
66+
<mat-slide-toggle [(ngModel)]="showDetails">Show Password Details</mat-slide-toggle>
67+
</mat-card-subtitle>
7568
7669
<mat-card-content>
7770
<div fxFlex>
7871
7972
<!--password input filed-->
8073
<mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">
8174
<mat-label>Password</mat-label>
75+
<mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
8276
<input matInput #password
83-
[type]="inputType"
77+
[type]="toggle.type"
8478
required
8579
placeholder="Password">
8680
<mat-hint align="end" aria-live="polite">

0 commit comments

Comments
 (0)