TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-05-08 02:26:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): add model for api keys, fix toast, binding (#1757)

Browse Source 
* fix: add model for api keys, fix toast, binding

* show api clientid
This commit is contained in:
Max Peintner 2021-05-20 10:26:53 +02:00 committed by GitHub
parent d0a5ad94d2
commit 1ba70d2012
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 496 additions and 472 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
console/src/app/modules/client-keys/client-keys.component.ts
View File

@ -16,128 +16,128 @@ import { ToastService } from 'src/app/services/toast.service';
import { PageEvent, PaginatorComponent } from '../paginator/paginator.component'; import { PageEvent, PaginatorComponent } from '../paginator/paginator.component';
@Component({ @Component({
selector: 'app-client-keys', selector: 'app-client-keys',
templateUrl: './client-keys.component.html', templateUrl: './client-keys.component.html',
styleUrls: ['./client-keys.component.scss'], styleUrls: ['./client-keys.component.scss'],
}) })
export class ClientKeysComponent implements OnInit { export class ClientKeysComponent implements OnInit {
@Input() projectId!: string; @Input() projectId!: string;
@Input() appId!: string; @Input() appId!: string;
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent; @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
public dataSource: MatTableDataSource<Key.AsObject> = new MatTableDataSource<Key.AsObject>(); public dataSource: MatTableDataSource<Key.AsObject> = new MatTableDataSource<Key.AsObject>();
public selection: SelectionModel<Key.AsObject> = new SelectionModel<Key.AsObject>(true, []); public selection: SelectionModel<Key.AsObject> = new SelectionModel<Key.AsObject>(true, []);
public keyResult!: ListAppKeysResponse.AsObject; public keyResult!: ListAppKeysResponse.AsObject;
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable(); public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@Input() public displayedColumns: string[] = ['select', 'id', 'type', 'creationDate', 'expirationDate', 'actions']; @Input() public displayedColumns: string[] = ['select', 'id', 'type', 'creationDate', 'expirationDate', 'actions'];
@Output() public changedSelection: EventEmitter<Array<Key.AsObject>> = new EventEmitter(); @Output() public changedSelection: EventEmitter<Array<Key.AsObject>> = new EventEmitter();
constructor(public translate: TranslateService, private mgmtService: ManagementService, private dialog: MatDialog, constructor(public translate: TranslateService, private mgmtService: ManagementService, private dialog: MatDialog,
private toast: ToastService) { private toast: ToastService) {
this.selection.changed.subscribe(() => { this.selection.changed.subscribe(() => {
this.changedSelection.emit(this.selection.selected); this.changedSelection.emit(this.selection.selected);
}); });
} }
public ngOnInit(): void { public ngOnInit(): void {
this.getData(10, 0); this.getData(10, 0);
} }
public isAllSelected(): boolean { public isAllSelected(): boolean {
const numSelected = this.selection.selected.length; const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length; const numRows = this.dataSource.data.length;
return numSelected === numRows; return numSelected === numRows;
} }
public masterToggle(): void { public masterToggle(): void {
this.isAllSelected() ? this.isAllSelected() ?
this.selection.clear() : this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row)); this.dataSource.data.forEach(row => this.selection.select(row));
} }
public changePage(event: PageEvent): void { public changePage(event: PageEvent): void {
this.getData(event.pageSize, event.pageIndex * event.pageSize); this.getData(event.pageSize, event.pageIndex * event.pageSize);
} }
public deleteKey(key: Key.AsObject): void { public deleteKey(key: Key.AsObject): void {
this.mgmtService.removeAppKey(this.projectId, this.appId, key.id).then(() => { this.mgmtService.removeAppKey(this.projectId, this.appId, key.id).then(() => {
this.selection.clear(); this.selection.clear();
this.toast.showInfo('USER.TOAST.SELECTEDKEYSDELETED', true); this.toast.showInfo('USER.TOAST.SELECTEDKEYSDELETED', true);
this.getData(10, 0); this.getData(10, 0);
}).catch(error => { }).catch(error => {
this.toast.showError(error); this.toast.showError(error);
}); });
} }
public openAddKey(): void { public openAddKey(): void {
const dialogRef = this.dialog.open(AddKeyDialogComponent, { const dialogRef = this.dialog.open(AddKeyDialogComponent, {
data: {}, data: {},
width: '400px', width: '400px',
}); });
dialogRef.afterClosed().subscribe(resp => { dialogRef.afterClosed().subscribe(resp => {
if (resp) { if (resp) {
const type: KeyType = resp.type; const type: KeyType = resp.type;
let date: Timestamp | undefined; let date: Timestamp | undefined;
if (resp.date as Moment) { if (resp.date as Moment) {
const ts = new Timestamp(); const ts = new Timestamp();
const milliseconds = resp.date.toDate().getTime(); const milliseconds = resp.date.toDate().getTime();
const seconds = Math.abs(milliseconds / 1000); const seconds = Math.abs(milliseconds / 1000);
const nanos = (milliseconds - seconds * 1000) * 1000 * 1000; const nanos = (milliseconds - seconds * 1000) * 1000 * 1000;
ts.setSeconds(seconds); ts.setSeconds(seconds);
ts.setNanos(nanos); ts.setNanos(nanos);
date = ts; date = ts;
}
if (type) {
return this.mgmtService.addAppKey(
this.projectId,
this.appId,
type,
date ? date : undefined,
).then((response) => {
if (response) {
setTimeout(() => {
this.refreshPage();
}, 1000);
this.dialog.open(ShowKeyDialogComponent, {
data: {
key: response,
type: AddKeyDialogType.AUTHNKEY,
},
width: '400px',
});
}
}).catch((error: any) => {
this.toast.showError(error);
});
}
}
});
}
private async getData(limit: number, offset: number): Promise<void> {
this.loadingSubject.next(true);
if (this.projectId && this.appId) {
this.mgmtService.listAppKeys(this.projectId, this.appId, limit, offset).then(resp => {
this.keyResult = resp;
this.dataSource.data = this.keyResult.resultList;
this.loadingSubject.next(false);
}).catch((error: any) => {
this.toast.showError(error);
this.loadingSubject.next(false);
});
} }
}
public refreshPage(): void { if (type) {
this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize); return this.mgmtService.addAppKey(
this.projectId,
this.appId,
type,
date ? date : undefined,
).then((response) => {
if (response) {
setTimeout(() => {
this.refreshPage();
}, 1000);
this.dialog.open(ShowKeyDialogComponent, {
data: {
key: response,
type: AddKeyDialogType.AUTHNKEY,
},
width: '400px',
});
}
}).catch((error: any) => {
this.toast.showError(error);
});
}
}
});
}
private async getData(limit: number, offset: number): Promise<void> {
this.loadingSubject.next(true);
if (this.projectId && this.appId) {
this.mgmtService.listAppKeys(this.projectId, this.appId, limit, offset).then(resp => {
this.keyResult = resp;
this.dataSource.data = this.keyResult.resultList;
this.loadingSubject.next(false);
}).catch((error: any) => {
this.toast.showError(error);
this.loadingSubject.next(false);
});
} }
}
public refreshPage(): void {
this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
}
} }

