gCubeSystem
/
information-system-gui
15
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/main/webapp/app/facet-composer/facet-composer.component.html
View File

@ -67,8 +67,13 @@
<mat-label *ngIf="selectedCredentialType==='username/password'" for="pwd">password</mat-label> <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==='clientId/secret'" for="pwd">secret</mat-label>
<mat-label *ngIf="selectedCredentialType==='token/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> </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> </div>
<ng-template #singlefield> <ng-template #singlefield>
<mat-form-field> <mat-form-field>
@ -154,10 +159,6 @@
<input matInput formControlName="val" type="date"/> <input matInput formControlName="val" type="date"/>
</mat-form-field> </mat-form-field>
</div> </div>
<button mat-stroked-button color="primary" style="margin-left: 12px;"
(click)="removeExtraProp(facetTemplate.key,ind,i)" >
Remove custom property</button>
</div> </div>
</div> </div>
<button mat-stroked-button color="primary" style="margin-left: 12px; margin-top: 18px;" <button mat-stroked-button color="primary" style="margin-left: 12px; margin-top: 18px;"

16
src/main/webapp/app/facet-composer/facet-composer.component.ts
View File

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