added 'toggle visibility' function on password field

This commit is contained in:
Maria Teresa Paratore 2024-05-30 12:50:48 +02:00
parent e218eef261
commit 76cf2220a6
2 changed files with 20 additions and 9 deletions

View File

@ -67,8 +67,13 @@
<mat-label *ngIf="selectedCredentialType==='username/password'" for="pwd">password</mat-label>
<mat-label *ngIf="selectedCredentialType==='clientId/secret'" for="pwd">secret</mat-label>
<mat-label *ngIf="selectedCredentialType==='token/secret'" for="pwd">secret</mat-label>
<input matInput formControlName="pwd" type="password"/>
<input matInput formControlName="pwd" id="pwd" type="{{showPassword?'text':'password'}}"/>
</mat-form-field>
<button mat-button (click)="togglePwdVisibility()" color="primary" matTooltip="toggle visibility" matTooltipPosition="below">
<mat-icon *ngIf="showPassword" class="icon-wide2" onclick="togglePwdVisibility()">visibility_off</mat-icon>
<mat-icon *ngIf="!showPassword" class="icon-wide2" onclick="togglePwdVisibility()">visibility</mat-icon>
</button>
</div>
<ng-template #singlefield>
<mat-form-field>
@ -154,10 +159,6 @@
<input matInput formControlName="val" type="date"/>
</mat-form-field>
</div>
<button mat-stroked-button color="primary" style="margin-left: 12px;"
(click)="removeExtraProp(facetTemplate.key,ind,i)" >
Remove custom property</button>
</div>
</div>
<button mat-stroked-button color="primary" style="margin-left: 12px; margin-top: 18px;"

View File

@ -26,7 +26,7 @@ import { MatSelectFilterModule } from 'mat-select-filter';
imports:[CommonModule,MatFormFieldModule,SharedModule,
ReactiveFormsModule,MatButtonModule,MatRadioModule,
MatDialogModule,MatInputModule,MatExpansionModule,MatSelectFilterModule],
providers: [FacetComposerService]
providers: [FacetComposerService],
})
export class FacetComposerComponent implements OnInit {
@ -40,9 +40,9 @@ export class FacetComposerComponent implements OnInit {
myForm: FormGroup; //form complessiva
typeSpec: ITypeSpecification;
fieldsMap: Map<string, IFacetComposer>;
showPassword:boolean;
// eslint-disable-next-line @typescript-eslint/member-ordering
constructor(private guiService: FacetComposerService, private fb: FormBuilder,
private dialogRef:MatDialogRef<FacetComposerComponent>,
@ -54,16 +54,21 @@ export class FacetComposerComponent implements OnInit {
this.typeSpec = {} as ITypeSpecification;
this.fieldsMap = new Map<string,IFacetComposer>();
this.myForm = this.fb.group({});
this.showPassword = false;
}
ngOnInit(): void {
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
this.typeSpec = res;
this.fieldsMap = new Map(res.facetSpecs.map((obj) => [obj.name+'_'+obj.relation, obj]));
//parto con una facet per tipo
this.createForm(res);
});
}
@ -171,6 +176,12 @@ export class FacetComposerComponent implements OnInit {
}
// eslint-disable-next-line @typescript-eslint/no-empty-function
togglePwdVisibility():void{
this.showPassword = !this.showPassword;
}
setCredentialType(opt:any){
this.selectedCredentialType = opt.value;
}
@ -253,7 +264,6 @@ export class FacetComposerComponent implements OnInit {
}
}