File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Accessors
|
|
|
|
greenMinLength
|
Type : number
|
Optional override for the green minimum length from tenant login options.
When provided, this value is used instead of fetching from PasswordStrengthService.
Useful for downgraded AngularJS usage where the value comes from an interceptable HTTP call.
|
|
password
|
Type : string
|
Default value : ''
|
|
strengthEnforced
|
Type : boolean
|
Default value : false
|
Outputs
|
onRequirementsFulfilled
|
Type : EventEmitter
|
Methods
|
checkRequirement
|
checkRequirement(requirement: unknown, password: unknown)
|
Parameters :
| Name |
Type |
Optional |
| requirement |
unknown
|
No
|
| password |
unknown
|
No
|
|
|
isPasswordValid
|
isPasswordValid()
|
|
|
|
ngOnChanges
|
ngOnChanges(changes: SimpleChanges)
|
Parameters :
| Name |
Type |
Optional |
| changes |
SimpleChanges
|
No
|
|
|
Async
ngOnInit
|
ngOnInit()
|
|
|
|
onPasswordChange
|
onPasswordChange(password: unknown)
|
Parameters :
| Name |
Type |
Optional |
| password |
unknown
|
No
|
|
|
basicChecklist
|
Type : []
|
Default value : [
{
label: gettext('Must have at least {{length}} characters'),
check: (password: string) => 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.passwordService.hasLowerCase,
icon: '',
contextualColor: '',
textColor: ''
},
{
label: gettext('Include uppercase characters (for example, ABCDEF)'),
check: this.passwordService.hasUpperCase,
icon: '',
contextualColor: '',
textColor: ''
},
{
label: gettext('Include numbers (for example, 123456)'),
check: this.passwordService.hasNumbers,
icon: '',
contextualColor: '',
textColor: ''
},
{
label: gettext('Include symbols (for example, !@#$%^)'),
check: this.passwordService.hasSpecialChars,
icon: '',
contextualColor: '',
textColor: ''
}
]
|
|
minGreenLength
|
Type : number
|
Default value : 8
|
|
recommendedMinLength
|
Type : number
|
|
recommendedMinLengthCheck
|
Type : literal type
|
Accessors
|
translateParams
|
gettranslateParams()
|
@if (strengthEnforced) {
<div class="m-b-8">{{ 'Password must meet the requirements below:' | translate }}</div>
<ul class="list-unstyled">
@for (requirement of combinedChecklist; track requirement.label) {
<li class="small d-flex">
<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>
} @else {
<div class="m-b-8">{{ 'Password must meet the requirements below:' | translate }}</div>
<ul class="list-unstyled">
@for (requirement of basicChecklist; track requirement.label) {
<li class="small d-flex">
<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">
@if (recommendedMinLengthCheck) {
<li class="small d-flex">
<i
class="{{ recommendedMinLengthCheck.contextualColor }}"
[c8yIcon]="recommendedMinLengthCheck.icon"
></i>
<span
class="m-l-4 small {{ recommendedMinLengthCheck.textColor }}"
[translate]="recommendedMinLengthCheck.label"
[translateParams]="this.translateParams"
></span>
</li>
}
@for (requirement of enhancedStrengthCheckList; track requirement.label) {
<li class="small d-flex">
<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>
}