Skip to content

Commit

Permalink
Merge pull request #514 from openziti/512-jwt-signers-page
Browse files Browse the repository at this point in the history 
Added URI validation and improve layout for Cert PEM & JWKS Endpoint input fields
  • Loading branch information
@rgallettonf
rgallettonf authored Oct 11, 2024
2 parents 94271bf + 6d7f722 commit 99c9825
Show file tree
Hide file tree
Showing 12 changed files with 421 additions and 159 deletions.
106 changes: 0 additions & 106 deletions ...iti-console-lib/src/lib/features/dynamic-widgets/text-list/text-list-input.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,106 +0,0 @@
::ng-deep .p-element {

.p-chips.p-component {
width: 100%;
font-weight: 400;
font-family: 'Open Sans', Arial, sans-serif;
height: var(--defaultInputHeight);
border-color: var(--stroke);
border-style: solid;
border-width: var(--inputBorderWidth);
border-radius: var(--inputBorderRadius);
padding-left: 10px;
padding-right: 10px;
outline: none;
box-sizing: border-box;
font-size: 15px;
background-color: var(--background) !important;
color: var(--text);
-webkit-appearance: none;

.p-inputtext.p-chips-multiple-container {
width: 100%;
padding: 0;
border-width: var(--inputBorderWidth);

&.p-focus {
border-color: var(--primaryColor) !important;
box-shadow: 0 0 7px 0 var(--primaryColorOpaque) !important;

&.error {
border-color: var(--red) !important;
}
}
}
}

.p-chips .p-chips-multiple-container .p-chips-input-token input {
height: 25px;
font-size: 14px;
color: #495057;
padding: 0;
margin: 0;
border: 0 none;
outline: 0 none;
background-color: transparent;
box-shadow: none;
border-radius: 0;
width: 100%
}

.p-chips .p-chips-multiple-container .p-chips-token {
margin-right: .5rem;
font-family: Open Sans, sans-serif;
font-weight: 600;
margin-top: 5px;
margin-bottom: 5px;
background: var(--primary);
color: var(--white);
border-radius: var(--inputBorderRadius);
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
max-width: 100%
}

.p-chips-token-icon {
margin-left: 0.5rem;
cursor: pointer;
color:blue;
fill: red;
}

.p-chips {
display: inline-flex
}

.p-chips-token-label {
min-width: 0;
overflow: auto
}

.p-chips-token-label::-webkit-scrollbar {
display: none
}

.p-fluid .p-chips {
display: flex
}

.p-chips-clear-icon {
position: absolute;
top: 50%;
margin-top: -.5rem;
cursor: pointer;
}

.p-chips-clearable .p-inputtext {
position: relative
}

.p-inputtext {
border:none;
}
}

134 changes: 95 additions & 39 deletions ...-console-lib/src/lib/features/projectable-forms/jwt-signer/jwt-signer-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,57 +43,33 @@
<span class="form-field-title">Claims Property</span>
<div
class="form-field-info infoicon"
matTooltip="The &quot;claimsProperty&quot; must match the &quot;id&quot; field on a ziti identity (or externalId if &quot;Use External ID&quot; is enabled)"
matTooltip="The field on the JWT for mapping to an identity. Matches the idnentity's id or externalId if &quot;Use External Id&quot; is set to true. Defaults to &quot;sub&quot;"
matTooltipPosition="below"
></div>
</div>
<input class="form-field-input" placeholder="Enter claims property, defaults to &quot;sub&quot;" [(ngModel)]="formData.claimsProperty"/>
<input class="form-field-input" placeholder="Enter claims property" [(ngModel)]="formData.claimsProperty"/>
</div>
<div class="form-field-label-container">
<div class="form-field-title-container">
<span class="form-field-title">Audience</span>
<div
class="form-field-info infoicon"
matTooltip="The &quot;audience&quot; field on the JWT Signer must match the &quot;aud&quot; field on the JWT"
matTooltip="The expected &quot;aud&quot; (audience) field on the JWT"
matTooltipPosition="below"
></div>
</div>
<input class="form-field-input" placeholder="Enter audience" [(ngModel)]="formData.audience"/>
</div>
<div class="form-field-label-container">
<div class="form-field-title-container">
<span class="form-field-title">External Auth Url</span>
<div
class="form-field-info infoicon"
matTooltip="Unauthenticated clients can enumerate External JWT Signers that have an &quot;externalAuthUrl&quot; property. Clients will receive the name of the External JWT Signer and the &quot;externalAuthUrl&quot; only. This information can allow clients to initiate client authentication to the target identity provider."
matTooltipPosition="below"
></div>
</div>
<input class="form-field-input" placeholder="Enter external auth URL" [(ngModel)]="formData.externalAuthUrl"/>
</div>
</lib-form-field-container>
<lib-form-field-container
[showHeader]="false"
[layout]="'row'"
>
<div class="config-item">
<div class="config-container toggle-container">
<div class="config-container-label">ENABLED</div>
<div
(click)="toggleEnabled()"
[ngClass]="{ on: formData.enabled }"
class="toggle"
>
<span [hidden]="!formData.enabled" class="on-label">YES</span>
<span [hidden]="formData.enabled" class="off-label">NO</span>
<div class="switch"></div>
<div class="form-field-title-container">
<div class="config-container-label">Use External ID</div>
<div
class="form-field-info infoicon"
matTooltip="If enabled, will match the &quot;claimsProperty&quot; to an identity's &quot;externalId&quot; field. If false, it will match to the identity's id field."
matTooltipPosition="below"
></div>
</div>
</div>
</div>

