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

<cnsl-detail-layout [backRouterLink]="[ '/users/list/humans']" title="{{ 'USER.CREATE.TITLE' | translate }}"
  description="{{ 'USER.CREATE.DESCRIPTION' | translate }}">
  <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>

  <form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="form">
    <div class="content">
      <p class="section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}*</cnsl-label>
        <input cnslInput matRipple formControlName="email" required />
        <span cnslError *ngIf="email?.invalid && !email?.errors?.required">
          {{ 'USER.VALIDATION.NOTANEMAIL' | translate }}
        </span>
        <span cnslError *ngIf="email?.invalid && email?.errors?.required">
          {{ 'USER.VALIDATION.REQUIRED' | translate }}
        </span>
      </cnsl-form-field>
      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}*</cnsl-label>
        <input cnslInput formControlName="userName" required
          [ngStyle]="{'padding-right': suffixPadding ? suffixPadding : '10px'}" />
        <span #suffix *ngIf="envSuffixLabel" cnslSuffix>{{envSuffixLabel}}</span>

        <span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
          {{ 'USER.VALIDATION.REQUIRED' | translate }}
        </span>
        <span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
          {{ 'USER.VALIDATION.NOEMAIL' | translate }}
        </span>
      </cnsl-form-field>
    </div>
    <div class="content">
      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}*</cnsl-label>
        <input cnslInput formControlName="firstName" required />
        <span cnslError *ngIf="firstName?.invalid && firstName?.errors?.required">
          {{ 'USER.VALIDATION.REQUIRED' | translate }}
        </span>
      </cnsl-form-field>
      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}*</cnsl-label>
        <input cnslInput formControlName="lastName" required />
        <span cnslError *ngIf="lastName?.invalid && lastName?.errors?.required">
          {{ 'USER.VALIDATION.REQUIRED' | translate }}
        </span>
      </cnsl-form-field>
      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
        <input cnslInput formControlName="nickName" />
        <span cnslError *ngIf="nickName?.invalid && nickName?.errors?.required">
          {{ 'USER.VALIDATION.REQUIRED' | translate }}
        </span>
      </cnsl-form-field>

      <div class="email-is-verified">
        <mat-checkbox class="verified-checkbox" formControlName="isVerified">
          {{'USER.LOGINMETHODS.EMAIL.ISVERIFIED' | translate}}
        </mat-checkbox>
        <cnsl-info-section class="full-width desc">
          <span>{{'USER.LOGINMETHODS.EMAIL.ISVERIFIEDDESC' | translate}}</span>
        </cnsl-info-section>
      </div>

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

      <cnsl-form-field class="formfield">
        <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>
        <span cnslError *ngIf="gender?.invalid && gender?.errors?.required">
          {{ 'USER.VALIDATION.REQUIRED' | translate }}
        </span>
      </cnsl-form-field>
      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
        <mat-select formControlName="preferredLanguage">
          <mat-option *ngFor="let language of languages" [value]="language">
            {{ 'LANGUAGES.'+language | translate }}
          </mat-option>
          <span cnslError *ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
            {{ 'USER.VALIDATION.REQUIRED' | translate }}
          </span>
        </mat-select>
      </cnsl-form-field>

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

      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'USER.PROFILE.PHONE' | translate }}</cnsl-label>
        <input cnslInput formControlName="phone" />
        <span cnslError *ngIf="phone?.invalid && phone?.errors?.required">
          {{ 'USER.VALIDATION.REQUIRED' | translate }}
        </span>
      </cnsl-form-field>
    </div>
    <div class="btn-container">
      <button color="primary" [disabled]="userForm.invalid" type="submit" mat-raised-button>{{ 'ACTIONS.CREATE' |
        translate }}</button>
    </div>
  </form>
</cnsl-detail-layout>