zitadel/console/src/app/modules/idp-create/idp-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">{{ 'IDP.CREATE.TITLE' | translate }}</span><span class="abort-2">Step
      {{ currentCreateStep }} of
      {{ createSteps }}</span>
  </div>

  <h1>{{'IDP.CREATE.TITLE' | translate}}</h1>

  <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>

  <ng-container *ngIf="currentCreateStep === 1">
    <p class="desc cnsl-secondary-text">{{'IDP.CREATE.DESCRIPTION' | translate}}</p>

    <cnsl-idp-type-radio [types]="idpTypes" (selectedType)="idpType = $event" [selected]="idpType">
    </cnsl-idp-type-radio>

    <div class="actions">
      <button mat-raised-button [disabled]="!idpType" color="primary"
        (click)="currentCreateStep = 2">{{'ACTIONS.CONTINUE' | translate}}</button>
    </div>
  </ng-container>

  <ng-container *ngIf="currentCreateStep === 2 && idpType === OIDC">
    <p class="desc cnsl-secondary-text">{{'IDP.OIDC.DESCRIPTION' | translate}}</p>

    <form [formGroup]="oidcFormGroup" (ngSubmit)="addOIDCIdp()">
      <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 appearance="outline" class="formfield">
          <cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
          <input cnslInput formControlName="issuer" />
        </cnsl-form-field>
      </div>

      <cnsl-info-section class="auto-reg-info">
        <div>
          <p class="auto-reg-desc">{{'IDP.AUTOREGISTER_DESC' | translate}}</p>
          <mat-checkbox formControlName="autoRegister">
            {{'IDP.AUTOREGISTER' | translate}}
          </mat-checkbox>
        </div>
      </cnsl-info-section>

      <div class="idp-content">
        <cnsl-form-field appearance="outline" class="formfield">
          <cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
          <input cnslInput formControlName="clientId" />
        </cnsl-form-field>
        <cnsl-form-field appearance="outline" class="formfield">
          <cnsl-label>{{ 'IDP.CLIENTSECRET' | translate }}</cnsl-label>
          <input cnslInput formControlName="clientSecret" />
        </cnsl-form-field>
      </div>
      <div class="idp-content">
        <cnsl-form-field appearance="outline" class="formfield">
          <cnsl-label>{{ 'IDP.SCOPESLIST' | translate }}</cnsl-label>
          <mat-chip-list #chipScopesList aria-label="scope selection" *ngIf="scopesList">
            <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 cnslInput [matChipInputFor]="chipScopesList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
              [matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addScope($event)">
          </mat-chip-list>
        </cnsl-form-field>
      </div>
      <div class="idp-content">
        <cnsl-form-field class="formfield" appearance="outline">
          <cnsl-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</cnsl-label>
          <mat-select formControlName="idpDisplayNameMapping">
            <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>

      <div class="idp-create-actions">
        <button color="primary" (click)="currentCreateStep = 1" mat-stroked-button class="back-button" type="button">
          {{ 'ACTIONS.BACK' | translate }}
        </button>
        <button color="primary" mat-raised-button class="continue-button" [disabled]="oidcFormGroup.invalid"
          type="submit">
          {{ 'ACTIONS.SAVE' | translate }}
        </button>
      </div>
    </form>
  </ng-container>

  <ng-container *ngIf="currentCreateStep === 2 && idpType === JWT">
    <p class="desc cnsl-secondary-text">{{'IDP.JWT.DESCRIPTION' | translate}}</p>

    <form [formGroup]="jwtFormGroup" (ngSubmit)="addJWTIdp()">
      <div class="idp-content">
        <cnsl-form-field appearance="outline" class="formfield">
          <cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
          <input cnslInput formControlName="jwtName" />
        </cnsl-form-field>
        <cnsl-form-field appearance="outline" class="formfield">
          <cnsl-label>{{ 'IDP.JWT.HEADERNAME' | translate }}</cnsl-label>
          <input cnslInput formControlName="jwtHeaderName" />
        </cnsl-form-field>
        <cnsl-form-field appearance="outline" class="formfield">
          <cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
          <input cnslInput formControlName="jwtIssuer" />
        </cnsl-form-field>
      </div>

      <cnsl-info-section class="auto-reg-info">
        <div>
          <p class="auto-reg-desc">{{'IDP.AUTOREGISTER_DESC' | translate}}</p>
          <mat-checkbox formControlName="jwtAutoRegister">
            {{'IDP.AUTOREGISTER' | translate}}
          </mat-checkbox>
        </div>
      </cnsl-info-section>

      <div class="idp-content">
        <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="jwtKeysEndpoint" />
        </cnsl-form-field>
      </div>

      <div class="idp-create-actions">
        <button color="primary" (click)="currentCreateStep = 1" mat-stroked-button class="back-button" type="button">
          {{ 'ACTIONS.BACK' | translate }}
        </button>
        <button color="primary" mat-raised-button class="continue-button" [disabled]="jwtFormGroup.invalid"
          type="submit">
          {{ 'ACTIONS.SAVE' | translate }}
        </button>
      </div>
    </form>
  </ng-container>

</div>