profile-edit.component.html raw

   1  <div class="sam-text-header">
   2    <span>Edit Profile</span>
   3  </div>
   4  
   5  @if(loading) {
   6  <div class="loading-container">
   7    <span class="sam-text-muted">Loading profile...</span>
   8  </div>
   9  } @else {
  10  <div class="content">
  11    <div class="form-group">
  12      <label for="name">Name</label>
  13      <input
  14        id="name"
  15        type="text"
  16        placeholder="Your name"
  17        class="form-control"
  18        [(ngModel)]="profile.name"
  19        autocomplete="off"
  20      />
  21    </div>
  22  
  23    <div class="form-group">
  24      <label for="display_name">Display Name</label>
  25      <input
  26        id="display_name"
  27        type="text"
  28        placeholder="Display name"
  29        class="form-control"
  30        [(ngModel)]="profile.display_name"
  31        autocomplete="off"
  32      />
  33    </div>
  34  
  35    <div class="form-group">
  36      <label for="picture">Avatar URL</label>
  37      <input
  38        id="picture"
  39        type="url"
  40        placeholder="https://example.com/avatar.jpg"
  41        class="form-control"
  42        [(ngModel)]="profile.picture"
  43        autocomplete="off"
  44      />
  45    </div>
  46  
  47    <div class="form-group">
  48      <label for="banner">Banner URL</label>
  49      <input
  50        id="banner"
  51        type="url"
  52        placeholder="https://example.com/banner.jpg"
  53        class="form-control"
  54        [(ngModel)]="profile.banner"
  55        autocomplete="off"
  56      />
  57    </div>
  58  
  59    <div class="form-group">
  60      <label for="website">Website</label>
  61      <input
  62        id="website"
  63        type="url"
  64        placeholder="https://yourwebsite.com"
  65        class="form-control"
  66        [(ngModel)]="profile.website"
  67        autocomplete="off"
  68      />
  69    </div>
  70  
  71    <div class="form-group">
  72      <label for="about">About</label>
  73      <textarea
  74        id="about"
  75        placeholder="Tell us about yourself..."
  76        class="form-control"
  77        rows="4"
  78        [(ngModel)]="profile.about"
  79      ></textarea>
  80    </div>
  81  
  82    <div class="form-group">
  83      <label for="nip05">NIP-05 Identifier</label>
  84      <input
  85        id="nip05"
  86        type="text"
  87        placeholder="you@example.com"
  88        class="form-control"
  89        [(ngModel)]="profile.nip05"
  90        autocomplete="off"
  91      />
  92    </div>
  93  
  94    <div class="form-group">
  95      <label for="lud16">Lightning Address (LUD-16)</label>
  96      <input
  97        id="lud16"
  98        type="text"
  99        placeholder="you@getalby.com"
 100        class="form-control"
 101        [(ngModel)]="profile.lud16"
 102        autocomplete="off"
 103      />
 104    </div>
 105  
 106    <div class="form-group">
 107      <label for="lnurl">LNURL</label>
 108      <input
 109        id="lnurl"
 110        type="text"
 111        placeholder="lnurl1..."
 112        class="form-control"
 113        [(ngModel)]="profile.lnurl"
 114        autocomplete="off"
 115      />
 116    </div>
 117  </div>
 118  
 119  <div class="sam-footer-grid-2">
 120    <button type="button" class="btn btn-secondary" (click)="onClickCancel()">
 121      Cancel
 122    </button>
 123  
 124    <button
 125      [disabled]="saving"
 126      type="button"
 127      class="btn btn-primary"
 128      (click)="onClickSave()"
 129    >
 130      @if(saving) {
 131        Saving...
 132      } @else {
 133        Save
 134      }
 135    </button>
 136  </div>
 137  
 138  @if(alertMessage) {
 139  <div class="alert-container">
 140    <div class="alert alert-danger sam-flex-row gap" role="alert">
 141      <i class="bi bi-exclamation-triangle"></i>
 142      <span>{{ alertMessage }}</span>
 143    </div>
 144  </div>
 145  }
 146  }
 147  
 148  <lib-toast #toast></lib-toast>
 149