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

<cnsl-create-layout
  title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
  (closed)="close()"
>
  <div class="identity-provider-create-content">
    <div class="title-row">
      <i class="idp-icon las la-building"></i>
      <h1>{{ 'IDP.CREATE.LDAP.TITLE' | translate }}</h1>
      <mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
    </div>

    <p class="identity-provider-desc cnsl-secondary-text">
      {{ !provider ? ('IDP.CREATE.LDAP.DESCRIPTION' | translate) : ('IDP.DETAIL.DESCRIPTION' | translate) }}
    </p>

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

        <h2 class="subheader">{{ 'IDP.LDAPCONNECTION' | translate }}</h2>

        <cnsl-string-list
          title="{{ 'IDP.SERVERS' | translate }}"
          formControlName="serversList"
          [required]="true"
        ></cnsl-string-list>

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

        <div [ngClass]="{ 'identity-provider-2-col': !provider }">
          <cnsl-form-field class="formfield">
            <cnsl-label>{{ 'IDP.BINDDN' | translate }}</cnsl-label>
            <input cnslInput formControlName="bindDn" />
          </cnsl-form-field>

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

        <h2 class="subheader">{{ 'IDP.LDAPUSERBINDING' | translate }}</h2>

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

        <cnsl-string-list
          title="{{ 'IDP.USERFILTERS' | translate }}"
          formControlName="userFiltersList"
          [required]="true"
        ></cnsl-string-list>

        <cnsl-string-list
          title="{{ 'IDP.USEROBJECTCLASSES' | translate }}"
          formControlName="userObjectClassesList"
          [required]="true"
        ></cnsl-string-list>

        <div class="identity-provider-optional-h-wrapper">
          <h2>{{ 'IDP.LDAPATTRIBUTES' | translate }}</h2>

          <button (click)="showAttributes = !showAttributes" type="button" mat-icon-button>
            <mat-icon *ngIf="showAttributes">keyboard_arrow_up</mat-icon>
            <mat-icon *ngIf="!showAttributes">keyboard_arrow_down</mat-icon>
          </button>

          <span *ngIf="!provider?.config?.ldap?.attributes?.idAttribute" class="state error">{{
            'IDP.REQUIRED' | translate
          }}</span>
        </div>
        <div *ngIf="showAttributes">
          <cnsl-ldap-attributes
            [initialAttributes]="provider?.config?.ldap?.attributes"
            (attributesChanged)="attributes = $event"
          ></cnsl-ldap-attributes>
        </div>

        <div class="identity-provider-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">
          <mat-checkbox formControlName="startTls">{{ 'IDP.STARTTLS' | translate }}</mat-checkbox>

          <cnsl-form-field class="formfield">
            <cnsl-label>{{ 'IDP.TIMEOUT' | translate }}</cnsl-label>
            <input cnslInput formControlName="timeout" type="number" />
          </cnsl-form-field>

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

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