Skip to content

Commit

Permalink
New Certificate Authorities Edit Form
Browse files Browse the repository at this point in the history
* Replaces legacy edit form and verify modal with new angular components
  • Loading branch information
rgallettonf committed Jan 27, 2025
1 parent 617f467 commit 499e3ce
Show file tree
Hide file tree
Showing 35 changed files with 1,949 additions and 44 deletions.
6 changes: 3 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 19 additions & 2 deletions projects/app-ziti-console/src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,10 @@ import {
JwtSignersPageComponent,
JwtSignerFormComponent,
AuthPoliciesPageComponent,
AuthPolicyFormComponent
AuthPolicyFormComponent,
CertificateAuthoritiesPageComponent,
CertificateAuthorityFormComponent,
VerifyCertificateComponent
} from "ziti-console-lib";
import {environment} from "./environments/environment";
import {URLS} from "./app-urls.constants";
Expand Down Expand Up @@ -250,8 +253,22 @@ const routes: Routes = [
},
{
path: 'certificate-authorities',
component: ZacWrapperComponent,
component: CertificateAuthoritiesPageComponent,
canActivate: mapToCanActivate([AuthenticationGuard]),
runGuardsAndResolvers: 'always',
},
{
path: 'certificate-authorities/:id',
component: CertificateAuthorityFormComponent,
canActivate: mapToCanActivate([AuthenticationGuard]),
canDeactivate: [DeactivateGuardService],
runGuardsAndResolvers: 'always',
},
{
path: 'certificate-authorities/:id/verify',
component: VerifyCertificateComponent,
canActivate: mapToCanActivate([AuthenticationGuard]),
canDeactivate: [DeactivateGuardService],
runGuardsAndResolvers: 'always',
},
{
Expand Down
3 changes: 2 additions & 1 deletion projects/app-ziti-console/src/app/app.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
.main {
display: flex;
background-color: var(--navigation);
height: 100%;

.modals {
position: absolute;
Expand All @@ -16,7 +17,7 @@
display: flex;
margin: 0;
padding: 0;
min-height: 100vh;
min-height: 100%;
max-width: 23.75rem;
background-color: var(--shaded);
box-shadow: inset 0rem 0.25rem 1rem 0rem rgba(0, 0, 0, 0.08);
Expand Down
Binary file not shown.
118 changes: 118 additions & 0 deletions projects/ziti-console-lib/src/lib/assets/fonts/icomoon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
13 changes: 13 additions & 0 deletions projects/ziti-console-lib/src/lib/assets/styles/icons.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,19 @@
font-display: block;
}

@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?l2gtmj');
src: url('../fonts/icomoon.eot?l2gtmj#iefix') format('embedded-opentype'),
url('../fonts/icomoon.woff2?l2gtmj') format('woff2'),
url('../fonts/icomoon.ttf?l2gtmj') format('truetype'),
url('../fonts/icomoon.woff?l2gtmj') format('woff'),
url('../fonts/icomoon.svg?l2gtmj#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'zac' !important;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
[title]="'Name'"
[label]="'Required'"
>
<input class="form-field-input read-only" [(ngModel)]="formData.name" [ngClass]="{error: errors['name']}" placeholder="Name this JWT Signer"/>
<input class="form-field-input read-only" [(ngModel)]="formData.name" [ngClass]="{error: errors['name']}" placeholder="Name this Auth Policy"/>
</lib-form-field-container>
<lib-form-field-container
[title]="'Primary Authentication'"
Expand Down

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
.form-group-column {
&.three-fifths {
min-width: 31.25rem;
}
}

.jwt-signer-form-container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
align-items: center;
gap: var(--gapXL);

.select-file-button {
padding-left: var(--paddingMedium);
padding-right: var(--paddingMedium);
height: 1.5625rem;
width: fit-content;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.875rem;
background: var(--primary);
border-style: solid;
border-width: 0.0625rem;
border-color: var(--stroke);
color: var(--white);
cursor: pointer;
border-radius: var(--inputBorderRadius);
gap: var(--marginMedium);
margin-top: -0.3125rem;

&:hover {
filter: brightness(.8);
}
&:active {
filter: grayscale(1);
transform: translateY(0.0625rem);
}

.spinner {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: transparent;
border-top: 0.125rem solid white;
border-right: 0.125rem solid white;
border-bottom: 0.125rem solid transparent;
border-left: 0.125rem solid transparent;
-webkit-animation: loading 0.5s infinite linear;
animation: loading 0.5s infinite linear;
}
}

.select-file-label-container {
gap: var(--marginMedium);
}

.updb-input-options {
margin-top: var(--marginSmall);
background-color: var(--formGroup);
padding: var(--paddingMedium);
border-radius: var(--inputBorderRadius);

.form-field-title {
color: var(--offWhite);
}
}
}

::ng-deep .jwt-signer-form-container {
select,
input {
&:disabled {
opacity: 0.75 !important;
cursor: text;
background-color: var(--stroke) !important;
}
}
}

::ng-deep .api-data-no-wrap{
.jse-text-mode {
width: 100%;
.cm-editor {
width: 100%;
.cm-scroller {
width: 100%;
.cm-content {
width: 100%;
overflow: auto;
.ͼr {
white-space: nowrap;
}
}
}
}
}
}

.radio-group-container {
display: flex;
gap: var(--marginLarge);

&:focus {
.radio-button-container {
.radio-button-circle {
border-color: var(--primaryColor);
}
}
}

.radio-button-container {
display: flex;
flex-direction: row;
align-items: center;
background-color: var(--formGroup);
border-radius: var(--inputBorderRadius);
width: 100%;
padding-left: var(--paddingMedium);
padding-right: var(--paddingMedium);
padding-top: var(--paddingLarge);
padding-bottom: var(--paddingLarge);
cursor: pointer;
gap: var(--marginMedium);

.radio-button-circle {
display: flex;
width: 1.3125rem;
height: 1.3125rem;
border-radius: 1.3125rem;
border-width: 0.125rem;
border-style: solid;
border-color: var(--offWhite);
align-items: center;
justify-content: center;
background-color: var(--offWhite);

.radio-button-inner-circle {
display: none;
width: 0.9375rem;
height: 0.9375rem;
border-radius: 0.9375rem;
align-items: center;
justify-content: center;
background-color: var(--primaryColor);
}
}

&.selected {
.radio-button-circle {
.radio-button-inner-circle {
display: flex;
}
}
}

&:active {
.radio-button-circle {
.radio-button-inner-circle {
display: flex;
background-color: var(--menu);
}
}
}

.radio-button-label {
color: var(--offWhite);
font-size: 0.875rem;
font-weight: 600;
}
}
}

.allowed-signers-container {
background-color: var(--formGroup);
padding: var(--paddingMedium);
border-radius: var(--inputBorderRadius);

.form-field-title {
color: var(--offWhite);
}
}
Loading

0 comments on commit 499e3ce

Please sign in to comment.