Cleanup and fixes related to new certificate authorities pages and mo…

projects/app-ziti-console/src/app/interceptors/ziti-api.interceptor.ts

@@ -85,7 +85,12 @@ export class ZitiApiInterceptor implements HttpInterceptor {
     private addAuthToken(request: any) {
         const session = this.settingsService.settings.session;
         const contentType = request.headers.get('Content-Type') || 'application/json';
-        return request.clone({setHeaders: {"zt-session": session.id, 'content-type': contentType, accept: 'application/json'}});
+        const headers: any = {"zt-session": session.id, 'content-type': contentType};
+        const acceptHeader = request.headers.get('Accept');
+        if (!acceptHeader) {
+            headers.accept = 'application/json';
+        }
+        return request.clone({setHeaders: headers});
     }
 }
 

projects/ziti-console-lib/src/lib/features/projectable-forms/certificate-authority/certificate-authority-form.component.html

@@ -10,6 +10,7 @@
             (actionRequested)="headerActionRequested($event)"
             [(formView)]="formView"
             [saveDisabled]="svc.saveDisabled || formDataInvalid"
+            [badges]="badges"
     ></lib-form-header>
     <div class="jwt-signer-form-container projectable-form-container">
         <div class="projectable-form-main-column form-group-row" [hidden]="formView !== 'simple'">
@@ -51,7 +52,7 @@
                                 <div class="config-container-label">Auto Enroll</div>
                                 <div
                                         class="form-field-info infoicon"
-                                        matTooltip="Allows client certificates of the CA to automatically enroll when"
+                                        matTooltip="Allows client certificates of the CA to automatically enroll when encountered"
                                         matTooltipPosition="below"
                                 ></div>
                             </div>
@@ -238,7 +239,7 @@
             </div>
             <div class="form-group-column two-fifths">
                 <lib-form-field-container
-                    *ngIf="formData.id"
+                    *ngIf="formData.id && !this.formData.isVerified"
                     [showHeader]="false"
                 >
                     <a class="download-button" href="./{{this.basePath}}/{{this.formData.id}}/verify" (click)="verifyCertificate($event)">

projects/ziti-console-lib/src/lib/features/projectable-forms/certificate-authority/certificate-authority-form.component.scss

@@ -184,4 +184,10 @@
   .form-field-title {
     color: var(--offWhite);
   }
-}
+}
+
+.toggle-container {
+  .config-container-label {
+    font-size: .8rem;
+  }
+}

projects/ziti-console-lib/src/lib/features/projectable-forms/certificate-authority/certificate-authority-form.component.ts

@@ -59,6 +59,7 @@ export class CertificateAuthorityFormComponent extends ProjectableForm implement
     settings: any = {};
     fileSelectOpening = false;
     identityRoleAttributes = [];
+    badges: any[] = [];
     override entityType = 'cas';
     override entityClass = CertificateAuthority;
 
@@ -94,6 +95,11 @@ export class CertificateAuthorityFormComponent extends ProjectableForm implement
     }
 
     protected override entityUpdated() {
+        if (this.formData.id && this.formData.isVerified) {
+            this.badges.push({label: 'Verified', class: 'verified', circle: 'verified'});
+        } else {
+            this.badges.push({label: 'Unverified', class: 'unreg'});
+        }
         super.entityUpdated();
     }
 

projects/ziti-console-lib/src/lib/features/projectable-forms/certificate-authority/verify-certificate/verify-certificate.component.html

@@ -20,7 +20,7 @@
                     [title]="'Instructions'"
                 >
                     <ul class="instructions-list">
-                        <li>Generate a certificate with the common name CN=<b>XeoiWd16J</b></li>
+                        <li>Generate a certificate with the common name CN=<b>{{formData.verificationToken}}</b></li>
                         <li>Upload the generated cert, or copy & paste it using the text field below</li>
                         <li>Click the "Verify" button to submit certificate for verification</li>
                     </ul>

