managing credential fields

src/main/webapp/app/facet-composer/facet-composer.component.html

@@ -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>
+											<mat-label for="credentials" >Choose:</mat-label>
-																<input matInput formControlName="schema" id="username" 
+												<mat-select formControlName="credentials" id="credentials" (selectionChange)="setCredentialType($event)">
-																	type="text"/>
+													<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>
+											 		<mat-label for="password">password</mat-label>
-																<input matInput formControlName="value" id="password" 
+													<input matInput formControlName="password" type="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">

src/main/webapp/app/facet-composer/facet-composer.component.ts

@@ -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
+					 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{
 						 propsFg.addControl(prop.name,fc); //formGroup.addControl(prop_'controlName', formControl);
 					 }