vault-login.component.html raw

   1  <app-deriving-modal #derivingModal></app-deriving-modal>
   2  
   3  <div class="sam-text-header">
   4    <span class="brand">Smesh Signer</span>
   5  </div>
   6  
   7  <div class="content-login-vault">
   8    <div class="sam-flex-column gap" style="align-items: center">
   9      <div class="logo-frame">
  10        <img src="logo.svg" height="120" width="120" alt="" />
  11      </div>
  12  
  13      <div class="sam-mt-2 input-group">
  14        <input
  15          #passwordInputElement
  16          type="password"
  17          class="form-control"
  18          placeholder="vault password"
  19          [(ngModel)]="loginPassword"
  20          (keyup.enter)="loginPassword && loginVault()"
  21        />
  22        <button
  23          class="btn btn-outline-secondary"
  24          type="button"
  25          (click)="toggleType(passwordInputElement)"
  26        >
  27          <i
  28            class="bi bi-eye"
  29            [class.bi-eye]="passwordInputElement.type === 'password'"
  30            [class.bi-eye-slash]="passwordInputElement.type === 'text'"
  31          ></i>
  32        </button>
  33      </div>
  34  
  35      <button
  36        [disabled]="!loginPassword"
  37        type="button"
  38        class="sam-mt btn btn-primary"
  39        (click)="loginVault()"
  40      >
  41        <div class="sam-flex-row gap-h">
  42          <i class="bi bi-box-arrow-in-right"></i>
  43          <span>Sign in</span>
  44        </div>
  45      </button>
  46    </div>
  47  </div>
  48  
  49  <div class="bottom-links">
  50    <button
  51      type="button"
  52      class="link-btn"
  53      (click)="router.navigateByUrl('/vault-import')"
  54    >
  55      Import a different vault
  56    </button>
  57  
  58    <button
  59      class="link-btn danger"
  60      (click)="
  61        confirm.show(
  62          'Do you really want to reset the extension? All data will be lost.',
  63          onClickResetExtension.bind(this)
  64        )
  65      "
  66      type="button"
  67    >
  68      Reset Extension
  69    </button>
  70  </div>
  71  
  72  <!----------->
  73  <!-- ALERT -->
  74  <!----------->
  75  @if(showInvalidPasswordAlert) {
  76  <div style="position: absolute; bottom: 0; align-self: center">
  77    <div class="alert alert-danger sam-flex-row gap" role="alert">
  78      <i class="bi bi-exclamation-triangle"></i>
  79      <span>Invalid password</span>
  80    </div>
  81  </div>
  82  }
  83  
  84  <lib-confirm #confirm> </lib-confirm>
  85