andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-11 16:45:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console): add stylelint scss, app redirecturi validation, user grant api change (#531)

Browse Source 
* add custom validator for redirect inputs

* change http pattern, i18n

* throw out deprecated usergrant functions

* remove deprecation service

* show docs in app detail

* reorder data promises

* show redirect desc in app detail

* custom validator

* grant search filters

* rm animations

* add validation to app detail

* user grant udpate

* rm grantid from update req

* fix project member guard

* fix hasrole directive

* show validation errors, i18n

* fix router link from org members

* navitem padding

* mobile layout

* policy grid mobile layout

* rm unused background

* lint

* add stylelinter add to pipeline

* update stylelint rules

* lint unknown rule

* disable enable rules

* lint

* table style lint

* table classes

* fix stylelinter rule, lint

* overflow fix member detail

* common detail page

* user create, password, project grant detail clnup

* move meta styles

* lint

* password policy indicator

* lint

* fix org create

* common component for complexity view

* lint

* user grant filter

* Update console/src/assets/i18n/en.json

Co-authored-by: Florian Forster <[email protected]>

* Update console/src/assets/i18n/en.json

Co-authored-by: Florian Forster <[email protected]>

* Update console/src/assets/i18n/de.json

Co-authored-by: Florian Forster <[email protected]>

* Update console/src/assets/i18n/de.json

Co-authored-by: Florian Forster <[email protected]>

* Update console/src/assets/i18n/en.json

Co-authored-by: Florian Forster <[email protected]>

Co-authored-by: Florian Forster <[email protected]>
This commit is contained in:
Max Peintner
2020-07-30 16:54:15 +02:00
committed by GitHub
co-authored by Florian Forster
parent 8d1725a81d
commit 22ba33c2ef
154 changed files with 6778 additions and 6156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/pages/projects/apps/app-create/app-create.component.html
+37 -20
View File
@@ -9,13 +9,13 @@
<h1>{{'APP.PAGES.CREATE_OIDC_DESC_TITLE' | translate}}</h1>
<p class="desc">{{'APP.PAGES.CREATE_OIDC_DESC_SUB' | translate}}</p>
<mat-progress-bar color="accent" *ngIf="loading" mode="indeterminate"></mat-progress-bar>
<mat-progress-bar class="progress-bar" color="accent" *ngIf="loading" mode="indeterminate"></mat-progress-bar>
<mat-checkbox class="proswitch" color="primary" [(ngModel)]="devmode">
{{'APP.OIDC.PROSWITCH' | translate}}
</mat-checkbox>
<mat-horizontal-stepper *ngIf="!devmode" linear #stepper labelPosition="bottom">
<mat-horizontal-stepper class="stepper" *ngIf="!devmode" linear #stepper labelPosition="bottom">
<mat-step [stepControl]="firstFormGroup" [editable]="true">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>{{'APP.OIDC.NAMEANDTYPESECTION' | translate}}</ng-template>
@@ -28,9 +28,10 @@
</mat-form-field>
<p class="step-title">{{'APP.OIDC.TYPETITLE' | translate}}</p>
<mat-radio-group color="primary" aria-labelledby="example-radio-group-label" class="example-radio-group"
<mat-radio-group color="primary" aria-labelledby="radio-group-label" class="radio-group"
formControlName="applicationType">
<mat-radio-button *ngFor="let type of oidcAppTypes | keyvalue" [value]="type.value">
<mat-radio-button class="radio-button" *ngFor="let type of oidcAppTypes | keyvalue"
[value]="type.value">
<div>{{'APP.OIDC.APPTYPE'+type.key | translate}}</div>
</mat-radio-button>
</mat-radio-group>
@@ -45,8 +46,9 @@
*ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT">
<ng-template matStepLabel>{{'APP.OIDC.RESPONSESECTION' | translate}}</ng-template>
<div class="checkbox-container">
<mat-checkbox *ngFor="let responsetype of oidcResponseTypes" (change)="changeResponseType()"
color="primary" [(ngModel)]="responsetype.checked" [disabled]="responsetype.disabled">
<mat-checkbox class="checkbox" *ngFor="let responsetype of oidcResponseTypes"
(change)="changeResponseType()" color="primary" [(ngModel)]="responsetype.checked"
[disabled]="responsetype.disabled">
{{'APP.OIDC.RESPONSE'+responsetype.type | translate}}
</mat-checkbox>
</div>
@@ -61,10 +63,10 @@
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>{{'APP.OIDC.AUTHMETHODSECTION' | translate}}</ng-template>
<mat-radio-group color="primary" aria-labelledby="example-radio-group-label" class="example-radio-group"
<mat-radio-group color="primary" aria-labelledby="example-radio-group-label" class="radio-group"
formControlName="authMethodType">
<mat-radio-button *ngFor="let authmethod of oidcAuthMethodType" [disabled]="authmethod.disabled"
[value]="authmethod.type">
<mat-radio-button class="radio-button" *ngFor="let authmethod of oidcAuthMethodType"
[disabled]="authmethod.disabled" [value]="authmethod.type">
{{'APP.OIDC.AUTHMETHOD'+authmethod.type | translate}}
</mat-radio-button>
</mat-radio-group>
@@ -81,35 +83,50 @@
<ng-template matStepLabel>{{'APP.OIDC.REDIRECTSECTION' | translate}}</ng-template>
<p class="step-title">{{'APP.OIDC.REDIRECTTITLE' | translate}}</p>
<p class="step-description"
*ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</p>
<p class="step-description" *ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB">
{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>
<mat-form-field appearance="outline" class="full-width">
<mat-label>{{ 'APP.OIDC.REDIRECT' | translate }}</mat-label>
<mat-chip-list #chipRedirectList aria-label="uri selection">
<mat-chip *ngFor="let uri of oidcApp.redirectUrisList" selected removable
<mat-chip class="chip" *ngFor="let uri of oidcApp.redirectUrisList" selected removable
[matTooltip]="!uri.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
[color]="!uri.startsWith('https://') ? 'warn': 'white'" (removed)="removeUri(uri, 'REDIRECT')">
{{uri}} <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input [matChipInputFor]="chipRedirectList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addUri($event, 'REDIRECT')">
[matChipInputAddOnBlur]="true" [formControl]="redirectControl"
(matChipInputTokenEnd)="addUri($event, 'REDIRECT')">
</mat-chip-list>
</mat-form-field>
<p *ngIf="redirectControl.invalid" class="error">{{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>
<p class="step-title">{{'APP.OIDC.POSTREDIRECTTITLE' | translate}}</p>
<p class="step-description"
*ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</p>
<p class="step-description"
*ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB || oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT">
{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>
<mat-form-field appearance="outline" class="full-width">
<mat-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</mat-label>
<mat-chip-list #chipPostRedirectList aria-label="uri selection">
<mat-chip *ngFor="let uri of oidcApp.postLogoutRedirectUrisList"
<mat-chip class="chip" *ngFor="let uri of oidcApp.postLogoutRedirectUrisList"
[matTooltip]="!uri.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
removable (removed)="removeUri(uri, 'POSTREDIRECT')" selected
[color]="!uri.startsWith('https://') ? 'warn': 'white'">
{{uri}} <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input [matChipInputFor]="chipPostRedirectList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addUri($event, 'POSTREDIRECT')">
<input [matChipInputFor]="chipPostRedirectList" [formControl]="postRedirectControl"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addUri($event, 'POSTREDIRECT')">
</mat-chip-list>
</mat-form-field>
<p *ngIf="postRedirectControl.invalid" class="error">{{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>
<div class="actions">
<button mat-stroked-button color="primary" matStepperPrevious>{{'ACTIONS.BACK' | translate}}</button>
@@ -220,7 +237,7 @@
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'APP.OIDC.GRANT' | translate }}</mat-label>
<mat-select formControlName="grantTypesList" multiple>
<mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant.type">
@@ -229,7 +246,7 @@
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'APP.OIDC.RESPONSE' | translate }}</mat-label>
<mat-select formControlName="responseTypesList" multiple>
<mat-option *ngFor="let type of oidcResponseTypes" [value]="type.type">
@@ -247,10 +264,10 @@
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="full-width">
<mat-form-field appearance="outline" class="formfield full-width">
<mat-label>{{ 'APP.OIDC.REDIRECT' | translate }}</mat-label>
<mat-chip-list #chipRedirectList aria-label="uri selection">
<mat-chip *ngFor="let uri of oidcApp.redirectUrisList" removable
<mat-chip class="chip" *ngFor="let uri of oidcApp.redirectUrisList" removable
(removed)="removeUri(uri, 'REDIRECT')">
{{uri}} <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
@@ -259,10 +276,10 @@
</mat-chip-list>
</mat-form-field>
<mat-form-field appearance="outline" class="full-width">
<mat-form-field appearance="outline" class="formfield full-width">
<mat-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</mat-label>
<mat-chip-list #chipPostRedirectList aria-label="uri selection">
<mat-chip *ngFor="let uri of oidcApp.postLogoutRedirectUrisList" removable
<mat-chip class="chip" *ngFor="let uri of oidcApp.postLogoutRedirectUrisList" removable
(removed)="removeUri(uri, 'POSTREDIRECT')">
{{uri}} <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
console/src/app/pages/projects/apps/app-create/app-create.component.scss
+101 -114
View File
@@ -1,161 +1,148 @@
h1 {
font-weight: 500;
font-size: 1.5rem;
font-weight: 500;
font-size: 1.5rem;
}
p.desc {
font-size: 14px;
color: #8795a1;
font-size: 14px;
color: #8795a1;
}
.proswitch {
margin-bottom: 2rem;
display: block;
margin-bottom: 2rem;
display: block;
}
.container {
padding: 4rem 4rem 2rem 4rem;
mat-progress-bar {
margin-bottom: 1rem;
padding: 4rem 4rem 2rem 4rem;
.progress-bar {
margin-bottom: 1rem;
}
.abort-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
.abort {
font-size: 1.2rem;
margin-left: 2rem;
}
.abort-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
.abort {
font-size: 1.2rem;
margin-left: 2rem;
}
.abort-2 {
font-size: 1.2rem;
margin-left: 2rem;
}
}
.abort-2 {
font-size: 1.2rem;
margin-left: 2rem;
white-space: nowrap;
}
}
}
.margin-right {
margin-right: 0.5rem;
margin-right: .5rem;
}
.formfield {
width: 400px;
display: block;
width: 400px;
display: block;
}
.full-width {
width: 100%;
width: 100%;
}
mat-horizontal-stepper {
background: inherit !important;
margin: 0 -1.5rem;
.stepper {
background: inherit !important;
margin: 0 -1.5rem;
.step-title {
font-size: 1.2rem;
color: #8795a1;
}
.step-title {
font-size: 1.2rem;
color: #8795a1;
}
mat-chip[color='white'] {
background-color: #fafafa;
}
.step-description {
font-size: .9rem;
color: #8795a1;
}
.error {
font-size: 13px;
color: #f44336;
margin-top: 0;
}
.chip[color='white'] {
background-color: #fafafa;
}
}
mat-radio-group {
display: flex;
flex-direction: column;
mat-radio-button {
margin: .5rem 0;
}
.radio-group {
display: flex;
flex-direction: column;
.radio-button {
margin: .5rem 0;
}
}
.checkbox-container {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
mat-checkbox {
margin: .5rem 0;
}
.checkbox {
margin: .5rem 0;
}
}
.row {
display: flex;
justify-content: space-between;
display: flex;
justify-content: space-between;
.left, .right{
margin-bottom: .5rem;
font-size: 14px;
color: #8795a1;
}
.left,
.right {
margin-bottom: .5rem;
font-size: 14px;
color: #8795a1;
}
}
.actions {
button[mat-stroked-button] {
float: left;
margin-top: 1rem;
border-radius: .5rem;
}
button[mat-stroked-button] {
float: left;
margin-top: 1rem;
border-radius: .5rem;
}
button[mat-raised-button] {
float: right;
margin-top: 1rem;
border-radius: .5rem;
padding: .5rem 1rem;
min-width: 100px;
}
button[mat-raised-button] {
float: right;
margin-top: 1rem;
border-radius: .5rem;
padding: .5rem 1rem;
min-width: 100px;
}
}
.dev {
.column {
display: flex;
flex-direction: column;
.content {
display: flex;
margin: 0 -.5rem;
flex-wrap: wrap;
.formfield {
width: 400px;
input {
font-size: 1.5rem;
}
.formfield {
flex: 1 0 40%;
margin: 0 .5rem;
&.autocomplete {
margin-top: 1rem;
}
}
.slider {
margin-top: 2rem;
margin-bottom: 1rem;
font-size: 0.8rem;
}
.access-token {
width: 400px;
}
&.full-width {
flex-basis: 80%;
}
}
}
.content {
display: flex;
margin: 0 -.5rem;
flex-wrap: wrap;
mat-form-field {
flex: 1 0 40%;
margin: 0 .5rem;
}
.full-width {
flex-basis: 80%;
}
}
.continue-button {
margin-top: 3rem;
display: block;
padding: 0.5rem 4rem;
border-radius: 0.5rem;
float: right;
}
.continue-button {
margin-top: 3rem;
display: block;
padding: .5rem 4rem;
border-radius: .5rem;
float: right;
}
}
console/src/app/pages/projects/apps/app-create/app-create.component.ts
+21 -7
View File
@@ -1,7 +1,7 @@
import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
import { Location } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { MatChipInputEvent } from '@angular/material/chips';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Params, Router } from '@angular/router';
@@ -19,6 +19,7 @@ import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
import { nativeValidator, webValidator } from '../appTypeValidator';
@Component({
selector: 'app-app-create',
@@ -73,6 +74,9 @@ export class AppCreateComponent implements OnInit, OnDestroy {
// TODO show when implemented
];
public redirectControl: FormControl = new FormControl('');
public postRedirectControl: FormControl = new FormControl('');
public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
constructor(
@@ -119,6 +123,9 @@ export class AppCreateComponent implements OnInit, OnDestroy {
this.oidcApp.grantTypesList =
[OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE];
this.oidcApp.authMethodType = OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
this.redirectControl = new FormControl('', [nativeValidator as ValidatorFn]);
this.postRedirectControl = new FormControl('', [nativeValidator as ValidatorFn]);
break;
case OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB:
console.log('WEB');
@@ -136,6 +143,8 @@ export class AppCreateComponent implements OnInit, OnDestroy {
this.oidcApp.grantTypesList =
[OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE];
this.redirectControl = new FormControl('', [webValidator as ValidatorFn]);
this.postRedirectControl = new FormControl('', [webValidator as ValidatorFn]);
break;
case OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT:
console.log('USERAGENT');
@@ -147,6 +156,9 @@ export class AppCreateComponent implements OnInit, OnDestroy {
[OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE, OIDCGrantType.OIDCGRANTTYPE_IMPLICIT];
this.oidcApp.authMethodType = OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
this.redirectControl = new FormControl('', [webValidator as ValidatorFn]);
this.postRedirectControl = new FormControl('', [webValidator as ValidatorFn]);
break;
}
@@ -213,16 +225,18 @@ export class AppCreateComponent implements OnInit, OnDestroy {
const value = event.value.trim();
if (value !== '') {
if (target === 'REDIRECT') {
if (target === 'REDIRECT' && this.redirectControl.valid) {
this.oidcApp.redirectUrisList.push(value);
} else if (target === 'POSTREDIRECT') {
if (input) {
input.value = '';
}
} else if (target === 'POSTREDIRECT' && this.redirectControl.valid) {
this.oidcApp.postLogoutRedirectUrisList.push(value);
if (input) {
input.value = '';
}
}
}
if (input) {
input.value = '';
}
}
public removeUri(uri: string, target: string): void {
console/src/app/pages/projects/apps/app-detail/app-detail.component.html
+26 -10
View File
@@ -27,6 +27,9 @@
<mat-label>{{ 'APP.NAME' | translate }}</mat-label>
<input matInput formControlName="name" />
</mat-form-field>
<p class="docs-line" *ngIf="docs?.discoveryEndpoint">Discovery Endpoint: {{docs.discoveryEndpoint}}</p>
<p class="docs-line" *ngIf="docs?.issuer">Issuer: {{docs.issuer}}</p>
</div>
<div class="btn-container">
<button type="submit" color="primary" [disabled]="appNameForm.invalid || name?.disabled"
@@ -42,12 +45,12 @@
</div>
<form *ngIf="appForm" [formGroup]="appForm" (ngSubmit)="saveOIDCApp()">
<div class="content">
<mat-form-field appearance="outline">
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'APP.OIDC.CLIENTID' | translate }}</mat-label>
<input matInput formControlName="clientId" />
</mat-form-field>
<mat-form-field appearance="outline">
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'APP.OIDC.RESPONSE' | translate }}</mat-label>
<mat-select formControlName="responseTypesList" multiple>
<mat-option *ngFor="let type of oidcResponseTypes" [value]="type">
@@ -56,7 +59,7 @@
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'APP.OIDC.GRANT' | translate }}</mat-label>
<mat-select formControlName="grantTypesList" multiple>
<mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant">
@@ -82,11 +85,17 @@
</mat-option>
</mat-select>
</mat-form-field>
<p class="step-description"
*ngIf="applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</p>
<p class="step-description"
*ngIf="applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB || applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT">
{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>
<mat-form-field class="full-width" appearance="outline">
<mat-form-field class="formfield full-width" appearance="outline">
<mat-label>{{ 'APP.OIDC.REDIRECT' | translate }}</mat-label>
<mat-chip-list #chipRedirectList>
<mat-chip *ngFor="let redirect of redirectUrisList" selected
<mat-chip class="chip" *ngFor="let redirect of redirectUrisList" selected
[matTooltip]="!redirect.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
[color]="!redirect.startsWith('https://') ? 'warn': 'green'"
(removed)="remove(redirect, RedirectType.REDIRECT)">
@@ -94,15 +103,18 @@
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input [matChipInputFor]="chipRedirectList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
[matChipInputAddOnBlur]="addOnBlur" [formControl]="redirectControl"
(matChipInputTokenEnd)="add($event, RedirectType.REDIRECT)">
</mat-chip-list>
</mat-form-field>
<mat-form-field class="full-width" appearance="outline">
<p *ngIf="redirectControl.value && redirectControl.invalid" class="error">
{{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>
<mat-form-field class="formfield full-width" appearance="outline">
<mat-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</mat-label>
<mat-chip-list #chipPostRedirectList>
<mat-chip *ngFor="let redirect of postLogoutRedirectUrisList" selected
<mat-chip class="chip" *ngFor="let redirect of postLogoutRedirectUrisList" selected
(removed)="remove(redirect, RedirectType.POSTREDIRECT)"
[matTooltip]="!redirect.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
[color]="!redirect.startsWith('https://') ? 'warn': 'green'">
@@ -111,13 +123,17 @@
</mat-chip>
<input [matChipInputFor]="chipPostRedirectList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event, RedirectType.POSTREDIRECT)">
(matChipInputTokenEnd)="add($event, RedirectType.POSTREDIRECT)"
[formControl]="postRedirectControl">
</mat-chip-list>
</mat-form-field>
<p *ngIf="postRedirectControl.value && postRedirectControl.invalid" class="error">
{{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>
</div>
<div class="btn-container">
<button type="submit" color="primary" [disabled]="appForm.invalid"
<button class="submit-button" type="submit" color="primary" [disabled]="appForm.invalid"
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</div>
</form>
console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
+94 -75
View File
@@ -1,91 +1,110 @@
.head {
display: flex;
display: flex;
align-items: center;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
a {
display: block;
}
h1 {
font-size: 1.2rem;
margin: 0 1rem;
margin-left: 2rem;
font-weight: normal;
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
}
.zitadel-warning {
font-size: 14px;
color: rgb(201, 51, 71);
}
}
.err-container {
color: rgb(201, 51, 71);
font-size: 14px;
}
.card-actions {
button {
border-radius: .5rem;
}
}
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
&.nowrap {
flex-wrap: nowrap;
}
&.center {
align-items: center;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
a {
display: block;
}
h1 {
font-size: 1.2rem;
margin: 0 1rem;
margin-left: 2rem;
font-weight: normal;
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
}
}
.zitadel-warning {
font-size: 14px;
color: rgb(201,51,71);
.formfield {
flex: 1 1 30%;
margin: 0 .5rem;
&.full-width {
flex-basis: 100%;
}
}
.err-container {
color: rgb(201,51,71);
font-size: 14px;
.step-description {
font-size: .9rem;
color: #8795a1;
flex-basis: 100%;
margin: 0 .5rem 1rem .5rem;
}
.card-actions {
button {
border-radius: .5rem;
}
.error {
font-size: 13px;
color: #f44336;
margin: 0 .5rem 1.5rem .5rem;
}
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
&.nowrap{
flex-wrap: nowrap;
}
&.center {
align-items: center;
}
mat-form-field {
flex: 1 1 30%;
margin: 0 .5rem;
}
.docs-line {
flex-basis: 100%;
font-size: 14px;
color: #8795a1;
margin-top: 0;
}
.full-width {
flex-basis: 100%;
}
.toggle {
align-self: flex-start;
margin-bottom: 1rem;
margin-right: 1rem;
border-radius: .5rem;
.toggle {
align-self: flex-start;
margin-bottom: 1rem;
i {
margin-right: 1rem;
border-radius: .5rem;
i {
margin-right: 1rem;
}
}
}
.btn-container {
display: flex;
justify-content: flex-end;
margin: 0 -.5rem;
button {
border-radius: .5rem;
margin: 0 .5rem;
}
}
}
mat-chip[color='green'] {
background-color: #56a392 !important;
}
.btn-container {
display: flex;
justify-content: flex-end;
margin: 0 -.5rem;
.submit-button {
border-radius: .5rem;
margin: 0 .5rem;
}
}
.chip[color='green'] {
background-color: #56a392 !important;
}
console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
+17 -4
View File
@@ -1,7 +1,7 @@
import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
import { Location } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { MatButtonToggleChange } from '@angular/material/button-toggle';
import { MatChipInputEvent } from '@angular/material/chips';
import { MatDialog } from '@angular/material/dialog';
@@ -16,12 +16,14 @@ import {
OIDCConfig,
OIDCGrantType,
OIDCResponseType,
ZitadelDocs,
} from 'src/app/proto/generated/management_pb';
import { OrgService } from 'src/app/services/org.service';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
import { nativeValidator } from '../appTypeValidator';
enum RedirectType {
REDIRECT = 'redirect',
@@ -73,6 +75,13 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public RedirectType: any = RedirectType;
public isZitadel: boolean = false;
public docs!: ZitadelDocs.AsObject;
public OIDCApplicationType: any = OIDCApplicationType;
public redirectControl: FormControl = new FormControl('');
public postRedirectControl: FormControl = new FormControl('');
constructor(
public translate: TranslateService,
@@ -111,7 +120,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.isZitadel = iam.toObject().iamProjectId === this.projectId;
});
this.projectService.GetApplicationById(projectid, id).then(app => {
this.app = app.toObject();
this.appNameForm.patchValue(this.app);
@@ -125,9 +133,12 @@ export class AppDetailComponent implements OnInit, OnDestroy {
}
if (this.app.oidcConfig?.redirectUrisList) {
this.redirectUrisList = this.app.oidcConfig.redirectUrisList;
this.redirectControl = new FormControl('', [nativeValidator as ValidatorFn]);
}
if (this.app.oidcConfig?.postLogoutRedirectUrisList) {
this.postLogoutRedirectUrisList = this.app.oidcConfig.postLogoutRedirectUrisList;
this.postRedirectControl = new FormControl('', [nativeValidator as ValidatorFn]);
}
if (this.app.oidcConfig) {
this.appForm.patchValue(this.app.oidcConfig);
@@ -137,6 +148,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.toast.showError(error);
this.errorMessage = error.message;
});
this.docs = (await this.projectService.GetZitadelDocs()).toObject();
}
public changeState(event: MatButtonToggleChange): void {
@@ -165,7 +178,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
}
public add(event: MatChipInputEvent, target: RedirectType): void {
if (target === RedirectType.POSTREDIRECT) {
if (target === RedirectType.POSTREDIRECT && this.postRedirectControl.valid) {
const input = event.input;
if (event.value !== '' && event.value !== ' ' && event.value !== '/') {
this.postLogoutRedirectUrisList.push(event.value);
@@ -173,7 +186,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
if (input) {
input.value = '';
}
} else if (target === RedirectType.REDIRECT) {
} else if (target === RedirectType.REDIRECT && this.redirectControl.valid) {
const input = event.input;
if (event.value !== '' && event.value !== ' ' && event.value !== '/') {
this.redirectUrisList.push(event.value);
console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.scss
+31 -31
View File
@@ -1,37 +1,37 @@
.title {
font-size: 1.2rem;
}
.desc {
color: #8795a1;
font-size: .9rem;
font-size: 1.2rem;
}
.desc {
color: #8795a1;
font-size: .9rem;
}
.full-width {
width: 100%;
}
.action {
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: .5rem;
}
.full-width {
width: 100%;
}
.action {
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: 0.5rem;
}
button {
border-radius: 0.5rem;
}
button {
border-radius: .5rem;
}
}
.flex {
display: flex;
align-items: center;
padding: .5rem;
border: 1px solid #ffffff20;
border-radius: .5rem;
.flex {
display: flex;
align-items: center;
padding: .5rem;
border: 1px solid #ffffff20;
border-radius: .5rem;
.secret {
overflow: auto;
}
}
.secret {
overflow: auto;
}
}
console/src/app/pages/projects/apps/appTypeValidator.ts
+32
View File
@@ -0,0 +1,32 @@
import { FormControl } from '@angular/forms';
export function nativeValidator(c: FormControl): any {
const REGEXP = /([a-zA-Z0-9]*:\/\/)\w+/g;
if (c.value.startsWith('http://localhost')) {
return null;
} else if (c.value.startsWith('https://') || c.value.startsWith('http://')) {
return {
invalid: true,
nativeValidator: {
valid: false,
},
};
} else if (REGEXP.test(c.value)) {
return null;
}
}
export function webValidator(c: FormControl): any {
if (c.value.startsWith('https://')) {
return null;
} else if (c.value.startsWith('http://')) {
return {
invalid: false,
webValidator: {
valid: true,
error: 'LOCALHOSTALLOWEDFORTESTING',
},
};
}
}