WIP: Add padding to form hints and fix validation after auth type change

MauroDataMapper · Feb 3, 2023 · e138341 · e138341
1 parent c1a9d42
commit e138341
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 5 deletions.
diff --git a/src/app/admin/subscribed-catalogue/subscribed-catalogue.component.html b/src/app/admin/subscribed-catalogue/subscribed-catalogue.component.html
@@ -35,6 +35,7 @@ <h4>
   <mat-form-field
     appearance="outline"
     hintLabel="The Syndication feed URL to connect to"
+    style="padding-bottom: 20px"
   >
     <mat-label>URL</mat-label>
     <input matInput name="url" formControlName="url" required />
@@ -65,34 +66,39 @@ <h4>
   <mat-form-field
     appearance="outline"
     hintLabel="An API key is required to view non-public models in the subscribed catalogue"
-    *ngIf="authenticationType.value === apiKeyAuthenticationType"
+    [hidden]="authenticationType.value !== apiKeyAuthenticationType"
+    style="padding-bottom: 20px"
+
   >
     <mat-label>API Key</mat-label>
-    <input matInput name="apiKey" formControlName="apiKey" required />
+    <input matInput name="apiKey" formControlName="apiKey" [required]="authenticationType.value === apiKeyAuthenticationType" />
   </mat-form-field>
   <mat-form-field
     appearance="outline"
     hintLabel="OAuth Access Token Endpoint URL"
     *ngIf="authenticationType.value === oAuthClientCredentialsAuthenticationType"
+    style="padding-bottom: 20px"
   >
     <mat-label>Token Endpoint URL</mat-label>
-    <input matInput name="tokenUrl" formControlName="tokenUrl" required />
+    <input matInput name="tokenUrl" formControlName="tokenUrl" [required]="authenticationType.value === oAuthClientCredentialsAuthenticationType" />
   </mat-form-field>
   <mat-form-field
     appearance="outline"
     hintLabel="OAuth Client ID"
     *ngIf="authenticationType.value === oAuthClientCredentialsAuthenticationType"
+    style="padding-bottom: 20px"
   >
     <mat-label>Client ID</mat-label>
-    <input matInput name="clientId" formControlName="clientId" required />
+    <input matInput name="clientId" formControlName="clientId" [required]="authenticationType.value === oAuthClientCredentialsAuthenticationType" />
   </mat-form-field>
   <mat-form-field
     appearance="outline"
     hintLabel="OAuth Client Secret"
     *ngIf="authenticationType.value === oAuthClientCredentialsAuthenticationType"
+    style="padding-bottom: 20px"
   >
     <mat-label>Client Secret</mat-label>
-    <input matInput name="clientSecret" formControlName="clientSecret" required />
+    <input matInput name="clientSecret" formControlName="clientSecret" [required]="authenticationType.value === oAuthClientCredentialsAuthenticationType" />
   </mat-form-field>
   <mat-form-field appearance="outline" style="max-width: 200px">
     <mat-label>Refresh period (days)</mat-label>

diff --git a/src/app/admin/subscribed-catalogue/subscribed-catalogue.component.ts b/src/app/admin/subscribed-catalogue/subscribed-catalogue.component.ts
@@ -226,6 +226,31 @@ export class SubscribedCatalogueComponent implements OnInit {
       }
     });
   }
+  //
+  // onAuthenticationTypeChange() {
+  //   console.log('AuthenticationType change!');
+  //   // this.createFormGroup(this.catalogueRequest);
+  //   // IF not populated correctly - you could get aggregated FormGroup errors object
+  //   // let getErrors;
+  //
+  //   let getErrors = (formGroup: FormGroup, errors: any = {}) => {
+  //     Object.keys(formGroup.controls).forEach(field => {
+  //       const control = formGroup.get(field);
+  //       if (control instanceof FormControl) {
+  //         errors[field] = control.errors;
+  //       } else if (control instanceof FormGroup) {
+  //         errors[field] = getErrors(control);
+  //       }
+  //     });
+  //     return errors;
+  //   }
+  //   console.log(getErrors(this.formGroup));
+  //   Object.keys(this.formGroup.controls).forEach(field => {
+  //     const control = this.formGroup.get(field);
+  //     control.updateValueAndValidity();
+  //   });
+  //   this.formGroup.updateValueAndValidity();
+  // }
 
   private createFormGroup(catalogue?: SubscribedCatalogue) {
     this.formGroup = new FormGroup({