Settings Menu (#129)

- Add empty settings dialog
- Add SettingsService for persisting configuration in LocalStorage

public/i18n/de.json

@@ -86,6 +86,7 @@
         "CONTACTS": "Kontakte",
         "NO_CONVERSATIONS_FOUND": "Keine Chats gefunden.",
         "ABOUT": "\u00dcber",
+        "SETTINGS": "Einstellungen",
         "HELP": "Hilfe",
         "NO_CONTACTS_FOUND": "Keine Kontakte gefunden.",
         "ACKNOWLEDGE": "Best\u00e4tigen",
@@ -188,5 +189,8 @@
         "LICENSE_LINK_BEFORE": "Lizenzen von verwendeten Open Source Komponenten können",
         "LICENSE_LINK_TEXT": "im Quellcode",
         "LICENSE_LINK_AFTER": "gefunden werden"
+    },
+    "settings": {
+        "SETTINGS":"Einstellungen"
     }
 }

public/i18n/en.json

@@ -87,6 +87,7 @@
         "CONTACTS": "Contacts",
         "NO_CONVERSATIONS_FOUND": "No conversations found.",
         "ABOUT": "About",
+        "SETTINGS": "Settings",
         "HELP": "Help",
         "NO_CONTACTS_FOUND": "No contacts found.",
         "ACKNOWLEDGE": "Agree",
@@ -189,5 +190,8 @@
         "LICENSE_LINK_BEFORE": "Licenses of used open source components can be found",
         "LICENSE_LINK_TEXT": "in the source code",
         "LICENSE_LINK_AFTER": ""
+    },
+    "settings": {
+        "SETTINGS":"Settings"
     }
 }

src/partials/dialog.settings.html

@@ -0,0 +1,19 @@
+<md-dialog aria-label="Settings">
+    <form ng-cloak>
+        <md-toolbar>
+            <div class="md-toolbar-tools">
+                <h2 translate>settings.SETTINGS</h2>
+                <span flex></span>
+                <md-button class="md-icon-button" ng-click="ctrl.cancel()">
+                    <md-icon aria-label="Close dialog" class="material-icons md-24">close</md-icon>
+                </md-button>
+            </div>
+        </md-toolbar>
+        <md-dialog-content>
+            <div class="md-dialog-content">
+
+            </div>
+        </md-dialog-content>
+    </form>
+</md-dialog>
+

src/partials/messenger.navigation.html

@@ -26,6 +26,12 @@
                     <span translate>messenger.ABOUT</span>
                 </md-button>
             </md-menu-item>
+            <md-menu-item>
+                <md-button ng-click="ctrl.settings()">
+                    <md-icon aria-label="Settings" class="material-icons md-24">settings</md-icon>
+                    <span translate>messenger.SETTINGS</span>
+                </md-button>
+            </md-menu-item>
         </md-menu-content>
     </md-menu>
 </div>

src/partials/messenger.ts

@@ -18,6 +18,7 @@
 import {ContactControllerModel} from '../controller_model/contact';
 import {supportsPassive, throttle} from '../helpers';
 import {ExecuteService} from '../services/execute';
+import {SettingsService} from '../services/settings';
 import {ControllerModelMode} from '../types/enums';
 
 abstract class DialogController {
@@ -79,6 +80,55 @@ class SendFileController extends DialogController {
     }
 }
 