projects/ziti-console-lib/src/lib/features/projectable-forms/form-header/form-header.component.html

@@ -63,7 +63,7 @@
         </div>
     </div>
     <div class="form-header-group badges-container">
-        <div *ngFor="let badge of data.badges" class="header-badge-container {{badge.class}}">
+        <div *ngFor="let badge of headerBadges" class="header-badge-container {{badge.class}}">
             <span *ngIf="badge.circle" class="circle {{badge.circle}}"></span>
             <span class="badge-label">{{badge.label}}</span>
         </div>

projects/ziti-console-lib/src/lib/features/projectable-forms/form-header/form-header.component.scss

@@ -328,9 +328,26 @@
     margin-left: 0.3125rem;
   }
 
+  &.verified {
+    background-color: var(--primary);
+    color: var(--white);
+  }
+
   .circle {
     &.false {
       background-color: var(--white);
     }
+    &.verified {
+      font-size: 1.2rem;
+      color: var(--white);
+      font-family: 'icomoon';
+      background-color: transparent;
+      width: 1.2rem;
+      height: 1.2rem;
+
+      &:before {
+        content: "\e958";
+      }
+    }
   }
 }

projects/ziti-console-lib/src/lib/features/projectable-forms/form-header/form-header.component.ts

@@ -24,6 +24,7 @@ import {isFunction, defer} from 'lodash';
 })
 export class FormHeaderComponent {
   @Input() data: any = {};
+  @Input() badges: any = [];
   @Input() title = '';
   @Input() moreActions: any = [];
   @Input() formView = 'simple';
@@ -81,4 +82,8 @@ export class FormHeaderComponent {
       this.showActionsDropDown = false;
     });
   }
+
+  get headerBadges() {
+    return this.data.badges || this.badges;
+  }
 }

projects/ziti-console-lib/src/lib/pages/certificate-authorities/certificate-authorities-page.component.html

@@ -18,3 +18,4 @@
     >
     </lib-data-table>
 </div>
+<lib-loading-indicator *ngIf="isLoading" [isLoading]="isLoading"></lib-loading-indicator>

projects/ziti-console-lib/src/lib/pages/certificate-authorities/certificate-authorities-page.component.ts

@@ -114,4 +114,18 @@ export class CertificateAuthoritiesPageComponent extends ListPageComponent imple
     dataChanged(event) {
         this.formDataChanged = event;
     }
+
+    override gridReady(event) {
+        event.api.addEventListener('cellClicked', (event) => {
+            if (event.column.getColId() === 'jwt') {
+                if (event.data?.id && event.data.isVerified) {
+                    this.isLoading = true
+                    this.svc.getJwt(event.data?.id).finally(() => {
+                        this.isLoading = false;
+                    });
+                }
+            }
+        });
+        super.gridReady(event);
+    }
 }

projects/ziti-console-lib/src/lib/pages/certificate-authorities/certificate-authorities-page.service.ts

