updated send access component (#852)

* updated send access component

* updated jslib

* bump jslib version (#851)

* code review fixes

* updated send access component

* updated jslib

* code review fixes

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

jslib

@@ -1 +1 @@
-Subproject commit 00122ab166f67622e9ba799c656c8b6dfece64fc
+Subproject commit ff9343412e886cf4bcb2cabf2cce003024917ce8

src/app/send/access.component.html

@@ -1,7 +1,12 @@
 <form #form (ngSubmit)="load()" [appApiAction]="formPromise" class="container" ngNativeValidate>
-    <div class="row justify-content-md-center mt-5">
-        <div class="col-5">
+    <div class="row justify-content-center mt-5">
+        <div class="col-12">
             <p class="lead text-center mb-4">Bitwarden Send</p>
+        </div>
+        <div class="col-12 text-center">
+            <p>A Bitwarden user {{creatorIdentifier}} shared the following with you.</p>
+        </div>
+        <div class="col-5">
             <div class="card d-block">
                 <div class="card-body" *ngIf="loading" class="text-center">
                     <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}"
@@ -58,8 +63,15 @@
                             <i class="fa fa-download" aria-hidden="true"></i>
                             {{'downloadFile' | i18n}} ({{send.file.sizeName}})</button>
                     </ng-container>
+                    <p *ngIf="expirationDate" class="text-center text-muted">Expires: {{expirationDate | date: 'medium'}}</p>
                 </div>
             </div>
         </div>
+        <div class="col-12 text-center mt-5 text-muted">
+            <p class="mb-0">{{'sendAccessTaglineProductDesc' | i18n}}<br>
+            {{'sendAccessTaglineLearnMore' | i18n}} <a href="https://www.bitwarden.com/products/send?source=web-vault">Bitwarden Send</a> {{'sendAccessTaglineOr' | i18n}} <a href="https://vault.bitwarden.com/#/register">{{'sendAccessTaglineSignUp' | i18n}}</a> {{'sendAccessTaglineTryToday' | i18n}}
+            </p>
+        </div>
     </div>
 </form>
+

src/app/send/access.component.ts

@@ -56,6 +56,20 @@ export class AccessComponent implements OnInit {
         return this.showText ? this.send.text.text : this.send.text.maskedText;
     }
 
+    get expirationDate() {
+        if (this.send == null || this.send.expirationDate == null) {
+            return null;
+        }
+        return this.send.expirationDate;
+    }
+
+    get creatorIdentifier() {
+        if (this.send == null || this.send.creatorIdentifier == null) {
+            return null;
+        }
+        return this.send.creatorIdentifier;
+    }
+
     ngOnInit() {
         this.route.params.subscribe(async params => {
             this.id = params.sendId;

src/locales/en/messages.json

@@ -3688,5 +3688,25 @@
   "send": {
     "message": "Send",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
+  "sendAccessTaglineProductDesc": {
+    "message": "Bitwarden Send transmits sensitive, temporary information to others easily and securely.",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
+  "sendAccessTaglineLearnMore": {
+    "message": "Learn more about",
+    "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read '**Learn more about** Bitwarden Send or sign up to try it today.'"
+  },
+  "sendAccessTaglineOr": {
+    "message": "or",
+    "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send **or** sign up to try it today.'"
+  },
+  "sendAccessTaglineSignUp": {
+    "message": "sign up",
+    "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or **sign up** to try it today.'"
+  },
+  "sendAccessTaglineTryToday": {
+    "message": "to try it today.",
+    "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about Bitwarden Send or sign up to **try it today.**'"
   }
 }