Ask the user to update the app if reconnecting fails (#339)

This warning is shown if `PREV_PROTOCOL_LAST_VERSION` in `config.ts` is
set. That config variable should be set in case a new protocol version
was released for Threema Web.

README.md

@@ -69,6 +69,10 @@ The configuration of Threema Web can be tweaked in `src/config.ts`:
 
 - `SELF_HOSTED`: Set this to `true` if this instance of Threema Web isn't being
   hosted on `web.threema.ch`.
+- `PREV_PROTOCOL_LAST_VERSION`: When the Threema Web protocol version changes,
+  this can be set to the last version of Threema Web that supported  the
+  previous protocol version. If set to something different than `null`, a
+  message will be shown to the user if reconnecting fails.
 
 **SaltyRTC**
 

public/i18n/de.json

@@ -34,7 +34,7 @@
         "MANUAL_START_STEP2": "Tippen Sie auf die Sitzung, die Sie wiederherstellen möchten",
         "MANUAL_START_STEP3": "Wählen Sie im Menu \"Sitzung starten\"",
         "MORE_ABOUT_WEB": "Mehr über Threema Web",
-        "LOCAL_STORAGE_MISSING_DETAILS": "Zugriff auf LocalStorage ist nicht möglich.  Dieses Problem kann auftreten, wenn in Ihrem Browser Cookies blockiert werden, oder wenn ein Browser-Add-On installiert ist, welches den Zugriff auf LocalStorage blockiert. Bitte erlauben Sie die Nutzung von LocalStorage in Ihrem Browser oder deaktivieren Sie die installierten Browser-Add-Ons."
+        "LOCAL_STORAGE_MISSING_DETAILS": "Zugriff auf LocalStorage ist nicht möglich. Dieses Problem kann auftreten, wenn in Ihrem Browser Cookies blockiert werden, oder wenn ein Browser-Add-On installiert ist, welches den Zugriff auf LocalStorage blockiert. Bitte erlauben Sie die Nutzung von LocalStorage in Ihrem Browser oder deaktivieren Sie die installierten Browser-Add-Ons."
     },
     "connecting": {
         "CONNECTION_PROBLEMS": "Verbindungsprobleme",
@@ -42,6 +42,7 @@
         "RECOVERING_CONNECTION": "Versuche Verbindung wiederherzustellen\u2026",
         "WAITING_FOR_APP": "Threema-App wird aufgeweckt\u2026",
         "WAITING_FOR_APP_MANUAL": "Google Play Services nicht installiert. Bitte starten Sie die Sitzung manuell.",
+        "CONNECTING_TO_SERVER": "Verbinden mit Server\u2026",
         "CONNECTING_TO_APP": "Verbindung zu App wird aufgebaut\u2026",
         "CONNECTION_CLOSED": "Server-Verbindung wurde geschlossen."
     },
@@ -52,7 +53,9 @@
         "PHONE_ONLINE": "Ist Ihr Mobilgerät mit dem Internet verbunden?",
         "WEBCLIENT_ENABLED": "Ist Threema Web in der Threema-App aktiviert?",
         "PLUGIN": "Ist in Ihrem Browser ein Plugin zum Blockieren von WebRTC installiert?",