@@ -86,6 +86,13 @@ export class CertificateAuthoritiesPageService extends ListPageServiceClass {
         const createdAtHeaderComponentParams = {
             filterType: 'DATETIME',
         };
+        const jwtColumnRenderer = (row) => {
+            let cell = '';
+            if (row.data?.id && row.data?.isVerified) {
+                cell = `<span class="cert"></span>`;
+            }
+            return cell;
+        }
         return [
             {
                 colId: 'name',
@@ -155,6 +162,20 @@ export class CertificateAuthoritiesPageService extends ListPageServiceClass {
                 filter: true,
                 sortColumn: this.sort.bind(this),
             },
+            {
+                colId: 'jwt',
+                field: 'jwt',
+                headerName: 'JWT',
+                cellRenderer: jwtColumnRenderer,
+                headerComponent: TableColumnDefaultComponent,
+                headerComponentParams: enabledComponentParams,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align tCol',
+                sortable: true,
+                filter: true,
+                sortColumn: this.sort.bind(this),
+                width: this.remToPx(4.6875)
+            },
             {
                 colId: 'createdAt',
                 field: 'createdAt',
@@ -211,4 +232,16 @@ export class CertificateAuthoritiesPageService extends ListPageServiceClass {
         basePath = basePath ? basePath : this.basePath;
         this.router?.navigateByUrl(`${basePath}/${itemId}/verify`);
     }
+
+    public getJwt(id) {
+        return this.dataService.getSubdata('cas', id,'jwt', {},'application/jwt').then((result: any) => {
+            const element = document.createElement('a');
+            element.setAttribute('href', 'data:application/ziti-jwt;charset=utf-8,' + encodeURIComponent(result));
+            element.setAttribute('download', id+".jwt");
+            element.style.display = 'none';
+            document.body.appendChild(element);
+            element.click();
+            document.body.removeChild(element);
+        });
+    }
 }

projects/ziti-console-lib/src/lib/services/ziti-controller-data.service.ts

@@ -50,7 +50,7 @@ export class ZitiControllerDataService extends ZitiDataService {
         let options = {};
         if (contentType) {
             const headers = {
-                'Content-Type': 'text/plain'
+                'Content-Type': contentType
             }
             options = { headers };
         }
@@ -127,7 +127,7 @@ export class ZitiControllerDataService extends ZitiDataService {
         );
     }
 
-    getSubdata(entityType: string, id: any, dataType: string, paging?: any): Promise<any> {
+    getSubdata(entityType: string, id: any, dataType: string, paging?: any, contentType?: any): Promise<any> {
         const apiVersions = this.settingsService.apiVersions || {};
         const prefix = apiVersions["edge-management"]?.v1?.path || '/edge/management/v1';
 
@@ -137,7 +137,19 @@ export class ZitiControllerDataService extends ZitiDataService {
         }
         const url = this.settingsService.settings.selectedEdgeController + `${prefix}/${entityType}/${id}/${dataType}/${urlFilter}`;
 
-        return firstValueFrom(this.httpClient.get(url, {}).pipe(
+        let options: any = {};
+        if (contentType) {
+            const headers = {
+                'Accept': contentType,
+                'Content-Type': contentType
+            }
+            options = { headers };
+            if (contentType.indexOf('application/jwt') >= 0) {
+                options.responseType = 'text';
+            }
+        }
+
+        return firstValueFrom(this.httpClient.get(url, options).pipe(
                 catchError((err: any) => {
                     const error = "Server Not Accessible";
                     if (err.code != "ECONNREFUSED") throw({error: err.code});

projects/ziti-console-lib/src/lib/services/ziti-data.service.ts

@@ -56,7 +56,7 @@ export abstract class ZitiDataService {
   abstract put(type, model, id, chained?): Promise<any>;
   abstract patch(type, model, id, chained?): Promise<any>;
   abstract get(type: string, paging: any, filters: FilterObj[], url?): Promise<any>;
-  abstract getSubdata(entityType: string, id: any, dataType: string, paging?: any): Promise<any>;
+  abstract getSubdata(entityType: string, id: any, dataType: string, paging?: any, contentType?): Promise<any>;
   abstract saveSubdata(entityType: string, id: any, dataType: string, params: any): Promise<any>;
   abstract deleteSubdata(entityType: string, id: any, dataType: string, params: any): Promise<any>;
   abstract delete(type: string, id: string): Promise<any>;

projects/ziti-console-lib/src/lib/shared/list-page-service.class.ts

@@ -254,4 +254,9 @@ export abstract class ListPageServiceClass {
         basePath = basePath ? basePath : this.basePath;
         this.router?.navigateByUrl(`${basePath}/${itemId}`);
     }
+
+    remToPx(remValue) {
+        const rootFontSize: any = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+        return remValue * rootFontSize;
+    };
 }