browser/libs/tools/generator/components/src/credential-generator.component.html

<!-- FIXME: root$ should be powered using a reactive form -->
<bit-toggle-group
  fullWidth
  class="tw-mb-4"
  [selected]="(root$ | async).nav"
  (selectedChange)="onRootChanged({ nav: $event })"
  attr.aria-label="{{ 'type' | i18n }}"
>
  @for (option of rootOptions$ | async; track option) {
    <bit-toggle [value]="option.value">
      {{ option.label }}
    </bit-toggle>
  }
</bit-toggle-group>

<nudge-generator-spotlight></nudge-generator-spotlight>

<bit-card class="tw-flex tw-justify-between tw-mb-4">
  <div class="tw-grow tw-flex tw-items-center tw-min-w-0">
    <bit-color-password class="tw-font-mono" [password]="value$ | async"></bit-color-password>
  </div>
  <div class="tw-flex tw-items-center tw-space-x-1">
    <button
      type="button"
      bitIconButton="bwi-generate"
      buttonType="main"
      (click)="generate(USER_REQUEST)"
      [label]="credentialTypeGenerateLabel$ | async"
      [disabled]="!(algorithm$ | async)"
    >
      {{ credentialTypeGenerateLabel$ | async }}
    </button>
    <button
      type="button"
      bitIconButton="bwi-clone"
      buttonType="main"
      showToast
      [label]="credentialTypeCopyLabel$ | async"
      [appCopyClick]="value$ | async"
      [valueLabel]="credentialTypeLabel$ | async"
      [disabled]="!(algorithm$ | async)"
    ></button>
  </div>
</bit-card>
@let showAlgorithm = showAlgorithm$ | async;
@let account = account$ | async;
@switch (showAlgorithm?.id) {
  @case (Algorithm.password) {
    <tools-password-settings
      class="tw-mt-6"
      [account]="account"
      (onUpdated)="generate('password settings')"
    />
  }
  @case (Algorithm.passphrase) {
    <tools-passphrase-settings
      class="tw-mt-6"
      [account]="account"
      (onUpdated)="generate('passphrase settings')"
    />
  }
}
@if ((category$ | async) !== "password") {
  <bit-section>
    <bit-section-header>
      <h2 bitTypography="h6">{{ "options" | i18n }}</h2>
    </bit-section-header>
    <div class="tw-mb-4">
      <bit-card>
        <form [formGroup]="username" class="tw-container">
          <bit-form-field>
            <bit-label>{{ "type" | i18n }}</bit-label>
            <bit-select
              [items]="usernameOptions$ | async"
              formControlName="nav"
              data-testid="username-type"
            >
            </bit-select>
            @if (credentialTypeHint$ | async) {
              <bit-hint>{{ credentialTypeHint$ | async }}</bit-hint>
            }
          </bit-form-field>
        </form>
        @if (showForwarder$ | async) {
          <form [formGroup]="forwarder" class="tw-container">
            <bit-form-field>
              <bit-label>{{ "service" | i18n }}</bit-label>
              <bit-select
                [items]="forwarderOptions$ | async"
                formControlName="nav"
                data-testid="email-forwarding-service"
              >
              </bit-select>
            </bit-form-field>
          </form>
        }
        @if (showAlgorithm?.id === Algorithm.catchall) {
          <tools-catchall-settings
            [account]="account"
            (onUpdated)="generate('catchall settings')"
          />
        }
        @if (forwarderId$ | async; as forwarderId) {
          <tools-forwarder-settings [account]="account" [forwarder]="forwarderId" />
        }
        @if (showAlgorithm?.id === Algorithm.plusAddress) {
          <tools-subaddress-settings
            [account]="account"
            (onUpdated)="generate('subaddress settings')"
          />
        }
        @if (showAlgorithm?.id === Algorithm.username) {
          <tools-username-settings
            [account]="account"
            (onUpdated)="generate('username settings')"
          />
        }
      </bit-card>
    </div>
  </bit-section>
}