refactor(manager): replace share s3 flow with self-contained instruct…

…ions (Jigsaw-Code#1133)

* initial commit - need to test

* update en.json

* update messages

* revert my access key event rerouting

* type errors

* add message descriptions

* good enough

* just one block o' text

* almost there

* put back pre-wrap

* switch to <br>

* line break to master messages

src/server_manager/messages/en.json

@@ -262,13 +262,10 @@
   "setup-step-by-step": "Step-by-step set-up guide",
   "setup-tested": "Tested on VULTR, Linode, and Liquid Web",
   "setup-title": "Choose a cloud service to set up Outline.",
-  "share-description": "Copy this invitation and send it from a communication tool you trust. {openLink}Need help?{closeLink}",
-  "share-invite": "You’re invited to connect to my Outline server. Use it to access the open internet, no matter where you are. Follow the instructions on your invitation link below to download the Outline App and get connected.",
+  "share-description-html": "Copy this invitation and send it from a communication tool you trust. {openLink}Need help?{closeLink}",
   "share-invite-copied": "Copied to clipboard",
   "share-invite-copy": "Copy invitation",
-  "share-invite-copy-access-key": "Copy your access key:",
-  "share-invite-instructions": "Follow our invitation instructions on GitHub:",
-  "share-invite-trouble": "Having trouble accessing the invitation link?",
+  "share-invite-html": "You're invited to Outline! Follow these instructions to use my server to access the open internet on any device, no matter where you are. No personal information will be collected.<br><br>1) Download and install the Outline app for your device:<br><br>  - Android: https://play.google.com/store/apps/details?id=org.outline.android.client<br>  - iOS: https://itunes.apple.com/app/outline-app/id1356177741<br>  - Windows: https://s3.amazonaws.com/outline-releases/client/Outline-Client.exe - once downloaded, double click to launch.<br>  - macOS: https://itunes.apple.com/app/outline-app/id1356178125<br>  - Linux: https://s3.amazonaws.com/outline-releases/client/Outline-Client.AppImage - once downloaded, make it executable, then double click to launch.<br><br>2) Copy the following access key.<br>  {openLink}{accessKey}{closeLink}<br><br>3) In the Outline app, tap the \"+\" sign on the top bar and paste the access key.<br><br>4) Press the \"ADD SERVER\" button to confirm.<br><br>5) A card will be added to your app. Tap \"Connect\" to get connected with the new service you added.",
   "share-title": "Share access",
   "survey-data-limits-title": "Help us understand how to improve data limits",
   "survey-decline": "Decline",

src/server_manager/messages/master_messages.json

@@ -1231,7 +1231,7 @@
     "message": "Choose a cloud service to set up Outline.",
     "description": "This string appears in the server setup view as a header. Prompts the user to create deploy Outline servers on the cloud provider of their choice. 'Set up' means install and run the Outline server software."
   },
-  "share_description": {
+  "share_description_html": {
     "message": "Copy this invitation and send it from a communication tool you trust. $START_OF_LINK$Need help?$END_OF_LINK$",
     "description": "This string appears as a sub-header of a dialog that provides instructions on how to share access to a server.",
     "placeholders": {
@@ -1243,9 +1243,23 @@
       }
     }
   },
