zitadel/console/src/app/modules/add-member-dialog/member-create-dialog.component.html

<h1 mat-dialog-title>
    <span class="title">{{'MEMBER.ADD' | translate}}</span>
</h1>
<p class="desc"> {{'ORG_DETAIL.MEMBER.ADDDESCRIPTION' | translate}}</p>

<div mat-dialog-content>
    <!-- if no context -->
    <ng-container *ngIf="showCreationTypeSelector">
        <mat-form-field class="full-width" appearance="outline">
            <mat-label>{{ 'MEMBER.CREATIONTYPE' | translate }}</mat-label>
            <mat-select [(ngModel)]="creationType" (selectionChange)="loadRoles()">
                <mat-option *ngFor="let type of creationTypes" [value]="type.type"
                    [disabled]="(type.disabled$ | async) == false">
                    {{ 'MEMBER.CREATIONTYPES.'+type.type | translate}}
                </mat-option>
            </mat-select>
        </mat-form-field>

        <ng-container
            *ngIf="creationType === CreationType.PROJECT_OWNED || creationType === CreationType.PROJECT_GRANTED">
            <p>{{'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate}}</p>
            <app-search-project-autocomplete class="block" singleOutput="true"
                (selectionChanged)="selectProject($event)"
                [autocompleteType]="creationType === CreationType.PROJECT_OWNED ? ProjectAutocompleteType.PROJECT_OWNED : creationType === CreationType.PROJECT_GRANTED ? ProjectAutocompleteType.PROJECT_GRANTED : undefined">
            </app-search-project-autocomplete>
        </ng-container>
    </ng-container>
    <!-- if no context end -->

    <app-search-user-autocomplete [users]="preselectedUsers" (selectionChanged)="users = $event">
    </app-search-user-autocomplete>

    <mat-form-field class="full-width" appearance="outline"
        *ngIf="creationType === CreationType.PROJECT_OWNED || creationType === CreationType.PROJECT_GRANTED || creationType === CreationType.IAM">
        <mat-label>{{ 'ROLESLABEL' | translate }}</mat-label>
        <mat-select [(ngModel)]="roles" multiple>
            <mat-option *ngFor="let role of memberRoleOptions" [value]="role">
                {{ role }}
            </mat-option>
        </mat-select>
    </mat-form-field>

    <ng-container *ngIf="creationType === CreationType.ORG">
        <app-org-member-roles-autocomplete (selectionChanged)="setOrgMemberRoles($event)">
        </app-org-member-roles-autocomplete>
    </ng-container>

</div>
<div mat-dialog-actions class="action">
    <button mat-button (click)="closeDialog()">
        {{'ACTIONS.CANCEL' | translate}}
    </button>

    <button [disabled]="users.length == 0 || roles.length == 0" color="primary" mat-raised-button class="ok-button"
        (click)="closeDialogWithSuccess()">
        {{'ACTIONS.ADD' | translate}}
    </button>
</div>