ncryptsec.component.html raw

   1  <div class="header-pane">
   2    <lib-icon-button
   3      icon="chevron-left"
   4      (click)="navigateBack()"
   5    ></lib-icon-button>
   6    <span>Get ncryptsec</span>
   7  </div>
   8  
   9  <!-- QR Code (shown after generation) -->
  10  @if (ncryptsec) {
  11  <div class="qr-container">
  12    <button
  13      type="button"
  14      class="qr-button"
  15      title="Copy to clipboard"
  16      (click)="copyToClipboard(ncryptsec); toast.show('Copied to clipboard')"
  17    >
  18      <img [src]="ncryptsecQr" alt="ncryptsec QR code" class="qr-code" />
  19    </button>
  20  </div>
  21  }
  22  
  23  <!-- PASSWORD INPUT -->
  24  <div class="password-section">
  25    <label for="ncryptsecPasswordInput">Password</label>
  26    <div class="input-group sam-mt-h">
  27      <input
  28        #passwordInput
  29        id="ncryptsecPasswordInput"
  30        type="password"
  31        class="form-control"
  32        placeholder="Enter encryption password"
  33        [(ngModel)]="ncryptsecPassword"
  34        [disabled]="isGenerating"
  35        (keyup.enter)="generateNcryptsec()"
  36      />
  37    </div>
  38  </div>
  39  
  40  <button
  41    class="btn btn-primary generate-btn"
  42    type="button"
  43    (click)="generateNcryptsec()"
  44    [disabled]="!ncryptsecPassword || isGenerating"
  45  >
  46    @if (isGenerating) {
  47      <span class="spinner-border spinner-border-sm" role="status"></span>
  48      Generating...
  49    } @else {
  50      Generate ncryptsec
  51    }
  52  </button>
  53  
  54  
  55  <p class="description">
  56    Enter a password to encrypt your private key. The resulting ncryptsec can be
  57    used to securely backup or transfer your key.
  58  </p>
  59  
  60  <lib-toast #toast [bottom]="16"></lib-toast>
  61