-
-
Notifications
You must be signed in to change notification settings - Fork 75
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
- Loading branch information
1 parent
c27acdb
commit 8daf84e
Showing
3 changed files
with
93 additions
and
52 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,36 @@ | ||
| ```html | ||
| <div fxFlex> | ||
| <!--password input filed--> | ||
| <mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color"> | ||
| <!--password input filed--> | ||
| <mat-form-field appearance="outline" style="width: 100%"> | ||
| <mat-label>Password</mat-label> | ||
| <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility> | ||
| <input matInput #password | ||
| [type]="toggle.type" | ||
| <mat-pass-toggle-visibility #toggle2 matSuffix></mat-pass-toggle-visibility> | ||
| <input matInput #passwordWithValidation | ||
| [type]="toggle2.type" | ||
| required | ||
| [formControl]="passwordComponentWithValidation.passwordFormControl" | ||
| placeholder="Password"> | ||
| <mat-hint align="end" aria-live="polite"> | ||
| {{password.value.length}} / 25 | ||
| </mat-hint> | ||
| </mat-form-field> | ||
| <!--@angular-material-extensions/password-strength's main component--> | ||
| <mat-password-strength #passwordComponent | ||
| (onStrengthChanged)="onStrengthChanged($event)" | ||
| [password]="password.value"> | ||
| </mat-password-strength> | ||
| <!--Password's strength info--> | ||
| <mat-password-strength-info | ||
| *ngIf="showDetails" | ||
| [passwordComponent]="passwordComponent"> | ||
| </mat-password-strength-info> | ||
| </div> | ||
|
|
||
| <!--password hint--> | ||
| <mat-hint align="end" aria-live="polite"> | ||
| {{passwordWithValidation.value.length}} / {{passwordComponentWithValidation.max}} | ||
| </mat | ||
| <!--password error msgs--> | ||
| <mat-error *ngIf="passwordComponentWithValidation.passwordFormControl.hasError('required')"> | ||
| Password is required | ||
| </mat-error> | ||
| <mat-error *ngIf="passwordComponentWithValidation.passwordFormControl.hasError('pattern')"> | ||
| Password is not valid | ||
| </mat-error> | ||
|
|
||
| </mat-form-field> | ||
|
|
||
| <!--@angular-material-extensions/password-strength's main component--> | ||
| <mat-password-strength #passwordComponentWithValidation | ||
| (onStrengthChanged)="onStrengthChanged($event)" | ||
| [password]="passwordWithValidation.value"> | ||
| </mat-password-str | ||
| <!--Password's strength info--> | ||
| <mat-password-strength-info | ||
| *ngIf="showDetails" | ||
| [passwordComponent]="passwordComponentWithValidation"> | ||
| </mat-password-strength | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,61 @@ | ||
| ```html | ||
| <div fxFlex> | ||
| <!--password input filed--> | ||
| <mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color"> | ||
| <mat-label>Password</mat-label> | ||
| <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility> | ||
| <input matInput #password | ||
| [type]="toggle.type" | ||
| required | ||
| placeholder="Password"> | ||
| <mat-hint align="end" aria-live="polite"> | ||
| {{password.value.length}} / 25 | ||
| </mat-hint> | ||
| </mat-form-field> | ||
| <!--@angular-material-extensions/password-strength's main component--> | ||
| <mat-password-strength #passwordComponent | ||
| (onStrengthChanged)="onStrengthChanged($event)" | ||
| [password]="password.value"> | ||
| </mat-password-strength> | ||
| <!--Password's strength info--> | ||
| <mat-password-strength-info | ||
| *ngIf="showDetails" | ||
| [passwordComponent]="passwordComponent"> | ||
| </mat-password-strength-info> | ||
| </div> | ||
| <!--password input filed--> | ||
| <mat-form-field appearance="outline" style="width: 100%"> | ||
| <mat-label>Password</mat-label> | ||
| <mat-pass-toggle-visibility #toggle3 matSuffix></mat-pass-toggle-visibility> | ||
| <input matInput #passwordWithConfirmation | ||
| [type]="toggle3.type" | ||
| [formControl]="passwordComponentWithConfirmation.passwordFormControl" | ||
| placeholder="Password" | ||
| required> | ||
|
|
||
| <!--password hint--> | ||
| <mat-hint align="end" aria-live="polite"> | ||
| {{passwordWithConfirmation.value.length}} / {{passwordComponentWithConfirmation.max}} | ||
| </mat-hint> | ||
|
|
||
| <!-- Error Messages --> | ||
| <mat-error *ngIf="passwordComponentWithConfirmation.passwordFormControl.hasError('required')"> | ||
| Password is required | ||
| </mat-error> | ||
| <mat-error *ngIf="passwordComponentWithConfirmation.passwordFormControl.hasError('pattern')"> | ||
| Password is not valid | ||
| </mat-error> | ||
| </mat-form-field> | ||
|
|
||
| <!--@angular-material-extensions/password-strength's main component--> | ||
| <mat-password-strength #passwordComponentWithConfirmation | ||
| (onStrengthChanged)="onStrengthChanged($event)" | ||
| [password]="passwordWithConfirmation.value"> | ||
| </mat-password-strength> | ||
|
|
||
| <!--Password's strength info--> | ||
| <mat-password-strength-info | ||
| *ngIf="showDetails3" | ||
| [passwordComponent]="passwordComponentWithConfirmation"> | ||
| </mat-password-strength-info> | ||
|
|
||
| <!--password input field for confirmation--> | ||
| <mat-form-field appearance="outline" class="mt-3" style="width: 100%"> | ||
| <mat-label>Confirm Password</mat-label> | ||
| <mat-pass-toggle-visibility #toggleConfirmPassword matSuffix></mat-pass-toggle-visibility> | ||
| <input matInput #passwordToConfirm | ||
| [type]="toggleConfirmPassword.type" | ||
| [formControl]="passwordComponentWithConfirmation.passwordConfirmationFormControl" | ||
| placeholder="Password"> | ||
|
|
||
| <!-- password hint--> | ||
| <mat-hint align="end" aria-live="polite"> | ||
| {{passwordToConfirm.value.length}} / {{passwordComponentWithConfirmation.max}} | ||
| </mat-hint> | ||
|
|
||
| <!-- password error msgs--> | ||
| <mat-error *ngIf="passwordComponentWithConfirmation.passwordConfirmationFormControl.hasError('required')"> | ||
| Password confirmation is required | ||
| </mat-error> | ||
| <mat-error | ||
| *ngIf="passwordComponentWithConfirmation.passwordConfirmationFormControl.hasError('notConfirmed')"> | ||
| Password is not the same | ||
| </mat-error> | ||
| </mat-form-field> | ||
| ``` |