From 6c8cff56bba165ad4addfde8db0c923283b11ebb Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Tue, 16 Oct 2018 12:08:56 -0700
Subject: [PATCH] Introduce final expiration, streamline export process

---
 _locales/en/messages.json  | 50 ++++++++++++++++++++------
 background.html            | 61 ++++++++-----------------------
 js/background.js           | 57 ++++++-----------------------
 js/views/inbox_view.js     | 27 +++++++++++++-
 js/views/migration_view.js | 73 +++++++++++++++++---------------------
 stylesheets/_global.scss   | 23 +++++++++---
 stylesheets/manifest.css   | 10 +++++-
 test/fixtures_test.js      |  1 +
 8 files changed, 151 insertions(+), 151 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 712bc43ec3..801d51a82b 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -12,8 +12,22 @@
       "description": "Button to click when user has installed the new Signal Desktop"
     },
     "upgradeBanner": {
-      "message": "The next generation of Signal Desktop is here.",
-      "description": "Shown at the top of the application prompting the user to upgrade to the new, standalone version of the app."
+      "message": "This legacy version of Signal Desktop will stop working in:",
+      "description": "Shown at the top of the application alerting the user that this version of Signal Desktop will soon no longer be available."
+    },
+    "upgradeBannerExpired": {
+      "message": "This legacy version of Signal Desktop is in read-only mode",
+      "description": "Shown at the top of the application alerting the user that they will need to find a new Signal Desktop application."
+    },
+    "upgradeBannerTimespan": {
+      "message": "$days$ days",
+      "description": "Shown at the top of the application giving the user the amount of time left before this version of Signal Desktop stops working",
+      "placeholders": {
+        "days": {
+          "content": "$1",
+          "example": "5"
+        }
+      }
     },
     "upgradeNow": {
       "message": "Upgrade now",
@@ -28,7 +42,7 @@
       "description": "The first step in the export process; installing the standalone desktop app, to ensure it is available for that platform."
     },
     "saveDataPrompt": {
-      "message": "Your messages, contacts, groups, and other information can be seamlessly transferred to the new Signal Desktop. Select the folder where your exported Signal data should be saved.",
+      "message": "Your messages, contacts, groups, and other information can be seamlessly transferred to the standalone version of Signal Desktop. Select the folder where your exported Signal data should be saved.",
       "description": "Explanation of what will happen when the user presses the 'choose folder' button during the upgrade process"
     },
     "chooseFolder": {
@@ -39,8 +53,24 @@
       "message": "Upgrade to the new Signal Desktop",
       "description": "Header shown when starting the export and upgrade process"
     },
