Resolved Safari Date/Time Issues In Send (#992)

* cleaned up date and time logic for Send

* updated jslib

* set up change detection for initial form values on data swap

jslib

@@ -1 +1 @@
-Subproject commit 119699b82c26296cdd518c0c66e0cd3d61586309
+Subproject commit 58be5796b0c2b19aacf52d4a1c179aeb80924443

src/app/app.module.ts

@@ -9,7 +9,7 @@ import { ServicesModule } from './services.module';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { DatePipe } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -61,6 +61,7 @@ import { VaultComponent } from './vault/vault.component';
 import { ViewComponent } from './vault/view.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 { NavComponent } from './layout/nav.component';
@@ -158,14 +159,15 @@ registerLocaleData(localeZhTw, 'zh-TW');
 
 @NgModule({
     imports: [
-        BrowserModule,
-        BrowserAnimationsModule,
-        FormsModule,
         AppRoutingModule,
+        BrowserAnimationsModule,
+        BrowserModule,
+        DragDropModule,
+        FormsModule,
+        InfiniteScrollModule,
+        ReactiveFormsModule,
         ServicesModule,
         ToasterModule.forRoot(),
-        InfiniteScrollModule,
-        DragDropModule,
     ],
     declarations: [
         A11yTitleDirective,
@@ -200,6 +202,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         SearchCiphersPipe,
         SelectCopyDirective,
         SendAddEditComponent,
+        SendEffluxDatesComponent,
         SendComponent,
         SetPasswordComponent,
         SettingsComponent,

src/app/send/add-edit.component.html

@@ -66,38 +66,10 @@
                 </div>
             </div>
             <div [hidden]="!showOptions">
-                <div class="box">
+                <app-send-efflux-dates
-                    <div class="box-content">
+                    [initialDeletionDate]="send.deletionDate" [initialExpirationDate]="send.expirationDate" 
-                        <div class="box-content-row" appBoxRow *ngIf="!editMode">
+                    [editMode]="editMode" [disabled]="disableSend" (datesChanged)="setDates($event)">
-                            <label for="deletionDate">{{'deletionDate' | i18n}}</label>
+                </app-send-efflux-dates>
-                            <select id="deletionDate" name="DeletionDateSelect" [(ngModel)]="deletionDateSelect" required>
-                                <option *ngFor="let o of deletionDateOptions" [ngValue]="o.value">{{o.name}}
-                                </option>
-                            </select>
-                            <small class="help-block">{{'deletionDateDesc' | i18n}}</small>
-                        </div>
-                        <div class="box-content-row" *ngIf="deletionDateSelect === 0 || editMode">
-                            <label *ngIf="editMode" for="deletionDateCustom">{{'deletionDate' | i18n}}</label>
-                            <input id="deletionDateCustom" type="datetime-local" name="deletionDate" 
-                                [(ngModel)]="deletionDate" required placeholder="MM/DD/YYYY HH:MM AM/PM">
-                            <small class="help-block" *ngIf="editMode">{{'deletionDateDesc' | i18n}}</small>
-                        </div>
-                        <div class="box-content-row" appBoxRow *ngIf="!editMode">
-                            <label for="expirationDate">{{'expirationDate' | i18n}}</label>
-                            <select id="expirationDate" name="expirationDateSelect" [(ngModel)]="expirationDateSelect" required>
-                                <option *ngFor="let o of expirationDateOptions" [ngValue]="o.value">{{o.name}}
-                                </option>
-                            </select>
-                            <small class="help-block">{{'expirationDateDesc' | i18n}}</small>
-                        </div>
-                        <div class="box-content-row" *ngIf="expirationDateSelect === 0 || editMode">
-                            <label *ngIf="editMode" for="expirationDateCustom">{{'expirationDate' | i18n}}</label>
-                            <input id="expirationDateCustom" type="datetime-local" name="expirationDate" 
-                                [(ngModel)]="expirationDate" required placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
-                            <small *ngIf="editMode" class="help-block">{{'expirationDateDesc' | i18n}}</small>
-                        </div>
-                    </div>
-                </div>
                 <div class="box">
                     <div class="box-content">
                         <div class="box-content-row" appBoxRow>

src/app/send/add-edit.component.ts

@@ -30,8 +30,6 @@ export class AddEditComponent extends BaseAddEditComponent {
         const send = await this.loadSend();
         this.send = await send.decrypt();
         this.hasPassword = this.send.password != null && this.send.password.trim() !== '';
-        this.deletionDate = this.dateToString(this.send.deletionDate);
-        this.expirationDate = this.dateToString(this.send.expirationDate);
     }
 
     cancel() {

src/app/send/efflux-dates.component.html

@@ -0,0 +1,35 @@
+<ng-container [formGroup]="datesForm">
+    <div class="box">
+        <div class="box-content">
+            <div class="box-content-row" appBoxRow *ngIf="!editMode">
+                <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>
+                <small class="help-block">{{'deletionDateDesc' | i18n}}</small>
+            </div>
+            <div class="box-content-row" *ngIf="selectedDeletionDatePreset.value === 0 || editMode">
+                <label *ngIf="editMode" for="deletionDateCustom">{{'deletionDate' | i18n}}</label>
+                <input id="deletionDateCustom" type="datetime-local" name="deletionDate" 
+                    formControlName="defaultDeletionDateTime" required placeholder="MM/DD/YYYY HH:MM AM/PM">
+                <small class="help-block" *ngIf="editMode">{{'deletionDateDesc' | i18n}}</small>
+            </div>
+            <div class="box-content-row" appBoxRow *ngIf="!editMode">
+                <label for="expirationDate">{{'expirationDate' | i18n}}</label>
+                <select id="expirationDate" name="expirationDateSelect" formControlName="selectedExpirationDatePreset" required>
+                    <option *ngFor="let o of expirationDatePresets" [ngValue]="o.value">{{o.name}}
+                    </option>
+                </select>
+                <small class="help-block">{{'expirationDateDesc' | i18n}}</small>
+            </div>
+            <div class="box-content-row" *ngIf="selectedExpirationDatePreset.value === 0 || editMode">
+                <label *ngIf="editMode" for="expirationDateCustom">{{'expirationDate' | i18n}}</label>
+                <input id="expirationDateCustom" type="datetime-local" name="expirationDate" 
+                    formControlName="defaultExpirationDateTime" required placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
+                <small *ngIf="editMode" class="help-block">{{'expirationDateDesc' | i18n}}</small>
+            </div>
+        </div>
+    </div>
+</ng-container>
+

src/app/send/efflux-dates.component.ts

@@ -0,0 +1,37 @@
+import { DatePipe } from '@angular/common';
+
+import {
+    Component,
+    OnChanges,
+    SimpleChanges,
+} 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 implements OnChanges {
+    constructor(protected i18nService: I18nService, protected platformUtilsService: PlatformUtilsService,
+        protected datePipe: DatePipe) {
+        super(i18nService, platformUtilsService, datePipe);
+    }
+
+    // We reuse the same form on desktop and just swap content, so need to watch these to maintin proper values.
+    ngOnChanges() {
+        if (this.initialExpirationDate) {
+            this.defaultExpirationDateTime.setValue(
+                this.datePipe.transform(new Date(this.initialExpirationDate), 'yyyy-MM-ddTHH:mm'));
+        } else {
+            this.defaultExpirationDateTime.setValue(null);
+        }
+        this.defaultDeletionDateTime.setValue(this.datePipe.transform(new Date(this.initialDeletionDate), 'yyyy-MM-ddTHH:mm'));
+    }
+}