identities.component.html raw

   1  <!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->
   2  <!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
   3  <div class="custom-header" style="position: sticky; top: 0">
   4    <div class="header-buttons">
   5      <button class="header-btn" title="Lock" (click)="onClickLock()">
   6        <span class="emoji">🔒</span>
   7      </button>
   8      @if (devMode) {
   9        <button class="header-btn" title="Test Permission Prompt" (click)="onTestPrompt()">
  10          <span class="emoji">✨</span>
  11        </button>
  12      }
  13    </div>
  14    <span class="text">Identities</span>
  15  
  16    <button class="add-btn" title="New Identity" (click)="onClickNewIdentity()">
  17      <span class="emoji">➕</span>
  18    </button>
  19  </div>
  20  
  21  <div class="reckless-mode-row">
  22    <label class="reckless-label" (click)="onToggleRecklessMode()">
  23      <input
  24        type="checkbox"
  25        [checked]="isRecklessMode"
  26        (click)="$event.stopPropagation()"
  27        (change)="onToggleRecklessMode()"
  28      />
  29      <span
  30        class="reckless-text"
  31        data-bs-toggle="tooltip"
  32        data-bs-placement="bottom"
  33        title="Auto-approve all actions. If whitelist has entries, only those apps are auto-approved."
  34      >Reckless mode</span>
  35    </label>
  36    <button
  37      class="gear-btn"
  38      title="Manage whitelisted apps"
  39      (click)="onClickWhitelistedApps()"
  40    >
  41      <span class="emoji">⚙️</span>
  42    </button>
  43  </div>
  44  
  45  @let sessionData = storage.getBrowserSessionHandler().browserSessionData;
  46  @let identities = sessionData?.identities ?? [];
  47  
  48  @if(identities.length === 0) {
  49  <div class="empty-state">
  50    <span class="sam-text-muted">
  51      Create your first identity by clicking on the button in the upper right
  52      corner.
  53    </span>
  54  </div>
  55  }
  56  
  57  @for(identity of identities; track identity.id) {
  58    @let isSelected = identity.id === sessionData?.selectedIdentityId;
  59    <div
  60      class="identity"
  61      [class.selected]="isSelected"
  62      (click)="onClickSelectIdentity(identity.id)"
  63    >
  64      <img
  65        class="avatar"
  66        [src]="getAvatarUrl(identity)"
  67        alt=""
  68        (error)="$any($event.target).src = 'person-fill.svg'"
  69      />
  70      <span class="name">{{ getDisplayName(identity) }}</span>
  71      <lib-icon-button
  72        icon="⚙️"
  73        title="Identity settings"
  74        (click)="onClickEditIdentity(identity.id, $event)"
  75      ></lib-icon-button>
  76    </div>
  77  }
  78  
  79  <lib-toast #toast></lib-toast>
  80