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

@ -45,18 +45,47 @@
<!-- PROPERTIES --> <!-- PROPERTIES -->
<div formGroupName ="props" > <div formGroupName ="props" >
<div *ngFor="let prop of facetTemplate.value.guiProps"> <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;"> <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> <p style="color: darkgrey;">{{prop.label}}</p>
<mat-form-field>
<mat-label>username</mat-label> <mat-form-field>
<input matInput formControlName="schema" id="username" <mat-label for="credentials" >Choose:</mat-label>
type="text"/> <mat-select formControlName="credentials" id="credentials" (selectionChange)="setCredentialType($event)">
</mat-form-field> <mat-option *ngFor="let opt of credentialTypes" [value]="opt">
<mat-form-field> {{opt}}
<mat-label>password</mat-label> </mat-option>
<input matInput formControlName="value" id="password" </mat-select>
type="password"/> </mat-form-field>
</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 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> </div>
<ng-template #singlefield> <ng-template #singlefield>
<mat-form-field> <mat-form-field>
@ -167,8 +196,7 @@
(click)="addFacet(facetTemplate.key)" [disabled]="facetTemplate.value.max==='1'"> (click)="addFacet(facetTemplate.key)" [disabled]="facetTemplate.value.max==='1'">
<mat-icon>add</mat-icon>Add new </button> <mat-icon>add</mat-icon>Add new </button>
</div> </div>
</div> <!-- ends the form -->
</div> <!-- ends the form -->
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-button type="submit" (click)="onSubmit()">Submit</button> <button mat-button type="submit" (click)="onSubmit()">Submit</button>

View File

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