bitwarden-estensione-browser/apps/browser/src/popup/settings/options.component.html

<header>
  <div class="left">
    <button type="button" routerLink="/tabs/settings">
      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
      <span>{{ "back" | i18n }}</span>
    </button>
  </div>
  <h1 class="center">
    <span class="title">{{ "options" | i18n }}</span>
  </h1>
  <div class="right"></div>
</header>
<main tabindex="-1">
  <div class="box">
    <h2>
      <button
        type="button"
        class="box-header-expandable"
        (click)="showGeneral = !showGeneral"
        [attr.aria-expanded]="showGeneral"
      >
        <i *ngIf="!showGeneral" class="bwi bwi-angle-right bwi-sm icon" aria-hidden="true"></i>
        <i *ngIf="showGeneral" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
        General
      </button>
    </h2>
  </div>
  <ng-container *ngIf="showGeneral">
    <div class="box">
      <div class="box-content">
        <div class="box-content-row" appBoxRow>
          <label for="defaultUriMatch">{{ "defaultUriMatchDetection" | i18n }}</label>
          <select
            id="defaultUriMatch"
            name="DefaultUriMatch"
            aria-describedby="defaultUriMatchHelp"
            [(ngModel)]="defaultUriMatch"
            (change)="saveDefaultUriMatch()"
          >
            <option *ngFor="let o of uriMatchOptions" [ngValue]="o.value">{{ o.name }}</option>
          </select>
        </div>
      </div>
      <div id="defaultUriMatchHelp" class="box-footer">
        {{ "defaultUriMatchDetectionDesc" | i18n }}
      </div>
    </div>
    <div class="box" *ngIf="showClearClipboard">
      <div class="box-content">
        <div class="box-content-row" appBoxRow>
          <label for="clearClipboard">{{ "clearClipboard" | i18n }}</label>
          <select
            id="clearClipboard"
            name="ClearClipboard"
            aria-describedby="clearClipboardHelp"
            [(ngModel)]="clearClipboard"
            (change)="saveClearClipboard()"
          >
            <option *ngFor="let o of clearClipboardOptions" [ngValue]="o.value">
              {{ o.name }}
            </option>
          </select>
        </div>
      </div>
      <div id="clearClipboardHelp" class="box-footer">{{ "clearClipboardDesc" | i18n }}</div>
    </div>
    <div class="box">
      <div class="box-content">
        <div class="box-content-row box-content-row-checkbox" appBoxRow>
          <label for="totp">{{ "enableAutoTotpCopy" | i18n }}</label>
          <input
            id="totp"
            type="checkbox"
            aria-describedby="totpHelp"
            (change)="updateAutoTotpCopy()"
            [(ngModel)]="enableAutoTotpCopy"
          />
        </div>
      </div>
      <div id="totpHelp" class="box-footer">{{ "disableAutoTotpCopyDesc" | i18n }}</div>
    </div>
    <div class="box">
      <div class="box-content">
        <div class="box-content-row box-content-row-checkbox" appBoxRow>
          <label for="addlogin-notification-bar">{{ "enableAddLoginNotification" | i18n }}</label>
          <input
            id="addlogin-notification-bar"
            type="checkbox"
            aria-describedby="addlogin-notification-barHelp"
            (change)="updateAddLoginNotification()"
            [(ngModel)]="enableAddLoginNotification"
          />
        </div>
      </div>
      <div id="addlogin-notification-barHelp" class="box-footer">
        {{ "addLoginNotificationDesc" | i18n }}
      </div>
    </div>
    <div class="box">
      <div class="box-content">
        <div class="box-content-row box-content-row-checkbox" appBoxRow>
          <label for="changedpass-notification-bar">{{
            "enableChangedPasswordNotification" | i18n
          }}</label>
          <input
            id="changedpass-notification-bar"
            type="checkbox"
            aria-describedby="changedpass-notification-barHelp"
            (change)="updateChangedPasswordNotification()"
            [(ngModel)]="enableChangedPasswordNotification"
          />
        </div>
      </div>
      <div id="changedpass-notification-barHelp" class="box-footer">
        {{ "changedPasswordNotificationDesc" | i18n }}
      </div>
    </div>
    <div class="box">
      <div class="box-content">
        <div class="box-content-row box-content-row-checkbox" appBoxRow>
          <label for="context-menu">{{ "enableContextMenuItem" | i18n }}</label>
          <input
            id="context-menu"
            type="checkbox"
            aria-describedby="context-menuHelp"
            (change)="updateContextMenuItem()"
            [(ngModel)]="enableContextMenuItem"
          />
        </div>
      </div>
      <div id="context-menuHelp" class="box-footer">{{ "contextMenuItemDesc" | i18n }}</div>
    </div>
  </ng-container>
  <div class="box box-section-divider">
    <h2>
      <button
        type="button"
        class="box-header-expandable"
        (click)="showDisplay = !showDisplay"
        [attr.aria-expanded]="showDisplay"
      >
        <i *ngIf="!showDisplay" class="bwi bwi-angle-right bwi-sm icon" aria-hidden="true"></i>
        <i *ngIf="showDisplay" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
        Display
      </button>
    </h2>
  </div>
  <ng-container *ngIf="showDisplay">
    <div class="box">
      <div class="box-content">
        <div class="box-content-row box-content-row-checkbox" appBoxRow>
          <label for="showCardsCurrentTab">{{ "showCardsCurrentTab" | i18n }}</label>
          <input
            id="showCardsCurrentTab"
            type="checkbox"
            aria-describedby="showCardsCurrentTabHelp"
            (change)="updateShowCardsCurrentTab()"
            [(ngModel)]="showCardsCurrentTab"
          />
        </div>
      </div>
      <div id="showCardsCurrentTabHelp" class="box-footer">
        {{ "showCardsCurrentTabDesc" | i18n }}
      </div>
    </div>
    <div class="box">
      <div class="box-content">
        <div class="box-content-row box-content-row-checkbox" appBoxRow>
          <label for="showIdentitiesCurrentTab">{{ "showIdentitiesCurrentTab" | i18n }}</label>
          <input
            id="showIdentitiesCurrentTab"
            type="checkbox"
            aria-describedby="showIdentitiesCurrentTabHelp"
            (change)="updateShowIdentitiesCurrentTab()"
            [(ngModel)]="showIdentitiesCurrentTab"
          />
        </div>
      </div>
      <div id="showIdentitiesCurrentTabHelp" class="box-footer">
        {{ "showIdentitiesCurrentTabDesc" | i18n }}
      </div>
    </div>
    <div class="box">
      <div class="box-content">
        <div class="box-content-row box-content-row-checkbox" appBoxRow>
          <label for="favicon">{{ "enableFavicon" | i18n }}</label>
          <input
            id="favicon"
            type="checkbox"
            aria-describedby="faviconHelp"
            (change)="updateFavicon()"
            [(ngModel)]="enableFavicon"
          />
        </div>
      </div>
      <div id="faviconHelp" class="box-footer">{{ "faviconDesc" | i18n }}</div>
    </div>
    <div class="box">
      <div class="box-content">
        <div class="box-content-row box-content-row-checkbox" appBoxRow>
          <label for="badge">{{ "enableBadgeCounter" | i18n }}</label>
          <input
            id="badge"
            type="checkbox"
            aria-describedby="badgeHelp"
            (change)="updateBadgeCounter()"
            [(ngModel)]="enableBadgeCounter"
          />
        </div>
      </div>
      <div id="badgeHelp" class="box-footer">{{ "badgeCounterDesc" | i18n }}</div>
    </div>
    <div class="box">
      <div class="box-content">
        <div class="box-content-row" appBoxRow>
          <label for="theme">{{ "theme" | i18n }}</label>
          <select
            id="theme"
            name="Theme"
            aria-describedby="themeHelp"
            [(ngModel)]="theme"
            (change)="saveTheme()"
          >
            <option *ngFor="let o of themeOptions" [ngValue]="o.value">{{ o.name }}</option>
          </select>
        </div>
      </div>
      <div id="themeHelp" class="box-footer">{{ "themeDesc" | i18n }}</div>
    </div>
  </ng-container>
  <div class="box box-section-divider">
    <h2>
      <button
        type="button"
        class="box-header-expandable"
        (click)="showAutofill = !showAutofill"
        [attr.aria-expanded]="showAutofill"
      >
        <i *ngIf="!showAutofill" class="bwi bwi-angle-right bwi-sm icon" aria-hidden="true"></i>
        <i *ngIf="showAutofill" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
        Autofill
      </button>
    </h2>
  </div>
  <ng-container *ngIf="showAutofill">
    <div class="box">
      <div class="box-content">
        <div class="box-content-row box-content-row-checkbox" appBoxRow>
          <label for="autofill">{{ "enableAutoFillOnPageLoad" | i18n }}</label>
          <input
            id="autofill"
            type="checkbox"
            aria-describedby="autofillHelp"
            (change)="updateAutoFillOnPageLoad()"
            [(ngModel)]="enableAutoFillOnPageLoad"
          />
        </div>
      </div>
      <div id="autofillHelp" class="box-footer">
        {{ "enableAutoFillOnPageLoadDesc" | i18n }}
        <b>{{ "warning" | i18n }}</b
        >: {{ "experimentalFeature" | i18n }}
      </div>
    </div>
    <div class="box">
      <div class="box-content">
        <div class="box-content-row" appBoxRow>
          <label for="defaultAutofill">{{ "defaultAutoFillOnPageLoad" | i18n }}</label>
          <select
            id="defaultAutofill"
            name="DefaultAutofill"
            aria-describedby="defaultAutofillHelp"
            [(ngModel)]="autoFillOnPageLoadDefault"
            (change)="updateAutoFillOnPageLoadDefault()"
            [disabled]="!enableAutoFillOnPageLoad"
          >
            <option *ngFor="let o of autoFillOnPageLoadOptions" [ngValue]="o.value">
              {{ o.name }}
            </option>
          </select>
        </div>
      </div>
      <div id="defaultAutofillHelp" class="box-footer">
        {{ "defaultAutoFillOnPageLoadDesc" | i18n }}
      </div>
    </div>
  </ng-container>
</main>