From 50b8f6955cd4561905a969aa8b593b17a400ff6d Mon Sep 17 00:00:00 2001
From: addison <addisonbeck1@gmail.com>
Date: Wed, 3 Mar 2021 15:03:05 -0500
Subject: [PATCH 1/2] implemented date & time fallbacks for safari and FF

---
 jslib                                       |  2 +-
 package.json                                |  1 +
 src/popup/scss/misc.scss                    | 10 ++++
 src/popup/send/send-add-edit.component.html | 54 +++++++++++++++------
 4 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/jslib b/jslib
index 3942868cf4..729ab4f20b 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 3942868cf488ed8c1983ffadab2c8900b8c78410
+Subproject commit 729ab4f20b81d7e465d7570c51cdb67d3cc49e6f
diff --git a/package.json b/package.json
index 86da9258cc..f2be96183b 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,7 @@
     "big-integer": "1.6.36",
     "browser-hrtime": "^1.1.8",
     "core-js": "2.6.2",
+    "date-input-polyfill": "^2.14.0",
     "duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git",
     "font-awesome": "4.7.0",
     "lunr": "2.3.3",
diff --git a/src/popup/scss/misc.scss b/src/popup/scss/misc.scss
index 5d2d666624..9212295394 100644
--- a/src/popup/scss/misc.scss
+++ b/src/popup/scss/misc.scss
@@ -315,3 +315,13 @@ app-vault-icon {
 input[type="password"]::-ms-reveal {
     display: none;
 }
+
+.flex {
+    display: flex;
+
+    &.flex-grow {
+        > * {
+            flex: 1;
+        }
+    }
+}
diff --git a/src/popup/send/send-add-edit.component.html b/src/popup/send/send-add-edit.component.html
index ea8e130a03..d0534b93eb 100644
--- a/src/popup/send/send-add-edit.component.html
+++ b/src/popup/send/send-add-edit.component.html
@@ -116,6 +116,20 @@
             <!-- Deletion Date -->
             <div class="box">
                 <div class="box-content">
+                    <ng-template #deletionDateCustom>
+                        <ng-container *ngIf="isDateTimeLocalSupported">
+                            <input id="deletionDateCustom" type="datetime-local" name="DeletionDate"
+                                [(ngModel)]="deletionDate" required placeholder="MM/DD/YYYY HH:MM AM/PM">
+                        </ng-container>
+                        <div class="flex flex-grow"*ngIf="!isDateTimeLocalSupported">
+                            <input id="deletionDateCustomFallback" type="date"
+                                name="DeletionDateFallback" [(ngModel)]="deletionDateFallback" required
+                                placeholder="MM/DD/YYYY" [readOnly]="disableSend">
+                            <input id="deletionTimeCustomFallback" type="time"
+                                name="DeletionTimeDate" [(ngModel)]="deletionTimeFallback" required
+                                placeholder="HH:MM AM/PM" [readOnly]="disableSend">
+                        </div>
+                    </ng-template>
                     <div class="box-content-row" *ngIf="!editMode">
                         <label for="deletionDate">{{'deletionDate' | i18n}}</label>
                         <select id="deletionDate" name="DeletionDateSelect" [(ngModel)]="deletionDateSelect" required>
@@ -123,16 +137,15 @@
                             </option>
                         </select>
                     </div>
-                    <div class="box-content-row" *ngIf="deletionDateSelect === 0 && !editMode">
-                        <input id="deletionDateCustom" type="datetime-local" name="DeletionDate"
-                            [(ngModel)]="deletionDate" required placeholder="MM/DD/YYYY HH:MM AM/PM">
-                    </div>
-                    <div class="box-content-row" *ngIf="editMode" appBoxRow>
-                        <label for="editDeletionDate">{{'deletionDate' | i18n}}</label>
-                        <input id="editDeletionDate" type="datetime-local" name="EditDeletionDate"
-                            [(ngModel)]="deletionDate" required placeholder="MM/DD/YYYY HH:MM AM/PM"
-                            [readonly]="disableSend">
-                    </div>
+                    <ng-container *ngIf="deletionDateSelect === 0 && !editMode">
+                        <ng-container *ngTemplateOutlet="deletionDateCustom"></ng-container>
+                    </ng-container>
+                    <ng-container *ngIf="editMode" appBoxRow>
+                        <div class="box-content-row">
+                            <label for="editDeletionDate">{{'deletionDate' | i18n}}</label>
+                            <ng-container *ngTemplateOutlet="deletionDateCustom"></ng-container>
+                        </div>
+                    </ng-container>
                 </div>
                 <div class="box-footer">
                     {{'deletionDateDesc' | i18n}}
@@ -141,6 +154,21 @@
             <!-- Expiration Date -->
             <div class="box">
                 <div class="box-content">
+                    <ng-template #expirationDateCustom>
+                        <ng-container *ngIf="isDateTimeLocalSupported">
+                            <input id="expirationDateCustom" class="form-control mt-1" type="datetime-local"
+                                name="ExpirationDate" [(ngModel)]="expirationDate" required
+                                placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
+                        </ng-container>
+                        <div class="flex flex-grow" *ngIf="!isDateTimeLocalSupported">
+                            <input id="expirationDateCustomFallback" class="form-control mt-1" type="date"
+                                name="ExpirationDateFallback" [(ngModel)]="expirationDateFallback" [required]="!editMode"
+                                placeholder="MM/DD/YYYY" [readOnly]="disableSend">
+                            <input 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 class="box-content-row" *ngIf="!editMode">
                         <label for="expirationDate">{{'expirationDate' | i18n}}</label>
                         <select id="expirationDate" name="ExpirationDateSelect" [(ngModel)]="expirationDateSelect"
@@ -150,8 +178,7 @@
                         </select>
                     </div>
                     <div class="box-content-row" *ngIf="expirationDateSelect === 0 && !editMode">
-                        <input id="expirationDateCustom" type="datetime-local" name="ExpirationDate"
-                            [(ngModel)]="expirationDate" required placeholder="MM/DD/YYYY HH:MM AM/PM">
+                        <ng-container *ngTemplateOutlet="expirationDateCustom"></ng-container>
                     </div>
                     <div class="box-content-row" *ngIf="editMode" appBoxRow>
                         <div class="flex-label">
@@ -160,8 +187,7 @@
                                 {{'clear' | i18n}}
                             </a>
                         </div>
-                        <input id="editExpirationDate" type="datetime-local" name="EditExpirationDate"
-                            [(ngModel)]="expirationDate" placeholder="MM/DD/YYYY HH:MM AM/PM" [readonly]="disableSend">
+                        <ng-container *ngTemplateOutlet="expirationDateCustom"></ng-container>
                     </div>
                 </div>
                 <div class="box-footer">

From 290c3b3a697ab8f1cc1c2d5409eb6aa4e67d9e8c Mon Sep 17 00:00:00 2001
From: addison <addisonbeck1@gmail.com>
Date: Thu, 4 Mar 2021 10:48:56 -0500
Subject: [PATCH 2/2] code review fixes

---
 src/popup/send/send-add-edit.component.html | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/popup/send/send-add-edit.component.html b/src/popup/send/send-add-edit.component.html
index d0534b93eb..f2c4b60431 100644
--- a/src/popup/send/send-add-edit.component.html
+++ b/src/popup/send/send-add-edit.component.html
@@ -121,7 +121,7 @@
                             <input id="deletionDateCustom" type="datetime-local" name="DeletionDate"
                                 [(ngModel)]="deletionDate" required placeholder="MM/DD/YYYY HH:MM AM/PM">
                         </ng-container>
-                        <div class="flex flex-grow"*ngIf="!isDateTimeLocalSupported">
+                        <div class="flex flex-grow" *ngIf="!isDateTimeLocalSupported">
                             <input id="deletionDateCustomFallback" type="date"
                                 name="DeletionDateFallback" [(ngModel)]="deletionDateFallback" required
                                 placeholder="MM/DD/YYYY" [readOnly]="disableSend">
@@ -138,7 +138,9 @@
                         </select>
                     </div>
                     <ng-container *ngIf="deletionDateSelect === 0 && !editMode">
-                        <ng-container *ngTemplateOutlet="deletionDateCustom"></ng-container>
+                        <div class="box-content-row">
+                            <ng-container *ngTemplateOutlet="deletionDateCustom"></ng-container>
+                        </div>
                     </ng-container>
                     <ng-container *ngIf="editMode" appBoxRow>
                         <div class="box-content-row">
@@ -156,15 +158,15 @@
                 <div class="box-content">
                     <ng-template #expirationDateCustom>
                         <ng-container *ngIf="isDateTimeLocalSupported">
-                            <input id="expirationDateCustom" class="form-control mt-1" type="datetime-local"
+                            <input id="expirationDateCustom" type="datetime-local"
                                 name="ExpirationDate" [(ngModel)]="expirationDate" required
                                 placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
                         </ng-container>
                         <div class="flex flex-grow" *ngIf="!isDateTimeLocalSupported">
-                            <input id="expirationDateCustomFallback" class="form-control mt-1" type="date"
+                            <input id="expirationDateCustomFallback" type="date"
                                 name="ExpirationDateFallback" [(ngModel)]="expirationDateFallback" [required]="!editMode"
                                 placeholder="MM/DD/YYYY" [readOnly]="disableSend">
-                            <input id="expirationTimeCustomFallback" class="form-control mt-1 ml-1" type="time"
+                            <input id="expirationTimeCustomFallback" type="time"
                                 name="ExpirationTimeFallback" [(ngModel)]="expirationTimeFallback" [required]="!editMode"
                                 placeholder="HH:MM AM/PM" [readOnly]="disableSend">
                         </div>