zitadel/console/src/app/pages/projects/apps/app-create/app-create.component.html

<div class="container">
    <div class="abort-container">
        <button (click)="close()" mat-icon-button>
            <mat-icon>close</mat-icon>
        </button>
        <span class="abort">{{ 'APP.PAGES.CREATE_OIDC' | translate }}</span>
    </div>

    <h1>{{'APP.PAGES.CREATE_OIDC_DESC_TITLE' | translate}}</h1>
    <p class="desc">{{'APP.PAGES.CREATE_OIDC_DESC_SUB' | translate}}</p>

    <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 class="stepper" *ngIf="!devmode" linear #stepper labelPosition="bottom"
        (selectionChange)="changeStep($event)">
        <mat-step [stepControl]="firstFormGroup" [editable]="true">
            <form [formGroup]="firstFormGroup">
                <ng-template matStepLabel>{{'APP.OIDC.NAMEANDTYPESECTION' | translate}}</ng-template>

                <p class="step-title">{{'APP.OIDC.TITLEFIRST' | translate}}</p>
                <cnsl-form-field appearance="outline" class="formfield">
                    <cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
                    <input cnslInput cdkFocusInitial formControlName="name" />
                    <span cnsl-error *ngIf="name?.errors?.required">{{'PROJECT.APP.NAMEREQUIRED' | translate}}</span>
                </cnsl-form-field>

                <p class="step-title">{{'APP.OIDC.TYPETITLE' | translate}}</p>

                <app-type-radio [types]="appTypes" (selectedType)="appType?.setValue($event)"
                    [selected]="appType?.value">
                </app-type-radio>
                <div class="actions">
                    <button mat-raised-button [disabled]="firstFormGroup.invalid" color="primary"
                        matStepperNext>{{'ACTIONS.CONTINUE' | translate}}</button>
                </div>
            </form>
        </mat-step>

        <!-- skip for native applications -->
        <mat-step *ngIf="oidcAppRequest.appType !== OIDCAppType.OIDC_APP_TYPE_NATIVE" [stepControl]="secondFormGroup"
            [editable]="true">
            <form [formGroup]="secondFormGroup">
                <ng-template matStepLabel>{{'APP.AUTHMETHODSECTION' | translate}}</ng-template>

                <app-auth-method-radio [authMethods]="authMethods" [selected]="authMethod?.value"
                    [isOIDC]="appType?.value?.createType == AppCreateType.OIDC"
                    (selectedMethod)="authMethod?.setValue($event)">
                </app-auth-method-radio>

                <div class="actions">
                    <button mat-stroked-button color="primary" matStepperPrevious>{{'ACTIONS.BACK' |
                        translate}}</button>
                    <button mat-raised-button color="primary" [disabled]="secondFormGroup.invalid"
                        matStepperNext>{{'ACTIONS.CONTINUE' | translate}}</button>
                </div>
            </form>
        </mat-step>

        <!-- show redirect step only for OIDC apps -->
        <mat-step *ngIf="appType?.value?.createType == AppCreateType.OIDC" [editable]="true">
            <ng-template matStepLabel>{{'APP.OIDC.REDIRECTSECTION' | translate}}</ng-template>

            <p class="step-title">{{'APP.OIDC.REDIRECTTITLE' | translate}}</p>
            <p class="step-description" *ngIf="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE">
                {{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</p>
            <p class="step-description" *ngIf="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_WEB">
                {{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>

            <cnsl-redirect-uris class="redirect-section" [canWrite]="true"
                [isNative]="oidcAppRequest.appType == OIDCAppType.OIDC_APP_TYPE_NATIVE"
                (changedUris)="oidcAppRequest.redirectUrisList = $event" [urisList]="oidcAppRequest.redirectUrisList"
                [getValues]="requestRedirectValuesSubject$" title="{{ 'APP.OIDC.REDIRECT' | translate }}">
            </cnsl-redirect-uris>

            <p class="step-title">{{'APP.OIDC.POSTREDIRECTTITLE' | translate}}</p>
            <p class="step-description" *ngIf="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE">
                {{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</p>
            <p class="step-description"
                *ngIf="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_WEB || oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_USER_AGENT">
                {{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>

            <cnsl-redirect-uris class="redirect-section" [canWrite]="true"
                (changedUris)="oidcAppRequest.postLogoutRedirectUrisList = $event"
                [urisList]="oidcAppRequest.postLogoutRedirectUrisList"
                title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}" [getValues]="requestRedirectValuesSubject$"
                [isNative]="oidcAppRequest.appType == OIDCAppType.OIDC_APP_TYPE_NATIVE">
            </cnsl-redirect-uris>

            <div class="actions">
                <button mat-stroked-button color="primary" matStepperPrevious>{{'ACTIONS.BACK' | translate}}</button>
                <button mat-raised-button color="primary" matStepperNext>{{'ACTIONS.CONTINUE' | translate}}</button>
            </div>
        </mat-step>


        <mat-step>
            <ng-template matStepLabel>{{'APP.OIDC.OVERVIEWSECTION'| translate}}</ng-template>
            <p class="step-title">{{'APP.OIDC.OVERVIEWTITLE' | translate}}</p>
            <div class="row">
                <span class="left">
                    {{ 'APP.NAME' | translate }}
                </span>
                <span class="right">
                    {{oidcAppRequest.name}}
                </span>
            </div>

            <ng-container *ngIf="appType?.value?.createType == AppCreateType.OIDC">
                <div class="row">
                    <span class="left">
                        {{ 'APP.TYPE' | translate }}
                    </span>
                    <span class="right">
                        {{'APP.OIDC.APPTYPE.'+oidcAppRequest.appType | translate}}
                    </span>
                </div>
                <div class="row">
                    <span class="left">
                        {{ 'APP.GRANT' | translate }}
                    </span>
                    <span class="right" *ngIf="oidcAppRequest.grantTypesList?.length > 0">
                        [<span *ngFor="let element of oidcAppRequest.grantTypesList; index as i">
                            {{'APP.OIDC.GRANT.'+element | translate}}
                            {{i < oidcAppRequest.grantTypesList.length - 1 ? ', ' : '' }} </span>]
                        </span>
                </div>
                <div class="row">
                    <span class="left">
                        {{ 'APP.OIDC.RESPONSETYPE' | translate }}
                    </span>
                    <span class="right" *ngIf="oidcAppRequest.responseTypesList?.length > 0">
                        [<span *ngFor="let element of oidcAppRequest.responseTypesList; index as i">
                            {{('APP.OIDC.RESPONSE.'+element | translate)}}
                            {{i < oidcAppRequest.responseTypesList.length - 1 ? ', ' : '' }} </span>]
                        </span>
                </div>

                <div class="row">
                    <span class="left">
                        {{ 'APP.AUTHMETHOD' | translate }}
                    </span>
                    <span class="right">
                        <span>
                            {{'APP.OIDC.AUTHMETHOD.'+oidcAppRequest?.authMethodType | translate}}
                        </span>
                    </span>
                </div>

                <div class="row">
                    <span class="left">
                        {{ 'APP.OIDC.REDIRECT' | translate }}
                    </span>
                    <span class="right" *ngIf="oidcAppRequest.redirectUrisList?.length > 0">
                        [<span *ngFor="let redirect of oidcAppRequest.redirectUrisList; index as i">
                            {{redirect}}
                            {{i < oidcAppRequest.redirectUrisList.length - 1 ? ', ' : '' }} </span>]
                        </span>
                </div>

                <div class="row">
                    <span class="left">
                        {{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}
                    </span>
                    <span class="right" *ngIf="oidcAppRequest.postLogoutRedirectUrisList?.length > 0">
                        [<span *ngFor="let redirect of oidcAppRequest.postLogoutRedirectUrisList; index as i">
                            {{redirect}}
                            {{i < oidcAppRequest.postLogoutRedirectUrisList.length - 1 ? ', ' : '' }} </span>]
                        </span>
                </div>
            </ng-container>

            <ng-container *ngIf="appType?.value?.createType == AppCreateType.API">
                <div class="row">
                    <span class="left">
                        {{ 'APP.AUTHMETHOD' | translate }}
                    </span>
                    <span class="right">
                        <span>
                            {{'APP.API.AUTHMETHOD.'+apiAppRequest?.authMethodType | translate}}
                        </span>
                    </span>
                </div>
            </ng-container>

            <div class="actions">
                <button mat-stroked-button color="primary" matStepperPrevious>{{'ACTIONS.BACK' | translate}}</button>
                <button mat-raised-button color="primary" (click)="createApp()">{{'ACTIONS.CREATE' |
                    translate}}</button>
            </div>
        </mat-step>
    </mat-horizontal-stepper>

    <div *ngIf="devmode" class="dev">
        <form [formGroup]="form" (ngSubmit)="createApp()">
            <div class="content">
                <cnsl-form-field appearance="outline" class="formfield">
                    <cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
                    <input cnslInput formControlName="name" />
                </cnsl-form-field>

                <cnsl-form-field appearance="outline" class="formfield">
                    <cnsl-label>{{ 'APP.TYPE' | translate }}</cnsl-label>
                    <mat-select formControlName="appType">
                        <mat-option *ngFor="let appType of appTypes" [value]="appType">
                            {{ appType.titleI18nKey | translate }}
                        </mat-option>
                    </mat-select>
                </cnsl-form-field>

                <ng-container *ngIf="formappType?.value?.createType == AppCreateType.OIDC">
                    <cnsl-form-field appearance="outline" class="formfield">
                        <cnsl-label>{{ 'APP.OIDC.GRANTTYPE' | translate }}</cnsl-label>
                        <mat-select formControlName="grantTypesList" multiple>
                            <mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant.type">
                                {{ ('APP.OIDC.GRANT.' + grant.type) | translate }}
                            </mat-option>
                        </mat-select>
                    </cnsl-form-field>

                    <cnsl-form-field appearance="outline" class="formfield">
                        <cnsl-label>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</cnsl-label>
                        <mat-select formControlName="responseTypesList" multiple>
                            <mat-option *ngFor="let type of oidcResponseTypes" [value]="type.type">
                                {{ 'APP.OIDC.RESPONSE.'+type.type | translate }}
                            </mat-option>
                        </mat-select>
                    </cnsl-form-field>
                </ng-container>

                <cnsl-form-field appearance="outline" class="formfield">
                    <cnsl-label>{{ 'APP.AUTHMETHOD' | translate }}</cnsl-label>
                    <mat-select formControlName="authMethodType">
                        <mat-option *ngFor="let type of authMethodTypes" [value]="type.type">
                            <span *ngIf="type.oidc">{{ 'APP.OIDC.AUTHMETHOD.'+type.type | translate }}</span>
                            <span *ngIf="type.api">{{ 'APP.API.AUTHMETHOD.'+type.type | translate }}</span>
                        </mat-option>
                    </mat-select>
                </cnsl-form-field>
            </div>

            <div class="content" *ngIf="formappType?.value?.createType == AppCreateType.OIDC">
                <div class="formfield full-width">
                    <cnsl-redirect-uris class="redirect-section" [canWrite]="true"
                        (changedUris)="oidcAppRequest.redirectUrisList = $event"
                        [urisList]="oidcAppRequest.redirectUrisList" title="{{ 'APP.OIDC.REDIRECT' | translate }}"
                        [getValues]="requestRedirectValuesSubject$"
                        [isNative]="oidcAppRequest.appType == OIDCAppType.OIDC_APP_TYPE_NATIVE">
                    </cnsl-redirect-uris>

                    <cnsl-redirect-uris class="redirect-section" [canWrite]="true"
                        (changedUris)="oidcAppRequest.postLogoutRedirectUrisList = $event"
                        [urisList]="oidcAppRequest.postLogoutRedirectUrisList"
                        title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
                        [getValues]="requestRedirectValuesSubject$"
                        [isNative]="oidcAppRequest.appType == OIDCAppType.OIDC_APP_TYPE_NATIVE">
                    </cnsl-redirect-uris>
                </div>
            </div>

            <button color="primary" mat-raised-button class="continue-button" [disabled]="form.invalid" cdkFocusInitial
                type="submit">
                {{ 'ACTIONS.SAVE' | translate }}
            </button>
        </form>
    </div>
</div>