210 lines
7.1 KiB
HTML
210 lines
7.1 KiB
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"
|
|
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 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"
|
|
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 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"
|
|
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"
|
|
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"
|
|
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"
|
|
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"
|
|
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"
|
|
formControlName="defaultExpirationDateTime"
|
|
required
|
|
placeholder="MM/DD/YYYY HH:MM AM/PM"
|
|
[readOnly]="disabled"
|
|
/>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-template>
|
|
</ng-container>
|