From ac807b6d543ff62199f63a5ba722ccecc98bc026 Mon Sep 17 00:00:00 2001
From: addison <addisonbeck1@gmail.com>
Date: Thu, 18 Feb 2021 13:03:20 -0500
Subject: [PATCH] bells and whistles for Send

---
 src/app/app.component.ts             |   8 ++
 src/app/send/add-edit.component.html | 176 ++++++++++++++++-----------
 src/app/send/add-edit.component.ts   |  11 ++
 src/app/send/send.component.html     |   2 +-
 src/app/send/send.component.ts       |  22 +++-
 src/locales/en/messages.json         |  19 +++
 src/scss/box.scss                    |  10 ++
 7 files changed, 170 insertions(+), 78 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 2b1fdafc72..027b661874 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -197,6 +197,14 @@ export class AppComponent implements OnInit {
                         break;
                     case 'ssoCallback':
                         this.router.navigate(['sso'], { queryParams: { code: message.code, state: message.state } });
+                    case 'premiumRequired':
+                        const premiumConfirmed = await this.platformUtilsService.showDialog(
+                            this.i18nService.t('premiumRequiredDesc'), this.i18nService.t('premiumRequired'),
+                            this.i18nService.t('learnMore'), this.i18nService.t('cancel'));
+                        if (premiumConfirmed) {
+                            this.openModal<PremiumComponent>(PremiumComponent, this.premiumRef);
+                        }
+                        break;
                     default:
                 }
             });
diff --git a/src/app/send/add-edit.component.html b/src/app/send/add-edit.component.html
index 36d7e83770..46b4ccbf9d 100644
--- a/src/app/send/add-edit.component.html
+++ b/src/app/send/add-edit.component.html
@@ -1,6 +1,12 @@
+<!-- Fix the menu bar -->
 <form (ngSubmit)="submit()" [appApiAction]="formPromise">
     <div class="content">
         <div class="inner-content" *ngIf="send">
+            <div class="box">
+                <app-callout *ngIf="disableSend">
+                    <span>{{'sendDisabledWarning' | i18n}}</span>
+                </app-callout>
+            </div>
             <div class="box">
                 <div class="box-header">
                     {{title}}
@@ -8,7 +14,7 @@
                 <div class="box-content">
                     <div class="box-content-row" appBoxRow>
                         <label for="name">{{'name' | i18n}}</label>
-                        <input id="name" type="text" name="Name" [(ngModel)]="send.name" appAutofocus>
+                        <input id="name" type="text" name="Name" [(ngModel)]="send.name" appAutofocus [readOnly]="disableSend">
                     </div>
                 </div>
             </div>
@@ -35,18 +41,18 @@
                     <ng-container *ngIf="editMode && send.type === sendType.File">
                         <div class="box-content-row" appBoxRow>
                             <label for="file">{{'file' | i18n}}</label>
-                            <input id="file" type="text" name="file" [(ngModel)]="send.file.fileName" readonly>
+                            <input id="file" type="text" name="file" [(ngModel)]="send.file.fileName" readonly [disabled]="disableSend">
                         </div>
                     </ng-container>
                     <ng-container *ngIf="send.type === sendType.Text">
                         <div class="box-content-row" appBoxRow *ngIf="send.type === sendType.Text">
                             <label for="text">{{'text' | i18n}}</label>
-                            <textarea id="text" name="text" [(ngModel)]="send.text.text" rows="6"></textarea>
+                            <textarea id="text" name="text" [(ngModel)]="send.text.text" rows="6" [readOnly]="disableSend"></textarea>
                             <div class="subtext">{{'sendTextDesc' | i18n}}</div>
                         </div>
                         <div class="box-content-row box-content-row-checkbox" appBoxRow *ngIf="send.type === sendType.Text">
                             <label for="hideText">{{'textHiddenByDefault' | i18n}}</label>
-                            <input id="hideText" name="hideText" type="checkbox" [(ngModel)]="send.text.hidden">
+                            <input id="hideText" name="hideText" type="checkbox" [(ngModel)]="send.text.hidden" [disabled]="disableSend">
                         </div>
                     </ng-container>
                 </div>
@@ -54,99 +60,123 @@
             <div class="box">
                 <div class="box-header">
                     {{'options' | i18n}}
+                    <a class="toggle" href="#" appStopClick appBlurClick role="button" (click)="toggleOptions()">
+                        <i class="fa fa-lg" aria-hidden="true" [ngClass]="{'fa-chevron-down': !showOptions, 'fa-chevron-up': showOptions}"></i>
+                    </a>
                 </div>
