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

<div class="max-width-container">
    <div class="container">
        <div class="left">
            <a [routerLink]="[ '/users']" mat-icon-button>
                <mat-icon class="icon">arrow_back</mat-icon>
            </a>
        </div>
        <div class="right">
            <div class="head">

                <h1>{{ 'USER.CREATE.TITLE' | translate }}</h1>

                <p class="desc">{{ 'USER.CREATE.DESCRIPTION' | translate }}</p>
            </div>

            <form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="form">
                <!-- <h2>{{ 'USER.PAGES.CREATE' | translate}}</h2> -->
                <div class="content">
                    <p class="section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.PROFILE.EMAIL' | translate }}</mat-label>
                        <input matInput formControlName="email" required />
                        <mat-error *ngIf="email?.invalid && email?.errors?.required">
                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
                        </mat-error>
                    </mat-form-field>
                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.PROFILE.USERNAME' | translate }}</mat-label>
                        <input matInput formControlName="userName" required />
                        <mat-error *ngIf="userName?.invalid && userName?.errors?.required">
                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
                        </mat-error>
                        <mat-error *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
                            {{ 'USER.VALIDATION.NOEMAIL' | translate }}
                        </mat-error>
                    </mat-form-field>
                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</mat-label>
                        <input matInput formControlName="firstName" required />
                        <mat-error *ngIf="firstName?.invalid && firstName?.errors?.required">
                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
                        </mat-error>
                    </mat-form-field>
                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</mat-label>
                        <input matInput formControlName="lastName" required />
                        <mat-error *ngIf="lastName?.invalid && lastName?.errors?.required">
                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
                        </mat-error>
                    </mat-form-field>
                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</mat-label>
                        <input matInput formControlName="nickName" />
                        <mat-error *ngIf="nickName?.invalid && nickName?.errors?.required">
                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
                        </mat-error>
                    </mat-form-field>

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

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

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

                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.PROFILE.PHONE' | translate }}</mat-label>
                        <input matInput formControlName="phone" />
                        <mat-error *ngIf="phone?.invalid && phone?.errors?.required">
                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
                        </mat-error>
                    </mat-form-field>
                    <!-- <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.ADDRESS.STREET' | translate }}</mat-label>
                        <input matInput formControlName="streetAddress" />
                        <mat-error *ngIf="streetAddress?.invalid && streetAddress?.errors?.required">
                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
                        </mat-error>
                    </mat-form-field>
                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.ADDRESS.POSTAL_CODE' | translate }}</mat-label>
                        <input matInput formControlName="postalCode" />
                        <mat-error *ngIf="postalCode?.invalid && postalCode?.errors?.required">
                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
                        </mat-error>
                    </mat-form-field>
                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.ADDRESS.LOCALITY' | translate }}</mat-label>
                        <input matInput formControlName="locality" />
                        <mat-error *ngIf="locality?.invalid && locality?.errors?.required">
                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
                        </mat-error>
                    </mat-form-field>
                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.ADDRESS.REGION' | translate }}</mat-label>
                        <input matInput formControlName="region" />
                        <mat-error *ngIf="region?.invalid && region?.errors?.required">
                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
                        </mat-error>
                    </mat-form-field>
                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.ADDRESS.COUNTRY' | translate }}</mat-label>
                        <input matInput formControlName="country" />
                        <mat-error *ngIf="country?.invalid && country?.errors?.required">
                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
                        </mat-error>
                    </mat-form-field> -->
                </div>
                <div class="btn-container">
                    <button color="accent" [disabled]="userForm.invalid" type="submit"
                        mat-raised-button>{{ 'ACTIONS.CREATE' | translate }}</button>
                </div>
            </form>
        </div>
    </div>
</div>