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">
        <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>
                <mat-form-field appearance="outline" class="formfield">
                    <mat-label>{{ 'APP.NAME' | translate }}</mat-label>
                    <input matInput formControlName="name" />
                    <mat-error *ngIf="name?.errors?.required">{{'PROJECT.APP.NAMEREQUIRED' | translate}}</mat-error>
                </mat-form-field>

                <p class="step-title">{{'APP.OIDC.TYPETITLE' | translate}}</p>
                <mat-radio-group color="primary" aria-labelledby="radio-group-label" class="radio-group"
                    formControlName="applicationType">
                    <mat-radio-button class="radio-button" *ngFor="let type of oidcAppTypes | keyvalue"
                        [value]="type.value">
                        <div>{{'APP.OIDC.APPTYPE'+type.key | translate}}</div>
                    </mat-radio-button>
                </mat-radio-group>
                <div class="actions">
                    <button mat-raised-button [disabled]="firstFormGroup.invalid" color="primary"
                        matStepperNext>{{'ACTIONS.CONTINUE' | translate}}</button>
                </div>
            </form>
        </mat-step>

        <mat-step [editable]="true"
            *ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT">
            <ng-template matStepLabel>{{'APP.OIDC.RESPONSESECTION' | translate}}</ng-template>
            <div class="checkbox-container">
                <mat-checkbox class="checkbox" *ngFor="let responsetype of oidcResponseTypes"
                    (change)="changeResponseType()" color="primary" [(ngModel)]="responsetype.checked"
                    [disabled]="responsetype.disabled">
                    {{'APP.OIDC.RESPONSE'+responsetype.type | translate}}
                </mat-checkbox>
            </div>
            <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 *ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB"
            [stepControl]="secondFormGroup" [editable]="true">
            <form [formGroup]="secondFormGroup">
                <ng-template matStepLabel>{{'APP.OIDC.AUTHMETHODSECTION' | translate}}</ng-template>

                <mat-radio-group color="primary" aria-labelledby="example-radio-group-label" class="radio-group"
                    formControlName="authMethodType">
                    <mat-radio-button class="radio-button" *ngFor="let authmethod of oidcAuthMethodType"
                        [disabled]="authmethod.disabled" [value]="authmethod.type">
                        {{'APP.OIDC.AUTHMETHOD'+authmethod.type | translate}}
                    </mat-radio-button>
                </mat-radio-group>
                <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>

        <mat-step [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="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
                {{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</p>
            <p class="step-description" *ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB">
                {{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>

            <mat-form-field appearance="outline" class="full-width">
                <mat-label>{{ 'APP.OIDC.REDIRECT' | translate }}</mat-label>
                <mat-chip-list #chipRedirectList aria-label="uri selection">
                    <mat-chip class="chip" *ngFor="let uri of oidcApp.redirectUrisList" selected removable
                        [matTooltip]="!uri.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
                        [color]="!uri.startsWith('https://') ? 'warn': 'white'" (removed)="removeUri(uri, 'REDIRECT')">
                        {{uri}} <mat-icon matChipRemove>cancel</mat-icon>
                    </mat-chip>
                    <input [matChipInputFor]="chipRedirectList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                        [matChipInputAddOnBlur]="true" [formControl]="redirectControl"
                        (matChipInputTokenEnd)="addUri($event, 'REDIRECT')">
                </mat-chip-list>
            </mat-form-field>
            <p *ngIf="redirectControl.invalid" class="error">{{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>

            <p class="step-title">{{'APP.OIDC.POSTREDIRECTTITLE' | translate}}</p>
            <p class="step-description"
                *ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
                {{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</p>
            <p class="step-description"
                *ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB || oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT">
                {{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>

            <mat-form-field appearance="outline" class="full-width">
                <mat-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</mat-label>
                <mat-chip-list #chipPostRedirectList aria-label="uri selection">
                    <mat-chip class="chip" *ngFor="let uri of oidcApp.postLogoutRedirectUrisList"
                        [matTooltip]="!uri.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
                        removable (removed)="removeUri(uri, 'POSTREDIRECT')" selected
                        [color]="!uri.startsWith('https://') ? 'warn': 'white'">
                        {{uri}} <mat-icon matChipRemove>cancel</mat-icon>
                    </mat-chip>
                    <input [matChipInputFor]="chipPostRedirectList" [formControl]="postRedirectControl"
                        [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
                        (matChipInputTokenEnd)="addUri($event, 'POSTREDIRECT')">
                </mat-chip-list>
            </mat-form-field>
            <p *ngIf="postRedirectControl.invalid" class="error">{{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>

            <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">
                    {{oidcApp.name}}
                </span>
            </div>
            <div class="row">
                <span class="left">
                    {{ 'APP.TYPE' | translate }}
                </span>
                <span class="right">
                    {{'APP.OIDC.APPTYPE'+oidcApp.applicationType | translate}}
                </span>
            </div>
            <div class="row">
                <span class="left">
                    {{ 'APP.GRANT' | translate }}
                </span>
                <span class="right" *ngIf="oidcApp.grantTypesList?.length > 0">
                    [<span *ngFor="let element of oidcApp.grantTypesList; index as i">
                        {{'APP.OIDC.GRANT'+element | translate}}
                        {{i < oidcApp.grantTypesList.length - 1 ? ', ': ''}}
                    </span>]
                </span>
            </div>
            <div class="row">
                <span class="left">
                    {{ 'APP.OIDC.RESPONSE' | translate }}
                </span>
                <span class="right" *ngIf="oidcApp.responseTypesList?.length > 0">
                    [<span *ngFor="let element of oidcApp.responseTypesList; index as i">
                        {{('APP.OIDC.RESPONSE'+element | translate)}}
                        {{i < oidcApp.responseTypesList.length - 1 ? ', ': ''}}
                    </span>]
                </span>
            </div>

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

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

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

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

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

                <mat-form-field appearance="outline" class="formfield">
                    <mat-label>{{ 'APP.OIDC.APPTYPE' | translate }}</mat-label>
                    <mat-select formControlName="applicationType">
                        <mat-option *ngFor="let type of oidcAppTypes" [value]="type">
                            {{ 'APP.OIDC.APPTYPE'+type | translate }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>

                <mat-form-field appearance="outline" class="formfield">
                    <mat-label>{{ 'APP.OIDC.GRANT' | translate }}</mat-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>
                </mat-form-field>

                <mat-form-field appearance="outline" class="formfield">
                    <mat-label>{{ 'APP.OIDC.RESPONSE' | translate }}</mat-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>
                </mat-form-field>

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

                <mat-form-field appearance="outline" class="formfield full-width">
                    <mat-label>{{ 'APP.OIDC.REDIRECT' | translate }}</mat-label>
                    <mat-chip-list #chipRedirectList aria-label="uri selection">
                        <mat-chip class="chip" *ngFor="let uri of oidcApp.redirectUrisList" removable
                            (removed)="removeUri(uri, 'REDIRECT')">
                            {{uri}} <mat-icon matChipRemove>cancel</mat-icon>
                        </mat-chip>
                        <input [matChipInputFor]="chipRedirectList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                            [matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addUri($event, 'REDIRECT')">
                    </mat-chip-list>
                </mat-form-field>

                <mat-form-field appearance="outline" class="formfield full-width">
                    <mat-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</mat-label>
                    <mat-chip-list #chipPostRedirectList aria-label="uri selection">
                        <mat-chip class="chip" *ngFor="let uri of oidcApp.postLogoutRedirectUrisList" removable
                            (removed)="removeUri(uri, 'POSTREDIRECT')">
                            {{uri}} <mat-icon matChipRemove>cancel</mat-icon>
                        </mat-chip>
                        <input [matChipInputFor]="chipPostRedirectList"
                            [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
                            (matChipInputTokenEnd)="addUri($event, 'POSTREDIRECT')">
                    </mat-chip-list>
                </mat-form-field>

            </div>

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