zitadel/console/src/app/modules/idp/idp.component.html

<app-detail-layout [backRouterLink]="backroutes" [title]="'IDP.DETAIL.TITLE' | translate"
    [description]="'IDP.DETAIL.DESCRIPTION' | translate">
    <div class="container">
        <form (ngSubmit)="updateIdp()">
            <ng-container [formGroup]="idpForm">
                <div class="content">
                    <mat-form-field appearance="outline" class="formfield">
                        <mat-label>{{ 'IDP.ID' | translate }}</mat-label>
                        <input matInput formControlName="id" />
                    </mat-form-field>
                    <mat-form-field appearance="outline" class="formfield">
                        <mat-label>{{ 'IDP.NAME' | translate }}</mat-label>
                        <input matInput formControlName="name" />
                    </mat-form-field>
                    <!--<mat-form-field appearance="outline" class="formfield">
                    <mat-label>{{ 'IDP.LOGOSRC' | translate }}</mat-label>
                    <input matInput formControlName="logoSrc" />
                </mat-form-field>-->
                </div>
            </ng-container>

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

        <ng-container *ngIf="oidcConfigForm">
            <h2>{{'IDP.DETAIL.OIDC.TITLE' | translate}}</h2>
            <p>{{'IDP.DETAIL.OIDC.DESCRIPTION' | translate}}</p>

            <form (ngSubmit)="updateOidcConfig()">
                <ng-container [formGroup]="oidcConfigForm">
                    <div class="content">
                        <mat-form-field appearance="outline" class="formfield">
                            <mat-label>{{ 'IDP.ISSUER' | translate }}</mat-label>
                            <input matInput formControlName="issuer" />
                        </mat-form-field>
                        <mat-form-field appearance="outline" class="formfield">
                            <mat-label>{{ 'IDP.CLIENTID' | translate }}</mat-label>
                            <input matInput formControlName="clientId" />
                        </mat-form-field>
                        <mat-checkbox class="desc" [(ngModel)]="showIdSecretSection"
                            [ngModelOptions]="{standalone: true}">
                            Update Client Secret
                        </mat-checkbox>
                        <mat-form-field appearance="outline" class="formfield" *ngIf="showIdSecretSection">
                            <mat-label>{{ 'IDP.CLIENTSECRET' | translate }}</mat-label>
                            <input matInput formControlName="clientSecret" />
                        </mat-form-field>
                        <mat-form-field appearance="outline" class="formfield fullwidth">
                            <mat-label>{{ 'IDP.SCOPESLIST' | translate }}</mat-label>
                            <mat-chip-list #chipScopesList aria-label="scope selection">
                                <mat-chip class="chip" *ngFor="let scope of scopesList?.value" selectable="false"
                                    removable (removed)="removeScope(scope)">
                                    {{scope}} <mat-icon matChipRemove>cancel</mat-icon>
                                </mat-chip>
                                <input [matChipInputFor]="chipScopesList"
                                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
                                    (matChipInputTokenEnd)="addScope($event)">
                            </mat-chip-list>
                        </mat-form-field>

                        <mat-form-field class="formfield" appearance="outline">
                            <mat-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</mat-label>
                            <mat-select formControlName="idpDisplayNameMapping">
                                <mat-option *ngFor="let field of mappingFields" [value]="field">
                                    {{ 'IDP.MAPPINTFIELD.'+field | translate }}
                                </mat-option>
                            </mat-select>
                        </mat-form-field>
                        <mat-form-field class="formfield" appearance="outline">
                            <mat-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</mat-label>
                            <mat-select formControlName="usernameMapping">
                                <mat-option *ngFor="let field of mappingFields" [value]="field">
                                    {{ 'IDP.MAPPINTFIELD.'+field | translate }}
                                </mat-option>
                            </mat-select>
                        </mat-form-field>
                    </div>
                </ng-container>

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

</app-detail-layout>