Merge pull request #798 from openziti/797-delete-enrollment

Allow deleting of an enrollment from the Identity edit form

Author: rgallettonf

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

@@ -194,6 +194,13 @@
                         (doRefresh)="refreshIdentity()"
                       ></lib-qr-code>
                     </div>
+                </lib-form-field-container>
+                <lib-form-field-container
+                  *ngIf="isEdit"
+                  [showHeader]="false"
+                  [layout]="'column'"
+                  [contentStyle]="'z-index: 99999999'"
+                >
                     <div class="form-field-label-container" style="gap: var(--paddingMedium)">
                       <div class="form-field-header">
                         <div class="form-field-title-container">

projects/ziti-console-lib/src/lib/features/qr-code/qr-code.component.html

@@ -1,11 +1,12 @@
 <div class="qr-code-container" [ngClass]="{'modal-view': isModal}">
     <div *ngIf="!qrOnly" class="qr-code-buttons">
-        <span class="info-text" *ngIf="hasJWT && !jwtExpired && type !== 'router'">TO REGISTER THIS IDENTITY</span>
-        <span class="info-text" *ngIf="hasJWT && !jwtExpired && type === 'router'">TO REGISTER THIS ROUTER</span>
-        <div (click)="identitiesSvc.downloadJWT(jwt, identity.name)" *ngIf="hasJWT && !jwtExpired && type !== 'router'" class="download-button">
+        <div class="identity-enrollment-container" *ngIf="hasJWT && !jwtExpired && type !== 'router'">
+          <div (click)="identitiesSvc.downloadJWT(jwt, identity.name)" class="download-button">
             <div class="download-key"></div>
             <div>DOWNLOAD ENROLLMENT JWT</div>
             <div class="tap-to-download icon-ClickIcon"></div>
+          </div>
+          <div class="icon-qr qr-code-button qr-code-expandable" (click)="expandQRCode()"></div>
         </div>
         <div (click)="identitiesSvc.copyToken(token)" *ngIf="!jwtExpired && type === 'router'" class="download-button" style="background-color: #232f3e!important;">
             <div class="download-key"></div>
@@ -27,15 +28,19 @@
             <div>{{mfaReset ? 'MFA RESET SUCCESSFUL' : 'RESET MFA'}}</div>
             <div [ngClass]="{spinner: resettingMFA, 'icon-refresh': !resettingMFA, 'tap-to-download': !resettingMFA, 'icon-Icon_Check': mfaReset && !resettingMFA}"></div>
         </div>
-        <span class="info-text" *ngIf="hasJWT && !jwtExpired && type !== 'router'">OR SCAN QR CODE</span>
     </div>
     <qrcode
-            *ngIf="!jwtExpired && type !== 'router'"
+            *ngIf="qrOnly && !jwtExpired && type !== 'router'"
             [errorCorrectionLevel]="'M'" [qrdata]="jwt"
             [width]="qrCodeSize" (click)="expandQRCode()"
             [ngClass]="{'qr-code-expandable': canExpand}"
     ></qrcode>
     <div *ngIf="!qrOnly" class="qr-code-buttons">
+      <div (click)="identitiesSvc.deleteEnrollment(identity)" *ngIf="hasJWT && type === 'identity'" class="delete-button">
+        <div class="tap-to-delete icon-Icon_Delete"></div>
+        <div>DELETE ENROLLMENT</div>
+        <div class="tap-to-delete icon-Icon_Delete"></div>
+      </div>
         <span class="info-text" *ngIf="!jwtExpired && type === 'router'">OR</span>
         <div (click)="identitiesSvc.downloadJWT(jwt, identity.name)" *ngIf="!jwtExpired && type === 'router'" class="download-button">
             <div class="download-key"></div>

projects/ziti-console-lib/src/lib/features/qr-code/qr-code.component.scss

@@ -9,6 +9,7 @@
     font-weight: 600;
   }
 
+  .delete-button,
   .download-button {
     margin: 0.625rem 0rem;
   }
@@ -72,7 +73,7 @@
   }
 
   &.modal-view {
-    width: 31.25rem;
+    width: 37rem;
     background-color: var(--background);
     padding: 1.25rem;
     border-radius: 0.9375rem;
@@ -92,3 +93,35 @@
     }
   }
 }
+
+.identity-enrollment-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gapMedium);
+
+  .qr-code-button {
+    width: 3.125rem;
+    height: 100%;
+    font-size: 3.125rem;
+    &:before {
+      color: var(--tableText);
+    }
+  }
+}
+
+.delete-button {
+  filter: grayscale(1);
+  &:hover {
+    filter: grayscale(1) brightness(.85);
+  }
+  .tap-to-delete {
+    &.icon-Icon_Delete {
+      &:before {
+        font-weight: 600;
+        color: white;
+      }
+    }
+  }
+}

projects/ziti-console-lib/src/lib/features/qr-code/qr-code.component.ts