3
console/src/app/modules/show-key-dialog/show-key-dialog.component.html
View File

@ -4,7 +4,8 @@
<ng-container *ngIf="keyResponse"> <ng-container *ngIf="keyResponse">
<div class="row"> <div class="row">
<p class="left">{{'USER.MACHINE.ID' | translate}}</p> <p class="left">{{'USER.MACHINE.ID' | translate}}</p>
<p class="right">{{keyResponse?.keyId}}</p> <p class="right">{{$any(keyResponse)?.id}}</p>
<p class="right">{{$any(keyResponse)?.keyId}}</p>
</div> </div>
<div class="row"> <div class="row">

41
console/src/app/modules/show-key-dialog/show-key-dialog.component.ts
View File

@ -1,30 +1,33 @@
import { Component, Inject } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { saveAs } from 'file-saver'; import { saveAs } from 'file-saver';
import { AddMachineKeyResponse } from 'src/app/proto/generated/zitadel/management_pb'; import { AddAppKeyResponse, AddMachineKeyResponse } from 'src/app/proto/generated/zitadel/management_pb';
@Component({ @Component({
selector: 'app-show-key-dialog', selector: 'app-show-key-dialog',
templateUrl: './show-key-dialog.component.html', templateUrl: './show-key-dialog.component.html',
styleUrls: ['./show-key-dialog.component.scss'], styleUrls: ['./show-key-dialog.component.scss'],
}) })
export class ShowKeyDialogComponent { export class ShowKeyDialogComponent {
public keyResponse!: AddMachineKeyResponse.AsObject; public keyResponse!: AddMachineKeyResponse.AsObject | AddAppKeyResponse.AsObject;
constructor( constructor(
public dialogRef: MatDialogRef<ShowKeyDialogComponent>, public dialogRef: MatDialogRef<ShowKeyDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any, @Inject(MAT_DIALOG_DATA) public data: any,
) { ) {
this.keyResponse = data.key; this.keyResponse = data.key;
} }
public saveFile(): void { public saveFile(): void {
const json = atob(this.keyResponse.keyDetails.toString()); const json = atob(this.keyResponse.keyDetails.toString());
const blob = new Blob([json], { type: 'text/plain;charset=utf-8' }); const blob = new Blob([json], { type: 'text/plain;charset=utf-8' });
saveAs(blob, `${this.keyResponse.keyId}.json`); const name = (this.keyResponse as AddMachineKeyResponse.AsObject).keyId ?
} (this.keyResponse as AddMachineKeyResponse.AsObject).keyId :
(this.keyResponse as AddAppKeyResponse.AsObject).id;
saveAs(blob, `${name}.json`);
}
public closeDialog(): void { public closeDialog(): void {
this.dialogRef.close(false); this.dialogRef.close(false);
} }
} }

