Skip to content

Commit 89cf9d9

Browse files
rgallettonfrgallettonf
committed
Update layout and positioning of enrollment buttons on identities form
1 parent 32cf71f commit 89cf9d9

File tree

6 files changed

+98
-32
lines changed

6 files changed

+98
-32
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,13 @@
194194
(doRefresh)="refreshIdentity()"
195195
></lib-qr-code>
196196
</div>
197+
</lib-form-field-container>
198+
<lib-form-field-container
199+
*ngIf="isEdit"
200+
[showHeader]="false"
201+
[layout]="'column'"
202+
[contentStyle]="'z-index: 99999999'"
203+
>
197204
<div class="form-field-label-container" style="gap: var(--paddingMedium)">
198205
<div class="form-field-header">
199206
<div class="form-field-title-container">

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
<div class="qr-code-container" [ngClass]="{'modal-view': isModal}">
22
<div *ngIf="!qrOnly" class="qr-code-buttons">
3-
<div (click)="identitiesSvc.downloadJWT(jwt, identity.name)" *ngIf="hasJWT && !jwtExpired && type !== 'router'" class="download-button">
3+
<div class="identity-enrollment-container" *ngIf="hasJWT && !jwtExpired && type !== 'router'">
4+
<div (click)="identitiesSvc.downloadJWT(jwt, identity.name)" class="download-button">
45
<div class="download-key"></div>
56
<div>DOWNLOAD ENROLLMENT JWT</div>
67
<div class="tap-to-download icon-ClickIcon"></div>
8+
</div>
9+
<div class="icon-qr qr-code-button qr-code-expandable" (click)="expandQRCode()"></div>
710
</div>
811
<div (click)="identitiesSvc.copyToken(token)" *ngIf="!jwtExpired && type === 'router'" class="download-button" style="background-color: #232f3e!important;">
912
<div class="download-key"></div>
@@ -25,19 +28,18 @@
2528
<div>{{mfaReset ? 'MFA RESET SUCCESSFUL' : 'RESET MFA'}}</div>
2629
<div [ngClass]="{spinner: resettingMFA, 'icon-refresh': !resettingMFA, 'tap-to-download': !resettingMFA, 'icon-Icon_Check': mfaReset && !resettingMFA}"></div>
2730
</div>
28-
<span class="info-text" *ngIf="hasJWT && !jwtExpired && type !== 'router'">OR SCAN QR CODE</span>
2931
</div>
3032
<qrcode
31-
*ngIf="!jwtExpired && type !== 'router'"
33+
*ngIf="qrOnly && !jwtExpired && type !== 'router'"
3234
[errorCorrectionLevel]="'M'" [qrdata]="jwt"
3335
[width]="qrCodeSize" (click)="expandQRCode()"
3436
[ngClass]="{'qr-code-expandable': canExpand}"
3537
></qrcode>
3638
<div *ngIf="!qrOnly" class="qr-code-buttons">
37-
<div (click)="identitiesSvc.deleteEnrollment(identity)" *ngIf="hasJWT && type === 'identity'" class="download-button">
38-
<div class="download-key"></div>
39+
<div (click)="identitiesSvc.deleteEnrollment(identity)" *ngIf="hasJWT && type === 'identity'" class="delete-button">
40+
<div class="tap-to-delete icon-Icon_Delete"></div>
3941
<div>DELETE ENROLLMENT</div>
40-
<div class="tap-to-download icon-Icon_Delete"></div>
42+
<div class="tap-to-delete icon-Icon_Delete"></div>
4143
</div>
4244
<span class="info-text" *ngIf="!jwtExpired && type === 'router'">OR</span>
4345
<div (click)="identitiesSvc.downloadJWT(jwt, identity.name)" *ngIf="!jwtExpired && type === 'router'" class="download-button">

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

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
font-weight: 600;
1010
}
1111

12+
.delete-button,
1213
.download-button {
1314
margin: 0.625rem 0rem;
1415
}
@@ -72,7 +73,7 @@
7273
}
7374

