zitadel/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.html

<form>
    <cnsl-form-field *ngIf="target && target == UserTarget.SELF" appearance="outline" class="full-width more-space">
        <cnsl-label>Organizations User Loginname</cnsl-label>

        <input cnslInput *ngIf="singleOutput" type="text" placeholder="Search for the user loginname" #usernameInput
            [formControl]="myControl" [matAutocomplete]="auto" />

        <mat-chip-list *ngIf="!singleOutput" #chipList aria-label="loginname selection">
            <mat-chip class="chip" *ngFor="let selecteduser of users" [selectable]="selectable" [removable]="removable"
                (removed)="remove(selecteduser)">
                {{ selecteduser?.human?.profile ? (selecteduser.human.profile.displayName) :
                selecteduser?.machine?.name}}
                | <small>
                    {{selecteduser.preferredLoginName}}</small>
                <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
            </mat-chip>
            <input cnslInput placeholder="{{'ORG_DETAIL.MEMBER.LOGINNAME' | translate}}" #usernameInput
                [formControl]="myControl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
                [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
                (matChipInputTokenEnd)="add($event)" />
        </mat-chip-list>

        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [displayWith]="displayFn">
            <mat-option *ngIf="isLoading" class="is-loading">
                <mat-spinner diameter="30"></mat-spinner>
            </mat-option>
            <mat-option *ngFor="let user of filteredUsers" [value]="user">
                {{user.human?.profile?.displayName ? user.human.profile.displayName : user.machine?.name}}
                <small>{{user.preferredLoginName}}</small>
            </mat-option>
        </mat-autocomplete>

        <span class="target-desc">
            {{'USER.TARGET.SELF'| translate}}
            <a (click)="changeTarget()">{{'USER.TARGET.CLICKHERE' | translate}}</a>
        </span>
    </cnsl-form-field>

    <div *ngIf="target && target == UserTarget.EXTERNAL" class="line">
        <cnsl-form-field class="form-field" appearance="outline">
            <cnsl-label>Global User Loginname</cnsl-label>
            <input cnslInput type="text" [formControl]="globalLoginNameControl" />
            <span class="target-desc">
                {{(target == UserTarget.SELF ? 'USER.TARGET.SELF' : 'USER.TARGET.EXTERNAL') | translate}}
                <a (click)="changeTarget()">{{'USER.TARGET.CLICKHERE' | translate}}</a>
            </span>
        </cnsl-form-field>

        <button color="primary" mat-icon-button (click)="getGlobalUser()">
            <i class="las la-search"></i>
        </button>
    </div>

    <div class="found" *ngIf="target == UserTarget.EXTERNAL && users.length > 0">
        <span class="found-label">{{'USER.SEARCH.FOUND' | translate}}:</span>
        <div class="found-user-row" *ngFor="let user of users; index as i">
            <div class="circle">
                <app-avatar
                    *ngIf="user.human && user.human.displayName && user.human?.firstName && user.human?.lastName; else cog"
                    class="avatar" [name]="user.human.displayName" [forColor]="user?.preferredLoginName" [size]="32">
                </app-avatar>
                <ng-template #cog>
                    <div class="sa-icon">
                        <i class="las la-user-cog"></i>
                    </div>
                </ng-template>
            </div>

            <span>{{user.preferredLoginName}}</span>
            <button mat-icon-button color="warn">
                <i class="las la-minus-circle" (click)="users.splice(i, 1)"></i>
            </button>
        </div>
    </div>
</form>