WIP - send text details

apps/browser/src/_locales/en/messages.json

@@ -2225,6 +2225,9 @@
   "sendTypeText": {
     "message": "Text"
   },
+  "sendTypeTextToShare": {
+    "message": "Text to share"
+  },
   "sendTypeFile": {
     "message": "File"
   },
@@ -2236,13 +2239,16 @@
     "message": "When accessing the Send, hide the text by default",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
+  "hideTextByDefault": {
+    "message": "Hide text by default"
+  },
   "limitSendViews": {
     "message": "Limit views"
   },
   "limitSendViewsHint": {
     "message": "No one can view this Send after the limit is reached. $ACCESSCOUNT$ views",
-    "description": "Displayed under the limit views field on Send"    
+    "description": "Displayed under the limit views field on Send"
-  },  
+  },
   "limitSendViewsHintWithCount": {
     "message": "No one can view this Send after the limit is reached. $ACCESSCOUNT$ views left",
     "description": "Displayed under the limit views field on Send",
@@ -2252,7 +2258,7 @@
         "example": "2"
       }
     }
-  },  
+  },
   "maxAccessCountReached": {
     "message": "Max access count reached",
     "description": "This text will be displayed after a Send has been accessed the maximum amount of times."
@@ -2326,6 +2332,10 @@
     "message": "The Send will be permanently deleted on the specified date and time.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
+  "deletionDateDescV2": {
+    "message": "The Send will be permanently deleted on this date.",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
   "expirationDate": {
     "message": "Expiration date"
   },

libs/tools/send/send-ui/src/send-form/components/send-details/send-text-details.component.html

@@ -11,21 +11,15 @@
     </bit-form-field>
 
     <bit-form-field>
-      <bit-label>{{ "sendTypeText" | i18n }}</bit-label>
+      <bit-label>{{ "sendTypeTextToShare" | i18n }}</bit-label>
       <textarea bitInput id="text" rows="6" formControlName="textToShare"></textarea>
       <bit-hint>{{ "sendTextDesc" | i18n }}</bit-hint>
     </bit-form-field>
     <bit-form-control>
       <input bitCheckbox type="checkbox" formControlName="hideTextByDefault" />
-      <bit-label>{{ "textHiddenByDefault" | i18n }}</bit-label>
+      <bit-label>{{ "hideTextByDefault" | i18n }}</bit-label>
     </bit-form-control>
 
-    <bit-form-field *ngIf="config.mode === 'edit'">
-      <bit-label>{{ "sendLinkLabel" | i18n }}</bit-label>
-      <input bitInput type="text" readonly formControlName="sendLink" />
-      <button type="button" bitSuffix bitIconButton="bwi-clone"></button>
-    </bit-form-field>
-
     <bit-form-field>
       <bit-label>{{ "deletionDate" | i18n }}</bit-label>
       <bit-select
@@ -39,17 +33,7 @@
           [label]="o.name"
         ></bit-option>
       </bit-select>
-      <ng-container *ngIf="sendTextDetailsForm.controls['selectedDeletionDatePreset'].value === 0">
+      <bit-hint>{{ "deletionDateDescV2" | i18n }}</bit-hint>
-        <input
-          bitInput
-          id="deletionDateCustom"
-          type="datetime-local"
-          name="DeletionDate"
-          formControlName="defaultDeletionDateTime"
-          placeholder="MM/DD/YYYY HH:MM AM/PM"
-        />
-      </ng-container>
-      <bit-hint>{{ "deletionDateDesc" | i18n }}</bit-hint>
     </bit-form-field>
   </bit-card>
 </bit-section>

libs/tools/send/send-ui/src/send-form/components/send-details/send-text-details.component.ts

@@ -27,14 +27,13 @@ enum DatePreset {
   TwoDays = 48,
   ThreeDays = 72,
   SevenDays = 168,
+  FourteenDays = 336,
   ThirtyDays = 720,
-  Custom = 0,
-  Never = null,
 }
 
 interface DatePresetSelectOption {
   name: string;
-  value: DatePreset;
+  value: DatePreset | string;
 }
 
 @Component({
@@ -67,19 +66,24 @@ export class SendTextDetailsComponent implements OnInit {
     textToShare: [""],
     hideTextByDefault: [false],
     // sendLink: [null as string],
-    defaultDeletionDateTime: ["", Validators.required],
     selectedDeletionDatePreset: [DatePreset.SevenDays, Validators.required],
   });
 
-  deletionDatePresets: DatePresetSelectOption[] = [
+  get deletionDatePresets(): DatePresetSelectOption[] {
-    { name: this.i18nService.t("oneHour"), value: DatePreset.OneHour },
+    const defaultSelections = [
-    { name: this.i18nService.t("oneDay"), value: DatePreset.OneDay },
+      { name: this.i18nService.t("oneHour"), value: DatePreset.OneHour },
-    { name: this.i18nService.t("days", "2"), value: DatePreset.TwoDays },
+      { name: this.i18nService.t("oneDay"), value: DatePreset.OneDay },
-    { name: this.i18nService.t("days", "3"), value: DatePreset.ThreeDays },
+      { name: this.i18nService.t("days", "2"), value: DatePreset.TwoDays },
-    { name: this.i18nService.t("days", "7"), value: DatePreset.SevenDays },
+      { name: this.i18nService.t("days", "3"), value: DatePreset.ThreeDays },
-    { name: this.i18nService.t("days", "30"), value: DatePreset.ThirtyDays },
+      { name: this.i18nService.t("days", "7"), value: DatePreset.SevenDays },
-    { name: this.i18nService.t("custom"), value: DatePreset.Custom },
+      { name: this.i18nService.t("days", "14"), value: DatePreset.FourteenDays },
-  ];
+      { name: this.i18nService.t("days", "30"), value: DatePreset.ThirtyDays },
+    ];
+    if (!this.originalSendView.deletionDate) {
+      return defaultSelections;
+    }
+    return [{ name: null, value: this.formattedDeletionDate }, ...defaultSelections];
+  }
 
   constructor(
     private sendFormContainer: SendFormContainer,
@@ -108,44 +112,20 @@ export class SendTextDetailsComponent implements OnInit {
         name: this.originalSendView.name,
         textToShare: this.originalSendView.text.text,
         hideTextByDefault: this.originalSendView.text.hidden,
-        defaultDeletionDateTime: this.datePipe.transform(
+        selectedDeletionDatePreset: DatePreset.SevenDays,
-          new Date(this.originalSendView.deletionDate),
-          "yyyy-MM-ddTHH:mm",
-        ),
-        selectedDeletionDatePreset:
-          this.config.mode === "edit" ? DatePreset.Custom : DatePreset.SevenDays,
       });
     }
-
-    this.sendTextDetailsForm.controls.selectedDeletionDatePreset.valueChanges
-      .pipe(takeUntilDestroyed())
-      .subscribe((datePreset) => {
-        datePreset === DatePreset.Custom
-          ? this.sendTextDetailsForm.controls.defaultDeletionDateTime.enable()
-          : this.sendTextDetailsForm.controls.defaultDeletionDateTime.disable();
-      });
   }
 
   get formattedDeletionDate(): string {
-    switch (this.sendTextDetailsForm.controls.selectedDeletionDatePreset.value as DatePreset) {
+    const now = new Date();
-      case DatePreset.Never:
+    const milliseconds = now.setTime(
-        this.sendTextDetailsForm.controls.selectedDeletionDatePreset.patchValue(
+      now.getTime() +
-          DatePreset.SevenDays,
+        (this.sendTextDetailsForm.controls.selectedDeletionDatePreset.value as number) *
-        );
+          60 *
-        return this.formattedDeletionDate;
+          60 *
-      case DatePreset.Custom:
+          1000,
-        return this.sendTextDetailsForm.controls.defaultDeletionDateTime.value;
+    );
-      default: {
+    return new Date(milliseconds).toString();
-        const now = new Date();
-        const milliseconds = now.setTime(
-          now.getTime() +
-            (this.sendTextDetailsForm.controls.selectedDeletionDatePreset.value as number) *
-              60 *
-              60 *
-              1000,
-        );
-        return new Date(milliseconds).toString();
-      }
-    }
   }
 }