@@ -137,7 +137,7 @@ export class QrCodeComponent implements OnChanges {
     const data = {
       jwt: this.jwt,
       expiration: this.expiration,
-      qrCodeSize: 400,
+      qrCodeSize: 500,
       identity: this.identity,
       qrOnly: true
     };

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

@@ -41,6 +41,7 @@ import {ExtensionService} from "../../features/extendable/extensions-noop.servic
 import {IDENTITY_EXTENSION_SERVICE} from "../../features/projectable-forms/identity/identity-form.service";
 import {Router} from "@angular/router";
 import {TableCellNameComponent} from "../../features/data-table/cells/table-cell-name/table-cell-name.component";
+import {ConfirmComponent} from "../../features/confirm/confirm.component";
 
 @Injectable({
     providedIn: 'root'
@@ -570,4 +571,52 @@ export class IdentitiesPageService extends ListPageServiceClass {
         this.selectedIdentity = item;
         this.sideModalOpen = true;
     }
+
+    public deleteEnrollment(identity) {
+      const confirmData = {
+        appendId: 'DeleteEnrollment',
+        title: 'Delete Enrollment',
+        message: `Are you sure you would like to delete the enrollment for this Identity?`,
+        confirmLabel: 'Yes',
+        cancelLabel: 'Oops, no get me out of here',
+        showCancelLink: true,
+        imageUrl: '../../assets/svgs/Growl_Warning.svg',
+      };
+      this.dialogRef = this.dialogForm.open(ConfirmComponent, {
+        data: confirmData,
+        autoFocus: false,
+      });
+      this.dialogRef.afterClosed().subscribe({
+        next: (result) => {
+          if (!result?.confirmed) {
+            return false;
+          }
+          let enrollmentId;
+          if(!isEmpty(identity?.enrollment?.ott)) {
+            enrollmentId = identity?.enrollment?.ott.id;
+          } else if(!isEmpty(identity?.enrollment.ottca)) {
+            enrollmentId = identity?.enrollment?.ottca.id;
+          } else if (!isEmpty(identity?.enrollment.updb)) {
+            enrollmentId = identity?.enrollment?.updb.id;
+          }
+          return this.dataService.deleteEnrollment(enrollmentId).then(() => {
+            const growlerData = new GrowlerModel(
+              'success',
+              'Success',
+              `Enrollment Deleted`,
+              `Successfully deleted Identity enrollment `,
+            );
+            this.growlerService.show(growlerData);
+          }).catch((error) => {
+            const growlerData = new GrowlerModel(
+              'error',
+              'Error',
+              `Delete Failed`,
+              `Failed to delete Identity enrollment token`,
+            );
+            this.growlerService.show(growlerData);
+          });
+        }
+      });
+    }
 }

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

@@ -208,6 +208,28 @@ export class NodeDataService extends ZitiDataService {
         );
     }
 
+    override deleteEnrollment(enrollmentId: string): Promise<any> {
+      const nodeServerURL = window.location.origin;
+      const serviceUrl = nodeServerURL + '/api/deleteEnrollment';
+      const body = {
+        id: enrollmentId
+      }
+      return firstValueFrom(this.httpClient.post(serviceUrl, body, {}).pipe(
+          catchError((err: any) => {
+            const error = "Server Not Accessible";
+            if (err.code != "ECONNREFUSED") throw({error: err.code});
+            throw({error: error});
+          }),
+          map((results: any) => {
+            if(!isEmpty(results.error)) {
+              throw({error: results.error});
+            }
+            return results;
+          })
+        )
+      );
+    }
+
     override reissueEnrollment(id: string, date: string): Promise<any> {
         const nodeServerURL = window.location.origin;
         const serviceUrl = nodeServerURL + '/api/reissueEnroll';

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

@@ -207,6 +207,20 @@ export class ZitiControllerDataService extends ZitiDataService {
         );
     }
 
+    override deleteEnrollment(enrollmentId: string): Promise<any> {
+      const apiVersions = this.settingsService.apiVersions || {};
+      const prefix = apiVersions["edge-management"]?.v1?.path || '/edge/management/v1';
+      const url = this.settingsService.settings.selectedEdgeController + `${prefix}/enrollments/${enrollmentId}`;
+      return firstValueFrom(this.httpClient.delete(url).pipe(
+          catchError((err: any) => {
+            const error = "Server Not Accessible";
+            if (err.code != "ECONNREFUSED") throw({error: err.code});
+            throw({error: error});
+          })
+        )
+      );
+    }
+
     override reissueEnrollment(id: string, date): Promise<any> {
         const apiVersions = this.settingsService.apiVersions || {};
         const prefix = apiVersions["edge-management"]?.v1?.path || '/edge/management/v1';

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

@@ -67,6 +67,7 @@ export abstract class ZitiDataService {
   abstract delete(type: string, id: string): Promise<any>;
   abstract call(url: string): Promise<any>;
   abstract resetEnrollment(id: string, date: string): Promise<any>;
+  abstract deleteEnrollment(enrollmentId: string): Promise<any>
   abstract reissueEnrollment(id: string, date: string): Promise<any>;
   abstract resetMFA(id: string): Promise<any>;
   abstract resetPassword(oldPass, newPass, confirmPass): Promise<any>;

projects/ziti-console-lib/src/lib/shared-assets/styles/global.scss

@@ -944,13 +944,15 @@ lib-form-field-container {
 }
 
 a {
+  &.delete-button,
   &.download-button {
     &:hover {
       color: var(--offWhite_ALWAYS)
     }
   }
 }
 
+.delete-button,
 .download-button {
   display: flex;
   flex-direction: row;
@@ -996,6 +998,7 @@ a {
     z-index: 10;
   }
 
+  .tap-to-delete,
   .verify-certificate,
   .tap-to-download {
     speak: none;