From 721a9f5f6978270bddfde3f3c2551aec46c9f311 Mon Sep 17 00:00:00 2001
From: Vincent Salucci <26154748+vincentsalucci@users.noreply.github.com>
Date: Thu, 25 Feb 2021 11:23:52 -0600
Subject: [PATCH] [Send] Web cleanup (#850)

---
 src/app/layouts/navbar.component.html |  2 +-
 src/app/send/add-edit.component.html  | 66 ++++++++++++++-------------
 src/app/send/send.component.html      | 18 +++++---
 src/locales/en/messages.json          |  4 ++
 4 files changed, 51 insertions(+), 39 deletions(-)

diff --git a/src/app/layouts/navbar.component.html b/src/app/layouts/navbar.component.html
index 4e074047..b28897c9 100644
--- a/src/app/layouts/navbar.component.html
+++ b/src/app/layouts/navbar.component.html
@@ -9,7 +9,7 @@
                     <a class="nav-link" routerLink="/vault">{{'myVault' | i18n}}</a>
                 </li>
                 <li class="nav-item" routerLinkActive="active">
-                    <a class="nav-link" routerLink="/sends">Send</a>
+                    <a class="nav-link" routerLink="/sends">{{'send' | i18n}}</a>
                 </li>
                 <li class="nav-item" routerLinkActive="active">
                     <a class="nav-link" routerLink="/tools">{{'tools' | i18n}}</a>
diff --git a/src/app/send/add-edit.component.html b/src/app/send/add-edit.component.html
index 97a839d1..4a9698d5 100644
--- a/src/app/send/add-edit.component.html
+++ b/src/app/send/add-edit.component.html
@@ -12,6 +12,14 @@
                 <app-callout *ngIf="disableSend">
                     <span>{{'sendDisabledWarning' | i18n}}</span>
                 </app-callout>
+                <div class="row">
+                    <div class="col-6 form-group">
+                        <label for="name">{{'name' | i18n}}</label>
+                        <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="send.name" required
+                            [readOnly]="disableSend">
+                        <small class="form-text text-muted">{{'sendNameDesc' | i18n}}</small>
+                    </div>
+                </div>
                 <div class="row" *ngIf="!editMode">
                     <div class="col-6 form-group">
                         <label>{{'whatTypeOfSend' | i18n}}</label>
@@ -25,14 +33,6 @@
                         </div>
                     </div>
                 </div>
-                <div class="row">
-                    <div class="col-6 form-group">
-                        <label for="name">{{'name' | i18n}}</label>
-                        <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="send.name" required
-                            [readOnly]="disableSend">
-                        <small class="form-text text-muted">{{'sendNameDesc' | i18n}}</small>
-                    </div>
-                </div>
                 <!-- Text -->
                 <ng-container *ngIf="send.type === sendType.Text">
                     <div class="form-group">
@@ -65,10 +65,24 @@
                         </div>
                     </div>
                 </ng-container>
-                <div id="options-header" class="section-header d-flex flex-row align-items-center mt-5">
+                <h3 class="mt-5">{{'share' | i18n}}</h3>
+                <div class="form-group" *ngIf="link">
+                    <label for="link">{{'sendLinkLabel' | i18n}}</label>
+                    <input type="text" readonly id="link" name="Link" [(ngModel)]="link" class="form-control">
+                </div>
+                <div class="form-group">
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" [(ngModel)]="copyLink" id="copy-link"
+                            name="CopyLink">
+                        <label class="form-check-label" for="copy-link">{{'copySendLinkOnSave' | i18n}}</label>
+                    </div>
+                </div>
+                <div id="options-header" class="section-header d-flex flex-row align-items-center mt-5"
+                    (click)="toggleOptions()">
                     <h3 class="mb-0 mr-2">{{'options' | i18n}}</h3>
-                    <a class="mb-1" href="#" appStopClick role="button" (click)="toggleOptions()">
-                        <i class="fa" aria-hidden="true" [ngClass]="{'fa-chevron-down': !showOptions, 'fa-chevron-up': showOptions}"></i>
+                    <a class="mb-1" href="#" appStopClick role="button">
+                        <i class="fa" aria-hidden="true"
+                            [ngClass]="{'fa-chevron-down': !showOptions, 'fa-chevron-up': showOptions}"></i>
                     </a>
                 </div>
                 <div id="options" [hidden]="!showOptions">
@@ -82,8 +96,9 @@
                                     </option>
                                 </select>
                                 <input id="deletionDateCustom" class="form-control mt-1" type="datetime-local"
-                                    name="DeletionDate" [(ngModel)]="deletionDate" required *ngIf="deletionDateSelect === 0"
-                                    placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
+                                    name="DeletionDate" [(ngModel)]="deletionDate" required
+                                    *ngIf="deletionDateSelect === 0" placeholder="MM/DD/YYYY HH:MM AM/PM"
+                                    [readOnly]="disableSend">
                             </div>
                             <div *ngIf="editMode">
                                 <input id="deletionDate" class="form-control" type="datetime-local" name="DeletionDate"
@@ -95,13 +110,14 @@
                         <div class="col-6 form-group">
                             <div class="d-flex">
                                 <label for="expirationDate">{{'expirationDate' | i18n}}</label>
-                                <a href="#" appStopClick (click)="clearExpiration()" class="ml-auto" *ngIf="editMode">
+                                <a href="#" appStopClick (click)="clearExpiration()" class="ml-auto"
+                                    *ngIf="editMode && !disableSend">
                                     {{'clear' | i18n}}
                                 </a>
                             </div>
                             <div *ngIf="!editMode">
-                                <select id="expirationDate" name="ExpirationDateSelect" [(ngModel)]="expirationDateSelect"
-                                    class="form-control" required>
+                                <select id="expirationDate" name="ExpirationDateSelect"
+                                    [(ngModel)]="expirationDateSelect" class="form-control" required>
                                     <option *ngFor="let o of expirationDateOptions" [ngValue]="o.value">{{o.name}}
                                     </option>
                                 </select>
@@ -111,9 +127,9 @@
                                     [readOnly]="disableSend">
                             </div>
                             <div *ngIf="editMode">
-                                <input id="expirationDate" class="form-control" type="datetime-local" name="ExpirationDate"
-                                    [(ngModel)]="expirationDate" placeholder="MM/DD/YYYY HH:MM AM/PM"
-                                    [readOnly]="disableSend">
+                                <input id="expirationDate" class="form-control" type="datetime-local"
+                                    name="ExpirationDate" [(ngModel)]="expirationDate"
+                                    placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
                             </div>
                             <div class="form-text text-muted small">{{'expirationDateDesc' | i18n}}</div>
                         </div>
@@ -164,18 +180,6 @@
                         </div>
                     </div>
                 </div>
-                <h3 class="mt-5">{{'share' | i18n}}</h3>
-                <div class="form-group" *ngIf="link">
-                    <label for="link">{{'sendLinkLabel' | i18n}}</label>
-                    <input type="text" readonly id="link" name="Link" [(ngModel)]="link" class="form-control">
-                </div>
-                <div class="form-group">
-                    <div class="form-check">
-                        <input class="form-check-input" type="checkbox" [(ngModel)]="copyLink" id="copy-link"
-                            name="CopyLink">
-                        <label class="form-check-label" for="copy-link">{{'copySendLinkOnSave' | i18n}}</label>
-                    </div>
-                </div>
             </div>
             <div class="modal-footer">
                 <button class="btn btn-primary disabled" disabled=true *ngIf="disableSend">
diff --git a/src/app/send/send.component.html b/src/app/send/send.component.html
index 4da51250..a1e80678 100644
--- a/src/app/send/send.component.html
+++ b/src/app/send/send.component.html
@@ -43,7 +43,7 @@
         <div class="col-9">
             <div class="page-header d-flex">
                 <h1>
-                    Send
+                    {{'send' | i18n}}
                     <small #actionSpinner [appApiAction]="actionPromise">
                         <ng-container *ngIf="actionSpinner.loading">
                             <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"
@@ -53,7 +53,8 @@
                     </small>
                 </h1>
                 <div class="ml-auto d-flex">
-                    <button type="button" class="btn btn-outline-primary btn-sm" (click)="addSend()" [disabled]="disableSend">
+                    <button type="button" class="btn btn-outline-primary btn-sm" (click)="addSend()"
+                        [disabled]="disableSend">
                         <i class="fa fa-plus fa-fw" aria-hidden="true"></i>{{'createSend' | i18n}}
                     </button>
                 </div>
@@ -70,9 +71,11 @@
                         </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.disabled">
+                                <i class="fa fa-warning" appStopProp title="{{'disabled' | i18n}}"
+                                    aria-hidden="true"></i>
+                                <span class="sr-only">{{'disabled' | i18n}}</span>
+                            </ng-container>
                             <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>
@@ -83,7 +86,8 @@
                                 <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>
+                                <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">
@@ -128,7 +132,7 @@
                 </ng-container>
                 <ng-container *ngIf="loaded">
                     <p>{{'noSendsInList' | i18n}}</p>
-                    <button (click)="addSend()" class="btn btn-outline-primary">
+                    <button (click)="addSend()" class="btn btn-outline-primary" [disabled]="disableSend">
                         <i class="fa fa-plus fa-fw"></i>{{'createSend' | i18n}}</button>
                 </ng-container>
             </div>
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index 5b33eb6a..a677dbbe 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -3684,5 +3684,9 @@
   "sendLinkLabel": {
     "message": "Send link",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
+  "send": {
+    "message": "Send",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   }
 }