zitadel/console/src/app/modules/providers/provider-oauth/provider-oauth.component.html

<cnsl-create-layout
  title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
  (closed)="close()"
>
  <div class="oauth-create-content">
    <div class="title-row">
      <img class="idp-logo" src="../../../assets/images/idp/oauth.svg" alt="oauth" />

      <h1>{{ 'IDP.CREATE.OAUTH.TITLE' | translate }}</h1>
      <mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
    </div>

    <p class="desc cnsl-secondary-text">{{ 'IDP.CREATE.OAUTH.DESCRIPTION' | translate }}</p>

    <form [formGroup]="form" (ngSubmit)="submitForm()">
      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
        <input cnslInput formControlName="name" />
      </cnsl-form-field>

      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'IDP.AUTHORIZATIONENDPOINT' | translate }}</cnsl-label>
        <input cnslInput formControlName="authorizationEndpoint" />
      </cnsl-form-field>

      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'IDP.TOKENENDPOINT' | translate }}</cnsl-label>
        <input cnslInput formControlName="tokenEndpoint" />
      </cnsl-form-field>

      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'IDP.USERENDPOINT' | translate }}</cnsl-label>
        <input cnslInput formControlName="userEndpoint" />
      </cnsl-form-field>

      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'IDP.IDATTRIBUTE' | translate }}</cnsl-label>
        <input cnslInput formControlName="idAttribute" />
      </cnsl-form-field>

      <div class="oauth-content">
        <cnsl-form-field class="formfield">
          <cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
          <input cnslInput formControlName="clientId" />
        </cnsl-form-field>

        <mat-checkbox *ngIf="provider" [(ngModel)]="updateClientSecret" [ngModelOptions]="{ standalone: true }">{{
          'IDP.UPDATECLIENTSECRET' | translate
        }}</mat-checkbox>
        <cnsl-form-field *ngIf="!provider || (provider && updateClientSecret)" class="formfield">
          <cnsl-label>{{ 'IDP.CLIENTSECRET' | translate }}</cnsl-label>
          <input cnslInput formControlName="clientSecret" />
        </cnsl-form-field>

        <div class="optional-h-wrapper">
          <h2>{{ 'IDP.OPTIONAL' | translate }}</h2>
          <button (click)="showOptional = !showOptional" type="button" mat-icon-button>
            <mat-icon *ngIf="showOptional">keyboard_arrow_up</mat-icon
            ><mat-icon *ngIf="!showOptional">keyboard_arrow_down</mat-icon>
          </button>
        </div>
        <div *ngIf="showOptional">
          <div class="idp-scopes">
            <div class="flex-line">
              <cnsl-form-field class="formfield">
                <cnsl-label>{{ 'IDP.SCOPESLIST' | translate }}</cnsl-label>

                <input
                  cnslInput
                  [matChipInputFor]="chipScopesList"
                  [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                  [matChipInputAddOnBlur]="true"
                  (matChipInputTokenEnd)="addScope($event)"
                />
              </cnsl-form-field>
              <button class="scope-add-button" (click)="addScope($any($event))" mat-icon-button>
                <mat-icon>add</mat-icon>
              </button>
            </div>

            <cnsl-form-field class="formfield">
              <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>
              </mat-chip-list>
            </cnsl-form-field>
          </div>

          <cnsl-provider-options
            [initialOptions]="provider?.config?.options"
            (optionsChanged)="options = $event"
          ></cnsl-provider-options>
        </div>
      </div>

      <div class="oauth-create-actions">
        <button color="primary" mat-raised-button class="continue-button" [disabled]="form.invalid" type="submit">
          <span *ngIf="id">{{ 'ACTIONS.SAVE' | translate }}</span>
          <span *ngIf="!id">{{ 'ACTIONS.CREATE' | translate }}</span>
        </button>
      </div>
    </form>
  </div>
</cnsl-create-layout>