7475
&.modal-view {
75-
width: 31.25rem;
76+
width: 37rem;
7677
background-color: var(--background);
7778
padding: 1.25rem;
7879
border-radius: 0.9375rem;
@@ -92,3 +93,35 @@
9293
}
9394
}
9495
}
96+
97+
.identity-enrollment-container {
98+
display: flex;
99+
flex-direction: row;
100+
align-items: center;
101+
justify-content: space-between;
102+
gap: var(--gapMedium);
103+
104+
.qr-code-button {
105+
width: 3.125rem;
106+
height: 100%;
107+
font-size: 3.125rem;
108+
&:before {
109+
color: var(--tableText);
110+
}
111+
}
112+
}
113+
114+
.delete-button {
115+
filter: grayscale(1);
116+
&:hover {
117+
filter: grayscale(1) brightness(.85);
118+
}
119+
.tap-to-delete {
120+
&.icon-Icon_Delete {
121+
&:before {
122+
font-weight: 600;
123+
color: white;
124+
}
125+
}
126+
}
127+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ export class QrCodeComponent implements OnChanges {
137137
const data = {
138138
jwt: this.jwt,
139139
expiration: this.expiration,
140-
qrCodeSize: 400,
140+
qrCodeSize: 500,
141141
identity: this.identity,
142142
qrOnly: true
143143
};

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

Lines changed: 45 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import {ExtensionService} from "../../features/extendable/extensions-noop.servic
4141
import {IDENTITY_EXTENSION_SERVICE} from "../../features/projectable-forms/identity/identity-form.service";
4242
import {Router} from "@angular/router";
4343
import {TableCellNameComponent} from "../../features/data-table/cells/table-cell-name/table-cell-name.component";
44+
import {ConfirmComponent} from "../../features/confirm/confirm.component";
4445

4546
@Injectable({
4647
providedIn: 'root'
@@ -572,30 +573,50 @@ export class IdentitiesPageService extends ListPageServiceClass {
572573
}
573574

574575
public deleteEnrollment(identity) {
575-
let enrollmentId;
576-
if(!isEmpty(identity?.enrollment?.ott)) {
577-
enrollmentId = identity?.enrollment?.ott.id;
578-
} else if(!isEmpty(identity?.enrollment.ottca)) {
579-
enrollmentId = identity?.enrollment?.ottca.id;
580-
} else if (!isEmpty(identity?.enrollment.updb)) {
581-
enrollmentId = identity?.enrollment?.updb.id;
582-
}
583-
return this.dataService.deleteEnrollment(enrollmentId).then(() => {
584-
const growlerData = new GrowlerModel(
585-
'success',
586-
'Success',
587-
`Enrollment Deleted`,
588-
`Successfully deleted Identity enrollment `,
589-
);
590-
this.growlerService.show(growlerData);
591-
}).catch((error) => {
592-
const growlerData = new GrowlerModel(
593-
'error',
594-
'Error',
595-
`Delete Failed`,
596-
`Failed to delete Identity enrollment token`,
597-
);
598-
this.growlerService.show(growlerData);
576+
const confirmData = {
577+
appendId: 'DeleteEnrollment',
578+
title: 'Delete Enrollment',
579+
message: `Are you sure you would like to delete the enrollment for this Identity?`,
580+
confirmLabel: 'Yes',
581+
cancelLabel: 'Oops, no get me out of here',
582+
showCancelLink: true,
583+
imageUrl: '../../assets/svgs/Growl_Warning.svg',
584+
};
585+
this.dialogRef = this.dialogForm.open(ConfirmComponent, {
586+
data: confirmData,
587+
autoFocus: false,
588+
});
589+
this.dialogRef.afterClosed().subscribe({
590+
next: (result) => {
591+
if (!result?.confirmed) {
592+
return false;
593+
}
594+
let enrollmentId;
595+
if(!isEmpty(identity?.enrollment?.ott)) {
596+
enrollmentId = identity?.enrollment?.ott.id;
597+
} else if(!isEmpty(identity?.enrollment.ottca)) {
598+
enrollmentId = identity?.enrollment?.ottca.id;
599+
} else if (!isEmpty(identity?.enrollment.updb)) {
600+
enrollmentId = identity?.enrollment?.updb.id;
601+
}
602+
return this.dataService.deleteEnrollment(enrollmentId).then(() => {
603+
const growlerData = new GrowlerModel(
604+
'success',
605+
'Success',
606+
`Enrollment Deleted`,
607+
`Successfully deleted Identity enrollment `,
608+
);
609+
this.growlerService.show(growlerData);
610+
}).catch((error) => {
611+
const growlerData = new GrowlerModel(
612+
'error',
613+
'Error',
614+
`Delete Failed`,
615+
`Failed to delete Identity enrollment token`,
616+
);
617+
this.growlerService.show(growlerData);
618+
});
619+
}
599620
});
600621
}
601622
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -944,13 +944,15 @@ lib-form-field-container {
944944
}
945945

946946
a {
947+
&.delete-button,
947948
&.download-button {
948949
&:hover {
949950
color: var(--offWhite_ALWAYS)
950951
}
951952
}
952953
}
953954

955+
.delete-button,
954956
.download-button {
955957
display: flex;
956958
flex-direction: row;
@@ -996,6 +998,7 @@ a {
996998
z-index: 10;
997999
}
9981000

1001+
.tap-to-delete,
9991002
.verify-certificate,
10001003
.tap-to-download {
10011004
speak: none;

0 commit comments

Comments
 (0)