managing credential fields
This commit is contained in:
parent
a881508435
commit
0f26bd2de3
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue