browser/libs/key-management-ui/src/lock/components/lock.component.html

<ng-template #spinner>
  <div class="tw-flex tw-items-center tw-justify-center">
    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
  </div>
</ng-template>

<ng-container *ngIf="unlockOptions && !loading; else spinner">
  <!-- Biometrics Unlock -->
  <ng-container *ngIf="activeUnlockOption === UnlockOption.Biometrics">
    <button
      type="button"
      bitButton
      appAutofocus
      buttonType="primary"
      class="tw-mb-3"
      [disabled]="unlockingViaBiometrics || !biometricsAvailable"
      [loading]="unlockingViaBiometrics"
      block
      [bitTooltip]="biometricUnavailabilityReason"
      (click)="unlockViaBiometrics()"
    >
      <span> {{ biometricUnlockBtnText | i18n }}</span>
    </button>

    <div class="tw-flex tw-flex-col tw-space-y-3">
      <p class="tw-text-center tw-mb-0">{{ "or" | i18n }}</p>

      <ng-container *ngIf="unlockOptions.pin.enabled">
        <button
          type="button"
          bitButton
          buttonType="secondary"
          block
          (click)="activeUnlockOption = UnlockOption.Pin"
        >
          {{ "unlockWithPin" | i18n }}
        </button>
      </ng-container>

      <ng-container *ngIf="unlockOptions.masterPassword.enabled">
        <button
          type="button"
          bitButton
          buttonType="secondary"
          block
          (click)="activeUnlockOption = UnlockOption.MasterPassword"
        >
          {{ "unlockWithMasterPassword" | i18n }}
        </button>
      </ng-container>

      <button type="button" bitButton block (click)="logOut()">
        {{ "logOut" | i18n }}
      </button>
    </div>
  </ng-container>

  <!-- PIN Unlock -->
  <ng-container *ngIf="unlockOptions.pin.enabled && activeUnlockOption === UnlockOption.Pin">
    <form [bitSubmit]="submit" [formGroup]="formGroup">
      <bit-form-field>
        <bit-label>{{ "pin" | i18n }}</bit-label>
        <input
          type="password"
          formControlName="pin"
          bitInput
          appAutofocus
          name="pin"
          class="tw-font-mono"
          required
          appInputVerbatim
        />
        <button
          type="button"
          bitIconButton
          bitSuffix
          bitPasswordInputToggle
          [(toggled)]="showPassword"
        ></button>
      </bit-form-field>

      <div class="tw-flex tw-flex-col tw-space-y-3">
        <button type="submit" bitButton bitFormButton buttonType="primary" block>
          {{ "unlock" | i18n }}
        </button>

        <p class="tw-text-center">{{ "or" | i18n }}</p>

        <ng-container *ngIf="showBiometrics">
          <button
            type="button"
            bitButton
            bitFormButton
            buttonType="secondary"
            [disabled]="!biometricsAvailable"
            block
            (click)="activeUnlockOption = UnlockOption.Biometrics"
          >
            <span> {{ biometricUnlockBtnText | i18n }}</span>
          </button>
        </ng-container>

        <ng-container *ngIf="unlockOptions.masterPassword.enabled">
          <button
            type="button"
            bitButton
            bitFormButton
            buttonType="secondary"
            block
            (click)="activeUnlockOption = UnlockOption.MasterPassword"
          >
            {{ "unlockWithMasterPassword" | i18n }}
          </button>
        </ng-container>

        <button type="button" bitButton bitFormButton block (click)="logOut()">
          {{ "logOut" | i18n }}
        </button>
      </div>
    </form>
  </ng-container>

  <!-- MP Unlock -->
  @if (unlockOptions.masterPassword.enabled && activeUnlockOption === UnlockOption.MasterPassword) {
    <bit-master-password-lock
      [(activeUnlockOption)]="activeUnlockOption"
      [unlockOptions]="unlockOptions"
      [biometricUnlockBtnText]="biometricUnlockBtnText"
      (successfulUnlock)="successfulMasterPasswordUnlock($event)"
      (logOut)="logOut()"
    ></bit-master-password-lock>
  }
</ng-container>