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

<app-detail-layout [backRouterLink]="[ '/users/list/humans']" title="{{ 'USER.CREATE.TITLE' | translate }}"
    description="{{ 'USER.CREATE.DESCRIPTION' | translate }}">
    <mat-progress-bar *ngIf="loading" color="accent" 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" appearance="fill">
                <cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}*</cnsl-label>
                <input cnslInput matRipple formControlName="email" required />
                <span cnsl-error *ngIf="email?.invalid && !email?.errors?.required">
                    {{ 'USER.VALIDATION.NOTANEMAIL' | translate }}
                </span>
                <span cnsl-error *ngIf="email?.invalid && email?.errors?.required">
                    {{ 'USER.VALIDATION.REQUIRED' | translate }}
                </span>
            </cnsl-form-field>
            <cnsl-form-field class="formfield" appearance="fill">
                <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}*</cnsl-label>
                <input cnslInput formControlName="userName" required
                    [ngStyle]="{'padding-right': suffixPadding ? suffixPadding : '10px'}" />
                <span #suffix *ngIf="envSuffixLabel" cnslSuffix (click)="logsuff()">{{envSuffixLabel}}</span>

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

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

            <cnsl-form-field class="formfield" appearance="fill">
                <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 cnsl-error *ngIf="gender?.invalid && gender?.errors?.required">
                    {{ 'USER.VALIDATION.REQUIRED' | translate }}
                </span>
            </cnsl-form-field>
            <cnsl-form-field class="formfield" appearance="fill">
                <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 cnsl-error *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" appearance="fill">
                <cnsl-label>{{ 'USER.PROFILE.PHONE' | translate }}</cnsl-label>
                <input cnslInput formControlName="phone" />
                <span cnsl-error *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>
</app-detail-layout>