2
console/src/app/pages/projects/apps/app-create/app-create.component.html
View File

@ -180,7 +180,7 @@
</span> </span>
<span class="right"> <span class="right">
<span> <span>
{{'APP.API.AUTHMETHOD.'+oidcAppRequest?.authMethodType | translate}} {{'APP.API.AUTHMETHOD.'+apiAppRequest?.authMethodType | translate}}
</span> </span>
</span> </span>
</div> </div>

688
console/src/app/pages/projects/apps/app-create/app-create.component.ts
View File

@ -9,405 +9,405 @@ import { Subject, Subscription } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators'; import { debounceTime, takeUntil } from 'rxjs/operators';
import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component'; import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
import { import {
APIAuthMethodType, APIAuthMethodType,
OIDCAppType, OIDCAppType,
OIDCAuthMethodType, OIDCAuthMethodType,
OIDCGrantType, OIDCGrantType,
OIDCResponseType, OIDCResponseType,
} from 'src/app/proto/generated/zitadel/app_pb'; } from 'src/app/proto/generated/zitadel/app_pb';
import { import {
AddAPIAppRequest, AddAPIAppRequest,
AddAPIAppResponse, AddAPIAppResponse,
AddOIDCAppRequest, AddOIDCAppRequest,
AddOIDCAppResponse, AddOIDCAppResponse,
} from 'src/app/proto/generated/zitadel/management_pb'; } from 'src/app/proto/generated/zitadel/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service'; import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service'; import { ToastService } from 'src/app/services/toast.service';
import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component'; import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
import { import {
BASIC_AUTH_METHOD, BASIC_AUTH_METHOD,
CODE_METHOD, CODE_METHOD,
getPartialConfigFromAuthMethod, getPartialConfigFromAuthMethod,
IMPLICIT_METHOD, IMPLICIT_METHOD,
PK_JWT_METHOD, PK_JWT_METHOD,
PKCE_METHOD, PKCE_METHOD,
POST_METHOD, POST_METHOD,
} from '../authmethods'; } from '../authmethods';
import { API_TYPE, AppCreateType, NATIVE_TYPE, RadioItemAppType, USER_AGENT_TYPE, WEB_TYPE } from '../authtypes'; import { API_TYPE, AppCreateType, NATIVE_TYPE, RadioItemAppType, USER_AGENT_TYPE, WEB_TYPE } from '../authtypes';
@Component({ @Component({
selector: 'app-app-create', selector: 'app-app-create',
templateUrl: './app-create.component.html', templateUrl: './app-create.component.html',
styleUrls: ['./app-create.component.scss'], styleUrls: ['./app-create.component.scss'],
}) })
export class AppCreateComponent implements OnInit, OnDestroy { export class AppCreateComponent implements OnInit, OnDestroy {
private subscription?: Subscription; private subscription?: Subscription;
private destroyed$: Subject<void> = new Subject(); private destroyed$: Subject<void> = new Subject();
public devmode: boolean = false; public devmode: boolean = false;
public projectId: string = ''; public projectId: string = '';
public loading: boolean = false; public loading: boolean = false;
public oidcAppRequest: AddOIDCAppRequest.AsObject = new AddOIDCAppRequest().toObject(); public oidcAppRequest: AddOIDCAppRequest.AsObject = new AddOIDCAppRequest().toObject();
public apiAppRequest: AddAPIAppRequest.AsObject = new AddAPIAppRequest().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_CODE, checked: false, disabled: false },
{ type: OIDCResponseType.OIDC_RESPONSE_TYPE_ID_TOKEN, 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 }, { type: OIDCResponseType.OIDC_RESPONSE_TYPE_ID_TOKEN_TOKEN, checked: false, disabled: false },
];
public oidcAppTypes: OIDCAppType[] = [
OIDCAppType.OIDC_APP_TYPE_WEB,
OIDCAppType.OIDC_APP_TYPE_NATIVE,
OIDCAppType.OIDC_APP_TYPE_USER_AGENT,
];
public appTypes: any = [
WEB_TYPE,
NATIVE_TYPE,
USER_AGENT_TYPE,
API_TYPE,
];
public authMethods: RadioItemAuthType[] = [
PKCE_METHOD,
CODE_METHOD,
PK_JWT_METHOD,
POST_METHOD,
];
// set to oidc first
public authMethodTypes: {
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 },
]; ];
public oidcAppTypes: OIDCAppType[] = [ // stepper
OIDCAppType.OIDC_APP_TYPE_WEB, firstFormGroup!: FormGroup;
OIDCAppType.OIDC_APP_TYPE_NATIVE, secondFormGroup!: FormGroup;
OIDCAppType.OIDC_APP_TYPE_USER_AGENT,
]; // devmode
public appTypes: any = [ public form!: FormGroup;
WEB_TYPE,
NATIVE_TYPE, public AppCreateType: any = AppCreateType;
USER_AGENT_TYPE, public OIDCAppType: any = OIDCAppType;
API_TYPE, public OIDCGrantType: any = OIDCGrantType;
public OIDCAuthMethodType: any = OIDCAuthMethodType;
public oidcGrantTypes: {
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
]; ];
public authMethods: RadioItemAuthType[] = [ public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
PKCE_METHOD, public requestRedirectValuesSubject$: Subject<void> = new Subject();
CODE_METHOD,
PK_JWT_METHOD,
POST_METHOD,
];
// set to oidc first constructor(
public authMethodTypes: { private router: Router,
type: OIDCAuthMethodType | APIAuthMethodType, private route: ActivatedRoute,
checked: boolean, private toast: ToastService,
disabled: boolean; private dialog: MatDialog,
api?: boolean; private mgmtService: ManagementService,
oidc?: boolean; private fb: FormBuilder,
}[] = [ private _location: Location,
{ 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 }, this.form = this.fb.group({
{ type: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_POST, checked: false, disabled: false, oidc: true }, name: ['', [Validators.required]],
]; responseTypesList: ['', [Validators.required]],
grantTypesList: ['', [Validators.required]],
appType: ['', [Validators.required]],
authMethodType: ['', [Validators.required]],
});
// stepper this.initForm();
firstFormGroup!: FormGroup;
secondFormGroup!: FormGroup;
// devmode this.firstFormGroup = this.fb.group({
public form!: FormGroup; name: ['', [Validators.required]],
appType: [WEB_TYPE, [Validators.required]],
});
public AppCreateType: any = AppCreateType; this.firstFormGroup.valueChanges.subscribe(value => {
public OIDCAppType: any = OIDCAppType; if (this.firstFormGroup.valid) {
public OIDCGrantType: any = OIDCGrantType; this.oidcAppRequest.name = this.name?.value;
public OIDCAuthMethodType: any = OIDCAuthMethodType; this.apiAppRequest.name = this.name?.value;
public oidcGrantTypes: { if (this.isStepperOIDC) {
type: OIDCGrantType, const oidcAppType = (this.appType?.value as RadioItemAppType).oidcAppType;
checked: boolean, if (oidcAppType !== undefined) {
disabled: boolean, this.oidcAppRequest.appType = oidcAppType;
}[] = [ }
{ 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]; switch (this.oidcAppRequest.appType) {
public requestRedirectValuesSubject$: Subject<void> = new Subject(); case OIDCAppType.OIDC_APP_TYPE_NATIVE:
this.authMethods = [
PKCE_METHOD,
];
constructor( // automatically set to PKCE and skip step
private router: Router, this.oidcAppRequest.responseTypesList = [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE];
private route: ActivatedRoute, this.oidcAppRequest.grantTypesList = [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE];
private toast: ToastService, this.oidcAppRequest.authMethodType = OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE;
private dialog: MatDialog,
private mgmtService: ManagementService,
private fb: FormBuilder,
private _location: Location,
) {
this.form = this.fb.group({
name: ['', [Validators.required]],
responseTypesList: ['', [Validators.required]],
grantTypesList: ['', [Validators.required]],
appType: ['', [Validators.required]],
authMethodType: ['', [Validators.required]],
});
this.initForm(); break;
case OIDCAppType.OIDC_APP_TYPE_WEB:
// PK_JWT_METHOD.recommended = false;
this.authMethods = [
PKCE_METHOD,
CODE_METHOD,
PK_JWT_METHOD,
POST_METHOD,
];
this.firstFormGroup = this.fb.group({ this.authMethod?.setValue(PKCE_METHOD.key);
name: ['', [Validators.required]], break;
appType: [WEB_TYPE, [Validators.required]], case OIDCAppType.OIDC_APP_TYPE_USER_AGENT:
}); this.authMethods = [
PKCE_METHOD,
IMPLICIT_METHOD,
];
this.firstFormGroup.valueChanges.subscribe(value => { this.authMethod?.setValue(PKCE_METHOD.key);
if (this.firstFormGroup.valid) { break;
this.oidcAppRequest.name = this.name?.value; }
this.apiAppRequest.name = this.name?.value; } else if (this.isStepperAPI) {
// PK_JWT_METHOD.recommended = true;
this.authMethods = [
PK_JWT_METHOD,
BASIC_AUTH_METHOD,
];
if (this.isStepperOIDC) { this.authMethod?.setValue(PK_JWT_METHOD.key);
const oidcAppType = (this.appType?.value as RadioItemAppType).oidcAppType;
if (oidcAppType !== undefined) {
this.oidcAppRequest.appType = oidcAppType;
}
switch (this.oidcAppRequest.appType) {
case OIDCAppType.OIDC_APP_TYPE_NATIVE:
this.authMethods = [
PKCE_METHOD,
];
// automatically set to PKCE and skip step
this.oidcAppRequest.responseTypesList = [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE];
this.oidcAppRequest.grantTypesList = [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE];
this.oidcAppRequest.authMethodType = OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE;
break;
case OIDCAppType.OIDC_APP_TYPE_WEB:
// PK_JWT_METHOD.recommended = false;
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.authMethod?.setValue(PKCE_METHOD.key);
break;
}
} else if (this.isStepperAPI) {
// PK_JWT_METHOD.recommended = true;
this.authMethods = [
PK_JWT_METHOD,
BASIC_AUTH_METHOD,
];
this.authMethod?.setValue(PK_JWT_METHOD.key);
}
}
});
this.secondFormGroup = this.fb.group({
authMethod: [this.authMethods[0].key, [Validators.required]],
});
this.secondFormGroup.valueChanges.subscribe(form => {
const partialConfig = getPartialConfigFromAuthMethod(form.authMethod);
if (this.isStepperOIDC && partialConfig && partialConfig.oidc) {
this.oidcAppRequest.responseTypesList = partialConfig.oidc?.responseTypesList
?? [];
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;
}
});
}
public ngOnInit(): void {
this.subscription = this.route.params.subscribe(params => this.getData(params));
}
public ngOnDestroy(): void {
this.subscription?.unsubscribe();
this.destroyed$.next();
}
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.oidcAppRequest.responseTypesList = this.formresponseTypesList?.value;
this.oidcAppRequest.grantTypesList = this.formgrantTypesList?.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;
}
});
this.formappType?.valueChanges.pipe(takeUntil(this.destroyed$)).subscribe(() => {
this.setDevFormValidators();
});
}
public setDevFormValidators(): void {
if (this.isDevOIDC) {
const grantTypesControl = new FormControl('', [Validators.required]);
const responseTypesControl = new FormControl('', [Validators.required]);
this.form.addControl('grantTypesList', grantTypesControl);
this.form.addControl('responseTypesList', responseTypesControl);
this.authMethodTypes = [
{ 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 },
];
this.authMethod?.setValue(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC);
} else if (this.isDevAPI) {
this.form.removeControl('grantTypesList');
this.form.removeControl('responseTypesList');
this.authMethodTypes = [
{ type: APIAuthMethodType.API_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT, checked: false, disabled: false, api: true },
{ type: APIAuthMethodType.API_AUTH_METHOD_TYPE_BASIC, checked: false, disabled: false, api: true },
];
this.authMethod?.setValue(APIAuthMethodType.API_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT);
} }
this.form.updateValueAndValidity(); }
} });
public changeStep(event: StepperSelectionEvent): void { this.secondFormGroup = this.fb.group({
if (event.selectedIndex >= 2) { authMethod: [this.authMethods[0].key, [Validators.required]],
this.requestRedirectValuesSubject$.next(); });
this.secondFormGroup.valueChanges.subscribe(form => {
const partialConfig = getPartialConfigFromAuthMethod(form.authMethod);
if (this.isStepperOIDC && partialConfig && partialConfig.oidc) {
this.oidcAppRequest.responseTypesList = partialConfig.oidc?.responseTypesList
?? [];
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;
}
});
}
public ngOnInit(): void {
this.subscription = this.route.params.subscribe(params => this.getData(params));
}
public ngOnDestroy(): void {
this.subscription?.unsubscribe();
this.destroyed$.next();
}
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.oidcAppRequest.responseTypesList = this.formresponseTypesList?.value;
this.oidcAppRequest.grantTypesList = this.formgrantTypesList?.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;
} }
});
this.formappType?.valueChanges.pipe(takeUntil(this.destroyed$)).subscribe(() => {
this.setDevFormValidators();
});
}
public setDevFormValidators(): void {
if (this.isDevOIDC) {
const grantTypesControl = new FormControl('', [Validators.required]);
const responseTypesControl = new FormControl('', [Validators.required]);
this.form.addControl('grantTypesList', grantTypesControl);
this.form.addControl('responseTypesList', responseTypesControl);
this.authMethodTypes = [
{ 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 },
];
this.authMethod?.setValue(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC);
} else if (this.isDevAPI) {
this.form.removeControl('grantTypesList');
this.form.removeControl('responseTypesList');
this.authMethodTypes = [
{ type: APIAuthMethodType.API_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT, checked: false, disabled: false, api: true },
{ type: APIAuthMethodType.API_AUTH_METHOD_TYPE_BASIC, checked: false, disabled: false, api: true },
];
this.authMethod?.setValue(APIAuthMethodType.API_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT);
} }
this.form.updateValueAndValidity();
}
private async getData({ projectid }: Params): Promise<void> { public changeStep(event: StepperSelectionEvent): void {
this.projectId = projectid; if (event.selectedIndex >= 2) {
this.oidcAppRequest.projectId = projectid; this.requestRedirectValuesSubject$.next();
this.apiAppRequest.projectId = projectid;
} }
}
public close(): void { private async getData({ projectid }: Params): Promise<void> {
this._location.back(); this.projectId = projectid;
} this.oidcAppRequest.projectId = projectid;
this.apiAppRequest.projectId = projectid;
}
public createApp(): void { public close(): void {
const appOIDCCheck = this.devmode ? this.isDevOIDC : this.isStepperOIDC; this._location.back();
const appAPICheck = this.devmode ? this.isDevAPI : this.isStepperAPI; }
if (appOIDCCheck) { public createApp(): void {
this.requestRedirectValuesSubject$.next(); const appOIDCCheck = this.devmode ? this.isDevOIDC : this.isStepperOIDC;
const appAPICheck = this.devmode ? this.isDevAPI : this.isStepperAPI;
this.loading = true; if (appOIDCCheck) {
this.mgmtService this.requestRedirectValuesSubject$.next();
.addOIDCApp(this.oidcAppRequest)
.then((resp) => {
this.loading = false;
if (resp.clientId || resp.clientSecret) {
this.showSavedDialog(resp);
} else {
this.router.navigate(['projects', this.projectId, 'apps', resp.appId]);
}
})
.catch(error => {
this.loading = false;
this.toast.showError(error);
});
} else if (appAPICheck) {
this.loading = true;
this.mgmtService
.addAPIApp(this.apiAppRequest)
.then((resp) => {
this.loading = false;
if (resp.clientId || resp.clientSecret) { this.loading = true;
this.showSavedDialog(resp); this.mgmtService
} else { .addOIDCApp(this.oidcAppRequest)
this.router.navigate(['projects', this.projectId, 'apps', resp.appId]); .then((resp) => {
} this.loading = false;
}) if (resp.clientId || resp.clientSecret) {
.catch(error => { this.showSavedDialog(resp);
this.loading = false; } else {
this.toast.showError(error); this.router.navigate(['projects', this.projectId, 'apps', resp.appId]);
}); }
} })
} .catch(error => {
this.loading = false;
public showSavedDialog(added: AddOIDCAppResponse.AsObject | AddAPIAppResponse.AsObject): void { this.toast.showError(error);
let clientSecret = '';
if (added.clientSecret) {
clientSecret = added.clientSecret;
}
let clientId = '';
if (added.clientId) {
clientId = added.clientId;
}
const dialogRef = this.dialog.open(AppSecretDialogComponent, {
data: {
clientSecret: clientSecret,
clientId: clientId,
},
}); });
} else if (appAPICheck) {
this.loading = true;
this.mgmtService
.addAPIApp(this.apiAppRequest)
.then((resp) => {
this.loading = false;
dialogRef.afterClosed().subscribe(() => { if (resp.clientId || resp.clientSecret) {
this.router.navigate(['projects', this.projectId, 'apps', added.appId]); this.showSavedDialog(resp);
} else {
this.router.navigate(['projects', this.projectId, 'apps', resp.appId]);
}
})
.catch(error => {
this.loading = false;
this.toast.showError(error);
}); });
} }
}
get name(): AbstractControl | null { public showSavedDialog(added: AddOIDCAppResponse.AsObject | AddAPIAppResponse.AsObject): void {
return this.firstFormGroup.get('name'); let clientSecret = '';
if (added.clientSecret) {
clientSecret = added.clientSecret;
} }
get appType(): AbstractControl | null { let clientId = '';
return this.firstFormGroup.get('appType'); if (added.clientId) {
} clientId = added.clientId;
public grantTypeChecked(type: OIDCGrantType): boolean {
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');
}
get authMethod(): AbstractControl | null {
return this.secondFormGroup.get('authMethod');
} }
const dialogRef = this.dialog.open(AppSecretDialogComponent, {
data: {
clientSecret: clientSecret,
clientId: clientId,
},
});
// devmode dialogRef.afterClosed().subscribe(() => {
this.router.navigate(['projects', this.projectId, 'apps', added.appId]);
});
}
get formname(): AbstractControl | null { get name(): AbstractControl | null {
return this.form.get('name'); return this.firstFormGroup.get('name');
} }
get formresponseTypesList(): AbstractControl | null { get appType(): AbstractControl | null {
return this.form.get('responseTypesList'); return this.firstFormGroup.get('appType');
} }
get formgrantTypesList(): AbstractControl | null { public grantTypeChecked(type: OIDCGrantType): boolean {
return this.form.get('grantTypesList'); return this.oidcGrantTypes.filter(gt => gt.checked).map(gt => gt.type).findIndex(t => t === type) > -1;
} }
get formappType(): AbstractControl | null { get responseTypesList(): AbstractControl | null {
return this.form.get('appType'); return this.secondFormGroup.get('responseTypesList');
} }
// get formapplicationType(): AbstractControl | null { get authMethod(): AbstractControl | null {
// return this.form.get('applicationType'); return this.secondFormGroup.get('authMethod');
// } }
get formauthMethodType(): AbstractControl | null {
return this.form.get('authMethodType');
}
get isDevOIDC(): boolean { // devmode
return (this.formappType?.value as RadioItemAppType).createType === AppCreateType.OIDC;
}
get isStepperOIDC(): boolean { get formname(): AbstractControl | null {
return (this.appType?.value as RadioItemAppType).createType === AppCreateType.OIDC; return this.form.get('name');
} }
get formresponseTypesList(): AbstractControl | null {
return this.form.get('responseTypesList');
}
get formgrantTypesList(): AbstractControl | null {
return this.form.get('grantTypesList');
}
get formappType(): AbstractControl | null {
return this.form.get('appType');
}
// get formapplicationType(): AbstractControl | null {
// return this.form.get('applicationType');
// }
get formauthMethodType(): AbstractControl | null {
return this.form.get('authMethodType');
}
get isDevAPI(): boolean { get isDevOIDC(): boolean {
return (this.formappType?.value as RadioItemAppType).createType === AppCreateType.API; return (this.formappType?.value as RadioItemAppType).createType === AppCreateType.OIDC;
} }
get isStepperAPI(): boolean { get isStepperOIDC(): boolean {
return (this.appType?.value as RadioItemAppType).createType === AppCreateType.API; return (this.appType?.value as RadioItemAppType).createType === AppCreateType.OIDC;
} }
get isDevAPI(): boolean {
return (this.formappType?.value as RadioItemAppType).createType === AppCreateType.API;
}
get isStepperAPI(): boolean {
return (this.appType?.value as RadioItemAppType).createType === AppCreateType.API;
}
} }