-  "share_invite": {
-    "message": "You\u2019re invited to connect to my Outline server. Use it to access the open internet, no matter where you are. Follow the instructions on your invitation link below to download the Outline App and get connected.",
-    "description": "This string appears as a paragraph within a dialog that provides an invitation to share access to a server. Belongs to the instructions for the user with whom access is being shared."
+  "share_invite_html": {
+    "message": "You're invited to Outline! Follow these instructions to use my server to access the open internet on any device, no matter where you are. No personal information will be collected.$LINE_BREAK$$LINE_BREAK$1) Download and install the Outline app for your device:$LINE_BREAK$$LINE_BREAK$  - Android: https://play.google.com/store/apps/details?id=org.outline.android.client$LINE_BREAK$  - iOS: https://itunes.apple.com/app/outline-app/id1356177741$LINE_BREAK$  - Windows: https://s3.amazonaws.com/outline-releases/client/Outline-Client.exe - once downloaded, double click to launch.$LINE_BREAK$  - macOS: https://itunes.apple.com/app/outline-app/id1356178125$LINE_BREAK$  - Linux: https://s3.amazonaws.com/outline-releases/client/Outline-Client.AppImage - once downloaded, make it executable, then double click to launch.$LINE_BREAK$$LINE_BREAK$2) Copy the following access key.$LINE_BREAK$  $START_OF_LINK$$ACCESS_KEY$$END_OF_LINK$$LINE_BREAK$$LINE_BREAK$3) In the Outline app, tap the \"+\" sign on the top bar and paste the access key.$LINE_BREAK$$LINE_BREAK$4) Press the \"ADD SERVER\" button to confirm.$LINE_BREAK$$LINE_BREAK$5) A card will be added to your app. Tap \"Connect\" to get connected with the new service you added.",
+    "description": "This string appears as an email invitation instructing new Outline users how to set up and connect to Outline.",
+    "placeholders": {
+      "ACCESS_KEY": {
+        "content": "{accessKey}"
+      },
+      "END_OF_LINK": {
+        "content": "{closeLink}"
+      },
+      "LINE_BREAK": {
+        "content": "<br>"
+      },
+      "START_OF_LINK": {
+        "content": "{openLink}"
+      }
+    }
   },
   "share_invite_copied": {
     "message": "Copied to clipboard",
@@ -1255,18 +1269,6 @@
     "message": "Copy invitation",
     "description": "This string appears as a button within a dialog that provides an invitation to share access to a server. Clicking it copies the invitation instructions text to the clipboard."
   },
-  "share_invite_copy_access_key": {
-    "message": "Copy your access key:",
-    "description": "This string appears as a paragraph within a dialog that provides an invitation to share access to a server. Belongs to the instructions for the user with whom access is being shared."
-  },
-  "share_invite_instructions": {
-    "message": "Follow our invitation instructions on GitHub:",
-    "description": "This string appears as a list item within a dialog that provides an invitation to share access to a server. Belongs to the instructions for the user with whom access is being shared."
-  },
-  "share_invite_trouble": {
-    "message": "Having trouble accessing the invitation link?",
-    "description": "This string appears as a paragraph within a dialog that provides an invitation to share access to a server. Belongs to the instructions for the user with whom access is being shared."
-  },
   "share_title": {
     "message": "Share access",
     "description": "This string appears as the header of a dialog that provides an invitation to share access to a server."

src/server_manager/web_app/app.ts

@@ -290,7 +290,7 @@ export class App {
 
     appRoot.addEventListener('OpenShareDialogRequested', (event: CustomEvent) => {
       const accessKey = event.detail.accessKey;
-      this.appRoot.openShareDialog(accessKey, this.getS3InviteUrl(accessKey));
+      this.appRoot.openShareDialog(accessKey);
     });
 
     appRoot.addEventListener('OpenGetConnectedDialogRequested', (event: CustomEvent) => {

src/server_manager/web_app/ui_components/app-root.ts

@@ -993,8 +993,8 @@ export class AppRoot extends polymerElementWithLocalize {
     (this.$.feedbackDialog as OutlineFeedbackDialog).open(prepopulatedMessage, true);
   }
 
-  openShareDialog(accessKey: string, s3Url: string) {
-    (this.$.shareDialog as OutlineShareDialog).open(accessKey, s3Url);
+  openShareDialog(accessKey: string) {
+    (this.$.shareDialog as OutlineShareDialog).open(accessKey);
   }
 
   openPerKeyDataLimitDialog(

src/server_manager/web_app/ui_components/outline-share-dialog.ts

@@ -21,7 +21,7 @@ import {html} from '@polymer/polymer/lib/utils/html-tag';
 import * as clipboard from 'clipboard-polyfill';
 
 export interface OutlineShareDialog extends Element {
-  open(accessKey: string, s3url: string): void;
+  open(accessKey: string): void;
 }
 
 // TODO(alalama): add a language selector. This should be a separate instance of
@@ -108,29 +108,15 @@ Polymer({
       <div id="dialog-header">
         <h3>[[localize('share-title')]]</h3>
         <p
-          inner-h-t-m-l="[[localize('share-description', 'openLink', '<a href=https://securityplanner.org/#/all-recommendations>', 'closeLink', '</a>')]]"
+          inner-h-t-m-l="[[localize('share-description-html', 'openLink', '<a href=https://securityplanner.org/#/all-recommendations>', 'closeLink', '</a>')]]"
         ></p>
       </div>
-      <div contenteditable="" id="selectableText" style="-webkit-text-size-adjust: 100%;">
-        <p>[[localize('share-invite')]]</p>
-
-        <p><a href$="{{s3Url}}">{{s3Url}}</a></p>
-        <p>-----</p>
-        <p>[[localize('share-invite-trouble')]]</p>
-        <ol>
-          <li>
-            [[localize('share-invite-copy-access-key')]]
-            <a href="{{accessKey}}">{{accessKey}}</a>
-          </li>
-          <li>
-            [[localize('share-invite-instructions')]]
-            <a
-              href="https://github.com/Jigsaw-Code/outline-client/blob/master/docs/invitation_instructions.md"
-              >https://github.com/Jigsaw-Code/outline-client/blob/master/docs/invitation_instructions.md</a
-            >
-          </li>
-        </ol>
-      </div>
+      <div
+        contenteditable=""
+        id="selectableText"
+        style="-webkit-text-size-adjust: 100%; white-space: pre-wrap;"
+        inner-h-t-m-l="[[localize('share-invite-html', 'openLink', '<a href=[[accessKey]]>', 'accessKey', accessKey, 'closeLink', '</a>')]]"
+      ></div>
       <div id="button-row">
         <paper-button id="copyButton" on-tap="copyClicked"
           >[[localize('share-invite-copy')]]</paper-button
@@ -147,17 +133,15 @@ Polymer({
     localize: {type: Function},
   },
 
-  open(accessKey: string, s3Url: string) {
+  open(accessKey: string) {
     this.accessKey = accessKey;
-    this.s3Url = s3Url;
     this.$.copyText.setAttribute('hidden', true);
     this.$.dialog.open();
   },
 
   copyClicked() {
     const dt = new clipboard.DT();
     dt.setData('text/plain', this.$.selectableText.innerText);
-    dt.setData('text/html', this.$.selectableText.innerHTML);
     clipboard.write(dt);
     this.$.copyText.removeAttribute('hidden');
   },