mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-20 14:34:25 +00:00
feat(console): integrate frontend (#95)
* feat: console frontend * chore(dependabot): cycle and npm * chore: rename citadel to zitadel, remove generated files * chore: delete go files * chore(frontend): ci steps * chore: remove docker and envoy files * chore: remove docker file * chore: working dir * chore: run proto build * add console start * chore: restructure folders * chore: remove gui build * statikFs * generate proto for console * add statik import * import * chore: try statik * chore: path * chore: path * chore: script in root * chore: order build steps * chore: go get * chore: folder traversal * chore: non empty test file * chore: gitignore * chore: gitignore * chore: statik path * chore: switch to failing FE build * fix: build * fix: project-grant-test * fix: rm test * add statik.go * go mod tidy * chore: place test, seperate test from build * chore: lint all the world * chore: ci the world instead * chore: tune docker * chore: undo container test * chore: fix run * chore: docker build * chore: test docker build * chore: go build flags * finaly * fix caos_local * go mod Co-authored-by: Livio Amstutz <[email protected]> Co-authored-by: Max Peintner <[email protected]>
This commit is contained in:
Florian Forster
co-authored by
Livio Amstutz
Max Peintner
Livio Amstutz
Max Peintner
parent
9e32740eb8
commit
92a294f5c8
@@ -0,0 +1,186 @@
|
||||
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 { MatChipInputEvent } from '@angular/material/chips';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { ActivatedRoute, Params, Router } from '@angular/router';
|
||||
import { Subscription } from 'rxjs';
|
||||
import {
|
||||
Application,
|
||||
OIDCApplicationCreate,
|
||||
OIDCApplicationType,
|
||||
OIDCAuthMethodType,
|
||||
OIDCGrantType,
|
||||
OIDCResponseType,
|
||||
} from 'src/app/proto/generated/management_pb';
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-app-create',
|
||||
templateUrl: './app-create.component.html',
|
||||
styleUrls: ['./app-create.component.scss'],
|
||||
})
|
||||
export class AppCreateComponent implements OnInit, OnDestroy {
|
||||
private subscription?: Subscription;
|
||||
public projectId: string = '';
|
||||
public oidcApp: OIDCApplicationCreate.AsObject = new OIDCApplicationCreate().toObject();
|
||||
public oidcResponseTypes: OIDCResponseType[] = [
|
||||
OIDCResponseType.OIDCRESPONSETYPE_CODE,
|
||||
OIDCResponseType.OIDCRESPONSETYPE_ID_TOKEN,
|
||||
OIDCResponseType.OIDCRESPONSETYPE_TOKEN,
|
||||
];
|
||||
public oidcGrantTypes: OIDCGrantType[] = [
|
||||
OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE,
|
||||
OIDCGrantType.OIDCGRANTTYPE_IMPLICIT,
|
||||
OIDCGrantType.OIDCGRANTTYPE_REFRESH_TOKEN,
|
||||
];
|
||||
public oidcAppTypes: OIDCApplicationType[] = [
|
||||
OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB,
|
||||
OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT,
|
||||
OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE,
|
||||
];
|
||||
public oidcAuthMethodType: OIDCAuthMethodType[] = [
|
||||
OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC,
|
||||
OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
|
||||
OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST,
|
||||
];
|
||||
|
||||
public form!: FormGroup;
|
||||
public createSteps: number = 1;
|
||||
public currentCreateStep: number = 1;
|
||||
public postLogoutRedirectUrisList: string[] = [];
|
||||
|
||||
public addOnBlur: boolean = true;
|
||||
public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private toast: ToastService,
|
||||
private dialog: MatDialog,
|
||||
private projectService: ProjectService,
|
||||
private fb: FormBuilder,
|
||||
private _location: Location,
|
||||
) {
|
||||
this.form = this.fb.group({
|
||||
name: ['', [Validators.required]],
|
||||
responseTypesList: ['', []],
|
||||
grantTypesList: ['', []],
|
||||
applicationType: ['', []],
|
||||
authMethodType: [],
|
||||
});
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.subscription = this.route.params.subscribe(params => this.getData(params));
|
||||
}
|
||||
|
||||
public ngOnDestroy(): void {
|
||||
this.subscription?.unsubscribe();
|
||||
}
|
||||
|
||||
private async getData({ projectid }: Params): Promise<void> {
|
||||
this.projectId = projectid;
|
||||
this.oidcApp.projectId = projectid;
|
||||
}
|
||||
|
||||
public close(): void {
|
||||
this._location.back();
|
||||
}
|
||||
|
||||
public saveOIDCApp(): void {
|
||||
this.oidcApp.name = this.name?.value;
|
||||
this.oidcApp.applicationType = this.applicationType?.value;
|
||||
this.oidcApp.grantTypesList = this.grantTypesList?.value;
|
||||
this.oidcApp.responseTypesList = this.responseTypesList?.value;
|
||||
this.oidcApp.authMethodType = this.authMethodType?.value;
|
||||
|
||||
console.log(this.oidcApp);
|
||||
|
||||
this.projectService
|
||||
.CreateOIDCApp(this.oidcApp)
|
||||
.then((data: Application) => {
|
||||
this.showSavedDialog(data.toObject());
|
||||
})
|
||||
.catch(data => {
|
||||
this.toast.showError(data.message);
|
||||
});
|
||||
}
|
||||
|
||||
public showSavedDialog(app: Application.AsObject): void {
|
||||
if (app.oidcConfig !== undefined) {
|
||||
const dialogRef = this.dialog.open(AppSecretDialogComponent, {
|
||||
data: app.oidcConfig,
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
console.log('The dialog was closed');
|
||||
this.router.navigate(['projects', this.projectId, 'apps', app.id]);
|
||||
});
|
||||
} else {
|
||||
this.router.navigate(['projects', this.projectId, 'apps', app.id]);
|
||||
}
|
||||
}
|
||||
|
||||
public addUri(event: MatChipInputEvent, target: string): void {
|
||||
const input = event.input;
|
||||
const value = event.value.trim();
|
||||
|
||||
if (value !== '') {
|
||||
if (target === 'REDIRECT') {
|
||||
this.oidcApp.redirectUrisList.push(value);
|
||||
} else if (target === 'POSTREDIRECT') {
|
||||
this.oidcApp.postLogoutRedirectUrisList.push(value);
|
||||
}
|
||||
}
|
||||
|
||||
if (input) {
|
||||
input.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
public removeUri(uri: string, target: string): void {
|
||||
if (target === 'REDIRECT') {
|
||||
const index = this.oidcApp.redirectUrisList.indexOf(uri);
|
||||
|
||||
if (index !== undefined && index >= 0) {
|
||||
this.oidcApp.redirectUrisList.splice(index, 1);
|
||||
}
|
||||
} else if (target === 'POSTREDIRECT') {
|
||||
const index = this.oidcApp.postLogoutRedirectUrisList.indexOf(uri);
|
||||
|
||||
if (index !== undefined && index >= 0) {
|
||||
this.oidcApp.postLogoutRedirectUrisList.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
get name(): AbstractControl | null {
|
||||
return this.form.get('name');
|
||||
}
|
||||
|
||||
|
||||
get responseTypesList(): AbstractControl | null {
|
||||
return this.form.get('responseTypesList');
|
||||
}
|
||||
|
||||
|
||||
get grantTypesList(): AbstractControl | null {
|
||||
return this.form.get('grantTypesList');
|
||||
}
|
||||
|
||||
|
||||
get applicationType(): AbstractControl | null {
|
||||
return this.form.get('applicationType');
|
||||
}
|
||||
|
||||
get authMethodType(): AbstractControl | null {
|
||||
return this.form.get('authMethodType');
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user