-                <div class="box-content">
-                    <div class="box-content-row" appBoxRow>
-                        <label for="deletionDate">{{'deletionDate' | i18n}}</label>
-                        <input id="deletionDate" type="datetime-local" name="deletionDate"
-                            [(ngModel)]="deletionDate" required placeholder="MM/DD/YYYY HH:MM AM/PM" *ngIf="editMode">
-                        <select id="deletionDate" name="DeletionDateSelect" [(ngModel)]="deletionDateSelect" required *ngIf="!editMode">
-                            <option *ngFor="let o of deletionDateOptions" [ngValue]="o.value">{{o.name}}
-                            </option>
-                        </select>
-                        <div class="subtext">{{'deletionDateDesc' | i18n}}</div>
+            </div>
+            <div [hidden]="!showOptions">
+                <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" [(ngModel)]="deletionDateSelect" required [readOnly]="disableSend">
+                                <option *ngFor="let o of deletionDateOptions" [ngValue]="o.value">{{o.name}}
+                                </option>
+                            </select>
+                            <div class="subtext">{{'deletionDateDesc' | i18n}}</div>
+                        </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" [readOnly]="disableSend">
+                            <div class="subtext">{{'deletionDateDesc' | i18n}}</div>
+                        </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>
+                            <div class="subtext">{{'expirationDateDesc' | i18n}}</div>
+                        </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">
+                            <div *ngIf="editMode" class="subtext">{{'expirationDateDesc' | i18n}}</div>
+                        </div>
                     </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">
+                    <div class="box-content">
+                        <div class="box-content-row" appBoxRow>
+                            <label for="maxAccessCount">{{'maxAccessCount' | i18n}}</label>
+                            <input id="maxAccessCount" type="number" name="maxAccessCount" [(ngModel)]="send.maxAccessCount" [readOnly]="disableSend">
+                            <div class="subtext">{{'maxAccessCountDesc' | i18n}}</div>
+                        </div>
+                        <div *ngIf="editMode" class="box-content-row" appBoxRow>
+                            <label for="accessCount">{{'currentAccessCount' | i18n}}</label>
+                            <input id="accessCount" type="text" name="accessCount" [(ngModel)]="send.accessCount" readonly>
+                        </div>
                     </div>
