From ba6d61a5106aae900e768320e78d45697bf688fe Mon Sep 17 00:00:00 2001
From: Addison Beck <abeck@bitwarden.com>
Date: Fri, 16 Jul 2021 14:31:35 -0400
Subject: [PATCH] Resolved Safari Date/Time Issues In Send (#1084)

* cleaned up date and time logic for Send

* updated jslib

* updated jslib
---
 jslib                                    |   2 +-
 src/app/oss.module.ts                    |   5 +-
 src/app/send/add-edit.component.html     |  87 +------------------
 src/app/send/efflux-dates.component.html | 103 +++++++++++++++++++++++
 src/app/send/efflux-dates.component.ts   |  22 +++++
 5 files changed, 134 insertions(+), 85 deletions(-)
 create mode 100644 src/app/send/efflux-dates.component.html
 create mode 100644 src/app/send/efflux-dates.component.ts

diff --git a/jslib b/jslib
index 75fff66f98..58be5796b0 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 75fff66f98e3d174baf369afbb747c1380fad4d4
+Subproject commit 58be5796b0c2b19aacf52d4a1c179aeb80924443
diff --git a/src/app/oss.module.ts b/src/app/oss.module.ts
index 570b204284..3f51aa9b59 100644
--- a/src/app/oss.module.ts
+++ b/src/app/oss.module.ts
@@ -5,7 +5,7 @@ import {
 } from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
 import { ToasterModule } from 'angular2-toaster';
@@ -99,6 +99,7 @@ import { VaultComponent as OrgVaultComponent } from './organizations/vault/vault
 
 import { AccessComponent } from './send/access.component';
 import { AddEditComponent as SendAddEditComponent } from './send/add-edit.component';
+import { EffluxDatesComponent as SendEffluxDatesComponent } from './send/efflux-dates.component';
 import { SendComponent } from './send/send.component';
 
 import { AccountComponent } from './settings/account.component';
@@ -275,6 +276,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         InfiniteScrollModule,
         DragDropModule,
         ToasterModule.forChild(),
+        ReactiveFormsModule,
         RouterModule,
     ],
     declarations: [
@@ -398,6 +400,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         SearchPipe,
         SelectCopyDirective,
         SendAddEditComponent,
+        SendEffluxDatesComponent,
         SendComponent,
         SettingsComponent,
         ShareComponent,
diff --git a/src/app/send/add-edit.component.html b/src/app/send/add-edit.component.html
index cceefa7a54..d852d4b8d2 100644
--- a/src/app/send/add-edit.component.html
+++ b/src/app/send/add-edit.component.html
@@ -92,89 +92,10 @@
                     </a>
                 </div>
                 <div id="options" [hidden]="!showOptions">
-                    <div class="row">
-                        <div class="col-6 form-group">
-                            <label for="deletionDate">{{'deletionDate' | i18n}}</label>
-                            <ng-template #deletionDateCustom>
-                                <ng-container *ngIf="isDateTimeLocalSupported">
-                                    <input id="deletionDateCustom" class="form-control mt-1" type="datetime-local"
-                                        name="DeletionDate" [(ngModel)]="deletionDate" required
-                                        placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
-                                </ng-container>
-                                <div *ngIf="!isDateTimeLocalSupported" class="d-flex justify-content-around">
-                                    <input id="deletionDateCustomFallback" class="form-control mt-1" type="date"
-                                        name="DeletionDateFallback" [(ngModel)]="deletionDateFallback" required
-                                        placeholder="MM/DD/YYYY" [readOnly]="disableSend" data-date-format="mm/dd/yyyy">
-                                    <select *ngIf="isSafari" id="deletionTimeCustomFallback" class="form-control mt-1 ml-1" [required]="!editMode"
-                                        [(ngModel)]="safariDeletionTime" name="SafariDeletionTime">
-                                        <option *ngFor="let o of safariDeletionTimeOptions" [value]="o.military">{{o.standard}}</option>
-                                    </select>
-                                    <input *ngIf="!isSafari" id="deletionTimeCustomFallback" class="form-control mt-1 ml-1" type="time"
-                                        name="DeletionTimeDate" [(ngModel)]="deletionTimeFallback" required
-                                        placeholder="HH:MM AM/PM" [readOnly]="disableSend">
-                                </div>
-                            </ng-template>
-                            <div *ngIf="!editMode">
-                                <select id="deletionDate" name="DeletionDateSelect" [(ngModel)]="deletionDateSelect"
-                                    class="form-control" required>
-                                    <option *ngFor="let o of deletionDateOptions" [ngValue]="o.value">{{o.name}}
-                                    </option>
-                                </select>
-                                <ng-container *ngIf="deletionDateSelect === 0">
-                                    <ng-container *ngTemplateOutlet="deletionDateCustom">
-                                    </ng-container>
-                                </ng-container>
-                            </div>
-                            <div *ngIf="editMode">
-                                <ng-container *ngTemplateOutlet="deletionDateCustom">
-                                </ng-container>
-                            </div>
-                            <div class="form-text text-muted small">{{'deletionDateDesc' | i18n}}</div>
-                        </div>
-                        <div class="col-6 form-group">
-                            <div class="d-flex">
-                                <label for="expirationDate">{{'expirationDate' | i18n}}</label>
-                                <a href="#" appStopClick (click)="clearExpiration()" class="ml-auto"
-                                    *ngIf="editMode && !disableSend">
-                                    {{'clear' | i18n}}
-                                </a>
-                            </div>
-                            <ng-template #expirationDateCustom>
-                                <ng-container *ngIf="isDateTimeLocalSupported">
-                                    <input id="expirationDateCustom" class="form-control mt-1" type="datetime-local"
-                                        name="ExpirationDate" [(ngModel)]="expirationDate" placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
-                                </ng-container>
-                                <div class="d-flex justify-content-around" *ngIf="!isDateTimeLocalSupported">
-                                    <input id="expirationDateCustomFallback" class="form-control mt-1" type="date"
-                                        name="ExpirationDateFallback" [(ngModel)]="expirationDateFallback" [required]="!editMode"
-                                        placeholder="MM/DD/YYYY" [readOnly]="disableSend" data-date-format="mm/dd/yyyy" (change)="expirationDateFallbackChanged()">
-                                        <select *ngIf="isSafari" id="expirationTimeCustomFallback" class="form-control mt-1 ml-1" [required]="!editMode"
-                                            [(ngModel)]="safariExpirationTime" name="SafariExpirationTime">
-                                            <option *ngFor="let o of safariExpirationTimeOptions" [ngValue]="o.military">{{o.standard}}</option>
-                                        </select>
-                                        <input *ngIf="!isSafari" id="expirationTimeCustomFallback" class="form-control mt-1 ml-1" type="time"
-                                            name="ExpirationTimeFallback" [(ngModel)]="expirationTimeFallback" [required]="!editMode"
-                                            placeholder="HH:MM AM/PM" [readOnly]="disableSend">
-                                </div>
-                            </ng-template>
-                            <div *ngIf="!editMode">
-                                <select id="expirationDate" name="ExpirationDateSelect"
-                                    [(ngModel)]="expirationDateSelect" class="form-control" required>
-                                    <option *ngFor="let o of expirationDateOptions" [ngValue]="o.value">{{o.name}}
-                                    </option>
-                                </select>
-                                <ng-container *ngIf="expirationDateSelect === 0">
-                                    <ng-container *ngTemplateOutlet="expirationDateCustom">
-                                    </ng-container>
-                                </ng-container>
-                            </div>
-                            <div *ngIf="editMode">
-                                <ng-container *ngTemplateOutlet="expirationDateCustom">
-                                </ng-container>
-                            </div>
-                            <div class="form-text text-muted small">{{'expirationDateDesc' | i18n}}</div>
-                        </div>
-                    </div>
+                    <app-send-efflux-dates
+                        [initialDeletionDate]="send.deletionDate" [initialExpirationDate]="send.expirationDate" 
+                        [editMode]="editMode" [disabled]="disableSend" (datesChanged)="setDates($event)">
+                    </app-send-efflux-dates>
                     <div class="row">
                         <div class="col-6 form-group">
                             <label for="maxAccessCount">{{'maxAccessCount' | i18n}}</label>
diff --git a/src/app/send/efflux-dates.component.html b/src/app/send/efflux-dates.component.html
new file mode 100644
index 0000000000..e3a4571188
--- /dev/null
+++ b/src/app/send/efflux-dates.component.html
@@ -0,0 +1,103 @@
+<div class="row" [formGroup]="datesForm">
+    <div class="col-6 form-group">
+        <label for="deletionDate">{{'deletionDate' | i18n}}</label>
+        <ng-template #deletionDateCustom>
+            <ng-container [ngSwitch]="browserPath">
+                <ng-container *ngSwitchCase="'firefox'">
+                    <div class="d-flex justify-content-around">
+                        <input id="deletionDateCustomFallback" class="form-control mt-1" type="date"
+                            name="DeletionDateFallback" formControlName="fallbackDeletionDate" required
+                            placeholder="MM/DD/YYYY" [readOnly]="disableSend" data-date-format="mm/dd/yyyy">
+                        <input id="deletionTimeCustomFallback" class="form-control mt-1 ml-1" type="time"
+                            name="DeletionTimeDate" formControlName="fallbackDeletionTime" required
+                            placeholder="HH:MM AM/PM" [readOnly]="disableSend">
+                    </div>
+                </ng-container>
+                <ng-container *ngSwitchCase="'safari'">
+                    <div class="d-flex justify-content-around">
+                        <input id="deletionDateCustomFallback" class="form-control mt-1" type="date"
+                            name="DeletionDateFallback" formControlName="fallbackDeletionDate" required
+                            placeholder="MM/DD/YYYY" [readOnly]="disableSend" data-date-format="mm/dd/yyyy">
+                        <select id="deletionTimeCustomFallback" class="form-control mt-1 ml-1" [required]="!editMode"
+                            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" class="form-control mt-1" type="datetime-local"
+                        name="DeletionDate" formControlName="defaultDeletionDateTime" required
+                        placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disabled">
+                </ng-container>
+            </ng-container>
+        </ng-template>
+        <div *ngIf="!editMode">
+            <select id="deletionDate" name="SelectedDeletionDatePreset"
+                formControlName="selectedDeletionDatePreset" class="form-control" required>
+                <option *ngFor="let o of deletionDatePresets" [ngValue]="o.value">{{o.name}}
+                </option>
+            </select>
+            <ng-container *ngIf="selectedDeletionDatePreset.value === 0">
+                <ng-container *ngTemplateOutlet="deletionDateCustom">
+                </ng-container>
+            </ng-container>
+        </div>
+        <div *ngIf="editMode">
+            <ng-container *ngTemplateOutlet="deletionDateCustom">
+            </ng-container>
+        </div>
+        <div class="form-text text-muted small">{{'deletionDateDesc' | i18n}}</div>
+    </div>
+    <div class="col-6 form-group">
+        <div class="d-flex">
+            <label for="expirationDate">{{'expirationDate' | i18n}}</label>
+            <a href="#" appStopClick (click)="clearExpiration()" class="ml-auto"
+                *ngIf="editMode && !disabled">
+                {{'clear' | i18n}}
+            </a>
+        </div>
+        <ng-template #expirationDateCustom>
+            <ng-container [ngSwitch]="browserPath">
+                <div *ngSwitchCase="'firefox'" class="d-flex justify-content-around">
+                    <input id="expirationDateCustomFallback" class="form-control mt-1" type="date"
+                        name="ExpirationDateFallback" formControlName="fallbackExpirationDate" [required]="!editMode"
+                        placeholder="MM/DD/YYYY" [readOnly]="disabled" data-date-format="mm/dd/yyyy">
+                    <input id="expirationTimeCustomFallback" class="form-control mt-1 ml-1" type="time"
+                        name="ExpirationTimeFallback" formControlName="fallbackExpirationTime" [required]="!editMode"
+                        placeholder="HH:MM AM/PM" [readOnly]="disabled">
+                </div>
+                <!-- non-default cases are not showing up -->
+                <div *ngSwitchCase="'safari'" class="d-flex justify-content-around">
+                    <input id="expirationDateCustomFallback" class="form-control mt-1" type="date"
+                        name="ExpirationDateFallback" formControlName="fallbackExpirationDate" [required]="!editMode"
+                        placeholder="MM/DD/YYYY" [readOnly]="disabled" data-date-format="mm/dd/yyyy">
+                    <select id="expirationTimeCustomFallback" class="form-control mt-1 ml-1" [required]="!editMode"
+                        formControlName="fallbackExpirationTime" name="SafariExpirationTime">
+                        <option *ngFor="let o of safariExpirationTimePresetOptions" [ngValue]="o.twentyFourHour">{{o.twelveHour}}</option>
+                    </select>
+                </div>
+                <ng-container *ngSwitchDefault>
+                    <input id="expirationDateCustom" class="form-control mt-1" type="datetime-local"
+                        name="ExpirationDate" formControlName="defaultExpirationDateTime" placeholder="MM/DD/YYYY HH:MM AM/PM" 
+                        [readOnly]="disabled">
+                </ng-container>
+            </ng-container>
+        </ng-template>
+        <div *ngIf="!editMode">
+            <select id="expirationDate" name="SelectedExpirationDatePreset"
+                formControlName="selectedExpirationDatePreset" class="form-control" required>
+                <option *ngFor="let o of expirationDatePresets" [ngValue]="o.value">{{o.name}}
+                </option>
+            </select>
+            <ng-container *ngIf="selectedExpirationDatePreset.value === 0">
+                <ng-container *ngTemplateOutlet="expirationDateCustom">
+                </ng-container>
+            </ng-container>
+        </div>
+        <div *ngIf="editMode">
+            <ng-container *ngTemplateOutlet="expirationDateCustom">
+            </ng-container>
+        </div>
+        <div class="form-text text-muted small">{{'expirationDateDesc' | i18n}}</div>
+    </div>
+</div>
diff --git a/src/app/send/efflux-dates.component.ts b/src/app/send/efflux-dates.component.ts
new file mode 100644
index 0000000000..2ac82e652b
--- /dev/null
+++ b/src/app/send/efflux-dates.component.ts
@@ -0,0 +1,22 @@
+import { DatePipe } from '@angular/common';
+
+import { Component } from '@angular/core';
+
+import { ControlContainer, NgForm } from '@angular/forms';
+
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+
+import { EffluxDatesComponent as BaseEffluxDatesComponent } from 'jslib-angular/components/send/efflux-dates.component';
+
+@Component({
+    selector: 'app-send-efflux-dates',
+    templateUrl: 'efflux-dates.component.html',
+    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+})
+export class EffluxDatesComponent extends BaseEffluxDatesComponent {
+    constructor(protected i18nService: I18nService, protected platformUtilsService: PlatformUtilsService,
+        protected datePipe: DatePipe) {
+        super(i18nService, platformUtilsService, datePipe);
+    }
+}