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

<cnsl-top-view title="{{'IDP.DETAIL.TITLE' | translate}}"
  [sub]="idp?.oidcConfig ? ('IDP.OIDC.TITLE' | translate) : idp?.jwtConfig ? ('IDP.JWT.TITLE' | translate) : ''"
  [isActive]="idp?.state === IDPState.IDP_STATE_ACTIVE" [isInactive]="idp?.state === IDPState.IDP_STATE_INACTIVE"
  [hasContributors]="false" stateTooltip="{{'IDP.STATES.'+idp?.state | translate}}"
  [hasActions]="(serviceType === PolicyComponentServiceType.MGMT ? ['org.idp.write'] : ['iam.idp.write']) | hasRole | async">
  <ng-template topActions cnslHasRole
    [hasRole]="serviceType === PolicyComponentServiceType.MGMT ? ['org.idp.write'] : ['iam.idp.write']">
    <button mat-menu-item *ngIf="idp?.state !== IDPState.IDP_STATE_INACTIVE"
      (click)="changeState(IDPState.IDP_STATE_INACTIVE)">
      {{'ACTIONS.DEACTIVATE' | translate}}
    </button>
    <button mat-menu-item *ngIf="idp?.state === IDPState.IDP_STATE_INACTIVE"
      (click)="changeState(IDPState.IDP_STATE_ACTIVE)">
      {{'ACTIONS.REACTIVATE' | translate}}
    </button>
    <button mat-menu-item matTooltip="{{'IDP.DELETE' | translate}}" (click)="deleteIdp()">
      <span [style.color]="'var(--warn)'">{{'IDP.DELETE_TITLE' | translate}}</span>
    </button>
  </ng-template>
  <cnsl-info-row topContent *ngIf="idp" [idp]="idp"></cnsl-info-row>
</cnsl-top-view>

<div class="max-width-container">
  <form class="idp-form" (ngSubmit)="updateIdp()">
    <ng-container [formGroup]="idpForm">
      <div class="idp-content">

        <cnsl-form-field appearance="outline" class="formfield">
          <cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
          <input cnslInput formControlName="name" />
        </cnsl-form-field>
        <cnsl-form-field class="formfield" appearance="outline">
          <cnsl-label>{{ 'IDP.STYLE' | translate }}</cnsl-label>
          <mat-select formControlName="stylingType">
            <mat-option *ngFor="let field of styleFields" [value]="field">
              {{ 'IDP.STYLEFIELD.'+field | translate }}
            </mat-option>
          </mat-select>
        </cnsl-form-field>

        <cnsl-info-section class="auto-reg-info">
          <div>
            <p class="auto-reg-desc">{{'IDP.AUTOREGISTER_DESC' | translate}}</p>
            <mat-checkbox formControlName="autoRegister" [disabled]="(canWrite | async) === false">
              {{'IDP.AUTOREGISTER' | translate}}
            </mat-checkbox>
          </div>
        </cnsl-info-section>
      </div>
    </ng-container>

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

  <ng-container *ngIf="idp?.oidcConfig && oidcConfigForm">
    <h2>{{'IDP.OIDC.TITLE' | translate}}</h2>
    <p class="idp-desc cnsl-secondary-text">{{'IDP.OIDC.DESCRIPTION' | translate}}</p>

    <form (ngSubmit)="updateOidcConfig()">
      <ng-container [formGroup]="oidcConfigForm">
        <div class="idp-content">
          <cnsl-form-field appearance="outline" class="formfield">
            <cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
            <input cnslInput formControlName="issuer" />
          </cnsl-form-field>
          <cnsl-form-field appearance="outline" class="formfield">
            <cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
            <input cnslInput formControlName="clientId" />
          </cnsl-form-field>
          <mat-checkbox class="idp-desc cnsl-secondary-text" [(ngModel)]="showIdSecretSection"
            [disabled]="(canWrite | async) === false" [ngModelOptions]="{standalone: true}">
            Update Client Secret
          </mat-checkbox>
          <cnsl-form-field appearance="outline" class="formfield" *ngIf="showIdSecretSection">
            <cnsl-label>{{ 'IDP.CLIENTSECRET' | translate }}</cnsl-label>
            <input cnslInput formControlName="clientSecret" />
          </cnsl-form-field>
          <div class="line">
            <cnsl-form-field appearance="outline" class="formfield">
              <cnsl-label>{{ 'IDP.SCOPESLIST' | translate }}</cnsl-label>

              <input cnslInput [matChipInputFor]="chipScopesList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                [matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addScope($event)">
            </cnsl-form-field>
            <button (click)="addScope($any($event))" mat-icon-button>
              <mat-icon>add</mat-icon>
            </button>
          </div>
          <cnsl-form-field appearance="outline" class="formfield fullwidth">
            <mat-chip-list class="chip-list" #chipScopesList aria-label="scope selection">
              <mat-chip class="chip" *ngFor="let scope of scopesList?.value" selectable="false" removable
                (removed)="removeScope(scope)" [disabled]="(canWrite | async) === false">
                {{scope}} <mat-icon matChipRemove>cancel</mat-icon>
              </mat-chip>
            </mat-chip-list>
          </cnsl-form-field>

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

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

  <ng-container *ngIf="idp?.jwtConfig && jwtConfigForm">
    <h2>{{'IDP.JWT.TITLE' | translate}}</h2>
    <p>{{'IDP.JWT.DESCRIPTION' | translate}}</p>

    <form (ngSubmit)="updateJwtConfig()">
      <ng-container [formGroup]="jwtConfigForm">
        <div class="idp-content">
          <cnsl-form-field appearance="outline" class="formfield">
            <cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
            <input cnslInput formControlName="issuer" />
          </cnsl-form-field>

          <cnsl-form-field appearance="outline" class="formfield">
            <cnsl-label>{{ 'IDP.JWT.HEADERNAME' | translate }}</cnsl-label>
            <input cnslInput formControlName="headerName" />
          </cnsl-form-field>

          <cnsl-form-field appearance="outline" class="formfield">
            <cnsl-label>{{ 'IDP.JWT.JWTENDPOINT' | translate }}</cnsl-label>
            <input cnslInput formControlName="jwtEndpoint" />
          </cnsl-form-field>

          <cnsl-form-field appearance="outline" class="formfield">
            <cnsl-label>{{ 'IDP.JWT.JWTKEYSENDPOINT' | translate }}</cnsl-label>
            <input cnslInput formControlName="keysEndpoint" />
          </cnsl-form-field>
        </div>
      </ng-container>

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