zitadel/console/src/app/modules/accounts-card/accounts-card.component.html

<div class="accounts-card">
  <cnsl-avatar
    (click)="editUserProfile()"
    *ngIf="user && user.human?.profile && user.human?.profile?.displayName"
    class="avatar"
    [ngClass]="{ 'iam-user': iamuser }"
    [forColor]="user.preferredLoginName"
    [avatarUrl]="user.human?.profile?.avatarUrl || ''"
    [name]="
      user.human && user.human.profile && user.human.profile.displayName
        ? user.human.profile.displayName
        : user.human?.profile?.firstName + ' ' + user.human?.profile?.lastName
    "
    [size]="80"
  >
  </cnsl-avatar>

  <span class="u-name">{{ user?.human?.profile?.displayName ? user?.human?.profile?.displayName : 'A' }}</span>
  <span class="u-email" *ngIf="user?.preferredLoginName">{{ user?.preferredLoginName }}</span>

  <button (click)="editUserProfile()" mat-stroked-button>{{ 'USER.EDITACCOUNT' | translate }}</button>
  <div class="l-accounts">
    <mat-progress-bar *ngIf="loadingUsers" color="primary" mode="indeterminate"></mat-progress-bar>
    <a class="row" *ngFor="let session of sessions" (click)="selectAccount(session.loginName)">
      <cnsl-avatar
        *ngIf="session && session.displayName"
        class="small-avatar"
        [avatarUrl]="session.avatarUrl || ''"
        [name]="session.displayName"
        [forColor]="session.loginName"
        [size]="32"
      >
      </cnsl-avatar>

      <div class="col">
        <span class="user-title">{{ session.displayName ? session.displayName : session.userName }} </span>
        <span class="loginname">{{ session.loginName }}</span>
        <span
          class="state"
          [ngClass]="{
            active: session.authState === UserState.USER_STATE_ACTIVE,
            inactive: session.authState === UserState.USER_STATE_INACTIVE
          }"
          >{{ 'USER.STATE.' + session.authState | translate }}</span
        >
      </div>
      <mat-icon>keyboard_arrow_right</mat-icon>
    </a>
    <a class="row" (click)="selectNewAccount()">
      <div class="icon-wrapper">
        <i class="las la-user-plus"></i>
      </div>
      <span class="col">
        <span class="user-title">{{ 'USER.ADDACCOUNT' | translate }}</span>
      </span>
      <mat-icon>keyboard_arrow_right</mat-icon>
    </a>
  </div>

  <button (click)="logout()" color="warn" mat-stroked-button>{{ 'MENU.LOGOUT' | translate }}</button>
</div>