13
console/src/app/pages/projects/apps/app-detail/app-detail.component.html
View File

@ -73,6 +73,19 @@
</button> </button>
</div> </div>
</div> </div>
<div class="environment" *ngIf="app?.apiConfig?.clientId">
<span class="key">{{'APP.API.INFO.CLIENTID' | translate}}</span>
<div class="environment-row">
<span>{{this.app.apiConfig?.clientId}}</span>
<button color="primary" [disabled]="copiedKey == this.app.apiConfig?.clientId"
[matTooltip]="(copiedKey != this.app.apiConfig?.clientId ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
appCopyToClipboard [valueToCopy]="this.app.apiConfig?.clientId"
(copiedValue)="copiedKey = 'clientId'" mat-icon-button>
<i *ngIf="copiedKey != 'clientId'" class="las la-clipboard"></i>
<i *ngIf="copiedKey == 'clientId'" class="las la-clipboard-check"></i>
</button>
</div>
</div>
<ng-container *ngFor="let environmentV of (environmentMap | keyvalue)"> <ng-container *ngFor="let environmentV of (environmentMap | keyvalue)">
<div *ngIf="environmentV.value" class="environment"> <div *ngIf="environmentV.value" class="environment">
<span class="key">{{environmentV.key}}</span> <span class="key">{{environmentV.key}}</span>

