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

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

    <form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" 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
              cnslInput
              formControlName="userName"
              required
              [ngStyle]="{ 'padding-right': suffixPadding ? suffixPadding : '10px' }"
            />
            <span #suffix *ngIf="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="isVerified">
            {{ '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 && pwdForm">
          <cnsl-password-complexity-view class="complexity-view" [policy]="this.policy" [password]="password">
          </cnsl-password-complexity-view>

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