ui updates for send add/edit component (#768)

* ui updates for send add/edit component

* move messaging.service import

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

@@ -12,7 +12,8 @@
                 <div class="row" *ngIf="!editMode">
                     <div class="col-6 form-group">
                         <label for="type">{{'whatTypeOfSend' | i18n}}</label>
-                        <select id="type" name="Type" [(ngModel)]="send.type" class="form-control" appAutofocus>
+                        <select id="type" name="Type" [(ngModel)]="send.type" class="form-control" appAutofocus
+                            (change)='typeChanged()'>
                             <option *ngFor="let o of typeOptions" [ngValue]="o.value">{{o.name}}</option>
                         </select>
                     </div>
@@ -34,7 +35,7 @@
                         <div class="form-check">
                             <input class="form-check-input" type="checkbox" [(ngModel)]="send.text.hidden"
                                 id="text-hidden" name="Text.Hidden">
-                            <label class="form-check-label" for="text-hidden">{{'cfTypeHidden' | i18n}}</label>
+                            <label class="form-check-label" for="text-hidden">{{'textHiddenByDefault' | i18n}}</label>
                         </div>
                     </div>
                 </ng-container>
@@ -62,13 +63,14 @@
                                 <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
+                                name="DeletionDate" [(ngModel)]="deletionDate" required *ngIf="deletionDateSelect === 0"
-                                *ngIf="deletionDateSelect === 0">
+                                placeholder="MM/DD/YYYY HH:MM AM/PM">
                         </div>
                         <div *ngIf="editMode">
                             <input id="deletionDate" class="form-control" type="datetime-local" name="DeletionDate"
-                                [(ngModel)]="deletionDate" required>
+                                [(ngModel)]="deletionDate" required placeholder="MM/DD/YYYY HH:MM AM/PM">
                         </div>
+                        <div class="form-text text-muted small">{{'deletionDateDesc' | i18n}}</div>
                     </div>
                     <div class="col-6 form-group">
                         <div class="d-flex">
@@ -85,12 +87,13 @@
                             </select>
                             <input id="expirationDateCustom" class="form-control mt-1" type="datetime-local"
                                 name="ExpirationDate" [(ngModel)]="expirationDate" required
-                                *ngIf="expirationDateSelect === 0">
+                                *ngIf="expirationDateSelect === 0" placeholder="MM/DD/YYYY HH:MM AM/PM">
                         </div>
                         <div *ngIf="editMode">
                             <input id="expirationDate" class="form-control" type="datetime-local" name="ExpirationDate"
-                                [(ngModel)]="expirationDate">
+                                [(ngModel)]="expirationDate" placeholder="MM/DD/YYYY HH:MM AM/PM">
                         </div>
+                        <div class="form-text text-muted small">{{'expirationDateDesc' | i18n}}</div>
                     </div>
                 </div>
                 <div class="row">
@@ -98,6 +101,7 @@
                         <label for="maxAccessCount">{{'maxAccessCount' | i18n}}</label>
                         <input id="maxAccessCount" class="form-control" type="number" name="MaxAccessCount"
                             [(ngModel)]="send.maxAccessCount" min="1">
+                        <div class="form-text text-muted small">{{'maxAccessCountDesc' | i18n}}</div>
                     </div>
                     <div class="col-6 form-group" *ngIf="editMode">
                         <label for="accessCount">{{'currentAccessCount' | i18n}}</label>
@@ -111,11 +115,13 @@
                         <label for="password" *ngIf="hasPassword">{{'newPassword' | i18n}}</label>
                         <input id="password" class="form-control" type="password" name="Password"
                             [(ngModel)]="password">
+                        <div class="form-text text-muted small">{{'sendPasswordDesc' | i18n}}</div>
                     </div>
                 </div>
                 <div class="form-group">
                     <label for="notes">{{'notes' | i18n}}</label>
                     <textarea id="notes" name="Notes" rows="6" [(ngModel)]="send.notes" class="form-control"></textarea>
+                    <div class="form-text text-muted small">{{'sendNotesDesc' | i18n}}</div>
                 </div>
                 <div class="form-group">
                     <div class="form-check">
@@ -124,6 +130,7 @@
                         <label class="form-check-label" for="disabled">{{'disableThisSend' | i18n}}</label>
                     </div>
                 </div>
+                <h3 class="mt-5" *ngIf="link">{{'share' | i18n}}</h3>
                 <div class="form-group" *ngIf="link">
                     <label for="link">{{'sendLink' | i18n}}</label>
                     <input type="text" readonly id="link" name="Link" [(ngModel)]="link" class="form-control">

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

@@ -10,11 +10,12 @@ import { Component } from '@angular/core';
 
 import { SendType } from 'jslib/enums/sendType';
 
-import { ApiService } from 'jslib/abstractions/api.service';
 import { EnvironmentService } from 'jslib/abstractions/environment.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { SendService } from 'jslib/abstractions/send.service';
+import { UserService } from 'jslib/abstractions/user.service';
 
 import { SendView } from 'jslib/models/view/sendView';
 import { SendFileView } from 'jslib/models/view/sendFileView';
@@ -22,8 +23,6 @@ import { SendTextView } from 'jslib/models/view/sendTextView';
 
 import { Send } from 'jslib/models/domain/send';
 
-import { SendData } from 'jslib/models/data/sendData';
-
 @Component({
     selector: 'app-send-add-edit',
     templateUrl: 'add-edit.component.html',
@@ -52,10 +51,13 @@ export class AddEditComponent {
     expirationDateOptions: any[];
     deletionDateSelect = 168;
     expirationDateSelect: number = null;
+    canAccessPremium = true;
+    premiumRequiredAlertShown = false;
 
     constructor(private i18nService: I18nService, private platformUtilsService: PlatformUtilsService,
         private environmentService: EnvironmentService, private datePipe: DatePipe,
-        private sendService: SendService) {
+        private sendService: SendService, private userService: UserService,
+        private messagingService: MessagingService) {
         this.typeOptions = [
             { name: i18nService.t('sendTypeFile'), value: SendType.File },
             { name: i18nService.t('sendTypeText'), value: SendType.Text },
@@ -87,6 +89,11 @@ export class AddEditComponent {
             this.title = this.i18nService.t('createSend');
         }
 
+        this.canAccessPremium = await this.userService.canAccessPremium();
+        if (!this.canAccessPremium) {
+            this.type = SendType.Text;
+        }
+
         if (this.send == null) {
             if (this.editMode) {
                 const send = await this.loadSend();
@@ -194,6 +201,13 @@ export class AddEditComponent {
         } catch { }
     }
 
+    typeChanged() {
+        if (!this.canAccessPremium && this.send.type == SendType.File && !this.premiumRequiredAlertShown) {
+            this.premiumRequiredAlertShown = true;
+            this.messagingService.send('premiumRequired');
+        }
+    }
+
     protected async loadSend(): Promise<Send> {
         return this.sendService.get(this.sendId);
     }

src/locales/en/messages.json

@@ -3319,15 +3319,35 @@
   "deletionDate": {
     "message": "Deletion Date"
   },
+  "deletionDateDesc": {
+    "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."
+  },
   "expirationDate": {
     "message": "Expiration Date"
   },
+  "expirationDateDesc": {
+    "message": "If set, access to this Send will expire 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."
+  },
   "maxAccessCount": {
     "message": "Maximum Access Count"
   },
+  "maxAccessCountDesc": {
+    "message": "If set, users will no longer be able to access this send once the maximum access count is reached.",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
   "currentAccessCount": {
     "message": "Current Access Count"
   },
+  "sendPasswordDesc": {
+    "message": "Optionally require a password for users to access this Send.",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
+  "sendNotesDesc": {
+    "message": "Private notes about this Send.",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
   "disabled": {
     "message": "Disabled"
   },
@@ -3565,5 +3585,9 @@
   },
   "custom": {
     "message": "Custom"
+  },
+  "textHiddenByDefault": {
+    "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."
   }
 }