From c2515ed3ae3a3204c439fbd46730f87240d6d039 Mon Sep 17 00:00:00 2001
From: Addison Beck <abeck@bitwarden.com>
Date: Tue, 2 Mar 2021 14:02:15 -0500
Subject: [PATCH] added date/time fallbacks for safari/ff (#861)

* added date/time fallbacks for safari/ff

* updated jslib
---
 jslib                                |  2 +-
 package.json                         |  1 +
 src/app/send/add-edit.component.html | 56 +++++++++++++++++++++-------
 3 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/jslib b/jslib
index 3942868cf4..36089fd68f 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 3942868cf488ed8c1983ffadab2c8900b8c78410
+Subproject commit 36089fd68f9f7bb558aa3057f713d8a67eff05f9
diff --git a/package.json b/package.json
index 2ada190291..53e30123f6 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "braintree-web-drop-in": "1.13.0",
     "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#410a9186cc34663c4913b17d6528067cd3331f1d",
     "font-awesome": "4.7.0",
     "jquery": "3.4.1",
diff --git a/src/app/send/add-edit.component.html b/src/app/send/add-edit.component.html
index 44ef24bbb4..dbedaa6f0f 100644
--- a/src/app/send/add-edit.component.html
+++ b/src/app/send/add-edit.component.html
@@ -89,21 +89,35 @@
                     <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">
+                                    <input 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>
-                                <input id="deletionDateCustom" class="form-control mt-1" type="datetime-local"
-                                    name="DeletionDate" [(ngModel)]="deletionDate" required
-                                    *ngIf="deletionDateSelect === 0" placeholder="MM/DD/YYYY HH:MM AM/PM"
-                                    [readOnly]="disableSend">
+                                <ng-container *ngIf="deletionDateSelect === 0">
+                                    <ng-container *ngTemplateOutlet="deletionDateCustom">
+                                    </ng-container>
+                                </ng-container>
                             </div>
                             <div *ngIf="editMode">
-                                <input id="deletionDate" class="form-control" type="datetime-local" name="DeletionDate"
-                                    [(ngModel)]="deletionDate" required placeholder="MM/DD/YYYY HH:MM AM/PM"
-                                    [readOnly]="disableSend">
+                                <ng-container *ngTemplateOutlet="deletionDateCustom">
+                                </ng-container>
                             </div>
                             <div class="form-text text-muted small">{{'deletionDateDesc' | i18n}}</div>
                         </div>
@@ -115,21 +129,35 @@
                                     {{'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" required
+                                        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
+                                        placeholder="MM/DD/YYYY" [readOnly]="disableSend">
+                                    <input id="expirationTimeCustomFallback" class="form-control mt-1 ml-1" type="time"
+                                        name="ExpirationTimeFallback" [(ngModel)]="expirationTimeFallback" required
+                                        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>
-                                <input id="expirationDateCustom" class="form-control mt-1" type="datetime-local"
-                                    name="ExpirationDate" [(ngModel)]="expirationDate" required
-                                    *ngIf="expirationDateSelect === 0" placeholder="MM/DD/YYYY HH:MM AM/PM"
-                                    [readOnly]="disableSend">
+                                <ng-container *ngIf="expirationDateSelect === 0">
+                                    <ng-container *ngTemplateOutlet="expirationDateCustom">
+                                    </ng-container>
+                                </ng-container>
                             </div>
                             <div *ngIf="editMode">
-                                <input id="expirationDate" class="form-control" type="datetime-local"
-                                    name="ExpirationDate" [(ngModel)]="expirationDate"
-                                    placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
+                                <ng-container *ngTemplateOutlet="expirationDateCustom">
+                                </ng-container>
                             </div>
                             <div class="form-text text-muted small">{{'expirationDateDesc' | i18n}}</div>
                         </div>