bitwarden-browser/apps/browser/src/autofill/popup/settings/autofill.component.html

<popup-page>
  <popup-header slot="header" pageTitle="{{ 'autofill' | i18n }}" showBackButton>
    <ng-container slot="end">
      <app-pop-out></app-pop-out>
    </ng-container>
  </popup-header>

  <div class="tw-bg-background-alt tw-p-2">
    <bit-section>
      <bit-section-header>
        <h2 bitTypography="h5">{{ "autofillSuggestionsSectionTitle" | i18n }}</h2>
      </bit-section-header>
      <bit-card>
        <bit-form-control>
          <input
            bitCheckbox
            id="show-inline-menu"
            type="checkbox"
            (change)="updateInlineMenuVisibility()"
            [(ngModel)]="enableInlineMenu"
          />
          <bit-label for="show-inline-menu">{{ "showInlineMenuLabel" | i18n }}</bit-label>
          <bit-hint
            *ngIf="accountSwitcherEnabled && canOverrideBrowserAutofillSetting"
            class="tw-text-sm"
          >
            {{ "showInlineMenuOnFormFieldsDescAlt" | i18n }}
          </bit-hint>
        </bit-form-control>
        <bit-form-control *ngIf="enableInlineMenu" class="tw-pl-5">
          <input
            bitCheckbox
            id="show-autofill-suggestions-on-icon"
            type="checkbox"
            (change)="updateInlineMenuVisibility()"
            [(ngModel)]="enableInlineMenuOnIconSelect"
          />
          <bit-label for="show-autofill-suggestions-on-icon">
            {{ "showInlineMenuOnIconSelectionLabel" | i18n }}
          </bit-label>
          <bit-hint class="tw-text-sm" *ngIf="!canOverrideBrowserAutofillSetting">
            {{ "turnOffBrowserBuiltInPasswordManagerSettings" | i18n }}
            <a
              bitLink
              class="tw-no-underline"
              rel="noreferrer"
              target="_blank"
              (click)="openURI($event, disablePasswordManagerURI)"
              [attr.href]="disablePasswordManagerURI"
            >
              {{ "turnOffBrowserBuiltInPasswordManagerSettingsLink" | i18n }}
            </a>
          </bit-hint>
        </bit-form-control>
        <bit-form-control *ngIf="canOverrideBrowserAutofillSetting">
          <input
            bitCheckbox
            id="overrideBrowserAutofill"
            type="checkbox"
            (change)="updateDefaultBrowserAutofillDisabled()"
            [(ngModel)]="defaultBrowserAutofillDisabled"
          />
          <bit-label for="overrideBrowserAutofill">{{
            "overrideDefaultBrowserAutoFillSettings" | i18n
          }}</bit-label>
          <bit-hint class="tw-text-sm">
            {{ "turnOffBrowserBuiltInPasswordManagerSettings" | i18n }}
            <a
              bitLink
              class="tw-no-underline"
              rel="noreferrer"
              target="_blank"
              (click)="openURI($event, disablePasswordManagerURI)"
              [attr.href]="disablePasswordManagerURI"
            >
              {{ "turnOffBrowserBuiltInPasswordManagerSettingsLink" | i18n }}
            </a>
          </bit-hint>
        </bit-form-control>
        <bit-form-control>
          <input
            bitCheckbox
            id="showCardsSuggestions"
            type="checkbox"
            (change)="updateShowCardsCurrentTab()"
            [(ngModel)]="showCardsCurrentTab"
          />
          <bit-label for="showCardsSuggestions">{{ "showCardsInVaultView" | i18n }}</bit-label>
        </bit-form-control>
        <bit-form-control>
          <input
            bitCheckbox
            id="showIdentitiesSuggestions"
            type="checkbox"
            (change)="updateShowIdentitiesCurrentTab()"
            [(ngModel)]="showIdentitiesCurrentTab"
          />
          <bit-label for="showIdentitiesSuggestions" class="tw-whitespace-normal">
            {{ "showIdentitiesInVaultView" | i18n }}
          </bit-label>
        </bit-form-control>
      </bit-card>
    </bit-section>
    <bit-section>
      <bit-section-header>
        <h2 bitTypography="h5">{{ "autofillKeyboardShortcutSectionTitle" | i18n }}</h2>
      </bit-section-header>
      <bit-item>
        <button bit-item-content type="button" (click)="openURI($event, browserShortcutsURI)">
          <h3 bitTypography="h5">{{ "autofillKeyboardShortcutUpdateLabel" | i18n }}</h3>
          <bit-hint slot="secondary" class="tw-text-sm tw-whitespace-normal">
            {{ autofillKeyboardHelperText }}
          </bit-hint>
          <i
            appA11yTitle="{{ 'opensInANewWindow' | i18n }}"
            aria-hidden="true"
            class="bwi bwi-fw bwi-external-link bwi-lg tw-text-muted"
            slot="end"
          ></i>
        </button>
      </bit-item>
    </bit-section>
    <bit-section>
      <bit-section-header>
        <h2 bitTypography="h5">{{ "enableAutoFillOnPageLoadSectionTitle" | i18n }}</h2>
      </bit-section-header>
      <bit-card>
        <bit-hint class="tw-mb-6 tw-text-sm">
          {{ "enableAutoFillOnPageLoadDesc" | i18n }}
          <span [innerHTML]="'autofillOnPageLoadWarning' | i18n: '\<b>' : '\</b>'"></span>
          <a
            bitLink
            class="tw-no-underline"
            href="https://bitwarden.com/help/auto-fill-browser/"
            rel="noreferrer"
            target="_blank"
          >
            {{ "learnMoreAboutAutofillOnPageLoadLinkText" | i18n }}
          </a>
        </bit-hint>
        <bit-form-control>
          <input
            bitCheckbox
            id="autofillOnPageLoad"
            type="checkbox"
            (change)="updateAutofillOnPageLoad()"
            [(ngModel)]="enableAutofillOnPageLoad"
          />
          <bit-label for="autofillOnPageLoad">{{ "enableAutoFillOnPageLoad" | i18n }}</bit-label>
        </bit-form-control>
        <bit-form-field>
          <bit-label for="defaultAutofill">{{ "defaultAutoFillOnPageLoad" | i18n }}</bit-label>
          <select
            bitInput
            id="defaultAutofill"
            (change)="updateAutofillOnPageLoadDefault()"
            [(ngModel)]="autofillOnPageLoadDefault"
            [disabled]="!enableAutofillOnPageLoad"
          >
            <option
              *ngFor="let o of autofillOnPageLoadOptions"
              [ngValue]="o.value"
              [label]="o.name"
            ></option>
          </select>
          <bit-hint class="tw-text-sm">
            {{ "defaultAutoFillOnPageLoadDesc" | i18n }}
          </bit-hint>
        </bit-form-field>
      </bit-card>
    </bit-section>
    <bit-section>
      <bit-section-header>
        <h2 bitTypography="h5">{{ "additionalOptions" | i18n }}</h2>
      </bit-section-header>
      <bit-card>
        <bit-form-control>
          <input
            bitCheckbox
            id="context-menu"
            type="checkbox"
            (change)="updateContextMenuItem()"
            [(ngModel)]="enableContextMenuItem"
          />
          <bit-label for="context-menu">{{ "enableContextMenuItem" | i18n }}</bit-label>
        </bit-form-control>
        <bit-form-control>
          <input
            bitCheckbox
            id="totp"
            type="checkbox"
            (change)="updateAutoTotpCopy()"
            [(ngModel)]="enableAutoTotpCopy"
          />
          <bit-label for="totp">{{ "enableAutoTotpCopy" | i18n }}</bit-label>
        </bit-form-control>
        <bit-form-field>
          <bit-label for="clearClipboard">{{ "clearClipboard" | i18n }}</bit-label>
          <select
            aria-describedby="clearClipboardHelp"
            bitInput
            id="clearClipboard"
            (change)="saveClearClipboard()"
            [(ngModel)]="clearClipboard"
          >
            <option
              *ngFor="let o of clearClipboardOptions"
              [label]="o.name"
              [ngValue]="o.value"
            ></option>
          </select>
          <bit-hint class="tw-text-sm" id="clearClipboardHelp">
            {{ "clearClipboardDesc" | i18n }}
          </bit-hint>
        </bit-form-field>
        <bit-form-field>
          <bit-label for="defaultUriMatch">{{ "defaultUriMatchDetection" | i18n }}</bit-label>
          <select
            aria-describedby="defaultUriMatchHelp"
            bitInput
            id="defaultUriMatch"
            (change)="saveDefaultUriMatch()"
            [(ngModel)]="defaultUriMatch"
          >
            <option *ngFor="let o of uriMatchOptions" [label]="o.name" [ngValue]="o.value"></option>
          </select>
          <bit-hint class="tw-text-sm" id="defaultUriMatchHelp">
            {{ "defaultUriMatchDetectionDesc" | i18n }}
          </bit-hint>
        </bit-form-field>
      </bit-card>
    </bit-section>
  </div>
</popup-page>