<div class="config-item">
<div class="config-container toggle-container">
<div class="config-container-label">Use External ID</div>
<div
(click)="toggleUseExternalId()"
[ngClass]="{ on: formData.useExternalId }"
Expand All @@ -108,6 +84,50 @@
</lib-form-field-container>
<lib-form-field-toggle [(toggleOn)]="showMore" (toggleOnChange)="showMoreChanged($event)" style="margin: 0px 10px"></lib-form-field-toggle>
<div [hidden]="!showMore" class="form-group-column">
<lib-form-field-container
[showHeader]="false"
class="form-field-advanced"
>
<div class="form-field-label-container">
<div class="form-field-title-container">
<span class="form-field-title">Client ID</span>
<div
class="form-field-info infoicon"
matTooltip="The client id to use when authenticating to the IDP"
matTooltipPosition="below"
></div>
</div>
<input class="form-field-input" placeholder="Enter external auth URL" [(ngModel)]="formData.clientId"/>
</div>
<div class="form-field-label-container">
<div class="form-field-title-container">
<span class="form-field-title">External Auth Url</span>
<div
class="form-field-info infoicon"
matTooltip="The URL that users are directed to, to obtain a JWT"
matTooltipPosition="below"
></div>
</div>
<input class="form-field-input" placeholder="Enter external auth URL" [(ngModel)]="formData.externalAuthUrl"/>
</div>
<div class="form-field-label-container">
<div class="form-field-title-container">
<span class="form-field-title">Scopes</span>
<div
class="form-field-info infoicon"
matTooltip="Enter as a comma or space seperated list of claims/permissions"
matTooltipPosition="below"
></div>
</div>
<p-chips (keyup)="scopesOnKeyup($event)"
[(ngModel)]="formData.scopes"
[allowDuplicate]="false"
placeholder="Enter scopes"
[addOnBlur]="true"
separator=",">
</p-chips>
</div>
</lib-form-field-container>
<lib-form-field-container
[title]="'Custom Tags'"
[label]="'OPTIONAL'"
Expand All @@ -119,10 +139,34 @@
</div>
<div class="form-group-column two-fifths">
<lib-form-field-container
[title]="'Certificate Definition'"
[title]="'Verification'"
[label]="'REQUIRED'"
>
<div class="form-field-input-group">
<div class="radio-group-container" (keydown)="radioKeyDownHandler($event)" tabindex="0">
<div class="radio-button-container" [ngClass]="{'selected': signatureMethod === 'JWKS_ENDPOINT'}" (click)="selectSignatureMethod('JWKS_ENDPOINT')">
<div class="radio-button-circle">
<div class="radio-button-inner-circle"></div>
</div>
<span class="radio-button-label">JWKS Endpoint</span>
</div>
<div class="radio-button-container" [ngClass]="{'selected': signatureMethod === 'CERT_PEM'}" (click)="selectSignatureMethod('CERT_PEM')">
<div class="radio-button-circle">
<div class="radio-button-inner-circle"></div>
</div>
<span class="radio-button-label">Cert PEM</span>
</div>
</div>
<div *ngIf="signatureMethod === 'JWKS_ENDPOINT'" class="form-field-input-group">
<div class="form-field-label-container select-file-label-container">
<div class="form-field-header">
<div class="form-field-title-container">
<span class="form-field-title">JWKS Endpoint</span>
</div>
</div>
<input class="form-field-input read-only" placeholder="Enter endpoint URL" [(ngModel)]="formData.jwksEndpoint" [ngClass]="{error: errors['certPem']}"/>
</div>
</div>
<div *ngIf="signatureMethod === 'CERT_PEM'" class="form-field-input-group">
<div class="form-field-label-container select-file-label-container">
<div class="form-field-header">
<div class="form-field-title-container">
Expand All @@ -148,10 +192,22 @@
</div>
</lib-form-field-container>
<lib-form-field-container
[title]="'JWKS Endpoint'"
[label]="'Optional'"
[showHeader]="false"
>
<input class="form-field-input read-only" placeholder="Enter endpoint URL" [(ngModel)]="formData.jwksEndpoint"/>
<div class="config-item">
<div class="config-container toggle-container">
<div class="config-container-label">ENABLED</div>
<div
(click)="toggleEnabled()"
[ngClass]="{ on: formData.enabled }"
class="toggle"
>
<span [hidden]="!formData.enabled" class="on-label">YES</span>
<span [hidden]="formData.enabled" class="off-label">NO</span>
<div class="switch"></div>
</div>
</div>
</div>
</lib-form-field-container>
<lib-form-field-container
[title]="'API Calls'"
Expand Down
75 changes: 75 additions & 0 deletions ...-console-lib/src/lib/features/projectable-forms/jwt-signer/jwt-signer-form.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
cursor: pointer;
border-radius: var(--inputBorderRadius);
gap: var(--marginMedium);
margin-top: -5px;

&:hover {
filter: brightness(.8);
Expand Down Expand Up @@ -83,3 +84,77 @@
}
}
}

.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: 21px;
height: 21px;
border-radius: 21px;
border-width: 2px;
border-style: solid;
border-color: var(--offWhite);
align-items: center;
justify-content: center;
background-color: var(--offWhite);

.radio-button-inner-circle {
display: none;
width: 15px;
height: 15px;
border-radius: 15px;
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: 14px;
font-weight: 600;
}
}
}
Loading

0 comments on commit 99c9825

Please sign in to comment.