File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Accessors
|
|
|
|
strengthEnforced
|
Type : boolean
|
Default value : false
|
Outputs
|
onRequirementsFulfilled
|
Type : EventEmitter
|
Methods
|
checkRequirement
|
checkRequirement(requirement, password)
|
Parameters :
| Name |
Optional |
| requirement |
No
|
| password |
No
|
|
|
isPasswordValid
|
isPasswordValid()
|
|
|
|
Async
ngOnInit
|
ngOnInit()
|
|
|
|
onPasswordChange
|
onPasswordChange(password)
|
Parameters :
| Name |
Optional |
| password |
No
|
|
|
basicChecklist
|
Type : []
|
Default value : [
{
label: gettext('Must have at least {{length}} characters'),
check: password => password.length >= this.minGreenLength,
icon: '',
contextualColor: '',
textColor: ''
}
]
|
|
combinedChecklist
|
Type : []
|
Default value : []
|
|
enhancedStrengthCheckList
|
Type : []
|
Default value : [
{
label: gettext('Include lowercase characters (for example, abcdef)'),
check: this.passwordStrengthChecker.hasLowerCase,
icon: '',
contextualColor: '',
textColor: ''
},
{
label: gettext('Include uppercase characters (for example, ABCDEF)'),
check: this.passwordStrengthChecker.hasUpperCase,
icon: '',
contextualColor: '',
textColor: ''
},
{
label: gettext('Include numbers (for example, 123456)'),
check: this.passwordStrengthChecker.hasNumbers,
icon: '',
contextualColor: '',
textColor: ''
},
{
label: gettext('Include symbols (for example, !@#$%^)'),
check: this.passwordStrengthChecker.hasSpecialChars,
icon: '',
contextualColor: '',
textColor: ''
}
]
|
|
minGreenLength
|
Type : number
|
Default value : 8
|
Accessors
|
password
|
setpassword(password: string)
|
Parameters :
| Name |
Type |
Optional |
| password |
string
|
No
|
|
|
translateParams
|
gettranslateParams()
|
<div *ngIf="strengthEnforced">
<div class="m-b-8">{{ 'Password must meet the requirements below:' | translate }}</div>
<ul class="list-unstyled">
<li
class="small d-flex"
*ngFor="let requirement of combinedChecklist"
>
<i
class="{{ requirement.contextualColor }}"
[c8yIcon]="requirement.icon"
></i>
<span
class="m-l-4 small {{ requirement.textColor }}"
[translate]="requirement.label"
[translateParams]="this.translateParams"
></span>
</li>
</ul>
</div>
<div *ngIf="!strengthEnforced">
<div class="m-b-8">{{ 'Password must meet the requirements below:' | translate }}</div>
<ul class="list-unstyled">
<li
class="small d-flex"
*ngFor="let requirement of basicChecklist"
>
<i
class="{{ requirement.contextualColor }}"
[c8yIcon]="requirement.icon"
></i>
<span
class="m-l-4 small {{ requirement.textColor }}"
[translate]="requirement.label"
[translateParams]="this.translateParams"
></span>
</li>
</ul>
<div class="m-b-8">
{{ 'We recommend you to meet these conditions for a stronger password:' | translate }}
</div>
<ul class="list-unstyled">
<li
class="small d-flex"
*ngFor="let requirement of enhancedStrengthCheckList"
>
<i
class="{{ requirement.contextualColor }}"
[c8yIcon]="requirement.icon"
></i>
<span
class="m-l-4 small {{ requirement.textColor }}"
[translate]="requirement.label"
[translateParams]="this.translateParams"
></span>
</li>
</ul>
</div>