-    "startExportIntro": {
-      "message": "Signal Desktop is now available as a standalone application that features faster performance, expanded emoji support (with a brand-new emoji selector), enhanced notifications, and many other improvements. This process will prepare your Signal data for a smooth transition to upgrade.",
+    "startExportIntroParagraph1": {
+      "message": "You are currently using the legacy Chrome version of Signal that was officially deprecated on October 31, 2017. Since then, the new standalone version of Signal Desktop has received regular updates, numerous feature enhancements, and significant performance improvements.",
+      "description": "Description of the why and the what of the export and upgrade process"
+    },
+    "startExportIntroParagraph2": {
+      "message": "This migration process will help you switch to the latest release. All of your information will be saved, and the upgrade should only take a few minutes. ",
+      "description": "Description of the why and the what of the export and upgrade process"
+    },
+    "startExportIntroParagraph3": {
+      "message": "Note: Non-Debian-based Linux distributions, ChromeOS, and 32-bit Windows platforms are not currently supported.",
+      "description": "Description of the why and the what of the export and upgrade process"
+    },
+    "moreInformation": {
+      "message": "More information",
+      "description": "Description of the why and the what of the export and upgrade process"
+    },
+    "upgradeLater": {
+      "message": "Upgrade Later",
       "description": "Description of the why and the what of the export and upgrade process"
     },
     "imReady": {
@@ -80,16 +110,16 @@
       "description": "The header for the finish step of the export and upgrade flow"
     },
     "completeIntro": {
-      "message": "Your Signal data was successfully saved here:",
+      "message": "Your Signal Desktop migration data was successfully saved here. Remember this location:",
       "description": "A label for the location of the files we put on disk during the export"
     },
     "completeNextSteps": {
-      "message": "You are ready to make your move. Launch the new Signal Desktop and follow the instructions to complete the migration process.",
+      "message": "You are almost done! Download and run the new version to import your data and finish the move.",
       "description": "A summary of the next steps to finish the export and upgrade process"
     },
-    "completeSignoff": {
-      "message": "We hope that you enjoy the new features. We're just getting started. Thanks for using Signal Desktop.",
-      "description": "A warm signoff now that the export and upgrade process is complete"
+    "getNewVersion": {
+      "message": "Get New Version",
+      "description": "The button to download the new Signal Desktop version after export is complete"
     },
     "exportErrorHeader": {
       "message": "Something went wrong!",
diff --git a/background.html b/background.html
index d1853c1e63..0cd6e27663 100644
--- a/background.html
+++ b/background.html
@@ -88,7 +88,7 @@
     <span class='x banner-close'></span>
     <button class='migrate'>{{ upgradeNow }}</button>
     <div class='message'>
-      {{ upgradeMessage }}
+      {{ upgradeMessage }} <span class='highlight'>{{ highlight }}</span>
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='banner'>
@@ -614,7 +614,9 @@ sudo apt update && sudo apt install signal-desktop
         <div class='step-body'>
           <img class='banner-image' src='/images/icon_128.png'>
           <div class='header'>{{ startHeader }}</div>
-          <div class='body-text-wide'>{{ start }}</div>
+          <div class='body-text-wide'>{{ startParagraph1 }}</div>
+          <div class='body-text-wide'>{{ startParagraph2 }}</div>
+          <div class='body-text-wide red-text'>{{ startParagraph3 }} <a target='_blank' href='https://support.signal.org/hc/en-us/articles/360007320431'>{{ moreInformation }}</div>
         </div>
         <div class='nav'>
           <div>
@@ -629,44 +631,6 @@ sudo apt update && sudo apt install signal-desktop
     {{/isStep1}}
     {{#isStep2}}
     <div id='step2' class='step'>
-      <div class='inner'>
-        <div class='step-body'>
-          <div class='header'>{{ installHeader }}</div>
-          <p>{{ install }}</p>
-        </div>
-        <div class='install-container'>
-          <div class='install'>
-            <a class='install-mac' target='_blank' href='{{ macLink }}'>
-              <span class='install-icon apple'></span>
-              <div>Mac</div>
-            </a>
-          </div>
-          <div class='install'>
-            <a class='install-windows' target='_blank' href='{{ windowsLink }}'>
-              <span class='install-icon windows'></span>
-              <div>Windows</div>
-            </a>
-          </div>
-          <div class='install'>
-            <a class='install-linux' href='#'>
-              <span class='install-icon linux'></span>
-              <div>Debian-based Linux</div>
-            </a>
-          </div>
-        </div>
-        <div class='nav'>
-          <div>
-            <a class='button installed'>{{ installCompleteButton }}</a>
-          </div>
-          <div>
-            <a class='link cancel'>{{ cancelButton }}</a>
-          </div>
-        </div>
-      </div>
-    </div>
-    {{/isStep2}}
-    {{#isStep3}}
-    <div id='step3' class='step'>
       <div class='inner'>
         <div class='step-body'>
           <span class='banner-icon folder-outline'></span>
@@ -683,9 +647,9 @@ sudo apt update && sudo apt install signal-desktop
         </div>
       </div>
     </div>
-    {{/isStep3}}
-    {{#isStep4}}
-    <div id='step4' class='step'>
+    {{/isStep2}}
+    {{#isStep3}}
+    <div id='step3' class='step'>
       <div class='inner'>
         <div class='step-body'>
           <span class='banner-icon export'></span>
@@ -703,9 +667,9 @@ sudo apt update && sudo apt install signal-desktop
         </div>
       </div>
     </div>
-    {{/isStep4}}
-    {{#isStep5}}
-    <div id='step5' class='step'>
+    {{/isStep3}}
+    {{#isStep4}}
+    <div id='step4' class='step'>
       <div class='inner'>
         <div class='step-body'>
           <span class='banner-icon check-circle-outline'></span>
@@ -716,13 +680,16 @@ sudo apt update && sudo apt install signal-desktop
           <div class='body-text-wide'>{{ completeSignoff }}</div>
         </div>
         <div class='nav'>
+          <div>
+            <a class='button get-new-version' target='_blank' href='{{ downloadLocation }}'>{{ installButton }}</a>
+          </div>
           <div>
             <a class='link submit-debug-log'>{{ debugLogButton }}</a>
           </div>
         </div>
       </div>
     </div>
-    {{/isStep5}}
+    {{/isStep4}}
     {{#isError}}
     <div id='error' class='step'>
       <div class='inner error-dialog clearfix'>
diff --git a/js/background.js b/js/background.js
index 911542cc14..213d044e75 100644
--- a/js/background.js
+++ b/js/background.js
@@ -80,56 +80,10 @@
         return roll <= percentage;
     }
 
-    var UPGRADE_VALUE = 'feb-2018-upgrade-dice';
-    var UPGRADE_FLAG = window.UPGRADE_FLAG = 'feb-2018-upgrade-alert';
-    var UPGRADE_URL = 'https://updates.signal.org/desktop/feb-2018-upgrade.txt';
-    var HALF_HOUR = 30 * 60 * 1000;
-
-    function checkForUpgrade() {
-        $.ajax(UPGRADE_URL).done(function(data) {
-            var previous = storage.get(UPGRADE_VALUE);
-            if (data === previous) {
-                console.log('Upgrade check: Got same value as last time. Another check in 30 minutes');
-                return;
-            }
-
-            storage.put(UPGRADE_VALUE, data);
-            if (isTimeToUpgrade(data)) {
-                console.log('Upgrade check: time to upgrade!');
-                storage.put(UPGRADE_FLAG, true);
-                addUpgradeAlert();
-            } else {
-                console.log('Upgrade check: Not yet time to upgrade. Another check in 30 minutes');
-                setTimeout(checkForUpgrade, HALF_HOUR);
-            }
-        }).fail(function() {
-            console.log('Upgrade check: Request failed; another check in 30 minutes');
-            setTimeout(checkForUpgrade, HALF_HOUR);
-        });
-    }
-
-    function addUpgradeAlert() {
-        var app = window.owsDesktopApp;
-        if (!app) {
-            return;
-        }
-
-        var view = app.inboxView;
-        if (!view) {
-            return;
-        }
-
-        view.showUpgradeBanner();
-    }
-
     storage.fetch();
     storage.onready(function() {
         ConversationController.load();
 
-        if (!storage.get(UPGRADE_FLAG)) {
-            checkForUpgrade();
-        }
-
         window.dispatchEvent(new Event('storage_ready'));
         setUnreadCount(storage.get("unreadCount", 0));
 
@@ -172,6 +126,17 @@
 
     function init(firstRun) {
         window.removeEventListener('online', init);
+
+        // End of day, November 15th, 2018, Pacific Time (midnight the next day)
+        window.EXPIRATION_TIME = new Date('2018-11-16T08:00:00.000Z');
+        var timeLeft = window.EXPIRATION_TIME.getTime() - Date.now();
+        if (timeLeft <= 0) {
+            // start the migrate process, don't start up normally
+            return window.owsDesktopApp.getAppView().then(function(inboxView) {
+                inboxView.showUpgradeScreen();
+            });
+        }
+
         if (!Whisper.Registration.isDone()) { return; }
         if (Whisper.Migration.inProgress()) { return; }
 
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 268b6399f9..112a0d88d6 100644
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@@ -152,7 +152,7 @@
                 }
                 this.showUpgradeScreen();
             }
-            else if (storage.get(window.UPGRADE_FLAG)) {
+            else {
                 this.showUpgradeBanner();
             }
         },
@@ -327,9 +327,34 @@
     Whisper.UpgradeBanner = Whisper.View.extend({
         templateName: 'upgrade_banner',
         className: 'expiredAlert upgrade-banner clearfix',
+        initializer: function() {
+            var HOUR = 1000 * 60 * 60;
+            this.interval = setInterval(this.render.bind(this), HOUR);
+        },
+        remove: function() {
+            if (this.interval) {
+                clearInterval(this.interval);
+                this.interval = null;
+            }
+
+            Backbone.View.prototype.remove.call(this);
+        },
         render_attributes: function() {
+            var DAY = 1000 * 60 * 60 * 24;
+            var timeLeft = window.EXPIRATION_TIME.getTime() - Date.now();
+
+            if (timeLeft <= 0) {
+                return {
+                    upgradeMessage: i18n('upgradeBannerExpired'),
+                    upgradeNow: i18n('upgradeNow'),
+                };
+            }
+
+            var daysLeft = Math.floor(timeLeft / DAY);
+
             return {
                 upgradeMessage: i18n('upgradeBanner'),
+                highlight: i18n('upgradeBannerTimespan', [daysLeft]),
                 upgradeNow: i18n('upgradeNow'),
             };
         }
diff --git a/js/views/migration_view.js b/js/views/migration_view.js
index 87094b807b..311e80f0af 100644
--- a/js/views/migration_view.js
+++ b/js/views/migration_view.js
@@ -42,10 +42,9 @@
 
   var STEPS = {
     INTRODUCTION: 1,
-    INSTALL: 2,
-    CHOOSE: 3,
-    EXPORTING: 4,
-    COMPLETE: 5,
+    CHOOSE: 2,
+    EXPORTING: 3,
+    COMPLETE: 4,
   };
 
   var GET_YAML_PATH = /^path: (.+)$/m;
@@ -139,15 +138,11 @@
     templateName: 'migration-flow-template',
     className: 'migration-flow',
     events: {
-      'click .install': 'onInstallClick',
-      'click .install-mac': 'onClickMac',
-      'click .install-windows': 'onClickWindows',
-      'click .install-linux': 'onClickLinux',
       'click .start': 'onClickStart',
-      'click .installed': 'onClickInstalled',
       'click .choose': 'onClickChoose',
       'click .submit-debug-log': 'onClickDebugLog',
       'click .cancel': 'onClickCancel',
+      'click .get-new-version': 'onGetNewVersion',
     },
     initialize: function() {
       this.step = STEPS.INTRODUCTION;
@@ -200,59 +195,55 @@
 
       var location = Whisper.Migration.getExportLocation() || i18n('selectedLocation');
 
+      var userAgent = navigator.userAgent.toLowerCase();
+      var downloadLocation = '#';
+      if (userAgent.indexOf('windows') !== -1) {
+        downloadLocation = this.windowsLink;
+      } else if (userAgent.indexOf('macintosh') !== -1) {
+        downloadLocation = this.macLink;
+      } else {
+        downloadLocation = 'https://signal.org/download';
+      }
+
       return {
-        cancelButton: i18n('cancel'),
+        cancelButton: i18n('upgradeLater'),
         debugLogButton: i18n('submitDebugLog'),
 
         isStep1: this.step === 1,
         startHeader: i18n('startExportHeader'),
-        start: i18n('startExportIntro'),
+        startParagraph1: i18n('startExportIntroParagraph1'),
+        startParagraph2: i18n('startExportIntroParagraph2'),
+        startParagraph3: i18n('startExportIntroParagraph3'),
+        moreInformation: i18n('moreInformation'),
         startButton: i18n('imReady'),
 
         isStep2: this.step === 2,
-        installHeader: i18n('installHeader'),
-        install: i18n('installIntro'),
-        macOS: i18n('macOS'),
-        macLink: this.macLink,
-        windows: i18n('windows'),
-        windowsLink: this.windowsLink,
-        linux: i18n('debianLinux'),
-        installCompleteButton: i18n('installed'),
-
-        isStep3: this.step === 3,
         chooseHeader: i18n('saveHeader'),
         choose: i18n('saveDataPrompt'),
         chooseButton: i18n('chooseFolder'),
 
-        isStep4: this.step === 4,
+        isStep3: this.step === 3,
         exportHeader: i18n('savingData'),
 
-        isStep5: this.step === 5,
+        isStep4: this.step === 4,
         completeHeader: i18n('completeHeader'),
         completeIntro: i18n('completeIntro'),
         completeLocation: location,
         completeNextSteps: i18n('completeNextSteps'),
-        completeSignoff: i18n('completeSignoff'),
+        downloadLocation: downloadLocation,
+        installButton: i18n('getNewVersion'),
       };
     },
+    onGetNewVersion: function(e) {
+      if (userAgent.indexOf('linux') !== -1) {
+        e.preventDefault();
+
+        var dialog = this.linuxInstructionsView = new LinuxInstructionsView({});
+        this.$el.prepend(dialog.el);
+        dialog.focusOk();
+      }
+    },
     onClickStart: function() {
-      this.selectStep(STEPS.INSTALL);
-    },
-    onClickMac: function() {
-      console.log('Mac install link clicked');
-    },
-    onClickWindows: function() {
-      console.log('Windows install link clicked');
-    },
-    onInstallClick: function() {
-      this.$el.find('.installed').css('visibility', 'visible');
-    },
-    onClickLinux: function() {
-      var dialog = this.linuxInstructionsView = new LinuxInstructionsView({});
-      this.$el.prepend(dialog.el);
-      dialog.focusOk();
-    },
-    onClickInstalled: function() {
       this.selectStep(STEPS.CHOOSE);
     },
     onClickChoose: function() {
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 8860c0b250..b01ea527d7 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -545,11 +545,10 @@ input[type=text], input[type=search], textarea {
 .upgrade-banner {
   background: linear-gradient(
     to bottom,
-    rgb(238,238,238) 0%, // (1 - 0.41) * 255 + 0.41 * 213
-    rgb(243,243,243) 20%, // (1 - 0.19) * 255 + 0.19 * 191
-    rgb(255,255,255) 35%,
-    rgb(255,255,255) 65%,
-    rgb(249,249,249) 80%, // (1 - 0.19) * 255 + 0.19 * 222
+    rgb(213,213,213) 0%, // (1 - 0.41) * 255 + 0.41 * 213
+    rgb(249,249,249) 35%, // (1 - 0.19) * 255 + 0.19 * 191
+    rgb(255,255,255) 50%,
+    rgb(249,249,249) 65%, // (1 - 0.19) * 255 + 0.19 * 222
     rgb(213,213,213) 100% // (1 - 0.27) * 255 + 0.27 * 98
   );
   padding: 10px;
@@ -574,6 +573,11 @@ input[type=text], input[type=search], textarea {
     padding: 10px 0;
   }
 
+  .highlight {
+    font-weight: bold;
+    font-family: roboto;
+  }
+
   .x {
     float: right;
     margin-left: 0.5em;
@@ -747,6 +751,14 @@ input[type=text], input[type=search], textarea {
     text-align: left;
     margin-left: auto;
     margin-right: auto;
+
+    &.red-text {
+      color: red;
+
+      a {
+        color: red;
+      }
+    }
   }
 
   .step {
@@ -803,6 +815,7 @@ input[type=text], input[type=search], textarea {
   .button {
     cursor: pointer;
     display: inline-block;
+    text-decoration: none;
     border: none;
     min-width: 300px;
     padding: 0.75em;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 9de3fa5c5f..f9f7522390 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -486,7 +486,7 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
     padding: 10px 0; }
 
 .upgrade-banner {
-  background: linear-gradient(to bottom, #eeeeee 0%, #f3f3f3 20%, white 35%, white 65%, #f9f9f9 80%, #d5d5d5 100%);
+  background: linear-gradient(to bottom, #d5d5d5 0%, #f9f9f9 35%, white 50%, #f9f9f9 65%, #d5d5d5 100%);
   padding: 10px;
   font-family: roboto-light;
   font-size: 14pt; }
@@ -504,6 +504,9 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
     margin-left: 20px; }
   .upgrade-banner .message {
     padding: 10px 0; }
+  .upgrade-banner .highlight {
+    font-weight: bold;
+    font-family: roboto; }
   .upgrade-banner .x {
     float: right;
     margin-left: 0.5em;
@@ -635,6 +638,10 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
     text-align: left;
     margin-left: auto;
     margin-right: auto; }
+    .migration-flow .body-text-wide.red-text {
+      color: red; }
+      .migration-flow .body-text-wide.red-text a {
+        color: red; }
   .migration-flow .step {
     height: 100%;
     width: 100%;
@@ -673,6 +680,7 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
   .migration-flow .button {
     cursor: pointer;
     display: inline-block;
+    text-decoration: none;
     border: none;
     min-width: 300px;
     padding: 0.75em;
diff --git a/test/fixtures_test.js b/test/fixtures_test.js
index 546d05ccac..7aaf3c3dff 100644
--- a/test/fixtures_test.js
+++ b/test/fixtures_test.js
@@ -4,6 +4,7 @@ describe("Fixtures", function() {
   before(function(done) {
     // NetworkStatusView checks this method every five seconds while showing
     window.getSocketStatus = function() { return WebSocket.OPEN; };
+    window.EXPIRATION_TIME = new Date(Date.now() - 1000);
 
     Whisper.Fixtures.saveAll().then(function() {
       done();