send improvements and bug fixes (#757)

* send improvements and bug fixes

* update jslib

* update jslib

* update jslib

* update jslib ref

* Hide match uri overflow (#758)

match descriptions are overflowing in german and causing the uri delete
button to overflow off of the cipher view modal

* update jslib

* jslib ref

* update jslib

Co-authored-by: Matt Gibson <mgibson@bitwarden.com>

src/app/send/access.component.html

@@ -25,6 +25,12 @@
                         </button>
                     </div>
                 </div>
+                <div class="card-body" *ngIf="!loading && unavailable">
+                    {{'sendAccessUnavailable' | i18n}}
+                </div>
+                <div class="card-body" *ngIf="!loading && error">
+                    {{'unexpectedError' | i18n}}
+                </div>
                 <div class="card-body" *ngIf="!loading && !passwordRequired && send">
                     <p class="text-center"><b>{{send.name}}</b></p>
                     <hr>
@@ -33,7 +39,7 @@
                         <app-callout *ngIf="send.text.hidden" type="tip">{{'sendHiddenByDefault' | i18n}}</app-callout>
                         <div class="form-group">
                             <textarea id="text" rows="8" name="Text" [(ngModel)]="sendText" class="form-control"
-                                readonly (click)="selectText()"></textarea>
+                                readonly></textarea>
                         </div>
                         <button class="btn btn-block btn-link" type="button" (click)="toggleText()"
                             *ngIf="send.text.hidden">

src/app/send/access.component.ts

@@ -37,6 +37,8 @@ export class AccessComponent implements OnInit {
     formPromise: Promise<SendAccessResponse>;
     password: string;
     showText = false;
+    unavailable = false;
+    error = false;
 
     private id: string;
     private key: string;
@@ -93,10 +95,6 @@ export class AccessComponent implements OnInit {
         this.downloading = false;
     }
 
-    selectText() {
-        (document.getElementById('text') as HTMLInputElement).select();
-    }
-
     copyText() {
         this.platformUtilsService.copyToClipboard(this.send.text.text);
         this.platformUtilsService.showToast('success', null,
@@ -108,6 +106,8 @@ export class AccessComponent implements OnInit {
     }
 
     async load() {
+        this.unavailable = false;
+        this.error = false;
         const keyArray = Utils.fromUrlB64ToArray(this.key);
         const accessRequest = new SendAccessRequest();
         if (this.password != null) {
@@ -131,6 +131,10 @@ export class AccessComponent implements OnInit {
             if (e instanceof ErrorResponse) {
                 if (e.statusCode === 401) {
                     this.passwordRequired = true;
+                } else if (e.statusCode === 404) {
+                    this.unavailable = true;
+                } else {
+                    this.error = true;
                 }
             }
         }

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

@@ -74,7 +74,7 @@
                     <div class="col-6 form-group">
                         <label for="maxAccessCount">{{'maxAccessCount' | i18n}}</label>
                         <input id="maxAccessCount" class="form-control" type="number" name="MaxAccessCount"
-                            [(ngModel)]="send.maxAccessCount">
+                            [(ngModel)]="send.maxAccessCount" min="1">
                     </div>
                     <div class="col-6 form-group" *ngIf="editMode">
                         <label for="accessCount">{{'currentAccessCount' | i18n}}</label>
@@ -98,7 +98,7 @@
                     <div class="form-check">
                         <input class="form-check-input" type="checkbox" [(ngModel)]="send.disabled" id="disabled"
                             name="Disabled">
-                        <label class="form-check-label" for="disabled">{{'disabled' | i18n}}</label>
+                        <label class="form-check-label" for="disabled">{{'disableThisSend' | i18n}}</label>
                     </div>
                 </div>
                 <div class="form-group" *ngIf="link">

src/app/send/send.component.html

@@ -62,10 +62,27 @@
                         </td>
                         <td class="reduced-lh wrap">
                             <a href="#" appStopClick appStopProp (click)="editSend(s)">{{s.name}}</a>
+                            <span appStopClick class="badge badge-secondary" *ngIf="s.disabled">
+                                {{'disabled' | i18n}}
+                            </span>
                             <ng-container *ngIf="s.password">
                                 <i class="fa fa-key" appStopProp title="{{'password' | i18n}}" aria-hidden="true"></i>
                                 <span class="sr-only">{{'password' | i18n}}</span>
                             </ng-container>
+                            <ng-container *ngIf="s.maxAccessCountReached">
+                                <i class="fa fa-ban" appStopProp title="{{'maxAccessCountReached' | i18n}}"
+                                    aria-hidden="true"></i>
+                                <span class="sr-only">{{'maxAccessCountReached' | i18n}}</span>
+                            </ng-container>
+                            <ng-container *ngIf="s.expired">
+                                <i class="fa fa-clock-o" appStopProp title="{{'expired' | i18n}}" aria-hidden="true"></i>
+                                <span class="sr-only">{{'expired' | i18n}}</span>
+                            </ng-container>
+                            <ng-container *ngIf="s.pendingDelete">
+                                <i class="fa fa-trash" appStopProp title="{{'pendingDeletion' | i18n}}"
+                                    aria-hidden="true"></i>
+                                <span class="sr-only">{{'pendingDeletion' | i18n}}</span>
+                            </ng-container>
                             <br>
                             <small appStopProp>{{s.deletionDate | date:'medium'}}</small>
                         </td>

src/app/send/send.component.ts

@@ -143,7 +143,7 @@ export class SendComponent implements OnInit {
         }
 
         try {
-            this.actionPromise = this.apiService.putSendRemovePassword(s.id);
+            this.actionPromise = this.sendService.removePasswordWithServer(s.id);
             await this.actionPromise;
             this.platformUtilsService.showToast('success', null, this.i18nService.t('removedPassword'));
             await this.load();
@@ -164,7 +164,7 @@ export class SendComponent implements OnInit {
         }
 
         try {
-            this.actionPromise = this.apiService.deleteSend(s.id);
+            this.actionPromise = this.sendService.deleteWithServer(s.id);
             await this.actionPromise;
             this.platformUtilsService.showToast('success', null, this.i18nService.t('deletedSend'));
             await this.load();

src/locales/en/messages.json

@@ -3348,9 +3348,22 @@
   "removePasswordConfirmation": {
     "message": "Are you sure you want to remove the password?"
   },
+  "disableThisSend": {
+    "message": "Disable this Send so that no one can access it.",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
   "allSends": {
     "message": "All Sends"
   },
+  "maxAccessCountReached": {
+    "message": "Max access count reached"
+  },
+  "pendingDeletion": {
+    "message": "Pending deletion"
+  },
+  "expired": {
+    "message": "Expired"
+  },
   "searchSends": {
     "message": "Search Sends",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
@@ -3370,6 +3383,10 @@
   "downloadFile": {
     "message": "Download File"
   },
+  "sendAccessUnavailable": {
+    "message": "The Send you are trying to access does not exist or is no longer available.",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
   "noSendsInList": {
     "message": "There are no Sends to list.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."