Skip to content

Commit

Permalink
Merge pull request #612 from openziti/611-cas-list-page
Browse files Browse the repository at this point in the history
Update Certificate Authorities Page With Angular Components
  • Loading branch information
rgallettonf authored Jan 27, 2025
2 parents 781b7c5 + 499e3ce commit b4007fc
Show file tree
Hide file tree
Showing 38 changed files with 2,292 additions and 45 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 b4007fc

Please sign in to comment.