-                    <div class="box-content-row" appBoxRow>
-                        <label for="expirationDate">{{'expirationDate' | i18n}}</label>
-                        <input id="expirationDate" type="datetime-local" name="expirationDate" [(ngModel)]="expirationDate" *ngIf="editMode">
-                        <select id="expirationDate" name="expirationDateSelect" [(ngModel)]="expirationDateSelect" required *ngIf="!editMode">
-                            <option *ngFor="let o of expirationDateOptions" [ngValue]="o.value">{{o.name}}
-                            </option>
-                        </select>
-                        <div class="subtext">{{'expirationDateDesc' | i18n}}</div>
+                </div>
+                <div class="box">
+                    <div class="box-content">
+                        <div class="box-content-row box-content-row-flex" appBoxRow>
+                            <div class="row-main">
+                                <label for="password">{{(hasPassword ? 'newPassword' : 'password') | i18n}}</label>
+                                <input id="password" name="password" type="{{showPassword ? 'text' : 'password'}}" [(ngModel)]="password" [readOnly]="disableSend">
+                                <div class="subtext">{{'sendPasswordDesc' | i18n}}</div>
+                            </div>
+                            <div class="action-buttons">
+                                <a class="row-btn" href="#" appStopClick appBlurClick role="button"
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePasswordVisible()"  [disabled]="disableSend">
+                                    <i class="fa fa-lg" aria-hidden="true"
+                                        [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                                </a>
+                            </div>
+                        </div>
                     </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">
+                </div>
+                <div class="box">
+                    <div class="box-header">
+                        {{'notes' | i18n}}
+                    </div>
+                    <div class="box-content">
+                        <div class="box-content-row" appBoxRow>
+                            <textarea id="notes" name="notes" [(ngModel)]="send.notes" rows="6" [readOnly]="disableSend"></textarea>
+                            <small class="subtext">{{'sendNotesDesc' | i18n}}</small>
+                        </div>
+                    </div>
+                </div>
+                <div class="box">
+                    <div class="box-content">
+                        <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                            <label for="disabled">{{'disableSend' | i18n}}</label>
+                            <input id="disabled" type="checkbox" name="disabled" [(ngModel)]="send.disabled" [disabled]="disableSend">
+                        </div>
                     </div>
                 </div>
             </div>
             <div class="box">
-                <div class="box-content">
-                    <div class="box-content-row" appBoxRow>
-                        <label for="maxAccessCount">{{'maxAccessCount' | i18n}}</label>
-                        <input id="maxAccessCount" type="number" name="maxAccessCount" [(ngModel)]="send.maxAccessCount">
-                        <div class="subtext">{{'maxAccessCountDesc' | i18n}}</div>
-                    </div>
-                    <div *ngIf="editMode" class="box-content-row" appBoxRow>
-                        <label for="accessCount">{{'currentAccessCount' | i18n}}</label>
-                        <input id="accessCount" type="text" name="accessCount" [(ngModel)]="send.accessCount" readonly>
-                    </div>
-                </div>
-            </div>
-            <div class="box">
-                <div class="box-content">
-                    <div class="box-content-row" appBoxRow>
-                        <label for="password">{{(hasPassword ? 'newPassword' : 'password') | i18n}}</label>
-                        <input id="password" type="password" name="password" [(ngModel)]="password">
-                        <div class="subtext">{{'sendPasswordDesc' | i18n}}</div>
-                    </div>
-                </div>
-            </div>
-            <div class="box">
-                <div class="box-header">
-                    {{'notes' | i18n}}
-                </div>
-                <div class="box-content">
-                    <div class="box-content-row" appBoxRow>
-                        <textarea id="notes" name="notes" [(ngModel)]="send.notes" rows="6"></textarea>
-                        <small class="subtext">{{'sendNotesDesc' | i18n}}</small>
-                    </div>
-                </div>
-            </div>
-            <div class="box">
-                <div class="box-content">
-                    <div class="box-content-row box-content-row-checkbox" appBoxRow>
-                        <label for="disabled">{{'disableSend' | i18n}}</label>
-                        <input id="disabled" type="checkbox" name="disabled" [(ngModel)]="send.disabled">
-                    </div>
-                </div>
-            </div>
-            <div class="box" *ngIf="editMode">
                 <div class="box-header">
                     {{'share' | i18n}}
                 </div>
                 <div class="box-content">
-                    <div class="box-content-row" appBoxRow>
-                        <label for="url">{{'sendLink' | i18n}}</label>
-                        <input id="url" name="url" [ngModel]="link" readonly>
+                    <div class="box-content-row" appBoxRow *ngIf="editMode">
+                        <label for="link">{{'sendLinkLabel' | i18n}}</label>
+                        <input id="link" name="link" [ngModel]="link" readonly>
+                    </div>
+                    <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                        <label for="copyLink">{{'copySendLinkOnSave' | i18n}}</label>
+                        <input id="copyLink" name="copyLink" [(ngModel)]="copyLink" type="checkbox">
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <div class="footer">
-        <button appBlurClick type="submit" class="primary" appA11yTitle="{{'save' | i18n}}">
+        <button appBlurClick type="submit" class="primary" appA11yTitle="{{'save' | i18n}}" *ngIf="!disableSend">
             <i class="fa fa-save fa-lg fa-fw" aria-hidden="true"></i>
         </button>
         <button appBlurClick type="button" (click)="cancel()">
             {{'cancel' | i18n}}
         </button>
         <div class="right">
+            <button appBlurClick type="button" (click)="copyLinkToClipboard(link)" appA11yTitle="{{'copySendLinkToClipboard' | i18n}}" *ngIf="editMode">
+                <i class="fa fa-copy fa-lg fa-fw" aria-hidden="true"></i>
+            </button>
             <button #deleteBtn appBlurClick type="button" (click)="delete()" class="danger"
                 appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
                 [appApiAction]="deletePromise">
diff --git a/src/app/send/add-edit.component.ts b/src/app/send/add-edit.component.ts
index 982f74c9eb..2368dfcac3 100644
--- a/src/app/send/add-edit.component.ts
+++ b/src/app/send/add-edit.component.ts
@@ -17,6 +17,7 @@ import { AddEditComponent as BaseAddEditComponent } from 'jslib/angular/componen
     templateUrl: 'add-edit.component.html',
 })
 export class AddEditComponent extends BaseAddEditComponent {
+    showOptions = false;
     constructor(i18nService: I18nService, platformUtilsService: PlatformUtilsService,
         environmentService: EnvironmentService, datePipe: DatePipe,
         sendService: SendService, userService: UserService,
@@ -37,4 +38,14 @@ export class AddEditComponent extends BaseAddEditComponent {
     cancel() {
         this.onCancelled.emit(this.send);
     }
+
+    toggleOptions() {
+        this.showOptions = !this.showOptions;
+    }
+
+    copyLinkToClipboard(link: string) {
+        super.copyLinkToClipboard(link);
+        this.platformUtilsService.showToast('success', null,
+            this.i18nService.t('valueCopied', this.i18nService.t('sendLink')));
+    }
 }
diff --git a/src/app/send/send.component.html b/src/app/send/send.component.html
index a87f6394ac..05153e710b 100644
--- a/src/app/send/send.component.html
+++ b/src/app/send/send.component.html
@@ -42,7 +42,7 @@
             <div class="list" *ngIf="filteredSends.length" infiniteScroll [infiniteScrollDistance]="1"
                 [infiniteScrollContainer]="'#items .content'" [fromRoot]="true" (scrolled)="loadMore()">
                 <a *ngFor="let s of filteredSends" appStopClick (click)="selectSend(s.id)"
-                    href="#" title="{{'viewItem' | i18n}}"
+                    href="#" title="{{'viewItem' | i18n}}" (contextmenu)="viewSendMenu(s)"
                     [ngClass]="{'active': s.id === sendId}">
                     <div class="icon" aria-hidden="true">
                         <i class="fa fa-fw fa-lg" [ngClass]="s.type == 0 ? 'fa-file-o' : 'fa-file-text-o'"></i>
diff --git a/src/app/send/send.component.ts b/src/app/send/send.component.ts
index 44c4b585af..48fd9d80a2 100644
--- a/src/app/send/send.component.ts
+++ b/src/app/send/send.component.ts
@@ -1,3 +1,5 @@
+import { remote } from 'electron';
+
 import {
     Component,
     NgZone,
@@ -77,10 +79,6 @@ export class SendComponent extends BaseSendComponent implements OnInit, OnDestro
         }
     }
 
-    editSend(send: SendView) {
-        return;
-    }
-
     cancel(s: SendView) {
         this.action = Action.None;
         this.sendId = null;
@@ -112,4 +110,20 @@ export class SendComponent extends BaseSendComponent implements OnInit, OnDestro
     get selectedSendType() {
         return this.sends.find(s => s.id === this.sendId)?.type;
     }
+
+    viewSendMenu(send: SendView) {
+        const menu = new remote.Menu();
+        menu.append(new remote.MenuItem({
+            label: this.i18nService.t('copyLink'),
+            click: () => this.copy(send)
+        }));
+        menu.append(new remote.MenuItem({
+            label: this.i18nService.t('delete'),
+            click: async () => {
+                await this.delete(send);
+                await this.deletedSend(send);
+            }
+        }));
+        menu.popup({ window: remote.getCurrentWindow() });
+    }
 }
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index 6138b7f8e0..7271f211e8 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -1562,6 +1562,10 @@
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
   "sendLink": {
+    "message": "Send link",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
+  "sendLinkLabel": {
     "message": "Send Link",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
@@ -1616,5 +1620,20 @@
   "deleteSendConfirmation": {
     "message": "Are you sure you want to delete this Send?",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
+  "copySendLinkToClipboard": {
+    "message": "Copy Send link to clipboard",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
+  "copySendLinkOnSave": {
+    "message": "Copy the link to share this Send to my clipboard upon save."
+  },
+  "sendDisabled": {
+    "message": "Send disabled",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
+  "sendDisabledWarning": {
+    "message": "Due to an enterprise policy, you are only able to delete an existing Send.",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   }
 }
diff --git a/src/scss/box.scss b/src/scss/box.scss
index ae0c3174f4..16d6c16b45 100644
--- a/src/scss/box.scss
+++ b/src/scss/box.scss
@@ -7,6 +7,7 @@
     .box-header {
         margin: 0 10px 5px 10px;
         text-transform: uppercase;
+        display: flex;
 
         @include themify($themes) {
             color: themed('headingColor');
@@ -21,6 +22,15 @@
                 color: themed('headingColor');
             }
         }
+
+        .toggle {
+            background-color: transparent;
+            margin-left: 4px;
+            font-size: $font-size-small;
+            @include themify($themes) {
+                color: themed('headingColor');
+            }
+        }
     }
 
     .box-content {