zitadel/console/src/app/pages/apps/app-create/app-create.component.ts

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;

        this.projectService
            .CreateOIDCApp(this.oidcApp)
            .then((data: Application) => {
                this.showSavedDialog(data.toObject());
            })
            .catch(data => {
                console.error(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 => {
                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');
    }
}