zitadel/console/src/app/pages/users/user-create/user-create.component.html

<cnsl-user-create-v2 *ngIf="(useV2Api$ | async) === true" />
<cnsl-create-layout
  *ngIf="(useV2Api$ | async) === false"
  title="{{ 'USER.CREATE.TITLE' | translate }}"
  [createSteps]="1"
  [currentCreateStep]="1"
  (closed)="location.back()"
>
  <div class="user-create-main-content">
    <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>

    <form
      *ngIf="pwdForm$ | async as pwdForm"
      [formGroup]="userForm"
      (ngSubmit)="createUser(pwdForm)"
      class="user-create-form"
    >
      <div class="user-create-content">
        <p class="user-create-section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>

        <div class="user-create-grid">
          <cnsl-form-field>
            <cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}</cnsl-label>
            <input cnslInput matRipple formControlName="email" required />
          </cnsl-form-field>
          <cnsl-form-field>
            <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
            <input
              *ngIf="suffixPadding$ | async as suffixPadding"
              cnslInput
              formControlName="userName"
              required
              [ngStyle]="{ 'padding-right': suffixPadding }"
            />
            <span #suffix *ngIf="envSuffix$ | async as envSuffix" cnslSuffix>{{ envSuffix }}</span>
          </cnsl-form-field>

          <cnsl-form-field>
            <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
            <input cnslInput formControlName="firstName" required />
          </cnsl-form-field>
          <cnsl-form-field>
            <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
            <input cnslInput formControlName="lastName" required />
          </cnsl-form-field>
          <cnsl-form-field>
            <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
            <input cnslInput formControlName="nickName" />
          </cnsl-form-field>
        </div>

        <div class="email-is-verified">
          <mat-checkbox class="block-checkbox" formControlName="emailVerified">
            {{ 'USER.LOGINMETHODS.EMAIL.ISVERIFIED' | translate }}
          </mat-checkbox>
          <mat-checkbox class="block-checkbox" [(ngModel)]="usePassword" [ngModelOptions]="{ standalone: true }">
            {{ 'ORG.PAGES.USEPASSWORD' | translate }}
          </mat-checkbox>
          <cnsl-info-section class="full-width desc">
            <span>{{ 'USER.CREATE.INITMAILDESCRIPTION' | translate }}</span>
          </cnsl-info-section>
        </div>

        <div class="pwd-section" *ngIf="usePassword && (passwordComplexityPolicy$ | async) as passwordComplexityPolicy">
          <cnsl-password-complexity-view
            class="complexity-view"
            [policy]="passwordComplexityPolicy"
            [password]="pwdForm.controls.password"
          >
          </cnsl-password-complexity-view>

          <form [formGroup]="pwdForm">
            <div class="user-create-grid">
              <cnsl-form-field>
                <cnsl-label>{{ 'USER.PASSWORD.NEWINITIAL' | translate }}</cnsl-label>
                <input cnslInput autocomplete="off" name="firstpassword" formControlName="password" type="password" />
              </cnsl-form-field>
              <cnsl-form-field>
                <cnsl-label>{{ 'USER.PASSWORD.CONFIRMINITIAL' | translate }}</cnsl-label>
                <input
                  cnslInput
                  autocomplete="off"
                  name="confirmPassword"
                  formControlName="confirmPassword"
                  type="password"
                />
              </cnsl-form-field>
            </div>
          </form>
        </div>

        <p class="user-create-section">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>

        <div class="user-create-grid">
          <cnsl-form-field>
            <cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
            <mat-select formControlName="gender">
              <mat-option *ngFor="let gender of genders" [value]="gender">
                {{ 'GENDERS.' + gender | translate }}
              </mat-option>
            </mat-select>
          </cnsl-form-field>
          <cnsl-form-field>
            <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
            <mat-select formControlName="preferredLanguage">
              <mat-option *ngFor="let language of langSvc.supported$ | async" [value]="language">
                {{ 'LANGUAGES.' + language | translate }}
              </mat-option>
            </mat-select>
          </cnsl-form-field>
        </div>

        <p class="user-create-section">{{ 'USER.CREATE.ADDRESSANDPHONESECTION' | translate }}</p>

        <div class="phone-grid">
          <cnsl-form-field class="phone-country">
            <cnsl-label>{{ 'USER.PROFILE.COUNTRY' | translate }}</cnsl-label>
            <mat-select
              [(value)]="selected"
              [compareWith]="compareCountries"
              (selectionChange)="setCountryCallingCode()"
              data-cy="country-calling-code"
            >
              <mat-select-trigger>
                <span class="fi fi-{{ selected?.countryCode | lowercase }}"></span>
                <span class="trigger-name">{{ selected?.countryName }}</span>
              </mat-select-trigger>
              <mat-option class="phone-country-option" *ngFor="let country of countryPhoneCodes" [value]="country">
                <span class="phone-country-row">
                  <span class="phone-country-flag fi fi-{{ country.countryCode | lowercase }}"></span>
                  <span class="phone-country-name">{{ country.countryName }}</span>
                  <span class="fill-space"></span>
                  <small class="phone-country-code">+{{ country.countryCallingCode }}</small>
                </span>
              </mat-option>
            </mat-select>
          </cnsl-form-field>
          <cnsl-form-field>
            <cnsl-label>{{ 'USER.PROFILE.PHONE' | translate }}</cnsl-label>
            <input cnslInput formControlName="phone" matTooltip="{{ 'USER.PROFILE.PHONE_HINT' | translate }}" />
          </cnsl-form-field>
        </div>
      </div>
      <div class="user-create-btn-container">
        <button
          data-e2e="create-button"
          color="primary"
          [disabled]="userForm.invalid || (this.usePassword && this.pwdForm.invalid)"
          type="submit"
          class="create-button"
          mat-raised-button
        >
          {{ 'ACTIONS.CREATE' | translate }}
        </button>
      </div>
    </form>
  </div>
</cnsl-create-layout>