-        "ADBLOCKER": "Ist in Ihrem Browser ein Ad-Blocker installiert?"
+        "ADBLOCKER": "Ist in Ihrem Browser ein Ad-Blocker installiert?",
+        "PLEASE_UPDATE_APP": "Bitte stellen Sie sicher, dass Sie die <a href=\"https://threema.ch/de/whats-new\" target=\"_blank\">neuste App-Version</a> von Threema nutzen!",
+        "USE_ARCHIVE_VERSION": "Alternativ können Sie zu der <a href=\"{archiveUrl}\">vorherigen Version</a> von Threema Web wechseln."
     },
     "common": {
         "YES": "Ja",

public/i18n/en.json

@@ -53,7 +53,9 @@
         "PHONE_ONLINE": "Is your phone connected to the internet?",
         "WEBCLIENT_ENABLED": "Is Threema Web enabled in the Threema app?",
         "PLUGIN": "Is a privacy plugin installed in your browser which blocks WebRTC communication?",
-        "ADBLOCKER": "Do you use an ad blocker which also blocks WebRTC communication?"
+        "ADBLOCKER": "Do you use an ad blocker which also blocks WebRTC communication?",
+        "PLEASE_UPDATE_APP": "Please make sure that you're using the <a href=\"https://threema.ch/en/whats-new\" target=\"_blank\">latest version</a> of the Threema app!",
+        "USE_ARCHIVE_VERSION": "Alternatively you can switch back to the <a href=\"{archiveUrl}\">previous version</a> of Threema Web."
     },
     "common": {
         "YES": "Yes",
@@ -166,7 +168,6 @@
         "location": "Location",
         "ballot": "Ballot",
         "gif": "GIF"
-
     },
     "validationError": {
         "createReceiver": {

src/config.ts

@@ -7,6 +7,7 @@ export default {
 
     // General
     SELF_HOSTED: false,
+    PREV_PROTOCOL_LAST_VERSION: null,
 
     // SaltyRTC
     SALTYRTC_HOST: null,

src/partials/welcome.html

@@ -86,6 +86,9 @@
                             <span translate>welcome.IF_YOU_WANT</span>
                             <a href="#" ng-click="ctrl.deleteSession()" translate>welcome.FORGET_SESSION</a>.
                         </p>
+                        <div class="protocol-updated" ng-if="ctrl.config.PREV_PROTOCOL_LAST_VERSION !== null">
+                            <p ng-bind-html="ctrl.pleaseUpdateAppMsg"></p>
+                        </div>
                     </div>
                 </div>
             </div>

src/partials/welcome.ts

@@ -60,17 +60,19 @@ class WelcomeController {
     private TrustedKeyStore: TrustedKeyStoreService;
     private pushService: PushService;
     private stateService: StateService;
+    private config: threema.Config;
 
     // Other
     public name = 'welcome';
     private mode: 'scan' | 'unlock';
     private qrCode;
     private password: string = '';
+    private pleaseUpdateAppMsg: string = null;
 
     public static $inject = [
         '$scope', '$state', '$stateParams', '$timeout', '$interval', '$log', '$window', '$mdDialog', '$translate',
         'WebClientService', 'TrustedKeyStore', 'StateService', 'PushService', 'BrowserService', 'VersionService',
-        'BROWSER_MIN_VERSIONS', 'ControllerService',
+        'BROWSER_MIN_VERSIONS', 'CONFIG', 'ControllerService',
     ];
     constructor($scope: ng.IScope, $state: ng.ui.IStateService, $stateParams: threema.WelcomeStateParams,
                 $timeout: ng.ITimeoutService, $interval: ng.IIntervalService,
@@ -81,6 +83,7 @@ class WelcomeController {
                 browserService: BrowserService,
                 versionService: VersionService,
                 minVersions: threema.BrowserMinVersions,
+                config: threema.Config,
                 controllerService: ControllerService) {
         controllerService.setControllerName('welcome');
         // Angular services
@@ -98,6 +101,7 @@ class WelcomeController {
         this.TrustedKeyStore = TrustedKeyStore;
         this.stateService = stateService;
         this.pushService = pushService;
+        this.config = config;
 
         // Determine whether browser warning should be shown
         const browser = browserService.getBrowser();
@@ -135,6 +139,16 @@ class WelcomeController {
         // Determine current version
         versionService.initVersion();
 
+        // Determine last version with previous protocol version
+        if (this.config.PREV_PROTOCOL_LAST_VERSION !== null) {
+            this.pleaseUpdateAppMsg = this.$translate.instant('troubleshooting.PLEASE_UPDATE_APP');
+            if (!this.config.SELF_HOSTED) {
+                this.pleaseUpdateAppMsg += ' ' + this.$translate.instant('troubleshooting.USE_ARCHIVE_VERSION', {
+                    archiveUrl: `https://web.threema.ch/archive/${this.config.PREV_PROTOCOL_LAST_VERSION}/`,
+                });
+            }
+        }
+
         // Clear cache
         this.webClientService.clearCache();
 

src/sass/sections/_welcome.scss

@@ -108,6 +108,20 @@
             }
         }
 
+        .protocol-updated {
+            font-size: 0.9em;
+            background-color: $status-error;
+            color: white;
+            font-weight: bold;
+            position: absolute;
+            bottom: 148px;
+            padding: 8px 8px;
+            width: calc(100% - 16px);
+            a {
+                color: #9dd0f2;
+            }
+        }
+
         .troubleshoot {
             $troubleshoot-height: 190px;
             height: $troubleshoot-height;
@@ -117,6 +131,7 @@
 
             h3 {
                 margin-bottom: 8px;
+                height: 44px;
             }
 
             ul {

src/threema.d.ts

@@ -441,6 +441,7 @@ declare namespace threema {
 
     interface Config {
         SELF_HOSTED: boolean;
+        PREV_PROTOCOL_LAST_VERSION: string | null;
         SALTYRTC_PORT: number;
         SALTYRTC_SERVER_KEY: string | null;
         SALTYRTC_HOST: string | null;