+/**
+ * Handle settings
+ */
+class SettingsController {
+
+    public static $inject = ['$mdDialog', 'SettingsService', '$window'];
+
+    public $mdDialog: ng.material.IDialogService;
+    public $window: ng.IWindowService;
+    public settingsService: threema.SettingsService;
+    public activeElement: HTMLElement | null;
+
+    // Setting Variables
+
+    constructor($mdDialog: ng.material.IDialogService , settingsService: threema.SettingsService,
+                $window: ng.IWindowService) {
+
+        this.$mdDialog = $mdDialog;
+        this.$window = $window;
+        this.activeElement = document.activeElement as HTMLElement;
+        this.settingsService = settingsService;
+
+        // Init Setting Variables
+
+    }
+
+    // SettingsServices Methods
+
+    // Dialog Methods
+    public cancel(): void {
+        this.$mdDialog.cancel();
+        this.done();
+    }
+
+    protected hide(data: any): void {
+        this.$mdDialog.hide(data);
+        this.done();
+    }
+
+    private done(): void {
+        if (this.activeElement !== null) {
+            // reset focus
+            // this.$window.location.reload();
+            this.activeElement.focus();
+        }
+    }
+
+}
+
 class ConversationController {
     public name = 'navigation';
 
@@ -625,6 +675,21 @@ class NavigationController {
         this.showDialog('about', ev);
     }
 
+    /**
+     * Show settings dialog.
+     */
+    public settings(ev): void {
+            this.$mdDialog.show({
+                controller: SettingsController,
+                controllerAs: 'ctrl',
+                templateUrl: 'partials/dialog.settings.html',
+                parent: angular.element(document.body),
+                targetEvent: ev,
+                clickOutsideToClose: true,
+                fullscreen: true,
+            });
+    }
+
     /**
      * Return whether a trusted key is available.
      */
@@ -1130,5 +1195,4 @@ angular.module('3ema.messenger', ['ngMaterial'])
 .controller('ReceiverDetailController', ReceiverDetailController)
 .controller('ReceiverEditController', ReceiverEditController)
 .controller('ReceiverCreateController', ReceiverCreateController)
-
 ;

src/services.ts

@@ -27,6 +27,7 @@ import {NotificationService} from './services/notification';
 import {PushService} from './services/push';
 import {QrCodeService} from './services/qrcode';
 import {ReceiverService} from './services/receiver';
+import {SettingsService} from './services/settings';
 import {StateService} from './services/state';
 import {StringService} from './services/string';
 import {TitleService} from './services/title';
@@ -52,4 +53,5 @@ angular.module('3ema.services', [])
 .service('BrowserService', BrowserService)
 .service('ControllerService', ControllerService)
 .service('StringService', StringService)
+.service('SettingsService', SettingsService)
 ;

src/services/settings.ts

@@ -0,0 +1,73 @@
+/**
+ * This file is part of Threema Web.
+ *
+ * Threema Web is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Threema Web. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * The settings service can update variables for settings and persist them to local storage.
+ */
+
+export class SettingsService implements threema.SettingsService {
+    private $log: ng.ILogService;
+    private $window: ng.IWindowService;
+
+    private static STORAGE_KEY_PREFIX = 'settings-';
+    private logTag: string = '[SettingsService]';
+
+    private storage: Storage = null;
+    public blocked = false;
+
+    // Settings Variables
+
+    public static $inject = ['$log', '$window'];
+    constructor($log: ng.ILogService, $window: ng.IWindowService, themeProvider, $mdTheming) {
+        this.$log = $log;
+        this.$window = $window;
+
+        this.storage = this.$window.localStorage;
+
+        // Load Initial Data from LocalStorage to Settings Variables
+
+    }
+
+    // Settings Getters & Setters - also set them in ../threema.d.ts
+
+    // Local Storage , store key-value pair
+    private storeUntrustedKeyValuePair(Key: string, value: string): void {
+        this.$log.debug(this.logTag, 'Storing unencrypted key-value pair for settings');
+        this.storage.setItem(SettingsService.STORAGE_KEY_PREFIX + Key, value);
+    }
+
+    // Local Storage , retrieve key-value pair
+    private retrieveUntrustedKeyValuePair(Key: string): string {
+        this.$log.debug(this.logTag, 'Retrieving unencrypted key-value pair for settings');
+        if (this.hasUntrustedKeyValuePair(Key)) {
+            return this.storage.getItem(SettingsService.STORAGE_KEY_PREFIX + Key);
+        } else {
+            this.$log.debug(this.logTag, 'key-value not set, creating empty one');
+            this.storeUntrustedKeyValuePair(Key, '');
+        }
+
+    }
+
+    /**
+     * Return whether key-value pair is present in localstorage.
+     */
+    private hasUntrustedKeyValuePair(Key: string): boolean {
+        const item: string = this.storage.getItem(SettingsService.STORAGE_KEY_PREFIX + Key);
+        return item !== null;
+    }
+
+}

src/threema.d.ts

@@ -511,6 +511,10 @@ declare namespace threema {
         isBusinessContact(receiver: Receiver): boolean;
     }
 
+    interface SettingsService {
+
+    }
+
     interface WebClientDefault {
         getAvatar(type: string, highResolution: boolean): string;
     }