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

<div class="max-width-container">
    <div class="head">
        <a [routerLink]="['/projects', projectId]" mat-icon-button>
            <mat-icon class="icon">arrow_back</mat-icon>
        </a>
        <h1>{{ 'APP.PAGES.TITLE' | translate }} {{app?.name}}</h1>

        <p class="desc">{{ 'APP.PAGES.DESCRIPTION' | translate }}</p>
        <p *ngIf="isZitadel" class="zitadel-warning">{{'PROJECT.PAGES.ZITADELPROJECT' | translate}}</p>
    </div>

    <span *ngIf="errorMessage" class="err-container">{{errorMessage}}</span>

    <app-card title="{{ 'APP.PAGES.DETAIL.TITLE' | translate }}" *ngIf="app">
        <form [formGroup]="appNameForm" (ngSubmit)="saveOIDCApp()">
            <div class="content">
                <mat-button-toggle-group formControlName="state" class="toggle" (change)="changeState($event)">
                    <mat-button-toggle [value]="AppState.APPSTATE_INACTIVE"
                        matTooltip="{{ 'ACTIONS.DEACTIVATE' | translate}}">
                        {{'APP.PAGES.DETAIL.STATE.'+AppState.APPSTATE_INACTIVE | translate}}
                    </mat-button-toggle>
                    <mat-button-toggle [value]="AppState.APPSTATE_ACTIVE"
                        matTooltip="{{ 'ACTIONS.REACTIVATE' | translate}}">
                        {{'APP.PAGES.DETAIL.STATE.'+AppState.APPSTATE_ACTIVE | translate}}
                    </mat-button-toggle>
                </mat-button-toggle-group>

                <mat-form-field class="formfield">
                    <mat-label>{{ 'APP.NAME' | translate }}</mat-label>
                    <input matInput formControlName="name" />
                </mat-form-field>

                <p class="docs-line" *ngIf="docs?.discoveryEndpoint">Discovery Endpoint: {{docs.discoveryEndpoint}}</p>
                <p class="docs-line" *ngIf="docs?.issuer">Issuer: {{docs.issuer}}</p>
            </div>
            <div class="btn-container">
                <button class="submit-button" type="submit" color="primary"
                    [disabled]="appNameForm.invalid || name?.disabled"
                    mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
            </div>
        </form>
    </app-card>

    <app-card title="{{ 'APP.OIDC.TITLE' | translate }}" *ngIf="app && app.oidcConfig">
        <div card-actions *ngIf="app?.oidcConfig?.authMethodType !== OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE">
            <button [disabled]="!canWrite" mat-stroked-button
                (click)="regenerateOIDCClientSecret()">{{'APP.OIDC.REGENERATESECRET' | translate}}</button>
        </div>

        <div class="compliance">
            <p class="problem" *ngFor="let problem of app.oidcConfig.complianceProblemsList">
                {{problem.localizedMessage}}
            </p>
        </div>
        <form *ngIf="appForm" [formGroup]="appForm" (ngSubmit)="saveOIDCApp()">
            <div class="content">
                <mat-form-field class="formfield" appearance="outline">
                    <mat-label>{{ 'APP.OIDC.CLIENTID' | translate }}</mat-label>
                    <input matInput formControlName="clientId" />
                </mat-form-field>

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

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

                <mat-slide-toggle color="primary" class="devmode" formControlName="devMode" name="devMode">
                    {{ 'APP.OIDC.DEVMODE' | translate }}
                </mat-slide-toggle>

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

                <mat-form-field class="formfield full-width" appearance="outline">
                    <mat-label>{{ 'APP.OIDC.REDIRECT' | translate }}</mat-label>
                    <mat-chip-list [disabled]="!canWrite" #chipRedirectList>
                        <mat-chip class="chip" *ngFor="let redirect of redirectUrisList" selected
                            [matTooltip]="!redirect.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
                            [color]="!redirect.startsWith('https://') ? 'warn': 'green'"
                            (removed)="remove(redirect, RedirectType.REDIRECT)">
                            {{redirect}}
                            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                        </mat-chip>
                        <input [matChipInputFor]="chipRedirectList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                            [matChipInputAddOnBlur]="addOnBlur" [formControl]="redirectControl"
                            (matChipInputTokenEnd)="add($event, RedirectType.REDIRECT)">
                    </mat-chip-list>
                </mat-form-field>

                <p *ngIf="redirectControl.value && redirectControl.invalid" class="error">
                    {{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>

                <mat-form-field class="formfield full-width" appearance="outline">
                    <mat-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</mat-label>
                    <mat-chip-list [disabled]="!canWrite" #chipPostRedirectList>
                        <mat-chip class="chip" *ngFor="let redirect of postLogoutRedirectUrisList" selected
                            (removed)="remove(redirect, RedirectType.POSTREDIRECT)"
                            [matTooltip]="!redirect.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
                            [color]="!redirect.startsWith('https://') ? 'warn': 'green'">
                            {{redirect}}
                            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                        </mat-chip>
                        <input [matChipInputFor]="chipPostRedirectList"
                            [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
                            (matChipInputTokenEnd)="add($event, RedirectType.POSTREDIRECT)"
                            [formControl]="postRedirectControl">
                    </mat-chip-list>
                </mat-form-field>

                <p *ngIf="postRedirectControl.value && postRedirectControl.invalid" class="error">
                    {{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>
            </div>
            <div class="btn-container">

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

    </app-card>
</div>