Skip to content

Commit c150439

Browse files
AnthonyNahasAnthonyNahas
committed
demo(app): added ngx-material-password-strength with form validation (form control)
1 parent cd5cb1f commit c150439

File tree

1 file changed

+234
-103
lines changed

1 file changed

+234
-103
lines changed

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

Lines changed: 234 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -23,126 +23,257 @@ <h1>ngx-material-password-strength</h1>
2323

2424
<section class="home">
2525
<div class="container">
26-
<!-- put your content here-->
27-
<mat-card fxFlex>
28-
<mat-card-title>ngx-material-password-strength
29-
</mat-card-title>
30-
<mat-card-subtitle fxLayout="row" fxLayoutGap="10px">
31-
<mat-slide-toggle (change)="onSlideToggleChange($event)">Show Password</mat-slide-toggle>
32-
<mat-slide-toggle [(ngModel)]="showDetails">Show Password Details</mat-slide-toggle>
33-
</mat-card-subtitle>
34-
35-
<mat-card-content>
36-
37-
<div fxFlex>
38-
39-
<mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">
40-
<mat-label>Password</mat-label>
41-
<input matInput #password
42-
[type]="inputType"
43-
required
44-
placeholder="Password">
45-
<mat-hint align="end" aria-live="polite">
46-
{{password.value.length}} / 25
47-
</mat-hint>
48-
</mat-form-field>
49-
50-
<ngx-material-password-strength #passwordComponent
51-
(onStrengthChanged)="onStrengthChanged($event)"
52-
[password]="password.value">
53-
</ngx-material-password-strength>
54-
55-
<mat-card *ngIf="showDetails" fxFlex fxLayout="row" fxLayoutAlign="center">
56-
<mat-card-content fxLayout="column" fxLayoutAlign="start">
57-
58-
<div fxLayout="row" fxLayoutGap="10px">
59-
<div *ngIf="passwordComponent.containAtLeastOneLowerCaseLetter; then done else error">
26+
27+
<div>
28+
<mat-card fxFlex>
29+
<mat-card-title>ngx-material-password-strength
30+
</mat-card-title>
31+
<mat-card-subtitle fxLayout="row" fxLayoutGap="10px">
32+
<mat-slide-toggle (change)="onSlideToggleChange($event)">Show Password</mat-slide-toggle>
33+
<mat-slide-toggle [(ngModel)]="showDetails">Show Password Details</mat-slide-toggle>
34+
</mat-card-subtitle>
35+
36+
<mat-card-content>
37+
38+
<div fxFlex>
39+
40+
<mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">
41+
<mat-label>Password</mat-label>
42+
<input matInput #password
43+
[type]="inputType"
44+
required
45+
placeholder="Password">
46+
<mat-hint align="end" aria-live="polite">
47+
{{password.value.length}} / 25
48+
</mat-hint>
49+
</mat-form-field>
50+
51+
<ngx-material-password-strength #passwordComponent
52+
(onStrengthChanged)="onStrengthChanged($event)"
53+
[password]="password.value">
54+
</ngx-material-password-strength>
55+
56+
<mat-card *ngIf="showDetails" fxFlex fxLayout="row" fxLayoutAlign="center">
57+
<mat-card-content fxLayout="column" fxLayoutAlign="start">
58+
59+
<div fxLayout="row" fxLayoutGap="10px">
60+
<div *ngIf="passwordComponent.containAtLeastOneLowerCaseLetter; then done else error">
61+
</div>
62+
<ng-template #done>
63+
<mat-icon color="primary">done</mat-icon>
64+
</ng-template>
65+
<ng-template #error>
66+
<mat-icon color="warn">error</mat-icon>
67+
</ng-template>
68+
<div>
69+
<p>contains at least one lower character</p>
70+
</div>
6071
</div>
61-
<ng-template #done>
62-
<mat-icon color="primary">done</mat-icon>
63-
</ng-template>
64-
<ng-template #error>
65-
<mat-icon color="warn">error</mat-icon>
66-
</ng-template>
67-
<div>
68-
<p>contains at least one lower character</p>
72+
73+
<div fxLayout="row" fxLayoutGap="10px">
74+
<div *ngIf="passwordComponent.containAtLeastOneUpperCaseLetter; then done else error">
75+
</div>
76+
<ng-template #done>
77+
<mat-icon color="primary">done</mat-icon>
78+
</ng-template>
79+
<ng-template #error>
80+
<mat-icon color="warn">error</mat-icon>
81+
</ng-template>
82+
<div>
83+
<p>contains at least one upper character</p>
84+
</div>
6985
</div>
70-
</div>
7186

