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

feat: rehauled console (#3525)

Browse Source 
* new console

* move npm ci to angular build

* rel path for assets

* local grpc copy

* login policy, rm clear views, features rel path

* lock

Co-authored-by: Livio Amstutz <[email protected]>
This commit is contained in:
Max Peintner
2022-04-28 10:35:02 +00:00
committed by GitHub
co-authored by Livio Amstutz
parent 00f7dbe875
commit 08ae39ae19
668 changed files with 47746 additions and 19117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/pages/projects/apps/app-create/app-create.component.ts
+77 -75
View File
@@ -21,6 +21,7 @@ import {
AddOIDCAppRequest,
AddOIDCAppResponse,
} from 'src/app/proto/generated/zitadel/management_pb';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -36,7 +37,6 @@ import {
} from '../authmethods';
import { API_TYPE, AppCreateType, NATIVE_TYPE, RadioItemAppType, USER_AGENT_TYPE, WEB_TYPE } from '../authtypes';
@Component({
selector: 'cnsl-app-create',
templateUrl: './app-create.component.html',
@@ -52,7 +52,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
public oidcAppRequest: AddOIDCAppRequest.AsObject = new AddOIDCAppRequest().toObject();
public apiAppRequest: AddAPIAppRequest.AsObject = new AddAPIAppRequest().toObject();
public oidcResponseTypes: { type: OIDCResponseType, checked: boolean; disabled: boolean; }[] = [
public oidcResponseTypes: { type: OIDCResponseType; checked: boolean; disabled: boolean }[] = [
{ type: OIDCResponseType.OIDC_RESPONSE_TYPE_CODE, checked: false, disabled: false },
{ type: OIDCResponseType.OIDC_RESPONSE_TYPE_ID_TOKEN, checked: false, disabled: false },
{ type: OIDCResponseType.OIDC_RESPONSE_TYPE_ID_TOKEN_TOKEN, checked: false, disabled: false },
@@ -63,32 +63,22 @@ export class AppCreateComponent implements OnInit, OnDestroy {
OIDCAppType.OIDC_APP_TYPE_NATIVE,
OIDCAppType.OIDC_APP_TYPE_USER_AGENT,
];
public appTypes: any = [
WEB_TYPE,
NATIVE_TYPE,
USER_AGENT_TYPE,
API_TYPE,
];
public appTypes: any = [WEB_TYPE, NATIVE_TYPE, USER_AGENT_TYPE, API_TYPE];
public authMethods: RadioItemAuthType[] = [
PKCE_METHOD,
CODE_METHOD,
PK_JWT_METHOD,
POST_METHOD,
];
public authMethods: RadioItemAuthType[] = [PKCE_METHOD, CODE_METHOD, PK_JWT_METHOD, POST_METHOD];
// set to oidc first
public authMethodTypes: {
type: OIDCAuthMethodType | APIAuthMethodType,
checked: boolean,
type: OIDCAuthMethodType | APIAuthMethodType;
checked: boolean;
disabled: boolean;
api?: boolean;
oidc?: boolean;
}[] = [
{ type: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC, checked: false, disabled: false, oidc: true },
{ type: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE, checked: false, disabled: false, oidc: true },
{ type: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_POST, checked: false, disabled: false, oidc: true },
];
{ type: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC, checked: false, disabled: false, oidc: true },
{ type: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE, checked: false, disabled: false, oidc: true },
{ type: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_POST, checked: false, disabled: false, oidc: true },
];
// stepper
firstFormGroup!: FormGroup;
@@ -103,15 +93,15 @@ export class AppCreateComponent implements OnInit, OnDestroy {
public OIDCAuthMethodType: any = OIDCAuthMethodType;
public oidcGrantTypes: {
type: OIDCGrantType,
checked: boolean,
disabled: boolean,
type: OIDCGrantType;
checked: boolean;
disabled: boolean;
}[] = [
{ type: OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE, checked: true, disabled: false },
{ type: OIDCGrantType.OIDC_GRANT_TYPE_IMPLICIT, checked: false, disabled: true },
// { type: OIDCGrantType.OIDCGRANTTYPE_REFRESH_TOKEN, checked: false, disabled: true },
// TODO show when implemented
];
{ type: OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE, checked: true, disabled: false },
{ type: OIDCGrantType.OIDC_GRANT_TYPE_IMPLICIT, checked: false, disabled: true },
// { type: OIDCGrantType.OIDCGRANTTYPE_REFRESH_TOKEN, checked: false, disabled: true },
// TODO show when implemented
];
public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
public requestRedirectValuesSubject$: Subject<void> = new Subject();
@@ -124,6 +114,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
private mgmtService: ManagementService,
private fb: FormBuilder,
private _location: Location,
private breadcrumbService: BreadcrumbService,
) {
this.form = this.fb.group({
name: ['', [Validators.required]],
@@ -140,7 +131,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
appType: [WEB_TYPE, [Validators.required]],
});
this.firstFormGroup.valueChanges.subscribe(value => {
this.firstFormGroup.valueChanges.subscribe((value) => {
if (this.firstFormGroup.valid) {
this.oidcAppRequest.name = this.name?.value;
this.apiAppRequest.name = this.name?.value;
@@ -153,9 +144,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
switch (this.oidcAppRequest.appType) {
case OIDCAppType.OIDC_APP_TYPE_NATIVE:
this.authMethods = [
PKCE_METHOD,
];
this.authMethods = [PKCE_METHOD];
// automatically set to PKCE and skip step
this.oidcAppRequest.responseTypesList = [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE];
@@ -165,30 +154,19 @@ export class AppCreateComponent implements OnInit, OnDestroy {
break;
case OIDCAppType.OIDC_APP_TYPE_WEB:
// PK_JWT_METHOD.recommended = false;
this.authMethods = [
PKCE_METHOD,
CODE_METHOD,
PK_JWT_METHOD,
POST_METHOD,
];
this.authMethods = [PKCE_METHOD, CODE_METHOD, PK_JWT_METHOD, POST_METHOD];
this.authMethod?.setValue(PKCE_METHOD.key);
break;
case OIDCAppType.OIDC_APP_TYPE_USER_AGENT:
this.authMethods = [
PKCE_METHOD,
IMPLICIT_METHOD,
];
this.authMethods = [PKCE_METHOD, IMPLICIT_METHOD];
this.authMethod?.setValue(PKCE_METHOD.key);
break;
}
} else if (this.isStepperAPI) {
// PK_JWT_METHOD.recommended = true;
this.authMethods = [
PK_JWT_METHOD,
BASIC_AUTH_METHOD,
];
this.authMethods = [PK_JWT_METHOD, BASIC_AUTH_METHOD];
this.authMethod?.setValue(PK_JWT_METHOD.key);
}
@@ -198,28 +176,48 @@ export class AppCreateComponent implements OnInit, OnDestroy {
this.secondFormGroup = this.fb.group({
authMethod: [this.authMethods[0].key, [Validators.required]],
});
this.secondFormGroup.valueChanges.subscribe(form => {
this.secondFormGroup.valueChanges.subscribe((form) => {
const partialConfig = getPartialConfigFromAuthMethod(form.authMethod);
if (this.isStepperOIDC && partialConfig && partialConfig.oidc) {
this.oidcAppRequest.responseTypesList = partialConfig.oidc?.responseTypesList
?? [];
this.oidcAppRequest.responseTypesList = partialConfig.oidc?.responseTypesList ?? [];
this.oidcAppRequest.grantTypesList = partialConfig.oidc?.grantTypesList
?? [];
this.oidcAppRequest.authMethodType = partialConfig.oidc?.authMethodType
?? OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE;
this.oidcAppRequest.grantTypesList = partialConfig.oidc?.grantTypesList ?? [];
this.oidcAppRequest.authMethodType =
partialConfig.oidc?.authMethodType ?? OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE;
} else if (this.isStepperAPI && partialConfig && partialConfig.api) {
this.apiAppRequest.authMethodType = partialConfig.api?.authMethodType
?? APIAuthMethodType.API_AUTH_METHOD_TYPE_BASIC;
this.apiAppRequest.authMethodType =
partialConfig.api?.authMethodType ?? APIAuthMethodType.API_AUTH_METHOD_TYPE_BASIC;
}
});
}
public ngOnInit(): void {
this.subscription = this.route.params.subscribe(params => this.getData(params));
this.subscription = this.route.params.subscribe((params) => this.getData(params));
const projectId = this.route.snapshot.paramMap.get('projectid');
if (projectId) {
const breadcrumbs = [
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
}),
new Breadcrumb({
type: BreadcrumbType.ORG,
routerLink: ['/org'],
}),
new Breadcrumb({
type: BreadcrumbType.PROJECT,
name: '',
param: { key: 'projectid', value: projectId },
routerLink: ['/projects', projectId],
isZitadel: false,
}),
];
this.breadcrumbService.setBreadcrumb(breadcrumbs);
}
}
public ngOnDestroy(): void {
@@ -228,23 +226,21 @@ export class AppCreateComponent implements OnInit, OnDestroy {
}
public initForm(): void {
this.form.valueChanges.pipe(
takeUntil(this.destroyed$),
debounceTime(150)).subscribe(() => {
this.oidcAppRequest.name = this.formname?.value;
this.apiAppRequest.name = this.formname?.value;
this.form.valueChanges.pipe(takeUntil(this.destroyed$), debounceTime(150)).subscribe(() => {
this.oidcAppRequest.name = this.formname?.value;
this.apiAppRequest.name = this.formname?.value;
this.oidcAppRequest.responseTypesList = this.formresponseTypesList?.value;
this.oidcAppRequest.grantTypesList = this.formgrantTypesList?.value;
this.oidcAppRequest.responseTypesList = this.formresponseTypesList?.value;
this.oidcAppRequest.grantTypesList = this.formgrantTypesList?.value;
this.oidcAppRequest.authMethodType = this.formauthMethodType?.value;
this.apiAppRequest.authMethodType = this.formauthMethodType?.value;
this.oidcAppRequest.authMethodType = this.formauthMethodType?.value;
this.apiAppRequest.authMethodType = this.formauthMethodType?.value;
const oidcAppType = (this.formappType?.value as RadioItemAppType).oidcAppType;
if (oidcAppType !== undefined) {
this.oidcAppRequest.appType = oidcAppType;
}
});
const oidcAppType = (this.formappType?.value as RadioItemAppType).oidcAppType;
if (oidcAppType !== undefined) {
this.oidcAppRequest.appType = oidcAppType;
}
});
this.formappType?.valueChanges.pipe(takeUntil(this.destroyed$)).subscribe(() => {
this.setDevFormValidators();
@@ -306,18 +302,20 @@ export class AppCreateComponent implements OnInit, OnDestroy {
.addOIDCApp(this.oidcAppRequest)
.then((resp) => {
this.loading = false;
this.toast.showInfo('APP.TOAST.CREATED', true);
if (resp.clientId || resp.clientSecret) {
this.showSavedDialog(resp);
} else {
this.router.navigate(['projects', this.projectId, 'apps', resp.appId]);
}
})
.catch(error => {
.catch((error) => {
this.loading = false;
this.toast.showError(error);
});
} else if (appAPICheck) {
this.loading = true;
this.toast.showInfo('APP.TOAST.CREATED', true);
this.mgmtService
.addAPIApp(this.apiAppRequest)
.then((resp) => {
@@ -329,7 +327,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
this.router.navigate(['projects', this.projectId, 'apps', resp.appId]);
}
})
.catch(error => {
.catch((error) => {
this.loading = false;
this.toast.showError(error);
});
@@ -364,7 +362,12 @@ export class AppCreateComponent implements OnInit, OnDestroy {
return this.firstFormGroup.get('appType');
}
public grantTypeChecked(type: OIDCGrantType): boolean {
return this.oidcGrantTypes.filter(gt => gt.checked).map(gt => gt.type).findIndex(t => t === type) > -1;
return (
this.oidcGrantTypes
.filter((gt) => gt.checked)
.map((gt) => gt.type)
.findIndex((t) => t === type) > -1
);
}
get responseTypesList(): AbstractControl | null {
return this.secondFormGroup.get('responseTypesList');
@@ -410,4 +413,3 @@ export class AppCreateComponent implements OnInit, OnDestroy {
return (this.appType?.value as RadioItemAppType).createType === AppCreateType.API;
}
}