identity.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="sam-text-header">
   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>You</span>
  15    <button class="edit-btn" title="Edit profile" (click)="onClickEditProfile()">
  16      <span class="emoji">📝</span>
  17    </button>
  18  </div>
  19  
  20  <div class="identity-container">
  21    <!-- Banner background -->
  22    <div
  23      class="banner-background"
  24      [style.background-image]="bannerUrl ? 'url(' + bannerUrl + ')' : 'none'"
  25    >
  26      <div class="banner-overlay"></div>
  27  
  28      <div class="profile-content">
  29        <!-- Avatar -->
  30        <div class="avatar-frame" [class.has-image]="avatarUrl">
  31          <img
  32            [src]="avatarUrl || 'person-fill.svg'"
  33            alt=""
  34            class="avatar-image"
  35          />
  36        </div>
  37  
  38        <!-- Display name (primary, large) -->
  39        <div class="name-badge-container" (click)="onClickShowDetails()">
  40          <span class="display-name">
  41            {{ displayName || selectedIdentity?.nick || 'Unknown' }}
  42          </span>
  43          @if(username) {
  44          <span class="username">
  45            {{ username }}
  46          </span>
  47          }
  48        </div>
  49  
  50        <!-- NIP-05 verification -->
  51        @if(profile?.nip05) {
  52        <div class="nip05-row">
  53          @if(validating) {
  54          <i class="bi bi-circle color-activity"></i>
  55          } @else { @if(nip05isValidated) {
  56          <i class="bi bi-patch-check sam-color-primary"></i>
  57          } @else {
  58          <i class="bi bi-exclamation-octagon-fill sam-color-danger"></i>
  59          } }
  60  
  61          <span class="nip05-badge">{{
  62            profile?.nip05 | visualNip05
  63          }}</span>
  64        </div>
  65        }
  66  
  67        <!-- npub display -->
  68        <div class="npub-wrapper">
  69          <lib-pubkey
  70            [value]="selectedIdentityNpub ?? 'na'"
  71            [first]="14"
  72            [last]="8"
  73            (click)="
  74              copyToClipboard(selectedIdentityNpub);
  75              toast.show('Copied to clipboard')
  76            "
  77          ></lib-pubkey>
  78        </div>
  79      </div>
  80    </div>
  81  </div>
  82  
  83  <!-- About section -->
  84  @if (aboutText) {
  85    <div class="about-section">
  86      <div class="about-header">About</div>
  87      <div class="about-content">{{ aboutText }}</div>
  88    </div>
  89  }
  90  
  91  <lib-toast #toast></lib-toast>
  92