72-
<div fxLayout="row" fxLayoutGap="10px">
73-
<div *ngIf="passwordComponent.containAtLeastOneUpperCaseLetter; then done else error">
87+
<div fxLayout="row" fxLayoutGap="10px">
88+
<div *ngIf="passwordComponent.containAtLeastOneDigit; then done else error">
89+
</div>
90+
<ng-template #done>
91+
<mat-icon color="primary">done</mat-icon>
92+
</ng-template>
93+
<ng-template #error>
94+
<mat-icon color="warn">error</mat-icon>
95+
</ng-template>
96+
<div>
97+
<p>contains at least one digit character</p>
98+
</div>
7499
</div>
75-
<ng-template #done>
76-
<mat-icon color="primary">done</mat-icon>
77-
</ng-template>
78-
<ng-template #error>
79-
<mat-icon color="warn">error</mat-icon>
80-
</ng-template>
81-
<div>
82-
<p>contains at least one upper character</p>
100+
101+
<div fxLayout="row" fxLayoutGap="10px">
102+
<div *ngIf="passwordComponent.containAtLeastOneSpecialChar; then done else error">
103+
</div>
104+
<ng-template #done>
105+
<mat-icon color="primary">done</mat-icon>
106+
</ng-template>
107+
<ng-template #error>
108+
<mat-icon color="warn">error</mat-icon>
109+
</ng-template>
110+
<div>
111+
<p>contains at least one special character</p>
112+
</div>
83113
</div>
84-
</div>
85114

86-
<div fxLayout="row" fxLayoutGap="10px">
87-
<div *ngIf="passwordComponent.containAtLeastOneDigit; then done else error">
115+
<div fxLayout="row" fxLayoutGap="10px">
116+
<div *ngIf="passwordComponent.containAtLeastEightChars; then done else error">
117+
</div>
118+
<ng-template #done>
119+
<mat-icon color="primary">done</mat-icon>
120+
</ng-template>
121+
<ng-template #error>
122+
<mat-icon color="warn">error</mat-icon>
123+
</ng-template>
124+
<div>
125+
<p>contains at least eight characters</p>
126+
</div>
88127
</div>
89-
<ng-template #done>
90-
<mat-icon color="primary">done</mat-icon>
91-
</ng-template>
92-
<ng-template #error>
93-
<mat-icon color="warn">error</mat-icon>
94-
</ng-template>
95-
<div>
96-
<p>contains at least one digit character</p>
128+
129+
<div fxLayout="row" fxLayoutGap="10px">
130+
<div *ngIf="passwordComponent.strength === 100; then done else error">
131+
</div>
132+
<ng-template #done>
133+
<mat-icon color="primary">done</mat-icon>
134+
</ng-template>
135+
<ng-template #error>
136+
<mat-icon color="warn">error</mat-icon>
137+
</ng-template>
138+
<div>
139+
<p>Password's strength = {{passwordComponent.strength}} %100</p>
140+
</div>
97141
</div>
98-
</div>
99142

100-
<div fxLayout="row" fxLayoutGap="10px">
101-
<div *ngIf="passwordComponent.containAtLeastOneSpecialChar; then done else error">
143+
</mat-card-content>
144+
</mat-card>
145+
</div>
146+
</mat-card-content>
147+
</mat-card>
148+
149+
<mat-card fxFlex style="margin-top: 3rem">
150+
<mat-card-title>ngx-material-password-strength
151+
</mat-card-title>
152+
<mat-card-subtitle fxLayout="row" fxLayoutGap="10px">
153+
<mat-slide-toggle (change)="onSlideToggleChange($event)">Show Password</mat-slide-toggle>
154+
<mat-slide-toggle [(ngModel)]="showDetails">Show Password Details</mat-slide-toggle>
155+
</mat-card-subtitle>
156+
157+
<mat-card-content>
158+
159+
<div fxFlex>
160+
161+
<mat-form-field appearance="outline" style="width: 100%" >
162+
<mat-label>Password</mat-label>
163+
<input matInput #passwordWithValidation
164+
[type]="inputType"
165+
required
166+
[formControl]="passwordComponentWithValidation.passwordFormControl"
167+
placeholder="Password">
168+
<mat-hint align="end" aria-live="polite">
169+
{{passwordWithValidation.value.length}} / 25
170+
</mat-hint>
171+
<mat-error *ngIf="passwordComponentWithValidation.passwordFormControl.hasError('required')">
172+
Password is required
173+
</mat-error>
174+
<mat-error *ngIf="passwordComponentWithValidation.passwordFormControl.hasError('pattern')">
175+
Password is not valid
176+
</mat-error>
177+
</mat-form-field>
178+
179+
<ngx-material-password-strength #passwordComponentWithValidation
180+
(onStrengthChanged)="onStrengthChanged($event)"
181+
[password]="passwordWithValidation.value">
182+
</ngx-material-password-strength>
183+
184+
<mat-card *ngIf="showDetails" fxFlex fxLayout="row" fxLayoutAlign="center">
185+
<mat-card-content fxLayout="column" fxLayoutAlign="start">
186+
187+
<div fxLayout="row" fxLayoutGap="10px">
188+
<div *ngIf="passwordComponentWithValidation.containAtLeastOneLowerCaseLetter; then done else error">
189+
</div>
190+
<ng-template #done>
191+
<mat-icon color="primary">done</mat-icon>
192+
</ng-template>
193+
<ng-template #error>
194+
<mat-icon color="warn">error</mat-icon>
195+
</ng-template>
196+
<div>
197+
<p>contains at least one lower character</p>
198+
</div>
102199
</div>
103-
<ng-template #done>
104-
<mat-icon color="primary">done</mat-icon>
105-
</ng-template>
106-
<ng-template #error>
107-
<mat-icon color="warn">error</mat-icon>
108-
</ng-template>
109-
<div>
110-
<p>contains at least one special character</p>
200+
201+
<div fxLayout="row" fxLayoutGap="10px">
202+
<div *ngIf="passwordComponentWithValidation.containAtLeastOneUpperCaseLetter; then done else error">
203+
</div>
204+
<ng-template #done>
205+
<mat-icon color="primary">done</mat-icon>
206+
</ng-template>
207+
<ng-template #error>
208+
<mat-icon color="warn">error</mat-icon>
209+
</ng-template>
210+
<div>
211+
<p>contains at least one upper character</p>
212+
</div>
111213
</div>
112-
</div>
113214