3
console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
View File

@ -511,7 +511,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
const config = { api: this.app.apiConfig }; const config = { api: this.app.apiConfig };
this.currentAuthMethod = this.authMethodFromPartialConfig(config); this.currentAuthMethod = this.authMethodFromPartialConfig(config);
} }
this.toast.showInfo('APP.TOAST.OIDCUPDATED', true); this.toast.showInfo('APP.TOAST.APIUPDATED', true);
}) })
.catch(error => { .catch(error => {
this.toast.showError(error); this.toast.showError(error);
@ -540,7 +540,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.toast.showInfo('APP.TOAST.CLIENTSECRETREGENERATED', true); this.toast.showInfo('APP.TOAST.CLIENTSECRETREGENERATED', true);
this.dialog.open(AppSecretDialogComponent, { this.dialog.open(AppSecretDialogComponent, {
data: { data: {
// clientId: data.toObject().clientId ?? '',
clientSecret: resp.clientSecret, clientSecret: resp.clientSecret,
}, },
width: '400px', width: '400px',

4
console/src/assets/i18n/de.json
View File

@ -1151,6 +1151,9 @@
} }
}, },
"API": { "API": {
"INFO": {
"CLIENTID": "Client Id"
},
"REGENERATESECRET": "Client Secret neu generieren", "REGENERATESECRET": "Client Secret neu generieren",
"SELECTION": { "SELECTION": {
"TITLE": "API", "TITLE": "API",
@ -1195,6 +1198,7 @@
"REACTIVATED": "Anwendung reaktiviert.", "REACTIVATED": "Anwendung reaktiviert.",
"DEACTIVATED": "Anwendung deaktiviert.", "DEACTIVATED": "Anwendung deaktiviert.",
"OIDCUPDATED": "OIDC-Konfiguration geändert.", "OIDCUPDATED": "OIDC-Konfiguration geändert.",
"APIUPDATED":"API Konfiguration geändert.",
"UPDATED": "App geändert.", "UPDATED": "App geändert.",
"CLIENTSECRETREGENERATED": "Client Secret generiert.", "CLIENTSECRETREGENERATED": "Client Secret generiert.",
"DELETED": "App gelöscht.", "DELETED": "App gelöscht.",

4
console/src/assets/i18n/en.json
View File

@ -1152,6 +1152,9 @@
} }
}, },
"API": { "API": {
"INFO": {
"CLIENTID": "Client Id"
},
"REGENERATESECRET": "Regenerate Client Secret", "REGENERATESECRET": "Regenerate Client Secret",
"SELECTION": { "SELECTION": {
"TITLE": "API", "TITLE": "API",
@ -1196,6 +1199,7 @@
"REACTIVATED": "Application reactivated.", "REACTIVATED": "Application reactivated.",
"DEACTIVATED": "Application deactivated.", "DEACTIVATED": "Application deactivated.",
"OIDCUPDATED": "OIDC configuration updated.", "OIDCUPDATED": "OIDC configuration updated.",
"APIUPDATED":"API configuration updated",
"UPDATED": "App updated.", "UPDATED": "App updated.",
"CLIENTSECRETREGENERATED": "client secret generated.", "CLIENTSECRETREGENERATED": "client secret generated.",
"DELETED": "App deleted.", "DELETED": "App deleted.",