managing credential fields

This commit is contained in:
Maria Teresa Paratore 2024-05-28 17:30:18 +02:00
parent a881508435
commit 0f26bd2de3
3 changed files with 63 additions and 23 deletions

View File

@ -47,17 +47,46 @@
<div *ngFor="let prop of facetTemplate.value.guiProps">
<div *ngIf="prop.type==='typeprop'; else singlefield" style="border: 1px solid rgb(202, 202, 202); padding: 10px; margin: 5px;">
<p style="color: darkgrey;">{{prop.label}}</p>
<mat-form-field>
<mat-label>username</mat-label>
<input matInput formControlName="schema" id="username"
type="text"/>
<mat-label for="credentials" >Choose:</mat-label>
<mat-select formControlName="credentials" id="credentials" (selectionChange)="setCredentialType($event)">
<mat-option *ngFor="let opt of credentialTypes" [value]="opt">
{{opt}}
</mat-option>
</mat-select>
</mat-form-field>
<div *ngIf="selectedCredentialType === 'username/password'">
<mat-form-field>
<mat-label for="username">username</mat-label>
<input matInput formControlName="username" type="text"/>
</mat-form-field>
<mat-form-field>
<mat-label>password</mat-label>
<input matInput formControlName="value" id="password"
type="password"/>
<mat-label for="password">password</mat-label>
<input matInput formControlName="password" type="password"/>
</mat-form-field>
</div>
<div *ngIf="selectedCredentialType === 'client-id/secret'">
<mat-form-field>
<mat-label for="client-id">client-id</mat-label>
<input matInput formControlName="client-id" type="text"/>
</mat-form-field>
<mat-form-field>
<mat-label for="secret">secret</mat-label>
<input matInput formControlName="secret" type="password"/>
</mat-form-field>
</div>
<div *ngIf="selectedCredentialType === 'token/secret'">
<mat-form-field>
<mat-label for="token">token</mat-label>
<input matInput formControlName="token" type="text"/>
</mat-form-field>
<mat-form-field>
<mat-label for="secret">secret</mat-label>
<input matInput formControlName="secret" type="password"/>
</mat-form-field>
</div>
</div>
<ng-template #singlefield>
<mat-form-field>
<mat-label>{{prop.label}}</mat-label>
@ -167,7 +196,6 @@
(click)="addFacet(facetTemplate.key)" [disabled]="facetTemplate.value.max==='1'">
<mat-icon>add</mat-icon>Add new </button>
</div>
</div> <!-- ends the form -->
</mat-dialog-content>
<mat-dialog-actions align="end">

View File

@ -11,6 +11,7 @@ import { IResource } from 'app/services/i-resource';
import { FacetComposerService, ITypeSpecification } from './facet-composer.service';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button';
import {MatRadioModule} from "@angular/material/radio";
import { MatInputModule } from '@angular/material/input';
import { MatExpansionModule } from '@angular/material/expansion';
import { IFacetComposer, IFacetProps } from './i-facet-composer';
@ -23,7 +24,7 @@ import { MatSelectFilterModule } from 'mat-select-filter';
templateUrl: './facet-composer.component.html',
styleUrls: ['./facet-composer.component.scss'],
imports:[CommonModule,MatFormFieldModule,SharedModule,
ReactiveFormsModule,MatButtonModule,
ReactiveFormsModule,MatButtonModule,MatRadioModule,
MatDialogModule,MatInputModule,MatExpansionModule,MatSelectFilterModule],
providers: [FacetComposerService]
})
@ -34,6 +35,7 @@ export class FacetComposerComponent implements OnInit {
titlePath: string;
selectedOption: string;
selectedType: string;
selectedCredentialType: string|any;
myForm: FormGroup; //form complessiva
typeSpec: ITypeSpecification;
@ -91,8 +93,9 @@ export class FacetComposerComponent implements OnInit {
];
credentialTypes: string[] = ['username/password', 'client-id/secret', 'token/secret'];
onOptionTypeSelected(): void {
onCredentialChoose(): void {
console.debug('******onOptionsSelected?...'+this.selectedType);
}
@ -122,6 +125,7 @@ export class FacetComposerComponent implements OnInit {
deno: ['',Validators.required],
val: ['',Validators.required],
tipo:['String']
})
}
@ -131,6 +135,8 @@ export class FacetComposerComponent implements OnInit {
}
getPropsGroup(denoFacet:string, index:number):FormGroup{
return (this.getSingleFacetArray(denoFacet).controls[index]).get('props') as FormGroup;
}
@ -183,6 +189,10 @@ export class FacetComposerComponent implements OnInit {
}
setCredentialType(opt:any){
this.selectedCredentialType = opt.value;
console.debug("*******CAMBIATO: "+opt.value);
}
addPropertyControls(facetFg:FormGroup, props: IFacetProps[]):FormGroup{
@ -214,12 +224,14 @@ export class FacetComposerComponent implements OnInit {
}
}
}
if(prop.type==="typeprop"){ //TODO: forse va messo il controllo anche sul tipo di facet
let fc2:FormControl;
propsFg.addControl("schema",fc);
// eslint-disable-next-line prefer-const
fc2 = this.fb.control('') //text or typeprop
propsFg.addControl("value",fc2);
if(prop.type==="typeprop"){
propsFg.addControl("credentials",this.fb.control('',Validators.required));
propsFg.addControl("username",this.fb.control('',Validators.required));
propsFg.addControl("password",this.fb.control('',Validators.required));
propsFg.addControl("client-id",this.fb.control('',Validators.required));
propsFg.addControl("secret",this.fb.control('',Validators.required));
propsFg.addControl("token",this.fb.control('',Validators.required));
propsFg.addControl("secret",this.fb.control('',Validators.required));
}else{
propsFg.addControl(prop.name,fc); //formGroup.addControl(prop_'controlName', formControl);
}