114-
<div fxLayout="row" fxLayoutGap="10px">
115-
<div *ngIf="passwordComponent.containAtLeastEightChars; then done else error">
215+
<div fxLayout="row" fxLayoutGap="10px">
216+
<div *ngIf="passwordComponentWithValidation.containAtLeastOneDigit; then done else error">
217+
</div>
218+
<ng-template #done>
219+
<mat-icon color="primary">done</mat-icon>
220+
</ng-template>
221+
<ng-template #error>
222+
<mat-icon color="warn">error</mat-icon>
223+
</ng-template>
224+
<div>
225+
<p>contains at least one digit character</p>
226+
</div>
116227
</div>
117-
<ng-template #done>
118-
<mat-icon color="primary">done</mat-icon>
119-
</ng-template>
120-
<ng-template #error>
121-
<mat-icon color="warn">error</mat-icon>
122-
</ng-template>
123-
<div>
124-
<p>contains at least eight characters</p>
228+
229+
<div fxLayout="row" fxLayoutGap="10px">
230+
<div *ngIf="passwordComponentWithValidation.containAtLeastOneSpecialChar; then done else error">
231+
</div>
232+
<ng-template #done>
233+
<mat-icon color="primary">done</mat-icon>
234+
</ng-template>
235+
<ng-template #error>
236+
<mat-icon color="warn">error</mat-icon>
237+
</ng-template>
238+
<div>
239+
<p>contains at least one special character</p>
240+
</div>
125241
</div>
126-
</div>
127242

128-
<div fxLayout="row" fxLayoutGap="10px">
129-
<div *ngIf="passwordComponent.strength === 100; then done else error">
243+
<div fxLayout="row" fxLayoutGap="10px">
244+
<div *ngIf="passwordComponentWithValidation.containAtLeastEightChars; then done else error">
245+
</div>
246+
<ng-template #done>
247+
<mat-icon color="primary">done</mat-icon>
248+
</ng-template>
249+
<ng-template #error>
250+
<mat-icon color="warn">error</mat-icon>
251+
</ng-template>
252+
<div>
253+
<p>contains at least eight characters</p>
254+
</div>
130255
</div>
131-
<ng-template #done>
132-
<mat-icon color="primary">done</mat-icon>
133-
</ng-template>
134-
<ng-template #error>
135-
<mat-icon color="warn">error</mat-icon>
136-
</ng-template>
137-
<div>
138-
<p>Password's strength = {{passwordComponent.strength}} %100</p>
256+
257+
<div fxLayout="row" fxLayoutGap="10px">
258+
<div *ngIf="passwordComponentWithValidation.strength === 100; then done else error">
259+
</div>
260+
<ng-template #done>
261+
<mat-icon color="primary">done</mat-icon>
262+
</ng-template>
263+
<ng-template #error>
264+
<mat-icon color="warn">error</mat-icon>
265+
</ng-template>
266+
<div>
267+
<p>Password's strength = {{passwordComponentWithValidation.strength}} %100</p>
268+
</div>
139269
</div>
140-
</div>
141270

142-
</mat-card-content>
143-
</mat-card>
144-
</div>
145-
</mat-card-content>
146-
</mat-card>
271+
</mat-card-content>
272+
</mat-card>
273+
</div>
274+
</mat-card-content>
275+
</mat-card>
276+
</div>
277+
147278
</div>
148279
</section>

0 commit comments

Comments
 (0)