Show v2 version information

Let the user know that an app upgrade is necessary.
Only show this dialog once (unless the user clears local storage on
browser exit, in which case we can't do much about it).

public/i18n/de.json

@@ -41,7 +41,9 @@
         "ALREADY_CONNECTED": "Bereits verbunden",
         "ALREADY_CONNECTED_DETAILS": "Sie sind bereits in einem anderen Tab oder Fenster mit Threema Web verbunden!",
         "VERSION": "Version",
-        "BACKGROUND_IMAGE": "Hintergrundbild"
+        "BACKGROUND_IMAGE": "Hintergrundbild",
+        "NEW_VERSION": "Neue Version von Threema Web",
+        "NEW_VERSION_DETAILS": "Diese Version von Threema Web setzt <strong>Threema 3.45 für Android</strong> voraus. Falls Sie eine ältere Threema-Version verwenden, <strong>aktualisieren Sie bitte die App</strong>.<br><br>Wenn Sie die Threema-App nicht aktualisieren können, nutzen Sie vorübergehend die archivierte Version von Threema Web: <a href=\"https://web.threema.ch/archive/1.8.2/\">web.threema.ch/archive/1.8.2</a>"
     },
     "connecting": {
         "CONNECTION_PROBLEMS": "Verbindungsprobleme",
@@ -84,7 +86,8 @@
         "SAVE": "Speichern",
         "DONE": "Fertig",
         "MODIFY": "Ändern",
-        "NOTE": "Hinweis:"
+        "NOTE": "Hinweis:",
+        "UNDERSTOOD": "Verstanden"
     },
     "messenger": {
         "VERIFICATION_LEVEL": "Vertrauensstufe",

public/i18n/en.json

@@ -41,7 +41,9 @@
         "ALREADY_CONNECTED": "Already connected",
         "ALREADY_CONNECTED_DETAILS": "You are already connected to Threema Web in another tab or window!",
         "VERSION": "Version",
-        "BACKGROUND_IMAGE": "Background Image"
+        "BACKGROUND_IMAGE": "Background Image",
+        "NEW_VERSION": "New Threema Web Version",
+        "NEW_VERSION_DETAILS": "This version of Threema Web requires <strong>Threema 3.45 for Android</strong>. If you are using an older Threema version, <strong>please update the app</strong>.<br><br>If you are unable to update the Threema app, you can temporarily use the archived version of Threema Web: <a href=\"https://web.threema.ch/archive/1.8.2/\">web.threema.ch/archive/1.8.2</a>"
     },
     "connecting": {
         "CONNECTION_PROBLEMS": "Connection problems",
@@ -79,12 +81,13 @@
         "NO": "No",
         "OK": "Ok",
         "DELETE": "Delete",
-        "EDIT": "Bearbeiten",
+        "EDIT": "Edit",
         "ARE_YOU_SURE": "Are you sure?",
         "SAVE": "Save",
         "DONE": "Done",
         "MODIFY": "Modify",
-        "NOTE": "Note:"
+        "NOTE": "Note:",
+        "UNDERSTOOD": "Understood"
     },
     "messenger": {
         "VERIFICATION_LEVEL": "Verification level",

src/partials/welcome.ts

@@ -29,6 +29,7 @@ import {BrowserService} from '../services/browser';
 import {ControllerService} from '../services/controller';
 import {TrustedKeyStoreService} from '../services/keystore';
 import {PushService} from '../services/push';
+import {SettingsService} from '../services/settings';
 import {StateService} from '../services/state';
 import {VersionService} from '../services/version';
 import {WebClientService} from '../services/webclient';
@@ -78,6 +79,7 @@ class WelcomeController {
     private trustedKeyStore: TrustedKeyStoreService;
     private pushService: PushService;
     private stateService: StateService;
+    private settingsService: SettingsService;
     private config: threema.Config;
 
     // Other
@@ -88,11 +90,13 @@ class WelcomeController {
     private formLocked: boolean = false;
     private pleaseUpdateAppMsg: string = null;
     private browser: threema.BrowserInfo;
+    private browserWarningShown: boolean = false;
 
     public static $inject = [
         '$scope', '$state', '$stateParams', '$timeout', '$interval', '$log', '$window', '$mdDialog', '$translate',
-        'WebClientService', 'TrustedKeyStore', 'StateService', 'PushService', 'BrowserService', 'VersionService',
-        'BROWSER_MIN_VERSIONS', 'CONFIG', 'ControllerService',
+        'WebClientService', 'TrustedKeyStore', 'StateService', 'PushService', 'BrowserService',
+        'VersionService', 'SettingsService', 'ControllerService',
+        'BROWSER_MIN_VERSIONS', 'CONFIG',
     ];
     constructor($scope: ng.IScope, $state: UiStateService, $stateParams: WelcomeStateParams,
                 $timeout: ng.ITimeoutService, $interval: ng.IIntervalService,
@@ -102,9 +106,10 @@ class WelcomeController {
                 stateService: StateService, pushService: PushService,
                 browserService: BrowserService,
                 versionService: VersionService,
+                settingsService: SettingsService,
+                controllerService: ControllerService,
                 minVersions: threema.BrowserMinVersions,
-                config: threema.Config,
-                controllerService: ControllerService) {
+                config: threema.Config) {
         controllerService.setControllerName('welcome');
         // Angular services
         this.$scope = $scope;
@@ -121,6 +126,7 @@ class WelcomeController {
         this.trustedKeyStore = trustedKeyStore;
         this.stateService = stateService;
         this.pushService = pushService;
+        this.settingsService = settingsService;
         this.config = config;
 
         // Determine whether browser warning should be shown
@@ -155,6 +161,14 @@ class WelcomeController {
             this.showBrowserWarning();
         }
 
+        // Show a "new version info" dialog the first time.
+        if (!this.browserWarningShown) {
+            // The browser warning dialog interferes with the new version dialog, so don't trigger both.
+            if (this.settingsService.retrieveUntrustedKeyValuePair('v2infoShown', false) !== 'yes') {
+                this.showNewVersionInfos();
+            }
+        }
+
         // Determine whether local storage is available
         if (this.trustedKeyStore.blocked === true) {
             $log.error('Cannot access local storage. Is it being blocked by a browser add-on?');
@@ -381,6 +395,7 @@ class WelcomeController {
      * Show a browser warning dialog.
      */
     private showBrowserWarning(): void {
+        this.browserWarningShown = true;
         this.$translate.onReady().then(() => {
             const confirm = this.$mdDialog.confirm()
                 .title(this.$translate.instant('welcome.BROWSER_NOT_SUPPORTED'))
@@ -444,13 +459,30 @@ class WelcomeController {
     private showAlreadyConnected(): void {
         this.$translate.onReady().then(() => {
             const confirm = this.$mdDialog.alert()
-            .title(this.$translate.instant('welcome.ALREADY_CONNECTED'))
-            .htmlContent(this.$translate.instant('welcome.ALREADY_CONNECTED_DETAILS'))
-            .ok(this.$translate.instant('common.OK'));
+                .title(this.$translate.instant('welcome.ALREADY_CONNECTED'))
+                .htmlContent(this.$translate.instant('welcome.ALREADY_CONNECTED_DETAILS'))
+                .ok(this.$translate.instant('common.OK'));
             this.$mdDialog.show(confirm);
         });
     }
 
+    /**
+     * Show version 2 release information.
+     * TODO: Remove this in next version!
+     */
+    private showNewVersionInfos(): void {
+        this.$translate.onReady().then(() => {
+            const confirm = this.$mdDialog.alert()
+                .title(this.$translate.instant('welcome.NEW_VERSION'))
+                .htmlContent(this.$translate.instant('welcome.NEW_VERSION_DETAILS'))
+                .ok(this.$translate.instant('common.UNDERSTOOD'));
+            this.$mdDialog.show(confirm).then(() => {
+                // Remember that dialog was dismissed
+                this.settingsService.storeUntrustedKeyValuePair('v2infoShown', 'yes');
+            });
+        });
+    }
+
     /**
      * Forget trusted keys.
      */

src/services/settings.ts

@@ -43,13 +43,18 @@ export class SettingsService {
 
     /**
      * Retrieve settings key-value pair from LocalStorage.
+     *
+     * If the `alwaysCreate` flag is set to `true`, then the key is created
+     * with an empty value if it does not yet exist.
      */
-    public retrieveUntrustedKeyValuePair(key: string): string {
+    public retrieveUntrustedKeyValuePair(key: string, alwaysCreate: boolean = true): string {
         this.$log.debug(this.logTag, 'Retrieving settings key:', key);
         if (this.hasUntrustedKeyValuePair(key)) {
             return this.storage.getItem(SettingsService.STORAGE_KEY_PREFIX + key);
         } else {
-            this.storeUntrustedKeyValuePair(key, '');
+            if (alwaysCreate) {
+                this.storeUntrustedKeyValuePair(key, '');
+            }
             return '';
         }
     }