Inform send in vault (#876)

* Add first pass info card to Vault view

* Make send-info title a link

* Make access links open new tab

* Separate Vault card message from access message

* Add period to card end

* Final wording. Change Bitwarden Send links to point to Send tab

src/app/app.module.ts

@@ -167,6 +167,7 @@ import { CiphersComponent } from './vault/ciphers.component';
 import { CollectionsComponent } from './vault/collections.component';
 import { FolderAddEditComponent } from './vault/folder-add-edit.component';
 import { GroupingsComponent } from './vault/groupings.component';
+import { SendInfoComponent } from './vault/send-info.component';
 import { ShareComponent } from './vault/share.component';
 import { VaultComponent } from './vault/vault.component';
 
@@ -382,6 +383,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         SelectCopyDirective,
         SendAddEditComponent,
         SendComponent,
+        SendInfoComponent,
         SettingsComponent,
         ShareComponent,
         SsoComponent,

src/app/send/access.component.html

@@ -74,9 +74,9 @@
         <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>
+                    href="https://www.bitwarden.com/products/send?source=web-vault" target="_blank">Bitwarden Send</a>
                 {{'sendAccessTaglineOr' | i18n}} <a
-                    href="https://vault.bitwarden.com/#/register">{{'sendAccessTaglineSignUp' | i18n}}</a>
+                    href="https://vault.bitwarden.com/#/register" target="_blank">{{'sendAccessTaglineSignUp' | i18n}}</a>
                 {{'sendAccessTaglineTryToday' | i18n}}
             </p>
         </div>

src/app/vault/send-info.component.html

@@ -0,0 +1,15 @@
+<div class="card border-primary">
+    <div class="card-header bg-primary text-white">
+        <i class="fa fa-paper-plane-o fa-fw" aria-hidden="true"></i>
+        <a class="text-white" href="/#/sends">Bitwarden Send</a>
+    </div>
+    <div class="card-body">
+            {{'sendVaultCardProductDesc' | i18n}}
+            <a href="https://www.bitwarden.com/products/send?source=web-vault" target="_blank">{{'sendVaultCardLearnMore' |
+                i18n}}</a>,
+            {{'sendVaultCardSee' | i18n}}
+            <a href="https://vault.bitwarden.com/#/register" target="_blank">{{'sendVaultCardHowItWorks' | i18n}}</a>,
+            {{'sendVaultCardOr' | i18n}}
+            <a href="/#/sends">{{'sendVaultCardTryItNow' | i18n}}</a>.
+    </div>
+</div>

src/app/vault/send-info.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-send-info',
+    templateUrl: 'send-info.component.html',
+})
+export class SendInfoComponent { }

src/app/vault/vault.component.html

@@ -47,6 +47,7 @@
                 </div>
             </div>
             <app-verify-email *ngIf="showVerifyEmail" class="d-block mb-4"></app-verify-email>
+            <app-send-info class="d-block mb-4"></app-send-info>
             <div class="card border-warning mb-4" *ngIf="showBrowserOutdated">
                 <div class="card-header bg-warning text-white">
                     <i class="fa fa-warning fa-fw" aria-hidden="true"></i> {{'updateBrowser' | i18n}}

src/locales/en/messages.json

@@ -3704,6 +3704,29 @@
     "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.'"
   },
+  "sendVaultCardProductDesc": {
+    "message": "Share text or files directly with anyone."
+  },
+  "sendVaultCardLearnMore": {
+    "message": "Learn more",
+    "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read '**Learn more**, see how it works, or try it now. '"
+  },
+  "sendVaultCardSee": {
+    "message": "see",
+    "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more, **see** how it works, or try it now.'"
+  },
+  "sendVaultCardHowItWorks": {
+    "message": "how it works",
+    "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more, see **how it works**, or try it now.'"
+  },
+  "sendVaultCardOr": {
+    "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, see how it works, **or** try it now.'"
+  },
+  "sendVaultCardTryItNow": {
+    "message": "try it now",
+    "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more, see how it works, or **try it now**.'"
+  },
   "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.'"