zitadel/console/src/app/pages/org-create/org-create.component.html

<div class="max-width-container container">
    <div class="abort-container">
        <button (click)="close()" mat-icon-button>
            <mat-icon>close</mat-icon>
        </button>
    </div>

    <ng-template cnslHasRole [hasRole]="['iam.write']">
        <mat-slide-toggle [disabled]="currentCreateStep !== 1" class="example-margin" color="primary"
            (change)="changeSelf($event)" [(ngModel)]="forSelf">
            Use your personal account as organisation owner
        </mat-slide-toggle>

        <ng-container *ngIf="!forSelf">
            <ng-container *ngIf="currentCreateStep === 1">
                <h1>{{'ORG.PAGES.ORGDETAIL_TITLE' | translate}} </h1>

                <form [formGroup]="orgForm" (ngSubmit)="next()">
                    <div class="content">
                        <cnsl-form-field class="formfield" appearance="outline">
                            <cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
                            <input cnslInput formControlName="name" />
                        </cnsl-form-field>
                        <cnsl-form-field class="formfield" appearance="outline">
                            <cnsl-label>{{ 'ORG_DETAIL.DETAIL.DOMAIN' | translate }}</cnsl-label>
                            <input cnslInput formControlName="domain" />
                        </cnsl-form-field>
                    </div>

                    <div class="btn-container">
                        <span class="fill-space"></span>
                        <button [disabled]="orgForm.invalid" color="primary" mat-raised-button class="big-button"
                            cdkFocusInitial type="submit">
                            {{'CONTINUE' | translate}}
                        </button>
                    </div>
                </form>
            </ng-container>

            <ng-container *ngIf="currentCreateStep === createSteps">
                <h1>{{'ORG.PAGES.ORGDETAILUSER_TITLE' | translate}}</h1>

                <div class="user">
                    <form [formGroup]="userForm" class="form">
                        <div class="content">
                            <p class="section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
                            <cnsl-form-field class="formfield" appearance="outline">
                                <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
                                <input cnslInput formControlName="userName" required />
                                <span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
                                    {{ 'USER.VALIDATION.REQUIRED' | translate }}
                                </span>
                            </cnsl-form-field>
                            <cnsl-form-field class="formfield" appearance="outline">
                                <cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}</cnsl-label>
                                <input cnslInput formControlName="email" required />
                                <span cnslError *ngIf="email?.invalid && email?.errors?.required">
                                    {{ 'USER.VALIDATION.REQUIRED' | translate }}
                                </span>
                            </cnsl-form-field>
                            <cnsl-form-field class="formfield" appearance="outline">
                                <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" appearance="outline">
                                <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" appearance="outline">
                                <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>

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

                            <cnsl-form-field class="formfield" appearance="outline">
                                <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" appearance="outline">
                                <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>

                            <mat-checkbox class="checkbox" [(ngModel)]="usePassword"
                                [ngModelOptions]="{standalone: true}" (change)="initPwdValidators()">
                                {{'ORG.PAGES.USEPASSWORD' | translate}}</mat-checkbox>

                            <ng-container *ngIf="usePassword && pwdForm">
                                <p class="section">{{ 'USER.CREATE.PASSWORDSECTION' | translate }}</p>

                                <cnsl-password-complexity-view class="complexity-view" [policy]="this.policy"
                                    [password]="password">
                                </cnsl-password-complexity-view>

                                <form [formGroup]="pwdForm" class="pwd-form">
                                    <cnsl-form-field class="pwd" *ngIf="password" appearance="outline">
                                        <cnsl-label>{{ 'USER.PASSWORD.NEW' | translate }}</cnsl-label>
                                        <input cnslInput autocomplete="off" name="firstpassword"
                                            formControlName="password" type="password" />

                                        <span cnslError *ngIf="password?.errors?.required">
                                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
                                        </span>

                                    </cnsl-form-field>
                                    <cnsl-form-field class="pwd" *ngIf="confirmPassword" appearance="outline">
                                        <cnsl-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</cnsl-label>
                                        <input cnslInput autocomplete="off" name="confirmPassword"
                                            formControlName="confirmPassword" type="password" />

                                        <span cnslError *ngIf="confirmPassword?.errors?.required">
                                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
                                        </span>
                                        <span cnslError *ngIf="confirmPassword?.errors?.notequal">
                                            {{ 'USER.PASSWORD.NOTEQUAL' | translate }}
                                        </span>
                                    </cnsl-form-field>
                                </form>
                            </ng-container>
                        </div>
                        <div class="btn-container">
                            <button color="primary" class="small-button" type="button" (click)="previous()"
                                mat-stroked-button>{{ 'ACTIONS.BACK' | translate }}</button>
                            <span class="fill-space"></span>
                            <button color="primary" class="big-button" (click)="finish()"
                                [disabled]="orgForm.invalid || userForm.invalid || ((usePassword && pwdForm) ? pwdForm?.invalid : false)"
                                mat-raised-button>{{ 'ACTIONS.FINISH' | translate }}</button>
                        </div>
                    </form>
                </div>
            </ng-container>
        </ng-container>
    </ng-template>
    <ng-template cnslHasRole [hasRole]="['org.create']">
        <div *ngIf="forSelf">
            <ng-container *ngIf="currentCreateStep === 1">
                <h1>{{'ORG.PAGES.ORGDETAIL_TITLE_WITHOUT_DOMAIN' | translate}} </h1>

                <form [formGroup]="orgForm" (ngSubmit)="createOrgForSelf()">
                    <div class="content">
                        <cnsl-form-field class="formfield" appearance="outline">
                            <cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
                            <input cnslInput formControlName="name" />
                        </cnsl-form-field>
                    </div>

                    <div class="btn-container">
                        <span class="fill-space"></span>
                        <button [disabled]="orgForm.invalid" color="primary" mat-raised-button class="big-button"
                            cdkFocusInitial type="submit">
                            {{'CREATE' | translate}}
                        </button>
                    </div>
                </form>
            </ng-container>
        </div>
    </ng-template>
</div>