core/authentication/password-input.component.ts
The component is used to display a password control that includes the functionality of hiding and showing the input value.
| providers |
)
|
| selector | c8y-password-input |
| standalone | true |
| imports |
C8yTranslatePipe
NgClass
|
| templateUrl | ./password-input.component.html |
Properties |
Methods |
Inputs |
| autocomplete |
Type : string
|
Default value : 'off'
|
|
Value for autocomplete attribute of input |
| id |
Type : string
|
Default value : ''
|
|
Id of input |
| large |
Type : boolean
|
Default value : true
|
|
shows large input when true (default: true) |
| onFocusOut |
onFocusOut()
|
|
Returns :
void
|
| onInput | ||||||
onInput($event: any)
|
||||||
|
Parameters :
Returns :
void
|
| registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
|
Parameters :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
|
Parameters :
Returns :
void
|
| Optional setDisabledState | ||||||
setDisabledState(isDisabled: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| writeValue | ||||||
writeValue(value: any)
|
||||||
|
Parameters :
Returns :
void
|
| disabled |
Type : unknown
|
Default value : false
|
| onChange |
Type : unknown
|
Default value : () => {...}
|
| onTouched |
Type : unknown
|
Default value : () => {...}
|
| type |
Type : string
|
Default value : 'password'
|
| value |
Type : string
|
Default value : ''
|
<div
class="input-group input-group-password"
[ngClass]="{ 'input-group-lg': large }"
>
<input
class="form-control"
[ngClass]="{ 'input-lg': large }"
[type]="type"
[value]="value"
[id]="id"
(input)="onInput($event)"
(focusout)="onFocusOut()"
[disabled]="disabled"
[autocomplete]="autocomplete"
/>
<span class="input-group-btn">
@if (type === 'password') {
<button
class="btn btn-clean"
title="{{ 'Show password' | translate }}"
type="button"
(click)="type = 'text'"
>
<i class="dlt-c8y-icon-eye"></i>
</button>
} @else {
<button
class="btn btn-clean"
title="{{ 'Hide password' | translate }}"
type="button"
(click)="type = 'password'"
>
<i class="dlt-c8y-icon-eye-slash"></i>
</button>
}
</span>
</div>