Show warning if browser blocks local storage (#67)

public/i18n/de.json

@@ -30,7 +30,8 @@
         "MANUAL_START_STEP1": "Öffnen Sie die Threema App und tippen Sie auf \"Threema Web\" in der linken Navigation",
         "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"
+        "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."
     },
     "connecting": {
         "CONNECTION_PROBLEMS": "Verbindungsprobleme",

public/i18n/en.json

@@ -30,7 +30,8 @@
         "MANUAL_START_STEP1": "Open the Threema app and tap on \"Threema Web\" in the left navigation drawer",
         "MANUAL_START_STEP2": "Tap on the session related to this browser",
         "MANUAL_START_STEP3": "Select \"Start session\" to start the session",
-        "MORE_ABOUT_WEB": "More about Threema Web"
+        "MORE_ABOUT_WEB": "More about Threema Web",
+        "LOCAL_STORAGE_MISSING_DETAILS": "Access to LocalStorage not possible. This can occur if your browser is configured to reject cookies, or if you installed a browser add-on that blocks access to LocalStorage. Please allow local storage in your browser settings or disable any add-ons you might have installed."
     },
     "connecting": {
         "CONNECTION_PROBLEMS": "Connection problems",

src/partials/welcome.ts

@@ -119,7 +119,13 @@ class WelcomeController {
             this.showBrowserWarning();
         }
 
-        // clear cache
+        // 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?');
+            this.showLocalStorageWarning();
+        }
+
+        // Clear cache
         this.webClientService.clearCache();
 
         // Determine connection mode
@@ -236,7 +242,7 @@ class WelcomeController {
     }
 
     /**
-     * Show the "decryption failed" dialog.
+     * Show a browser warning dialog.
      */
     private showBrowserWarning(): void {
         const confirm = this.$mdDialog.confirm()
@@ -252,6 +258,17 @@ class WelcomeController {
         });
     }
 
+    /**
+     * Show a dialog indicating that local storage is not available.
+     */
+    private showLocalStorageWarning(): void {
+        const confirm = this.$mdDialog.alert()
+            .title(this.$translate.instant('common.ERROR'))
+            .htmlContent(this.$translate.instant('welcome.LOCAL_STORAGE_MISSING_DETAILS'))
+            .ok(this.$translate.instant('common.OK'));
+        this.$mdDialog.show(confirm);
+    }
+
     /**
      * Show the "decryption failed" dialog.
      */

src/sass/components/_dialogs.scss

@@ -1,5 +1,6 @@
 md-dialog {
     min-width: 470px;
+    max-width: 600px;
     p {
         margin-bottom: 16px;
         line-height: 1.3em;
@@ -18,6 +19,9 @@ md-dialog {
             line-height: 1.5em;
         }
     }
+    md-dialog-content {
+        line-height: 1.3em;
+    }
 }
 
 md-dialog.send-file-dialog {

src/services/keystore.ts

@@ -40,13 +40,26 @@ import {stringToUtf8a, utf8aToString} from '../helpers';
 export class TrustedKeyStoreService implements threema.TrustedKeyStoreService {
     private static STORAGE_KEY = 'trusted';
 
+    private logTag: string = '[TrustedKeyStoreService]';
+
     private $log: ng.ILogService;
-    private storage: Storage;
+    private storage: Storage = null;
+
+    public blocked = false;
 
     public static $inject = ['$log', '$window'];
     constructor($log: ng.ILogService, $window: ng.IWindowService) {
         this.$log = $log;
-        this.storage = $window.localStorage;
+
+        try {
+            if ($window.localStorage === null) {
+                this.blocked = true;
+            }
+            this.storage = $window.localStorage;
+        } catch (e) {
+            $log.warn(this.logTag, 'LocalStorage blocked:', e);
+            this.blocked = true;
+        }
     }
 
     /**
@@ -88,7 +101,7 @@ export class TrustedKeyStoreService implements threema.TrustedKeyStoreService {
         data.set(peerPublicKey, 64);
         data.set(token, 96);
         const encrypted: Uint8Array = nacl.secretbox(data, nonce, this.pwToKey(password));
-        this.$log.debug('Storing trusted key');
+        this.$log.debug(this.logTag, 'Storing trusted key');
         this.storage.setItem(TrustedKeyStoreService.STORAGE_KEY, u8aToHex(nonce) + ':' + u8aToHex(encrypted));
     }
 
@@ -136,7 +149,7 @@ export class TrustedKeyStoreService implements threema.TrustedKeyStoreService {
      * Delete any stored trusted keys.
      */
     public clearTrustedKey(): void {
-        this.$log.debug('Clearing trusted key');
+        this.$log.debug(this.logTag, 'Clearing trusted key');
         this.storage.removeItem(TrustedKeyStoreService.STORAGE_KEY);
     }
 }

src/threema.d.ts

@@ -365,6 +365,7 @@ declare namespace threema {
     }
 
     interface TrustedKeyStoreService {
+        blocked: boolean;
         storeTrustedKey(ownPublicKey: Uint8Array, ownSecretKey: Uint8Array, peerPublicKey: Uint8Array,
                         pushToken: string | null, password: string): void;
         hasTrustedKey(): boolean;