bitwarden-estensione-browser/apps/browser/src/popup/send/efflux-dates.component.html

<ng-container [formGroup]="datesForm">
  <div class="box">
    <div class="box-content">
      <ng-container *ngIf="!editMode">
        <div class="box-content-row" appBoxRow>
          <label for="deletionDate">{{ "deletionDate" | i18n }}</label>
          <select
            id="deletionDate"
            name="DeletionDateSelect"
            aria-describedby="deletionDateHelp"
            formControlName="selectedDeletionDatePreset"
            required
          >
            <option *ngFor="let o of deletionDatePresets" [ngValue]="o.value">{{ o.name }}</option>
          </select>
        </div>
        <div class="box-content-row" appBoxRow *ngIf="selectedDeletionDatePreset.value === 0">
          <ng-container *ngTemplateOutlet="deletionDateCustom"></ng-container>
        </div>
      </ng-container>
      <div class="box-content-row" appBoxRow *ngIf="editMode">
        <label for="deletionDate">{{ "deletionDate" | i18n }}</label>
        <ng-container *ngTemplateOutlet="deletionDateCustom"></ng-container>
      </div>
    </div>
    <div id="deletionDateHelp" class="box-footer">
      {{ "deletionDateDesc" | i18n }}
      <ng-container
        *ngIf="
          !inPopout &&
          browserPath == 'firefox' &&
          (editMode || (selectedDeletionDatePreset.value === 0 && !editMode))
        "
      >
        <br />{{ "sendFirefoxCustomDatePopoutMessage1" | i18n }}
        <a (click)="popOutWindow.emit()">{{ "sendFirefoxCustomDatePopoutMessage2" | i18n }}</a>
        {{ "sendFirefoxCustomDatePopoutMessage3" | i18n }}
      </ng-container>
    </div>
  </div>
  <div class="box">
    <div class="box-content">
      <ng-container *ngIf="!editMode">
        <div class="box-content-row" *ngIf="!editMode" appBoxRow>
          <label for="editExpirationDate">{{ "expirationDate" | i18n }}</label>
          <select
            id="expirationDate"
            name="ExpirationDateSelect"
            aria-describedby="expirationDateHelp"
            formControlName="selectedExpirationDatePreset"
            required
          >
            <option *ngFor="let o of expirationDatePresets" [ngValue]="o.value">
              {{ o.name }}
            </option>
          </select>
        </div>
        <div class="box-content-row" *ngIf="selectedExpirationDatePreset.value === 0" appBoxRow>
          <ng-container *ngTemplateOutlet="expirationDateCustom"></ng-container>
        </div>
      </ng-container>
      <div class="box-content-row" *ngIf="editMode" appBoxRow>
        <div class="flex-label">
          <label>{{ "expirationDate" | i18n }}</label>
          <button type="button" *ngIf="!disabled" appStopClick (click)="clearExpiration()">
            {{ "clear" | i18n }}
          </button>
        </div>
        <ng-container *ngTemplateOutlet="expirationDateCustom"></ng-container>
      </div>
    </div>
    <div id="expirationDateHelp" class="box-footer">
      {{ "expirationDateDesc" | i18n }}
      <ng-container
        *ngIf="
          !inPopout &&
          browserPath == 'firefox' &&
          (editMode || (selectedExpirationDatePreset.value === 0 && !editMode))
        "
      >
        <br />{{ "sendFirefoxCustomDatePopoutMessage1" | i18n }}
        <a (click)="popOutWindow.emit()">{{ "sendFirefoxCustomDatePopoutMessage2" | i18n }}</a>
        {{ "sendFirefoxCustomDatePopoutMessage3" | i18n }}
      </ng-container>
    </div>
  </div>
  <ng-template #deletionDateCustom>
    <ng-container [ngSwitch]="browserPath">
      <ng-container *ngSwitchCase="'firefox'">
        <div class="flex flex-grow">
          <input
            id="deletionDateCustomFallback"
            type="date"
            name="DeletionDateFallback"
            aria-describedby="deletionDateHelp"
            formControlName="fallbackDeletionDate"
            required
            placeholder="MM/DD/YYYY"
            [readOnly]="disabled"
            data-date-format="mm/dd/yyyy"
          />
          <input
            id="deletionTimeCustomFallback"
            type="time"
            name="DeletionTimeDate"
            formControlName="fallbackDeletionTime"
            required
            placeholder="HH:MM AM/PM"
            [readOnly]="disabled"
          />
        </div>
      </ng-container>
      <ng-container *ngSwitchCase="'safari'">
        <div class="flex flex-grow">
          <input
            id="deletionDateCustomFallback"
            type="date"
            name="DeletionDateFallback"
            aria-describedby="deletionDateHelp"
            formControlName="fallbackDeletionDate"
            required
            placeholder="MM/DD/YYYY"
            [readOnly]="disabled"
            data-date-format="mm/dd/yyyy"
          />
          <select
            id="deletionTimeCustomFallback"
            formControlName="fallbackDeletionTime"
            name="SafariDeletionTime"
          >
            <option *ngFor="let o of safariDeletionTimePresetOptions" [ngValue]="o.twentyFourHour">
              {{ o.twelveHour }}
            </option>
          </select>
        </div>
      </ng-container>
      <ng-container *ngSwitchDefault>
        <input
          id="deletionDateCustom"
          type="datetime-local"
          name="DeletionDate"
          aria-describedby="deletionDateHelp"
          formControlName="defaultDeletionDateTime"
          required
          placeholder="MM/DD/YYYY HH:MM AM/PM"
        />
      </ng-container>
    </ng-container>
  </ng-template>
  <ng-template #expirationDateCustom>
    <ng-container [ngSwitch]="browserPath">
      <ng-container *ngSwitchCase="'firefox'">
        <div class="flex flex-grow">
          <input
            id="expirationDateCustomFallback"
            type="date"
            name="ExpirationDateFallback"
            aria-describedby="expirationDateHelp"
            formControlName="fallbackExpirationDate"
            [required]="!editMode"
            placeholder="MM/DD/YYYY"
            [readOnly]="disabled"
            data-date-format="mm/dd/yyyy"
          />
          <input
            id="expirationTimeCustomFallback"
            type="time"
            name="ExpirationTimeFallback"
            formControlName="fallbackExpirationTime"
            [required]="!editMode"
            placeholder="HH:MM AM/PM"
            [readOnly]="disabled"
          />
        </div>
      </ng-container>
      <ng-container *ngSwitchCase="'safari'">
        <div class="flex flex-grow">
          <input
            id="expirationDateCustomFallback"
            type="date"
            name="ExpirationDateFallback"
            aria-describedby="expirationDateHelp"
            formControlName="fallbackExpirationDate"
            [required]="!editMode"
            placeholder="MM/DD/YYYY"
            [readOnly]="disabled"
            data-date-format="mm/dd/yyyy"
          />
          <select
            id="expirationTimeCustomFallback"
            formControlName="fallbackExpirationTime"
            name="SafariExpirationTime"
          >
            <option
              *ngFor="let o of safariExpirationTimePresetOptions"
              [ngValue]="o.twentyFourHour"
            >
              {{ o.twelveHour }}
            </option>
          </select>
        </div>
      </ng-container>
      <ng-container *ngSwitchDefault>
        <input
          id="expirationDateCustom"
          type="datetime-local"
          name="ExpirationDate"
          aria-describedby="expirationDateHelp"
          formControlName="defaultExpirationDateTime"
          required
          placeholder="MM/DD/YYYY HH:MM AM/PM"
          [readOnly]="disabled"
        />
      </ng-container>
    </ng-container>
  </ng-template>
</ng-container>