Settings dialog and functionality

app/controllers/settings-controller.js

@@ -1,6 +1,16 @@
-
 let angApp = require(__dirname+'/../init')
 
-angApp.controller('SettingsController', function ($scope, ChimeVerseService) {
+angApp.controller('SettingsController', function ($scope, AppStateService, SettingsService) {
+
+    $scope.closeSettings = () => {
+        AppStateService.set(AppStateService.previousState)
+    }
+
+    $scope.saveSettings = () => {
+        SettingsService.saveAll($scope.settings)
+        $scope.closeSettings()
+    }
+
+    $scope.settings = SettingsService.loadAll()
 
 })

app/services/app-state-service.js

@@ -10,7 +10,8 @@ angApp.factory('AppStateService', [ '$rootScope', ($rootScope) => {
     stateService.APP_STATE_ABOUT = 'about'
 
     stateService.set = (state) => {
-        stateService.previousState = stateService.state
+        stateService.previousState = typeof stateService.state !== 'undefined' ?
+            stateService.state : stateService.APP_STATE_DEFAULT
         stateService.state = state
         $rootScope.$broadcast('app:state:changed', stateService.state);
     }

app/services/chimeverse-service.js

@@ -1,6 +1,6 @@
 let angApp = require(__dirname + '/../init')
 
-angApp.factory('ChimeVerseService', ($window, CredentialsServise, SystemService, AppStateService) => {
+angApp.factory('ChimeVerseService', ($window, CredentialsServise, SystemService, AppStateService, SettingsService) => {
 
     let chimeverseService = {}
 
@@ -27,8 +27,9 @@ angApp.factory('ChimeVerseService', ($window, CredentialsServise, SystemService,
     chimeverseService.initConverse = (bosh, login, password) => {
         AppStateService.set(AppStateService.APP_STATE_DEFAULT) // Always set to default state before init
         let lang = navigator.language
+        let allowBookmarks = SettingsService.get('allowBookmarks')
         converse.initialize({
-            allow_bookmarks: false,
+            allow_bookmarks: allowBookmarks,
             bosh_service_url: bosh,
             view_mode: 'embedded',
             jid: login + '/chimeverse',

app/services/credentials-service.js

@@ -5,9 +5,9 @@ angApp.factory('CredentialsServise', () => {
     const keytar = require('keytar')
     const settings = require('electron-settings')
 
-    let settingsService = {}
+    let credentialsService = {}
 
-    settingsService.getCredentials = () => {
+    credentialsService.getCredentials = () => {
         let credentials = {}
         credentials.login = settings.get('login')
         let promise = new Promise((resolve, reject) => {
@@ -27,14 +27,14 @@ angApp.factory('CredentialsServise', () => {
         return promise
     }
 
-    settingsService.addCredentials = (bosh, login, password) => {
+    credentialsService.addCredentials = (bosh, login, password) => {
         let xmppService = login.split('@').pop()
         settings.set('bosh', bosh)
         settings.set('login', login)
         keytar.setPassword(xmppService, login, password)
     }
 
-    settingsService.removeCredentials = (login) => {
+    credentialsService.removeCredentials = (login) => {
         let xmppService = login.split('@').pop()
         passwordDelete = keytar.deletePassword(xmppService, login)
         let promise = new Promise((resolve, reject) => {
@@ -49,6 +49,6 @@ angApp.factory('CredentialsServise', () => {
         return promise
     }
 
-    return settingsService
+    return credentialsService
 })
 

app/services/settings-service.js

@@ -0,0 +1,99 @@
+let angApp = require(__dirname+'/../init')
+
+angApp.factory('SettingsService', () => {
+
+    let settingsService = {}
+
+    const electronSettings = require('electron-settings')
+
+    const settings = {
+        chimeverse: {
+            runMinimized: {
+                default: false,
+                title: 'Run minimized',
+                hint: 'Default: false. Whether run Chimeverse minimized to tray or not.'
+            },
+            minimizeOnClose: {
+                default: false,
+                title: 'Minimize on close',
+                hint: 'Default: false. Minimize or close Chimeverse window.'
+            },
+            preserveWindowSize: {
+                default: true,
+                title: 'Preserve window size',
+                hint: 'Default: true, 800x600 otherwise.'
+            },
+            preserveWindowPosition: {
+                default: true,
+                title: 'Preserve window position',
+                hint: 'Default: true, screen center otherwise.'
+            }
+        },
+        conversejs: {
+            allowBookmarks: {
+                default: false,
+                title: 'Allow server bookmarks',
+                hint: 'Default: false. Enables/disables chatroom bookmarks functionality.'
+            }
+        }
+    }
+
+    const iterateSettings = (callback, settingsObj) => {
+        if(typeof settingsObj === "undefined") {
+            settingsObj = settings
+        }
+        angular.forEach(settingsObj, (value, key) => {
+            let settingsList = settingsObj[key]
+            angular.forEach(settingsList, (value, key) => {
+                let itemDefault = settingsList[key]['default']
+                callback(key, itemDefault, settingsList)
+            })
+        })
+    }
+
+    // Callback
+    // TODO: replace with promise?
+    const saveDefault = (key, value) => {
+        if (!electronSettings.has(key)) {
+            electronSettings.set(key, value)
+        }
+    }
+
+    // Callback
+    const save = (key, defaultValue, settingsList) => {
+        let value = settingsList[key]['value']
+        electronSettings.set(key, value)
+    }
+
+    // Callback
+    const loadAll = (key, defaultValue, settingsList) => {
+        if (!electronSettings.has(key)) {
+            settingsList[key]['value'] = defaultValue
+        }
+        settingsList[key]['value'] = electronSettings.get(key)
+    }
+
+    /**
+     * SettingsService
+     */
+    settingsService.initDefaults = () => {
+        iterateSettings(saveDefault)
+    }
+
+    settingsService.get = (key) => {
+        return electronSettings.get(key)
+    }
+
+    settingsService.loadAll = () => {
+        let currentSettings = angular.copy(settings)
+        iterateSettings(loadAll, currentSettings)
+        return currentSettings
+    }
+
+    settingsService.saveAll = (currentSettings) => {
+        iterateSettings(save, currentSettings)
+    }
+
+    return settingsService
+})
+

app/views/settings/page.html

@@ -0,0 +1,23 @@
+<div class="settings-page" ng-controller="SettingsController">
+    <form name="settignsForm">
+    <h3 class="settings-page__title">Chimeverse settings</h3>
+    <div class="form-item" ng-repeat="(key, item) in settings.chimeverse">
+        <label>
+            <input type="checkbox" name="{{key}}" ng-model="item.value" /> {{item.title}}
+        </label>
+        <div class="form-item__hint">{{item.hint}}</div>
+    </div>
+    <h3 class="settings-page__title">Converse.js settings</h3>
+    <div class="form-item" ng-repeat="(key, item) in settings.conversejs">
+        <label>
+            <input type="checkbox" name="{{key}}" ng-model="item.value" /> {{item.title}}
+        </label>
+        <div class="form-item__hint">{{item.hint}}</div>
+    </div>
+    <div class="form-actions">
+        <button class="form-item__save-button" ng-click="saveSettings()">Save</button>
+        <button class="form-item__cancel-button" ng-click="closeSettings()">Cancel</button>
+    </div>
+</form>
+</div>
+<ng-include src="'./app/views/shared/_footer.html'"></ng-include>

index.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" type="text/css" href="resources/css/page-about.css">
     <link rel="stylesheet" type="text/css" href="resources/css/page-default.css">
     <link rel="stylesheet" type="text/css" href="resources/css/page-login.css">
+    <link rel="stylesheet" type="text/css" href="resources/css/page-settings.css">
 </head>
 <base href="./">
 <body ng-app="app">
@@ -25,7 +26,7 @@
             <ng-include src="'./app/views/about/page.html'"></ng-include>
         </div>
         <div ng-show="state == 'settings'">
-            settings
+            <ng-include src="'./app/views/settings/page.html'"></ng-include>
         </div>
     </div>
     <!--

main.js

@@ -1,5 +1,7 @@
 // Modules to control application life and create native browser window
-const {app, BrowserWindow, shell} = require('electron')
+const { app, BrowserWindow, shell } = require('electron')
+
+const electronSettings = require('electron-settings')
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -14,14 +16,41 @@ function initApp() {
 }
 
 function createWindow () {
-    // Create the browser window.
-    mainWindow = new BrowserWindow({
+    // Main window options
+    let mainWindowOptions = {
         width: 800,
         height: 600,
+        minWidth: 780,
+        minHeight: 560,
         webPreferences: {
             nodeIntegration: true
         }
-    })
+    }
+
+    // Load app settings
+    let runMinimized = electronSettings.get('runMinimized')
+    if (typeof runMinimized !== 'undefined') {
+        mainWindowOptions.show = !runMinimized
+    }
+    let minimizeOnClose = electronSettings.get('minimizeOnClose')
+    let preserveWindowSize = electronSettings.get('preserveWindowSize')
+    if (preserveWindowSize) {
+        let width = electronSettings.get('windowWidth')
+        let height = electronSettings.get('windowHeight')
+        if (typeof width !== 'undefined') mainWindowOptions.width = width
+        if (typeof height !== 'undefined') mainWindowOptions.height = height
+    }
+
+    let preserveWindowPosition = electronSettings.get('preserveWindowPosition')
+    if (preserveWindowPosition !== 'undefined') {
+        let windowX = electronSettings.get('windowX')
+        let windowY = electronSettings.get('windowY')
+        if (typeof windowX !== 'undefined') mainWindowOptions.x = windowX
+        if (typeof windowY !== 'undefined') mainWindowOptions.y = windowY
+    }
+
+    // Create the browser window.
+    mainWindow = new BrowserWindow(mainWindowOptions)
 
     // and load the index.html of the app.
     mainWindow.loadFile('index.html')
@@ -35,6 +64,39 @@ function createWindow () {
     // Open the DevTools.
     mainWindow.webContents.openDevTools()
 
+    // Before close
+    if (minimizeOnClose !== 'undefined') {
+        mainWindow.on('close', (e) => {
+            if (!app.isQuitting) {
+                e.preventDefault()
+                mainWindow.hide()
+            }
+        })
+    }
+
+    // Save window size
+    if (preserveWindowSize !== 'undefined') {
+        mainWindow.on('resize', (e) => {
+            let newSize = mainWindow.getSize()
+            let width = newSize[0]
+            let height = newSize[1]
+            electronSettings.set('windowWidth', width)
+            electronSettings.set('windowHeight', height)
+        })
+    }
+
+    // Save window position
+    if (preserveWindowPosition !== 'undefined') {
+        mainWindow.on('move', (e) => {
+            let newPosition = mainWindow.getPosition()
+            let windowX = newPosition[0]
+            let windowY = newPosition[1]
+            electronSettings.set('windowX', windowX)
+            electronSettings.set('windowY', windowY)
+        })
+    }
+
+
     // Emitted when the window is closed.
     mainWindow.on('closed', function () {
         // Dereference the window object, usually you would store windows

modules/menu-service.js

@@ -15,7 +15,10 @@ menuService.createMenu = () => {
             {
                 label: 'About Chimeverse',
                 click: () => {
-                    let activeWindow = BrowserWindow.getFocusedWindow()
+                    // @see https://github.com/electron/electron/issues/16558#issuecomment-484460276
+                    // let activeWindow = BrowserWindow.getFocusedWindow()
+                    let activeWindow = BrowserWindow.getAllWindows()[0]
+                    activeWindow.show()
                     activeWindow.webContents.send('about-page-event');
                 }
             },
@@ -23,7 +26,8 @@ menuService.createMenu = () => {
                 label: 'Reconnect',
                 accelerator: 'CmdOrCtrl+R',
                 click: () => {
-                    let activeWindow = BrowserWindow.getFocusedWindow()
+                    let activeWindow = BrowserWindow.getAllWindows()[0]
+                    activeWindow.show()
                     activeWindow.reload()
                 }
             },
@@ -31,7 +35,8 @@ menuService.createMenu = () => {
                 label: 'Force logout',
                 accelerator: 'CmdOrCtrl+D',
                 click: () => {
-                    let activeWindow = BrowserWindow.getFocusedWindow()
+                    let activeWindow = BrowserWindow.getAllWindows()[0]
+                    activeWindow.show()
                     activeWindow.webContents.send('force-logout-event');
                 }
             },
@@ -42,7 +47,8 @@ menuService.createMenu = () => {
                 label: 'Preferences',
                 accelerator: 'CmdOrCtrl+,',
                 click: () => {
-                    let activeWindow = BrowserWindow.getFocusedWindow()
+                    let activeWindow = BrowserWindow.getAllWindows()[0]
+                    activeWindow.show()
                     activeWindow.webContents.send('preferences-event');
                 }
             },
@@ -53,6 +59,7 @@ menuService.createMenu = () => {
                 label: 'Quit',
                 accelerator: 'Command+Q',
                 click: () => {
+                    app.isQuitting = true
                     app.quit()
                 },
             },

renderer.js

@@ -5,6 +5,7 @@
 var angApp = require('./app/init')
 
 require('./app/services/credentials-service')
+require('./app/services/settings-service')
 require('./app/services/system-service')
 require('./app/services/app-state-service')
 require('./app/services/chimeverse-service')
@@ -15,7 +16,7 @@ require('./app/controllers/about-controller')
 const chimeversePlugin = require('./libs/converse.js/3rdparty/chimeverse-plugin')
 chimeversePlugin.register()
 
-angApp.controller('AppController', function ($scope, $timeout, ChimeVerseService, CredentialsServise, AppStateService) {
+angApp.controller('AppController', function ($scope, $timeout, ChimeVerseService, CredentialsServise, SettingsService, AppStateService) {
 
     //const { remote, ipcRenderer } = require('electron')
     const { ipcRenderer } = require('electron')
@@ -46,6 +47,8 @@ angApp.controller('AppController', function ($scope, $timeout, ChimeVerseService
         }, 0)
     });
 
+    SettingsService.initDefaults()
+
     $scope.getCredentialsAndLogin = () => {
         let credentials = CredentialsServise.getCredentials()
         credentials.then((result) => {

resources/css/app.css

@@ -12,7 +12,7 @@
 
 body {
     background: #f8f8f8;
-	font: normal 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
+	font: normal 14px "Helvetica Neue",Helvetica,Arial,sans-serif;
 	-webkit-text-size-adjust: 100%;
 }
 

resources/css/page-settings.css

@@ -0,0 +1,12 @@
+.settings-page {
+    padding: 0px 20px 0px 20px;
+}
+
+.form-item {
+    margin-bottom: 15px;
+}
+
+.form-item__hint {
+    color: #777;
+    font-size: 13px;
+}