Bump version to 1.1.5 in package.json and update the changelog.

* feat: Make saving the configuration more robust

* parse backup user config before return

* fix some bug

* Add write-userconfig.js and invalid-config.bin

* throw exception if failed user config parsing

* Merge branch 'master' into feat-467-make-save-more-robust

* hide keymaps and macros if agent in restore mode

* fix Device name settings

.nvmrc

@@ -1 +1 @@
-8.9.1
+8.9.4

.travis.yml

@@ -11,7 +11,7 @@ matrix:
   fast_finish: true
   include:
     - os: osx
-      osx_image: xcode8.3
+      osx_image: xcode9.3beta
     - os: linux
       env: CC=clang CXX=clang++ npm_config_clang=1
       compiler: clang
@@ -45,7 +45,6 @@ addons:
 
 install:
   - nvm install
-  - npm i -g npm@5.6.0
   - npm install
 
 before_script:

CHANGELOG.md

@@ -4,7 +4,57 @@ All notable changes to this project will be documented in this file.
 
 The format is loosely based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 
-## [1.1.0] - 2017-01-15
+Every Agent version includes the most recent firmware version. See the [firmware changelog](https://github.com/UltimateHackingKeyboard/firmware/blob/master/CHANGELOG.md).
+
+## [1.1.5] - 2018-04-10
+
+Firmware: 8.1.5 [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.1.5)] | Device Protocol: 4.2.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
+
+- Don't allow to run multiple instances of Agent at the same time, but rather focus the already existing Agent window.
+
+## [1.1.4] - 2018-04-09
+
+Firmware: 8.1.5 [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.1.5)] | Device Protocol: 4.2.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
+
+- Handle privilege escalation gracefully on Linux even without PolicyKit.
+- Fix application icon path.
+- Replace application icon with a diagonal gradient based icon that should look better on desktop.
+- Make saving the configuration more robust, and add a configuration recovery screen.
+- Reposition the ISO key in the scancode list.
+
+## [1.1.3] - 2018-04-06
+
+Firmware: 8.1.**5** [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.1.5)] | Device Protocol: 4.2.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
+
+- Show the firmware versions of the left and right keyboard halves on the firmware page.
+- Fix menu scancode.
+- Make the tooltip text regarding non-US characters easier to understand.
+- On the Device Configuration page change terminology from download/upload to export/import for greater clarity.
+
+## [1.1.2] - 2018-03-09
+
+Firmware: 8.1.**4** [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.1.4)] | Device Protocol: 4.2.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
+
+- Fix the configuration serializer so that the correct key actions get serialized, and the save button always appears when needed.
+- Add instructions to the firmware page to aid users.
+- Fix code signing on OSX.
+- Sign Agent on Windows.
+
+## [1.1.1] - 2018-02-13
+
+Firmware: 8.1.**2** [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.1.2)] | Device Protocol: 4.2.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
+
+- Sign Agent on OSX resulting in easier installation.
+- Add per-keymap description field.
+- Sort keymaps and macros alphabetically within the key action popover.
+- Add tooltip regarding non-US scancodes.
+- When deleting a macro, also delete the relevant play macro actions.
+- Make the reset configuration button persist the reset configuration in Agent-web.
+- Make Agent able to unbrick bricked modules.
+- Assign "switch to test keymap" action on all keymaps in the default configuration.
+- Add keymap descriptions in the default configuration.
+
+## [1.1.0] - 2018-01-15
 
 Firmware: 8.**1**.0 [[release](https://github.com/UltimateHackingKeyboard/firmware/releases/tag/v8.1.0)] | Device Protocol: 4.2.0 | User Config: 4.0.0 | Hardware Config: 1.0.0
 

appveyor.yml

@@ -1,8 +1,11 @@
 os: unstable
 
+clone_folder: c:\projects\uhk-agent
+
 environment:
   GH_TOKEN:
     secure: 3IebpEKmC39codi1wT6dXx8mql4/mCL1JzZ7lir7GQ5MWRnCxlED2OXbiKHHigDV
+  CSC_LINK: c:\projects\uhk-agent\scripts\certs\windows-cert.p12
   matrix:
     - nodejs_version: "8"
 
@@ -18,7 +21,6 @@ shallow_clone: true
 
 install:
   - ps: Install-Product node $env:nodejs_version
-  - npm i -g npm@5.6.0
   - choco install chromium
   - set CI=true
   - set PATH=%APPDATA%\npm;%PATH%

package.json

@@ -3,8 +3,8 @@
   "private": true,
   "author": "Ultimate Gadget Laboratories",
   "main": "electron/dist/electron-main.js",
-  "version": "1.1.0",
+  "version": "1.1.5",
-  "firmwareVersion": "8.1.0",
+  "firmwareVersion": "8.1.5",
   "deviceProtocolVersion": "4.2.0",
   "userConfigVersion": "4.0.0",
   "hardwareConfigVersion": "1.0.0",
@@ -21,7 +21,7 @@
   "devDependencies": {
     "@types/electron-devtools-installer": "2.0.2",
     "@types/electron-settings": "3.0.0",
-    "@types/fs-extra": "4.0.5",
+    "@types/fs-extra": "5.0.1",
     "@types/jasmine": "2.6.0",
     "@types/jsonfile": "4.0.1",
     "@types/node": "8.0.53",
@@ -30,25 +30,28 @@
     "@types/usb": "1.1.3",
     "autoprefixer": "6.5.3",
     "buffer": "5.0.6",
+    "copyfiles": "^2.0.0",
     "copy-webpack-plugin": "4.0.1",
     "core-js": "2.4.1",
     "cross-env": "5.0.5",
     "decompress": "4.2.0",
     "decompress-tarbz2": "^4.1.1",
     "devtron": "1.4.0",
-    "electron": "1.7.5",
+    "electron": "1.8.4",
-    "electron-builder": "19.45.5",
+    "electron-builder": "20.8.1",
-    "electron-debug": "1.4.0",
+    "electron-debug": "1.5.0",
-    "electron-devtools-installer": "2.2.0",
+    "electron-devtools-installer": "2.2.3",
-    "electron-log": "2.2.9",
+    "electron-log": "2.2.14",
-    "electron-rebuild": "1.6.0",
+    "electron-rebuild": "1.7.3",
-    "electron-settings": "3.1.2",
+    "electron-settings": "3.1.4",
+    "electron-updater": "2.21.4",
     "exports-loader": "0.6.3",
     "file-loader": "0.10.0",
-    "fs-extra": "4.0.2",
+    "fs-extra": "5.0.0",
     "jsonfile": "4.0.0",
-    "lerna": "2.0.0",
+    "lerna": "2.9.0",
     "mkdirp": "0.5.1",
+    "node-hid": "0.5.7",
     "npm-run-all": "4.0.2",
     "pre-commit": "1.2.2",
     "request": "2.83.0",
@@ -58,7 +61,7 @@
     "svg-sprite": "1.3.7",
     "ts-loader": "2.3.1",
     "ts-node": "3.0.4",
-    "tslint": "5.5.0",
+    "tslint": "5.9.1",
     "typescript": "2.5.2",
     "webpack": "2.4.1"
   },
@@ -74,11 +77,11 @@
     "test:uhk-web": "lerna exec --scope uhk-web npm test",
     "lint": "run-s -scn lint:ts lint:style",
     "lint:ts": "run-p -sn lint:ts:electron-main lint:ts:electron-renderer lint:ts:web lint:ts:test-serializer lint:ts:uhk-usb",
-    "lint:ts:electron-main": "tslint --type-check --project ./packages/uhk-agent/tsconfig.json",
+    "lint:ts:electron-main": "tslint --project ./packages/uhk-agent/tsconfig.json",
-    "lint:ts:electron-renderer": "tslint --type-check --project ./packages/uhk-web/src/tsconfig.renderer.json",
+    "lint:ts:electron-renderer": "tslint --project ./packages/uhk-web/src/tsconfig.renderer.json",
-    "lint:ts:web": "tslint --type-check --project ./packages/uhk-web/src/tsconfig.app.json",
+    "lint:ts:web": "tslint --project ./packages/uhk-web/src/tsconfig.app.json",
-    "lint:ts:test-serializer": "tslint --type-check --project ./packages/test-serializer/tsconfig.json",
+    "lint:ts:test-serializer": "tslint --project ./packages/test-serializer/tsconfig.json",
-    "lint:ts:uhk-usb": "tslint --type-check --project ./packages/uhk-usb/tsconfig.json",
+    "lint:ts:uhk-usb": "tslint --project ./packages/uhk-usb/tsconfig.json",
     "lint:style": "stylelint \"packages/uhk-agent/src/**/*.scss\" \"packages/uhk-web/src/**/*.scss\" --syntax scss",
     "build": "run-s build:common build:usb build:web build:electron",
     "build:web": "lerna exec --scope uhk-web npm run build",
@@ -90,6 +93,7 @@
     "server:web": "lerna exec --scope uhk-web npm start",
     "server:electron": "lerna exec --scope uhk-web npm run server:renderer",
     "electron": "lerna exec --scope uhk-agent npm start",
+    "electron:spe": "lerna exec --scope uhk-agent npm run electron:spe",
     "standard-version": "standard-version",
     "pack": "node ./scripts/release.js",
     "sprites": "node ./scripts/generate-svg-sprites",

packages/uhk-agent/package.json

@@ -17,13 +17,7 @@
     "command-line-args": "4.0.7",
     "decompress": "4.2.0",
     "decompress-bzip2": "4.0.0",
-    "electron": "1.7.9",
+    "node-hid": "0.5.7",
-    "electron-is-dev": "0.1.2",
-    "electron-log": "2.2.9",
-    "electron-rebuild": "1.6.0",
-    "electron-settings": "3.1.2",
-    "electron-updater": "2.15.0",
-    "node-hid": "0.5.4",
     "sudo-prompt": "7.0.0",
     "tmp": "0.0.33",
     "uhk-common": "^1.0.0",
@@ -36,6 +30,7 @@
   },
   "scripts": {
     "start": "electron ./dist/electron-main.js",
+    "electron:spe": "electron ./dist/electron-main.js --spe",
     "build": "webpack && npm run install:build-deps && npm run build:usb && npm run download-firmware && npm run copy-blhost",
     "build:usb": "electron-rebuild -w node-hid -p -m ./dist",
     "install:build-deps": "cd ./dist && npm i",

packages/uhk-agent/src/electron-main.ts

@@ -2,7 +2,7 @@
 /// <reference path="./custom_types/command-line-args.d.ts"/>
 
 import './polyfills';
-import { app, BrowserWindow, ipcMain } from 'electron';
+import { app, BrowserWindow } from 'electron';
 import { autoUpdater } from 'electron-updater';
 
 import * as path from 'path';
@@ -10,7 +10,7 @@ import * as url from 'url';
 import * as commandLineArgs from 'command-line-args';
 import { UhkHidDevice, UhkOperations } from 'uhk-usb';
 // import { ElectronDataStorageRepositoryService } from './services/electron-datastorage-repository.service';
-import { LogRegExps } from 'uhk-common';
+import { CommandLineArgs, LogRegExps } from 'uhk-common';
 import { DeviceService } from './services/device.service';
 import { logger } from './services/logger.service';
 import { AppUpdateService } from './services/app-update.service';
@@ -18,13 +18,13 @@ import { AppService } from './services/app.service';
 import { SudoService } from './services/sudo.service';
 import { UhkBlhost } from '../../uhk-usb/src';
 import * as isDev from 'electron-is-dev';
-import { CommandLineInputs } from './models/command-line-inputs';
 
 const optionDefinitions = [
-    {name: 'addons', type: Boolean}
+    {name: 'addons', type: Boolean},
+    {name: 'spe', type: Boolean} // simulate privilege escalation error
 ];
 
-const options: CommandLineInputs = commandLineArgs(optionDefinitions);
+const options: CommandLineArgs = commandLineArgs(optionDefinitions);
 
 // import './dev-extension';
 // require('electron-debug')({ showDevTools: true, enabled: true });
@@ -60,7 +60,25 @@ if (console.debug) {
     };
 }
 
+const isSecondInstance = app.makeSingleInstance(function (commandLine, workingDirectory) {
+    // Someone tried to run a second instance, we should focus our window.
+    if (win) {
+        if (win.isMinimized()) {
+            win.restore();
+        }
+        win.focus();
+    }
+});
+
+if (isSecondInstance) {
+    app.quit();
+}
+
 function createWindow() {
+    if (isSecondInstance) {
+        return;
+    }
+
     logger.info('[Electron Main] Create new window.');
     let packagesDir;
     if (isDev) {
@@ -79,17 +97,17 @@ function createWindow() {
         webPreferences: {
             nodeIntegration: true
         },
-        icon: 'assets/images/agent-icon.png'
+        icon: path.join(__dirname, 'renderer/assets/images/agent-app-icon.png')
     });
     win.setMenuBarVisibility(false);
     win.maximize();
-    uhkHidDeviceService = new UhkHidDevice(logger);
+    uhkHidDeviceService = new UhkHidDevice(logger, options);
     uhkBlhost = new UhkBlhost(logger, packagesDir);
     uhkOperations = new UhkOperations(logger, uhkBlhost, uhkHidDeviceService, packagesDir);
     deviceService = new DeviceService(logger, win, uhkHidDeviceService, uhkOperations);
     appUpdateService = new AppUpdateService(logger, win, app);
     appService = new AppService(logger, win, deviceService, options, uhkHidDeviceService);
-    sudoService = new SudoService(logger);
+    sudoService = new SudoService(logger, options);
     // and load the index.html of the app.
 
     win.loadURL(url.format({
@@ -133,13 +151,13 @@ app.on('ready', createWindow);
 
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
-    app.quit();
-});
-
-app.on('will-quit', () => {
     if (appUpdateService) {
         appUpdateService.saveFirtsRun();
     }
+    app.exit();
+});
+
+app.on('will-quit', () => {
 });
 
 app.on('activate', () => {

packages/uhk-agent/src/models/command-line-inputs.ts

@@ -1,3 +1,10 @@
 export interface CommandLineInputs {
+    /**
+     * addons menu visible or not
+     */
     addons?: boolean;
+    /**
+     * simulate privilege escalation error
+     */
+    spe?: boolean;
 }

packages/uhk-agent/src/services/device.service.ts

@@ -1,5 +1,15 @@
 import { ipcMain } from 'electron';
-import { ConfigurationReply, DeviceConnectionState, IpcEvents, IpcResponse, LogService } from 'uhk-common';
+import {
+    ConfigurationReply,
+    DeviceConnectionState,
+    getHardwareConfigFromDeviceResponse,
+    HardwareModules,
+    IpcEvents,
+    IpcResponse,
+    LogService,
+    mapObjectToUserConfigBinaryBuffer,
+    SaveUserConfigurationData
+} from 'uhk-common';
 import { snooze, UhkHidDevice, UhkOperations } from 'uhk-usb';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
@@ -14,6 +24,7 @@ import 'rxjs/add/operator/distinctUntilChanged';
 import { saveTmpFirmware } from '../util/save-extract-firmware';
 import { TmpFirmware } from '../models/tmp-firmware';
 import { QueueManager } from './queue-manager';
+import { backupUserConfiguration, getBackupUserConfigurationContent } from '../util/backup-user-confoguration';
 
 /**
  * IpcMain pair of the UHK Communication
@@ -73,10 +84,19 @@ export class DeviceService {
         try {
             await this.device.waitUntilKeyboardBusy();
             const result = await this.operations.loadConfigurations();
+            const modules: HardwareModules = {
+                leftModuleInfo: await this.operations.getLeftModuleVersionInfo(),
+                rightModuleInfo: await this.operations.getRightModuleVersionInfo()
+            };
+
+            const hardwareConfig = getHardwareConfigFromDeviceResponse(result.hardwareConfiguration);
+            const uniqueId = hardwareConfig.uniqueId;
 
             response = {
                 success: true,
-                ...result
+                ...result,
+                modules,
+                backupConfiguration: await getBackupUserConfigurationContent(this.logService, uniqueId)
             };
         } catch (error) {
             response = {
@@ -157,10 +177,13 @@ export class DeviceService {
 
     private async saveUserConfiguration(event: Electron.Event, args: Array<string>): Promise<void> {
         const response = new IpcResponse();
-        const json = args[0];
+        const data: SaveUserConfigurationData = JSON.parse(args[0]);
 
         try {
-            await this.operations.saveUserConfiguration(json);
+            await backupUserConfiguration(data);
+
+            const buffer = mapObjectToUserConfigBinaryBuffer(data.configuration);
+            await this.operations.saveUserConfiguration(buffer);
 
             response.success = true;
         }

packages/uhk-agent/src/services/sudo.service.ts

@@ -5,12 +5,13 @@ import * as sudo from 'sudo-prompt';
 import { dirSync } from 'tmp';
 import { emptyDir, copy } from 'fs-extra';
 
-import { IpcEvents, LogService, IpcResponse } from 'uhk-common';
+import { CommandLineArgs, IpcEvents, LogService, IpcResponse } from 'uhk-common';
 
 export class SudoService {
     private rootDir: string;
 
-    constructor(private logService: LogService) {
+    constructor(private logService: LogService,
+                private options: CommandLineArgs) {
         if (isDev) {
             this.rootDir = path.join(path.join(process.cwd(), process.argv[1]), '../../../../');
         } else {
@@ -21,6 +22,19 @@ export class SudoService {
     }
 
     private async setPrivilege(event: Electron.Event) {
+        if (this.options.spe) {
+            const error = new Error('No polkit authentication agent found.');
+            this.logService.error('[SudoService] Simulate privilege escalation error ', error);
+
+            const response = new IpcResponse();
+            response.success = false;
+            response.error = {message: error.message};
+
+            event.sender.send(IpcEvents.device.setPrivilegeOnLinuxReply, response);
+
+            return;
+        }
+
         switch (process.platform) {
             case 'linux':
                 await this.setPrivilegeOnLinux(event);
@@ -28,7 +42,7 @@ export class SudoService {
             default:
                 const response: IpcResponse = {
                     success: false,
-                    error: { message: 'Permissions couldn\'t be set. Invalid platform: ' + process.platform }
+                    error: {message: 'Permissions couldn\'t be set. Invalid platform: ' + process.platform}
                 };
 
                 event.sender.send(IpcEvents.device.setPrivilegeOnLinuxReply, response);
@@ -39,7 +53,7 @@ export class SudoService {
     private async setPrivilegeOnLinux(event: Electron.Event) {
         const tmpDirectory = dirSync();
         const rulesDir = path.join(this.rootDir, 'rules');
-        this.logService.debug('[SudoService] Copy rules dir', { src: rulesDir, dst: tmpDirectory.name });
+        this.logService.debug('[SudoService] Copy rules dir', {src: rulesDir, dst: tmpDirectory.name});
         await copy(rulesDir, tmpDirectory.name);
 
         const scriptPath = path.join(tmpDirectory.name, 'setup-rules.sh');
@@ -55,7 +69,7 @@ export class SudoService {
             if (error) {
                 this.logService.error('[SudoService] Error when set privilege: ', error);
                 response.success = false;
-                response.error = error;
+                response.error = {message: error.message};
             } else {
                 response.success = true;
             }

packages/uhk-agent/src/util/backup-user-confoguration.ts

@@ -0,0 +1,32 @@
+import { app } from 'electron';
+import { LogService, UserConfiguration, SaveUserConfigurationData } from 'uhk-common';
+import * as path from 'path';
+import * as fs from 'fs-extra';
+
+export const getBackupUserConfigurationPath = (uniqueId: number): string => {
+    const appDataDir = app.getPath('userData');
+
+    return path.join(appDataDir, `${uniqueId}.json`);
+};
+
+export const backupUserConfiguration = (data: SaveUserConfigurationData): Promise<void> => {
+    const backupFilePath = getBackupUserConfigurationPath(data.uniqueId);
+    return fs.writeJSON(backupFilePath, data.configuration, {spaces: 2});
+};
+
+export const getBackupUserConfigurationContent = async (logService: LogService, uniqueId: number): Promise<UserConfiguration> => {
+    try {
+        const backupFilePath = getBackupUserConfigurationPath(uniqueId);
+
+        if (await fs.pathExists(backupFilePath)) {
+            const json = await fs.readJSON(backupFilePath);
+            new UserConfiguration().fromJsonObject(json);
+
+            return json;
+        }
+
+        return null;
+    } catch (error) {
+        logService.error('Can not load backup user configuration for device', {uniqueId, error});
+    }
+};

packages/uhk-common/package.json

@@ -10,7 +10,10 @@
     "url": "git@github.com:UltimateHackingKeyboard/agent.git"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "run-s tsc copy:*",
+    "tsc": "tsc",
+    "copy:scancodes": "copyfiles ./src/config-serializer/config-items/scancodes.json dist",
+    "copy:secondary-roles": "copyfiles ./src/config-serializer/config-items/secondaryRole.json dist",
     "test": "jasmine-ts --config=jasmine.json",
     "coverage": "nyc jasmine-ts --config=jasmine.json"
   },

packages/uhk-common/src/config-serializer/config-items/index.ts

@@ -9,3 +9,6 @@ export * from './macro';
 export * from './module';
 export * from './module-configuration';
 export * from './user-configuration';
+
+export const SCANCODES = require('./scancodes.json');
+export const SECONDARY_ROLES = require('./secondaryRole.json');

packages/uhk-common/src/config-serializer/config-items/key-action/helper.ts

@@ -7,6 +7,8 @@ import { SwitchLayerAction } from './switch-layer-action';
 import { SwitchKeymapAction, UnresolvedSwitchKeymapAction } from './switch-keymap-action';
 import { MouseAction } from './mouse-action';
 import { PlayMacroAction } from './play-macro-action';
+import { NoneAction } from './none-action';
+import { isScancodeExists } from '../scancode-checker';
 
 export class Helper {
 
@@ -25,7 +27,12 @@ export class Helper {
         buffer.backtrack();
 
         if (keyActionFirstByte >= KeyActionId.KeystrokeAction && keyActionFirstByte < KeyActionId.LastKeystrokeAction) {
-            return new KeystrokeAction().fromBinary(buffer);
+            const keystrokeAction = new KeystrokeAction().fromBinary(buffer);
+            if (isValidKeystrokeAction(keystrokeAction)) {
+                return keystrokeAction;
+            }
+
+            return new NoneAction();
         }
 
         switch (keyActionFirstByte) {
@@ -67,8 +74,14 @@ export class Helper {
         }
 
         switch (keyAction.keyActionType) {
-            case keyActionType.KeystrokeAction:
+            case keyActionType.KeystrokeAction: {
-                return new KeystrokeAction().fromJsonObject(keyAction);
+                const keystrokeAction = new KeystrokeAction().fromJsonObject(keyAction);
+                if (isValidKeystrokeAction(keystrokeAction)) {
+                    return keystrokeAction;
+                }
+
+                return new NoneAction();
+            }
             case keyActionType.SwitchLayerAction:
                 return new SwitchLayerAction().fromJsonObject(keyAction);
             case keyActionType.SwitchKeymapAction:
@@ -77,8 +90,16 @@ export class Helper {
                 return new MouseAction().fromJsonObject(keyAction);
             case keyActionType.PlayMacroAction:
                 return new PlayMacroAction().fromJsonObject(keyAction, macros);
+            case keyActionType.NoneAction:
+                return new NoneAction();
             default:
                 throw `Invalid KeyAction.keyActionType: "${keyAction.keyActionType}"`;
         }
     }
 }
+
+function isValidKeystrokeAction(keystrokeAction: KeystrokeAction): boolean {
+    return keystrokeAction.hasSecondaryRoleAction() ||
+        keystrokeAction.hasActiveModifier() ||
+        keystrokeAction.hasScancode() && isScancodeExists(keystrokeAction.scancode);
+}

packages/uhk-common/src/config-serializer/config-items/module.ts

@@ -54,15 +54,12 @@ export class Module {
 
         const noneAction = new NoneAction();
 
-        const keyActions: KeyAction[] = this.keyActions.map(keyAction => {
+        buffer.writeArray(this.keyActions, (uhkBuffer: UhkBuffer, keyAction: KeyAction) => {
             if (keyAction) {
-                return keyAction;
+                keyAction.toBinary(uhkBuffer, userConfiguration);
+            } else {
+                noneAction.toBinary(uhkBuffer);
             }
-            return noneAction;
-        });
-
-        buffer.writeArray(keyActions, (uhkBuffer: UhkBuffer, keyAction: KeyAction) => {
-            keyAction.toBinary(uhkBuffer, userConfiguration);
         });
     }
 

packages/uhk-common/src/config-serializer/config-items/scancode-checker.ts

@@ -0,0 +1,26 @@
+import { SCANCODES } from './';
+
+let scancodeMap: Map<number, any>;
+
+export function isScancodeExists(scancode: number): boolean {
+    if (!scancodeMap) {
+        fillScancodeMap();
+    }
+
+    return scancodeMap.has(scancode);
+}
+
+function fillScancodeMap(): void {
+    scancodeMap = new Map<number, any>();
+
+    for (const scanGroup of SCANCODES) {
+        for (const child of scanGroup.children) {
+            if (child.additional && child.additional.scancode) {
+                scancodeMap.set(child.additional.scancode, child);
+            }
+            else {
+                scancodeMap.set(Number.parseInt(child.id), child);
+            }
+        }
+    }
+}

packages/uhk-common/src/config-serializer/config-items/scancodes.json

@@ -105,6 +105,10 @@
             {
                 "id": "29",
                 "text": "Z"
+            },
+            {
+              "id": "100",
+              "text": "| ISO"
             }
         ]
     },
@@ -242,7 +246,7 @@
                 "text": "Delete"
             },
             {
-                "id": "118",
+                "id": "101",
                 "text": "Menu"
             },
             {
@@ -314,10 +318,6 @@
                 "id": "69",
                 "text": "F12"
             },
-            {
-              "id": "100",
-              "text": "| ISO"
-            },
             {
                 "id": "104",
                 "text": "F13"

packages/uhk-common/src/models/command-line-args.ts

@@ -1,3 +1,10 @@
 export interface CommandLineArgs {
-    addons: boolean;
+    /**
+     * addons menu visible or not
+     */
+    addons?: boolean;
+    /**
+     * simulate privilege escalation error
+     */
+    spe?: boolean;
 }

packages/uhk-common/src/models/configuration-reply.ts

@@ -1,6 +1,11 @@
+import { HardwareModules } from './hardware-modules';
+import { UserConfiguration } from '../config-serializer/config-items';
+
 export interface ConfigurationReply {
     success: boolean;
     userConfiguration?: string;
     hardwareConfiguration?: string;
+    modules?: HardwareModules;
     error?: string;
+    backupConfiguration?: UserConfiguration;
 }

packages/uhk-common/src/models/hardware-module-info.ts

@@ -0,0 +1,4 @@
+export interface HardwareModuleInfo {
+    firmwareVersion?: string;
+    moduleProtocolVersion?: string;
+}

packages/uhk-common/src/models/hardware-modules.ts

@@ -0,0 +1,6 @@
+import { HardwareModuleInfo } from './hardware-module-info';
+
+export interface HardwareModules {
+    leftModuleInfo?: HardwareModuleInfo;
+    rightModuleInfo?: HardwareModuleInfo;
+}

packages/uhk-common/src/models/index.ts

@@ -5,3 +5,6 @@ export * from './app-start-info';
 export * from './configuration-reply';
 export * from './version-information';
 export * from './device-connection-state';
+export * from './hardware-modules';
+export * from './hardware-module-info';
+export * from './save-user-configuration-data';

packages/uhk-common/src/models/save-user-configuration-data.ts

@@ -0,0 +1,4 @@
+export interface SaveUserConfigurationData {
+    uniqueId: number;
+    configuration: string;
+}

packages/uhk-common/src/util/helpers.ts

@@ -0,0 +1,33 @@
+import { HardwareConfiguration, UhkBuffer, UserConfiguration } from '../../index';
+
+export const getHardwareConfigFromDeviceResponse = (json: string): HardwareConfiguration => {
+    const data = JSON.parse(json);
+    const hardwareConfig = new HardwareConfiguration();
+    hardwareConfig.fromBinary(UhkBuffer.fromArray(data));
+
+    if (hardwareConfig.uniqueId > 0) {
+        return hardwareConfig;
+    }
+    return null;
+};
+
+export const getUserConfigFromDeviceResponse = (json: string): UserConfiguration => {
+    const data = JSON.parse(json);
+    const userConfig = new UserConfiguration();
+    userConfig.fromBinary(UhkBuffer.fromArray(data));
+
+    if (userConfig.userConfigMajorVersion > 0) {
+        return userConfig;
+    }
+
+    throw Error('Invalid user configuration');
+};
+
+export const mapObjectToUserConfigBinaryBuffer = (obj: any): Buffer => {
+    const configuration = new UserConfiguration();
+    configuration.fromJsonObject(obj);
+    const buffer = new UhkBuffer();
+    configuration.toBinary(buffer);
+
+    return buffer.getBufferContent();
+};

packages/uhk-common/src/util/index.ts

@@ -1,6 +1,7 @@
 export { IpcEvents } from './ipcEvents';
 export * from './log';
 export * from './constants';
+export * from './helpers';
 
 // Source: http://stackoverflow.com/questions/13720256/javascript-regex-camelcase-to-sentence
 export function camelCaseToSentence(camelCasedText: string): string {

packages/uhk-usb/package-lock.json

@@ -23,7 +23,7 @@
 			"integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
 			"requires": {
 				"delegates": "1.0.0",
-				"readable-stream": "2.3.3"
+				"readable-stream": "2.3.6"
 			}
 		},
 		"bindings": {
@@ -32,11 +32,12 @@
 			"integrity": "sha512-DpLh5EzMR2kzvX1KIlVC0VkC3iZtHKTgdtZ0a3pglBZdaQFjt5S9g9xd1lE+YvXyfd6mtCeRnrUfOLYiTMlNSw=="
 		},
 		"bl": {
-			"version": "1.2.1",
+			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/bl/-/bl-1.2.1.tgz",
+			"resolved": "https://registry.npmjs.org/bl/-/bl-1.2.2.tgz",
-			"integrity": "sha1-ysMo977kVzDUBLaSID/LWQ4XLV4=",
+			"integrity": "sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==",
 			"requires": {
-				"readable-stream": "2.3.3"
+				"readable-stream": "2.3.6",
+				"safe-buffer": "5.1.1"
 			}
 		},
 		"chownr": {
@@ -59,6 +60,14 @@
 			"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
 			"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
 		},
+		"decompress-response": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
+			"integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
+			"requires": {
+				"mimic-response": "1.0.0"
+			}
+		},
 		"deep-extend": {
 			"version": "0.4.2",
 			"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz",
@@ -69,10 +78,15 @@
 			"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
 			"integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
 		},
+		"detect-libc": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+			"integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups="
+		},
 		"end-of-stream": {
-			"version": "1.4.0",
+			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.0.tgz",
+			"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
-			"integrity": "sha1-epDYM+/abPpurA9JSduw+tOmMgY=",
+			"integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
 			"requires": {
 				"once": "1.4.0"
 			}
@@ -113,9 +127,9 @@
 			"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
 		},
 		"ini": {
-			"version": "1.3.4",
+			"version": "1.3.5",
-			"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
+			"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-			"integrity": "sha1-BTfLedr1m1mhpRff9wbIbsA5Fi4="
+			"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
 		},
 		"is-fullwidth-code-point": {
 			"version": "1.0.0",
@@ -130,6 +144,11 @@
 			"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
 			"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
 		},
+		"mimic-response": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.0.tgz",
+			"integrity": "sha1-3z02Uqc/3ta5sLJBRub9BSNTRY4="
+		},
 		"minimist": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
@@ -151,14 +170,17 @@
 			}
 		},
 		"nan": {
-			"version": "2.7.0",
+			"version": "2.10.0",
-			"resolved": "https://registry.npmjs.org/nan/-/nan-2.7.0.tgz",
+			"resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
-			"integrity": "sha1-2Vv3IeyHfgjbJ27T/G63j5CDrUY="
+			"integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA=="
 		},
 		"node-abi": {
-			"version": "2.1.1",
+			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.1.1.tgz",
+			"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.3.0.tgz",
-			"integrity": "sha512-6oxV13poCOv7TfGvhsSz6XZWpXeKkdGVh72++cs33OfMh3KAX8lN84dCvmqSETyDXAFcUHtV7eJrgFBoOqZbNQ=="
+			"integrity": "sha512-zwm6vU3SsVgw3e9fu48JBaRBCJGIvAgysDsqtf5+vEexFE71bEOtaMWb5zr/zODZNzTPtQlqUUpC79k68Hspow==",
+			"requires": {
+				"semver": "5.5.0"
+			}
 		},
 		"node-hid": {
 			"version": "0.5.7",
@@ -166,8 +188,8 @@
 			"integrity": "sha512-dwwpOetL2+MGYgivbO22ML+45ieCGbueWv1rYxRgBoEc2QMp6UF6ZucEkYts1IA3YPWJNkmpGh6dqQ85n19szw==",
 			"requires": {
 				"bindings": "1.3.0",
-				"nan": "2.7.0",
+				"nan": "2.10.0",
-				"prebuild-install": "2.3.0"
+				"prebuild-install": "2.5.1"
 			}
 		},
 		"noop-logger": {
@@ -210,62 +232,63 @@
 			"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
 		},
 		"prebuild-install": {
-			"version": "2.3.0",
+			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-2.3.0.tgz",
+			"resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-2.5.1.tgz",
-			"integrity": "sha512-gzjq2oHB8oMbzJSsSh9MQ64zrXZGt092/uT4TLZlz2qnrPxpWqp4vYB7LZrDxnlxf5RfbCjkgDI/z0EIVuYzAw==",
+			"integrity": "sha512-3DX9L6pzwc1m1ksMkW3Ky2WLgPQUBiySOfXVl3WZyAeJSyJb4wtoH9OmeRGcubAWsMlLiL8BTHbwfm/jPQE9Ag==",
 			"requires": {
+				"detect-libc": "1.0.3",
 				"expand-template": "1.1.0",
 				"github-from-package": "0.0.0",
 				"minimist": "1.2.0",
 				"mkdirp": "0.5.1",
-				"node-abi": "2.1.1",
+				"node-abi": "2.3.0",
 				"noop-logger": "0.1.1",
 				"npmlog": "4.1.2",
 				"os-homedir": "1.0.2",
-				"pump": "1.0.2",
+				"pump": "2.0.1",
-				"rc": "1.2.2",
+				"rc": "1.2.6",
-				"simple-get": "1.4.3",
+				"simple-get": "2.7.0",
 				"tar-fs": "1.16.0",
 				"tunnel-agent": "0.6.0",
-				"xtend": "4.0.1"
+				"which-pm-runs": "1.0.0"
 			}
 		},
 		"process-nextick-args": {
-			"version": "1.0.7",
+			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
+			"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
-			"integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M="
+			"integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw=="
 		},
 		"pump": {
-			"version": "1.0.2",
+			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/pump/-/pump-1.0.2.tgz",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
-			"integrity": "sha1-Oz7mUS+U8OV1U4wXmV+fFpkKXVE=",
+			"integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
 			"requires": {
-				"end-of-stream": "1.4.0",
+				"end-of-stream": "1.4.1",
 				"once": "1.4.0"
 			}
 		},
 		"rc": {
-			"version": "1.2.2",
+			"version": "1.2.6",
-			"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.2.tgz",
+			"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.6.tgz",
-			"integrity": "sha1-2M6ctX6NZNnHut2YdsfDTL48cHc=",
+			"integrity": "sha1-6xiYnG1PTxYsOZ953dKfODVWgJI=",
 			"requires": {
 				"deep-extend": "0.4.2",
-				"ini": "1.3.4",
+				"ini": "1.3.5",
 				"minimist": "1.2.0",
 				"strip-json-comments": "2.0.1"
 			}
 		},
 		"readable-stream": {
-			"version": "2.3.3",
+			"version": "2.3.6",
-			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
-			"integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
+			"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
 			"requires": {
 				"core-util-is": "1.0.2",
 				"inherits": "2.0.3",
 				"isarray": "1.0.0",
-				"process-nextick-args": "1.0.7",
+				"process-nextick-args": "2.0.0",
 				"safe-buffer": "5.1.1",
-				"string_decoder": "1.0.3",
+				"string_decoder": "1.1.1",
 				"util-deprecate": "1.0.2"
 			}
 		},
@@ -274,6 +297,11 @@
 			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
 			"integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
 		},
+		"semver": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
+			"integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA=="
+		},
 		"set-blocking": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
@@ -284,14 +312,19 @@
 			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
 			"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
 		},
+		"simple-concat": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.0.tgz",
+			"integrity": "sha1-c0TLuLbib7J9ZrL8hvn21Zl1IcY="
+		},
 		"simple-get": {
-			"version": "1.4.3",
+			"version": "2.7.0",
-			"resolved": "https://registry.npmjs.org/simple-get/-/simple-get-1.4.3.tgz",
+			"resolved": "https://registry.npmjs.org/simple-get/-/simple-get-2.7.0.tgz",
-			"integrity": "sha1-6XVe2kB+ltpAxeUVjJ6jezO+y+s=",
+			"integrity": "sha512-RkE9rGPHcxYZ/baYmgJtOSM63vH0Vyq+ma5TijBcLla41SWlh8t6XYIGMR/oeZcmr+/G8k+zrClkkVrtnQ0esg==",
 			"requires": {
+				"decompress-response": "3.3.0",
 				"once": "1.4.0",
-				"unzip-response": "1.0.2",
+				"simple-concat": "1.0.0"
-				"xtend": "4.0.1"
 			}
 		},
 		"string-width": {
@@ -305,9 +338,9 @@
 			}
 		},
 		"string_decoder": {
-			"version": "1.0.3",
+			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+			"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-			"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+			"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
 			"requires": {
 				"safe-buffer": "5.1.1"
 			}
@@ -332,18 +365,29 @@
 			"requires": {
 				"chownr": "1.0.1",
 				"mkdirp": "0.5.1",
-				"pump": "1.0.2",
+				"pump": "1.0.3",
-				"tar-stream": "1.5.4"
+				"tar-stream": "1.5.5"
+			},
+			"dependencies": {
+				"pump": {
+					"version": "1.0.3",
+					"resolved": "https://registry.npmjs.org/pump/-/pump-1.0.3.tgz",
+					"integrity": "sha512-8k0JupWme55+9tCVE+FS5ULT3K6AbgqrGa58lTT49RpyfwwcGedHqaC5LlQNdEAumn/wFsu6aPwkuPMioy8kqw==",
+					"requires": {
+						"end-of-stream": "1.4.1",
+						"once": "1.4.0"
+					}
+				}
 			}
 		},
 		"tar-stream": {
-			"version": "1.5.4",
+			"version": "1.5.5",
-			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.5.4.tgz",
+			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.5.5.tgz",
-			"integrity": "sha1-NlSc8E7RrumyowwBQyUiONr5QBY=",
+			"integrity": "sha512-mQdgLPc/Vjfr3VWqWbfxW8yQNiJCbAZ+Gf6GDu1Cy0bdb33ofyiNGBtAY96jHFhDuivCwgW1H9DgTON+INiXgg==",
 			"requires": {
-				"bl": "1.2.1",
+				"bl": "1.2.2",
-				"end-of-stream": "1.4.0",
+				"end-of-stream": "1.4.1",
-				"readable-stream": "2.3.3",
+				"readable-stream": "2.3.6",
 				"xtend": "4.0.1"
 			}
 		},
@@ -355,16 +399,16 @@
 				"safe-buffer": "5.1.1"
 			}
 		},
-		"unzip-response": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/unzip-response/-/unzip-response-1.0.2.tgz",
-			"integrity": "sha1-uYTwh3/AqJwsdzzB73tbIytbBv4="
-		},
 		"util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
 			"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
 		},
+		"which-pm-runs": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz",
+			"integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs="
+		},
 		"wide-align": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",

packages/uhk-usb/src/constants.ts

@@ -22,7 +22,7 @@ export enum UsbCommand {
     GetDebugBuffer           = 0x0b,
     GetAdcValue              = 0x0c,
     SetLedPwmBrightness      = 0x0d,
-    GetModuleProperties      = 0x0e
+    GetModuleProperty        = 0x0e
 }
 
 export enum EepromOperation {
@@ -39,7 +39,8 @@ export enum ConfigBufferId {
 export enum DevicePropertyIds {
     DeviceProtocolVersion = 0,
     ProtocolVersions = 1,
-    ConfigSizes = 2
+    ConfigSizes = 2,
+    CurrentKbootCommand = 3
 }
 
 export enum EnumerationModes {
@@ -80,3 +81,7 @@ export enum KbootCommands {
     ping = 1,
     reset = 2
 }
+
+export enum ModulePropertyId {
+    protocolVersions = 0
+}

packages/uhk-usb/src/uhk-hid-device.ts

@@ -1,5 +1,5 @@
 import { Device, devices, HID } from 'node-hid';
-import { LogService } from 'uhk-common';
+import { CommandLineArgs, LogService } from 'uhk-common';
 
 import {
     ConfigBufferId,
@@ -27,7 +27,8 @@ export class UhkHidDevice {
     private _device: HID;
     private _hasPermission = false;
 
-    constructor(private logService: LogService) {
+    constructor(private logService: LogService,
+                private options: CommandLineArgs) {
     }
 
     /**
@@ -38,6 +39,10 @@ export class UhkHidDevice {
      * @returns {boolean}
      */
     public hasPermission(): boolean {
+        if (this.options.spe) {
+            return false;
+        }
+
         try {
             if (this._hasPermission) {
                 return true;

packages/uhk-usb/src/uhk-operations.ts

@@ -1,12 +1,24 @@
-import { LogService } from 'uhk-common';
+import { HardwareModuleInfo, LogService, UhkBuffer } from 'uhk-common';
-import { EnumerationModes, EnumerationNameToProductId, KbootCommands, ModuleSlotToI2cAddress, ModuleSlotToId } from './constants';
+import {
+    EnumerationModes,
+    EnumerationNameToProductId,
+    KbootCommands,
+    ModulePropertyId,
+    ModuleSlotToI2cAddress,
+    ModuleSlotToId
+} from './constants';
 import * as path from 'path';
 import * as fs from 'fs';
 import { UhkBlhost } from './uhk-blhost';
 import { UhkHidDevice } from './uhk-hid-device';
 import { snooze } from './util';
-import { convertBufferToIntArray, getTransferBuffers, DevicePropertyIds, UsbCommand, ConfigBufferId
+import {
-       } from '../index';
+    convertBufferToIntArray,
+    getTransferBuffers,
+    DevicePropertyIds,
+    UsbCommand,
+    ConfigBufferId
+} from '../index';
 import { LoadConfigurationsResult } from './models/load-configurations-result';
 
 export class UhkOperations {
@@ -42,6 +54,13 @@ export class UhkOperations {
         await snooze(1000);
         await this.device.jumpToBootloaderModule(ModuleSlotToId.leftHalf);
         this.device.close();
+
+        const leftModuleBricked = await this.waitForKbootIdle();
+        if (!leftModuleBricked) {
+            this.logService.error('[UhkOperations] Couldn\'t connect to the left keyboard half.');
+            return;
+        }
+
         await this.device.reenumerate(EnumerationModes.Buspal);
         this.device.close();
         await this.blhost.runBlhostCommandRetry([...buspalPrefix, 'get-property', '1']);
@@ -86,8 +105,6 @@ export class UhkOperations {
      * @returns {Promise<Buffer>}
      */
     public async loadConfiguration(configBufferId: ConfigBufferId): Promise<string> {
-        let response = [];
-
         const configBufferIdToName = ['HardwareConfig', 'StagingUserConfig', 'ValidatedUserConfig'];
         const configName = configBufferIdToName[configBufferId];
 
@@ -121,7 +138,8 @@ export class UhkOperations {
                     }
                 }
             }
-            response = convertBufferToIntArray(configBuffer);
+            const response = convertBufferToIntArray(configBuffer);
+
             return Promise.resolve(JSON.stringify(response));
         } catch (error) {
             const errMsg = `[DeviceOperation] ${configName} from eeprom error`;
@@ -146,10 +164,10 @@ export class UhkOperations {
         return configSize;
     }
 
-    public async saveUserConfiguration(json: string): Promise<void> {
+    public async saveUserConfiguration(buffer: Buffer): Promise<void> {
         try {
             this.logService.debug('[DeviceOperation] USB[T]: Write user configuration to keyboard');
-            await this.sendUserConfigToKeyboard(json);
+            await this.sendUserConfigToKeyboard(buffer);
             this.logService.debug('[DeviceOperation] USB[T]: Write user configuration to EEPROM');
             await this.device.writeConfigToEeprom(ConfigBufferId.validatedUserConfig);
         }
@@ -161,14 +179,77 @@ export class UhkOperations {
         }
     }
 
+    public async waitForKbootIdle(): Promise<boolean> {
+        const timeoutTime = new Date(new Date().getTime() + 30000);
+
+        while (new Date() < timeoutTime) {
+            const buffer = await this.device.write(new Buffer([UsbCommand.GetProperty, DevicePropertyIds.CurrentKbootCommand]));
+            this.device.close();
+
+            if (buffer[1] === 0) {
+                return true;
+            }
+
+            // tslint:disable-next-line: max-line-length
+            this.logService.info('[DeviceOperation] Cannot ping the bootloader. Please reconnect the left keyboard half. It probably needs several tries, so keep reconnecting until you see this message.');
+
+            await snooze(1000);
+        }
+
+        return false;
+    }
+
+    public async getLeftModuleVersionInfo(): Promise<HardwareModuleInfo> {
+        try {
+            this.logService.debug('[DeviceOperation] USB[T]: Read left module version information');
+
+            const command = new Buffer([
+                UsbCommand.GetModuleProperty,
+                ModuleSlotToId.leftHalf,
+                ModulePropertyId.protocolVersions
+            ]);
+
+            const buffer = await this.device.write(command);
+            const uhkBuffer = UhkBuffer.fromArray(convertBufferToIntArray(buffer));
+            // skip the first 2 byte
+            uhkBuffer.readUInt16();
+
+            return {
+                moduleProtocolVersion: `${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}`,
+                firmwareVersion: `${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}`
+            };
+        }
+        catch (error) {
+            this.logService.error('[DeviceOperation] Could not read left module version information', error);
+        }
+
+        return {
+            moduleProtocolVersion: '',
+            firmwareVersion: ''
+        };
+    }
+
+    public async getRightModuleVersionInfo(): Promise<HardwareModuleInfo> {
+        this.logService.debug('[DeviceOperation] USB[T]: Read right module version information');
+
+        const command = new Buffer([UsbCommand.GetProperty, DevicePropertyIds.ProtocolVersions]);
+        const buffer = await this.device.write(command);
+        const uhkBuffer = UhkBuffer.fromArray(convertBufferToIntArray(buffer));
+        // skip the first byte
+        uhkBuffer.readUInt8();
+
+        return {
+            firmwareVersion: `${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}.${uhkBuffer.readUInt16()}`
+        };
+    }
+
     /**
      * IpcMain handler. Send the UserConfiguration to the UHK Device and send a response with the result.
-     * @param {string} json - UserConfiguration in JSON format
+     * @param {Buffer} buffer - UserConfiguration buffer
      * @returns {Promise<void>}
      * @private
      */
-    private async sendUserConfigToKeyboard(json: string): Promise<void> {
+    private async sendUserConfigToKeyboard(buffer: Buffer): Promise<void> {
-        const buffer: Buffer = new Buffer(JSON.parse(json).data);
         const fragments = getTransferBuffers(UsbCommand.WriteStagingUserConfig, buffer);
         for (const fragment of fragments) {
             await this.device.write(fragment);

packages/uhk-web/package.json

@@ -37,7 +37,7 @@
     "@types/jasmine": "2.5.53",
     "@types/jasminewd2": "2.0.2",
     "@types/jquery": "3.2.9",
-    "@types/node-hid": "0.5.2",
+    "@types/lodash-es": "4.17.0",
     "@types/usb": "1.1.3",
     "angular-confirmation-popover": "3.2.0",
     "angular-notifier": "2.0.0",
@@ -67,12 +67,12 @@
     "karma-jasmine": "1.1.0",
     "karma-jasmine-html-reporter": "0.2.2",
     "less-loader": "4.0.5",
-    "lodash": "4.17.4",
+    "lodash-es": "4.17.4",
     "ng2-dragula": "1.5.0",
     "ng2-nouislider": "^1.7.6",
     "ng2-select2": "1.0.0-beta.10",
+    "ngx-clipboard": "8.0.0",
     "ngrx-store-freeze": "0.1.9",
-    "node-hid": "0.5.4",
     "nouislider": "^10.1.0",
     "postcss-loader": "1.3.3",
     "postcss-url": "5.1.2",

packages/uhk-web/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostListener, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { Observable } from 'rxjs/Observable';
 import { Action, Store } from '@ngrx/store';
@@ -14,7 +14,6 @@ import {
     saveToKeyboardState
 } from './store';
 import { ProgressButtonState } from './store/reducers/progress-button-state';
-import { SaveUserConfigInBinaryFileAction, SaveUserConfigInJsonFileAction } from './store/actions/user-config';
 
 @Component({
     selector: 'main-app',

packages/uhk-web/src/app/components/device/configuration/device-configuration.component.html

@@ -9,13 +9,13 @@
 
 <ul class="list-unstyled btn-list">
     <li>
-        Download device configuration in
+        <button class="btn btn-default"
-        <span role="button" class="btn-link" (click)="saveConfigurationInJSONFormat()">JSON</span> or
+                (click)="exportUserConfiguration($event)">Export device configuration
-        <span role="button" class="btn-link" (click)="saveConfigurationInBINFormat()">binary</span> format.
+        </button>
     </li>
     <li>
         <label class="btn btn-default btn-file">
-            Upload device configuration
+            Import device configuration
             <input type="file"
                    (change)="changeFile($event)">
         </label>

packages/uhk-web/src/app/components/device/configuration/device-configuration.component.ts

@@ -34,6 +34,14 @@ export class DeviceConfigurationComponent {
         this.store.dispatch(new SaveUserConfigInBinaryFileAction());
     }
 
+    exportUserConfiguration(event: MouseEvent) {
+        if (event.shiftKey) {
+            this.saveConfigurationInBINFormat();
+        } else {
+            this.saveConfigurationInJSONFormat();
+        }
+    }
+
     changeFile(event): void {
         const files = event.srcElement.files;
         const fileReader = new FileReader();

packages/uhk-web/src/app/components/device/device.routes.ts

@@ -4,6 +4,7 @@ import { DeviceConfigurationComponent } from './configuration/device-configurati
 import { DeviceFirmwareComponent } from './firmware/device-firmware.component';
 import { MouseSpeedComponent } from './mouse-speed/mouse-speed.component';
 import { LEDBrightnessComponent } from './led-brightness/led-brightness.component';
+import { RestoreConfigurationComponent } from './restore-configuration/restore-configuration.component';
 
 export const deviceRoutes: Routes = [
     {
@@ -29,6 +30,10 @@ export const deviceRoutes: Routes = [
             {
                 path: 'firmware',
                 component: DeviceFirmwareComponent
+            },
+            {
+                path: 'restore-user-configuration',
+                component: RestoreConfigurationComponent
             }
         ]
     }

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.html

@@ -6,23 +6,36 @@
                 <i class="fa fa-sliders"></i>
                 <span>Firmware</span>
             </h1>
+
             <p>
-                Flash firmware {{ (getAgentVersionInfo$ | async).firmwareVersion }} (bundled with Agent)
+                Firmware {{ hardwareModules.leftModuleInfo.firmwareVersion }} is running on the left keyboard half.<br>
-                <button class="btn btn-primary"
+                Firmware {{ hardwareModules.rightModuleInfo.firmwareVersion }} is running on the right keyboard half.
-                        [disabled]="flashFirmwareButtonDisbabled$ | async"
+            </p>
-                        (click)="onUpdateFirmware()">Flash firmware
+
-                </button>
+            <p>
+                <i>
+                    Please note that the firmware update process may sometimes fail. If if fails then
+                    simply retry until it succeeds. If the left half becomes unresponsive after a failed
+                    update then retry and follow the instructions displayed during the update to fix it.
+                    We'll make the firmware update process more robust.
+                </i>
             </p>
 
             <p>
-                Flash firmware file <input id="firmware-file-select"
-                                           type="file"
-                                           [disabled]="flashFirmwareButtonDisbabled$ | async"
-                                           (change)="changeFile($event)">
                 <button class="btn btn-primary"
                         [disabled]="flashFirmwareButtonDisbabled$ | async"
-                        (click)="onUpdateFirmwareWithFile()">Flash firmware
+                        (click)="onUpdateFirmware()">
+                    Flash firmware {{ (getAgentVersionInfo$ | async).firmwareVersion }} (bundled with Agent)
                 </button>
+                <label class="btn btn-primary btn-file"
+                       [class.disabled]="flashFirmwareButtonDisbabled$ | async">
+                    Choose firmware file and flash it
+                    <input id="firmware-file-select"
+                           type="file"
+                           accept=".tar.bz2"
+                           [disabled]="flashFirmwareButtonDisbabled$ | async"
+                           (change)="changeFile($event)">
+                </label>
             </p>
         </div>
 

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.ts

@@ -2,9 +2,16 @@ import { Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
-import { VersionInformation } from 'uhk-common';
+import { HardwareModules, VersionInformation } from 'uhk-common';
 
-import { AppState, firmwareOkButtonDisabled, flashFirmwareButtonDisbabled, getAgentVersionInfo, xtermLog } from '../../../store';
+import {
+    AppState,
+    firmwareOkButtonDisabled,
+    flashFirmwareButtonDisbabled,
+    getAgentVersionInfo,
+    getHardwareModules,
+    xtermLog
+} from '../../../store';
 import { UpdateFirmwareAction, UpdateFirmwareOkButtonAction, UpdateFirmwareWithAction } from '../../../store/actions/device';
 import { XtermLog } from '../../../models/xterm-log';
 
@@ -22,8 +29,9 @@ export class DeviceFirmwareComponent implements OnDestroy {
     xtermLogSubscription: Subscription;
     getAgentVersionInfo$: Observable<VersionInformation>;
     firmwareOkButtonDisabled$: Observable<boolean>;
+    hardwareModulesSubscription: Subscription;
+    hardwareModules: HardwareModules;
 
-    arrayBuffer: Uint8Array;
     @ViewChild('scrollMe') divElement: ElementRef;
 
     constructor(private store: Store<AppState>) {
@@ -38,24 +46,20 @@ export class DeviceFirmwareComponent implements OnDestroy {
         });
         this.getAgentVersionInfo$ = store.select(getAgentVersionInfo);
         this.firmwareOkButtonDisabled$ = store.select(firmwareOkButtonDisabled);
+        this.hardwareModulesSubscription = store.select(getHardwareModules).subscribe(data => {
+            this.hardwareModules = data;
+        });
     }
 
     ngOnDestroy(): void {
         this.xtermLogSubscription.unsubscribe();
+        this.hardwareModulesSubscription.unsubscribe();
     }
 
     onUpdateFirmware(): void {
         this.store.dispatch(new UpdateFirmwareAction());
     }
 
-    onUpdateFirmwareWithFile(): void {
-        if (!this.arrayBuffer) {
-            return;
-        }
-
-        this.store.dispatch(new UpdateFirmwareWithAction(Array.prototype.slice.call(this.arrayBuffer)));
-    }
-
     onOkButtonClick(): void {
         this.store.dispatch(new UpdateFirmwareOkButtonAction());
     }
@@ -64,14 +68,13 @@ export class DeviceFirmwareComponent implements OnDestroy {
         const files = event.srcElement.files;
 
         if (files.length === 0) {
-            this.arrayBuffer = null;
-
             return;
         }
 
         const fileReader = new FileReader();
         fileReader.onloadend = function () {
-            this.arrayBuffer = new Uint8Array(fileReader.result);
+            const arrayBuffer = new Uint8Array(fileReader.result);
+            this.store.dispatch(new UpdateFirmwareWithAction(Array.prototype.slice.call(arrayBuffer)));
         }.bind(this);
         fileReader.readAsArrayBuffer(files[0]);
     }

packages/uhk-web/src/app/components/device/index.ts

@@ -2,4 +2,5 @@ export * from './configuration/device-configuration.component';
 export * from './firmware/device-firmware.component';
 export * from './mouse-speed/mouse-speed.component';
 export * from './led-brightness/led-brightness.component';
+export * from './restore-configuration/restore-configuration.component';
 export * from './device.routes';

packages/uhk-web/src/app/components/device/restore-configuration/restore-configuration.component.html

@@ -0,0 +1,19 @@
+<h1>
+    <i class="fa fa-exclamation-circle"></i>
+    <span>Fix configuration</span>
+</h1>
+
+<p>
+    Your on-board device configuration is invalid.
+</p>
+<button class="btn btn-primary"
+        *ngIf="state.hasBackupUserConfiguration"
+        [disabled]="state.restoringUserConfiguration"
+        (click)="restoreUserConfiguration()"> Restore the last valid device configuration
+</button>
+
+<button class="btn btn-danger"
+        *ngIf="!state.hasBackupUserConfiguration"
+        [disabled]="state.restoringUserConfiguration"
+        (click)="resetUserConfiguration()">Reset device configuration
+</button>

packages/uhk-web/src/app/components/device/restore-configuration/restore-configuration.component.scss

@@ -0,0 +1,10 @@
+:host {
+    overflow-y: auto;
+    display: block;
+    height: 100%;
+    width: 100%;
+
+    p {
+        margin: 1.5rem 0;
+    }
+}

packages/uhk-web/src/app/components/device/restore-configuration/restore-configuration.component.ts

@@ -0,0 +1,48 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Subscription } from 'rxjs/Subscription';
+
+import { AppState, getBackupUserConfigurationState } from '../../../store';
+import { ResetUserConfigurationAction, RestoreUserConfigurationFromBackupAction } from '../../../store/actions/device';
+import { RestoreConfigurationState } from '../../../models/restore-configuration-state';
+
+@Component({
+    selector: 'restore-configuration',
+    templateUrl: './restore-configuration.component.html',
+    styleUrls: ['./restore-configuration.component.scss'],
+    host: {
+        'class': 'container-fluid'
+    }
+})
+export class RestoreConfigurationComponent implements OnInit, OnDestroy {
+    state: RestoreConfigurationState;
+
+    private stateSubscription: Subscription;
+
+    constructor(private store: Store<AppState>,
+                private cdRef: ChangeDetectorRef) {
+    }
+
+    ngOnDestroy(): void {
+        if (this.stateSubscription) {
+            this.stateSubscription.unsubscribe();
+        }
+    }
+
+    ngOnInit(): void {
+        this.stateSubscription = this.store
+            .select(getBackupUserConfigurationState)
+            .subscribe(data => {
+                this.state = data;
+                this.cdRef.markForCheck();
+            });
+    }
+
+    resetUserConfiguration() {
+        this.store.dispatch(new ResetUserConfigurationAction());
+    }
+
+    restoreUserConfiguration(): void {
+        this.store.dispatch(new RestoreUserConfigurationFromBackupAction());
+    }
+}

packages/uhk-web/src/app/components/editable-text/editable-text.component.html

@@ -0,0 +1,31 @@
+<div class="text-center">
+    <span *ngIf="showPlaceholder"
+          class="placeholder">
+        <span (click)="editText()">{{ placeholder }}</span>
+    </span>
+
+    <span *ngIf="showText"
+          class="editable">
+        <span (click)="editText()"
+              [innerHtml]="displayText"></span>
+    </span>
+</div>
+
+<div *ngIf="editing">
+    <textarea class="text-editor"
+              [(ngModel)]="text"
+              autofocus
+              (keydown.control.enter)="keydownEnter()"
+              (keydown.alt.enter)="keydownEnter()"></textarea>
+    <div class="pull-right buttons">
+        <button class="btn btn-danger"
+                (click)="cancelEditText()">
+            Cancel
+        </button>
+        <button class="btn btn-primary"
+                (click)="saveText()"
+                [disabled]="isSaveDisabled">
+            Update description
+        </button>
+    </div>
+</div>

packages/uhk-web/src/app/components/editable-text/editable-text.component.scss

@@ -0,0 +1,26 @@
+:host {
+    margin-top: 0.5em;
+
+    span.placeholder {
+        color: gray;
+        display: inline-block;
+
+        .glyphicon {
+            color: black;
+        }
+    }
+
+    span.editable,
+    span.placeholder {
+        cursor: pointer;
+    }
+
+    textarea.text-editor {
+        display: block;
+        width: 100%;
+    }
+
+    .buttons {
+        margin-top: 0.5em;
+    }
+}

packages/uhk-web/src/app/components/editable-text/editable-text.component.ts

@@ -0,0 +1,82 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+    selector: 'editable-text',
+    templateUrl: './editable-text.component.html',
+    styleUrls: ['./editable-text.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EditableTextComponent), multi: true}
+    ]
+})
+export class EditableTextComponent implements ControlValueAccessor {
+
+    @Input() placeholder = 'No editable content';
+    text: string;
+    originalText: string;
+    editing = false;
+
+    get isSaveDisabled(): boolean {
+        return !this.text || this.text.trim().length === 0;
+    }
+
+    get displayText(): string {
+        return this.text && this.text.replace(/\n/g, '<br>');
+    }
+
+    constructor(private cdr: ChangeDetectorRef) {
+
+    }
+
+    writeValue(obj: any): void {
+        if (this.text === obj) {
+            return;
+        }
+
+        this.text = obj;
+        this.cdr.markForCheck();
+    }
+
+    registerOnChange(fn: any): void {
+        this.textChange = fn;
+    }
+
+    registerOnTouched(fn: any): void {
+    }
+
+    saveText(): void {
+        this.originalText = null;
+        this.editing = false;
+        this.textChange(this.text);
+    }
+
+    editText(): void {
+        this.originalText = this.text;
+        this.editing = true;
+    }
+
+    cancelEditText(): void {
+        this.text = this.originalText;
+        this.editing = false;
+    }
+
+    keydownEnter(): void {
+        if (this.isSaveDisabled) {
+            return;
+        }
+
+        this.saveText();
+    }
+
+    get showPlaceholder(): boolean {
+        return !this.editing && !this.text;
+    }
+
+    get showText(): boolean {
+        return !this.editing && !!this.text;
+    }
+
+    private textChange: any = () => {
+    }
+}

packages/uhk-web/src/app/components/keyboard/slider/keyboard-slider.component.html

@@ -7,8 +7,11 @@
               [selectedKey]="selectedKey"
               [selected]="selectedKey?.layerId === index"
               [keyboardLayout]="keyboardLayout"
+              [description]="description"
+              [showDescription]="true"
               (keyClick)="keyClick.emit($event)"
               (keyHover)="keyHover.emit($event)"
               (capture)="capture.emit($event)"
+              (descriptionChanged)="descriptionChanged.emit($event)"
 >
 </svg-keyboard>

packages/uhk-web/src/app/components/keyboard/slider/keyboard-slider.component.ts

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
 import { Layer } from 'uhk-common';
 
@@ -81,11 +81,14 @@ export class KeyboardSliderComponent implements OnChanges {
     @Input() halvesSplit: boolean;
     @Input() selectedKey: { layerId: number, moduleId: number, keyId: number };
     @Input() keyboardLayout = KeyboardLayout.ANSI;
+    @Input() description: string;
     @Output() keyClick = new EventEmitter();
     @Output() keyHover = new EventEmitter();
     @Output() capture = new EventEmitter();
+    @Output() descriptionChanged = new EventEmitter<string>();
 
     layerAnimationState: AnimationKeyboard[];
+
     ngOnChanges(changes: SimpleChanges) {
         if (changes['layers']) {
             this.layerAnimationState = this.layers.map<AnimationKeyboard>(() => 'initOut');

packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.html

@@ -4,7 +4,8 @@
                    (downloadClick)="downloadKeymap()"></keymap-header>
     <svg-keyboard-wrap [keymap]="keymap$ | async"
                        [halvesSplit]="keyboardSplit"
-                       [keyboardLayout]="keyboardLayout$ | async"></svg-keyboard-wrap>
+                       [keyboardLayout]="keyboardLayout$ | async"
+                       (descriptionChanged)="descriptionChanged($event)"></svg-keyboard-wrap>
 </ng-template>
 
 <div *ngIf="!(keymap$ | async)" class="not-found">

packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.ts

@@ -18,6 +18,8 @@ import { AppState, getKeyboardLayout } from '../../../store';
 import { getKeymap, getKeymaps, getUserConfiguration } from '../../../store/reducers/user-configuration';
 import { SvgKeyboardWrapComponent } from '../../svg/wrap';
 import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
+import { KeymapActions } from '../../../store/actions';
+import { ChangeKeymapDescription } from '../../../models/ChangeKeymapDescription';
 
 @Component({
     selector: 'keymap-edit',
@@ -64,7 +66,7 @@ export class KeymapEditComponent {
                 const keymap = latest[0];
                 const exportableJSON = latest[1];
                 const fileName = keymap.name + '_keymap.json';
-                saveAs(new Blob([exportableJSON], { type: 'application/json' }), fileName);
+                saveAs(new Blob([exportableJSON], {type: 'application/json'}), fileName);
             });
     }
 
@@ -73,6 +75,10 @@ export class KeymapEditComponent {
         this.keyboardSplit = !this.keyboardSplit;
     }
 
+    descriptionChanged(event: ChangeKeymapDescription): void {
+        this.store.dispatch(new KeymapActions.EditDescriptionAction(event));
+    }
+
     private toExportableJSON(keymap: Keymap): Observable<any> {
         return this.store
             .let(getUserConfiguration())

packages/uhk-web/src/app/components/macro/edit/macro-edit.component.html

@@ -13,5 +13,5 @@
 </ng-template>
 
 <div *ngIf="!macro" class="not-found">
-    There is no macro with id {{ route.params.select('id') | async }}.
+    There is no macro with id {{ macroId }}.
 </div>

packages/uhk-web/src/app/components/macro/edit/macro-edit.component.ts

@@ -7,7 +7,7 @@ import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/pluck';
 
 import { MacroActions } from '../../../store/actions';
-import { AppState } from '../../../store/index';
+import { AppState } from '../../../store';
 import { getMacro } from '../../../store/reducers/user-configuration';
 
 @Component({
@@ -21,13 +21,17 @@ import { getMacro } from '../../../store/reducers/user-configuration';
 export class MacroEditComponent implements OnDestroy {
     macro: Macro;
     isNew: boolean;
+    macroId: number;
 
     private subscription: Subscription;
     constructor(private store: Store<AppState>, public route: ActivatedRoute) {
         this.subscription = route
             .params
             .pluck<{}, string>('id')
-            .switchMap((id: string) => store.let(getMacro(+id)))
+            .switchMap((id: string) => {
+                this.macroId = +id;
+                return store.let(getMacro(this.macroId));
+            })
             .subscribe((macro: Macro) => {
                 this.macro = macro;
             });

packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html

@@ -7,6 +7,10 @@
             [width]="200"
             [options]="options"
     ></select2>
+    <icon name="question-circle"
+          data-toggle="tooltip"
+          title="Looking for a non-US character? Just pick the character of the desired key according to the US layout."
+          data-placement="bottom"></icon>
     <capture-keystroke-button (capture)="onKeysCapture($event)" tabindex="0"></capture-keystroke-button>
 </div>
 <div class="modifier-options">

packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.scss

@@ -10,6 +10,10 @@
             position: relative;
             top: 2px;
         }
+
+        icon {
+            display: inline-block;
+        };
     }
 
     .modifier-options {

packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges } from '@angular/core';
 import { Select2OptionData, Select2TemplateFunction } from 'ng2-select2';
-import { KeyAction, KeystrokeAction, KeystrokeType } from 'uhk-common';
+import { KeyAction, KeystrokeAction, KeystrokeType, SCANCODES, SECONDARY_ROLES } from 'uhk-common';
 
 import { Tab } from '../tab';
 import { MapperService } from '../../../../services/mapper.service';
@@ -35,8 +35,8 @@ export class KeypressTabComponent extends Tab implements OnChanges {
             id: '0',
             text: 'None'
         }];
-        this.scanCodeGroups = this.scanCodeGroups.concat(require('./scancodes.json'));
+        this.scanCodeGroups = this.scanCodeGroups.concat(SCANCODES);
-        this.secondaryRoleGroups = require('./secondaryRole.json');
+        this.secondaryRoleGroups = SECONDARY_ROLES;
         this.leftModifierSelects = Array(this.leftModifiers.length).fill(false);
         this.rightModifierSelects = Array(this.rightModifiers.length).fill(false);
         this.selectedScancodeOption = this.scanCodeGroups[0];

packages/uhk-web/src/app/components/privilege-checker/privilege-checker.component.html

@@ -1,4 +1,39 @@
-<span class="privilege-checker-wrapper">
+<div class="privilege-checker-wrapper">
-    <uhk-message header="Cannot talk to your UHK" subtitle="Your UHK has been detected, but its permissions are not set up yet, so Agent can't talk to it."></uhk-message>
+    <uhk-message header="Cannot talk to your UHK"
-    <button class="btn btn-default btn-lg btn-primary" (click)="setUpPermissions()"> Set up permissions </button>
+                 subtitle="Your UHK has been detected, but its permissions are not set up yet, so Agent can't talk to it."></uhk-message>
-</span>
+
+    <button class="btn btn-default btn-lg btn-primary"
+            (click)="setUpPermissions()"> Set up permissions
+    </button>
+
+    <div class="mt-10">
+        <a class="link-inline"
+           *ngIf="state.showWhatWillThisDo"
+           (click)="whatWillThisDo()">What will this do?
+        </a>
+
+        <div>
+            <p class="privilege-error"
+               #privilegeError
+               *ngIf="state.permissionSetupFailed">
+                Agent wasn't able to set up permissions via PolicyKit. This is most likely because the
+                <code>polkit</code> package is not installed on your system.
+            </p>
+
+            <div *ngIf="state.showWhatWillThisDoContent">
+                Agent uses the following script to set up permissions. You can run it manually as root, then
+                <a class="link-inline"
+                   (click)="retry()">retry</a>.
+                <div class="copy-container">
+                    <span class="fa  fa-2x fa-copy"
+                          ngxClipboard
+                          [cbContent]="command"
+                          title="Copy to clipboard"
+                          data-toggle="tooltip"
+                          data-placement="top"></span>
+                    <pre><code>{{ command }}</code></pre>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

packages/uhk-web/src/app/components/privilege-checker/privilege-checker.component.scss

@@ -9,3 +9,19 @@
 uhk-message {
     max-width: 50%;
 }
+
+.privilege-error {
+    animation: error-fade-in 2s;
+}
+
+@keyframes error-fade-in {
+    0% {
+        color: white;
+        background-color: red;
+    }
+
+    100% {
+        color: inherit;
+        background-color: inherit;
+    }
+}

packages/uhk-web/src/app/components/privilege-checker/privilege-checker.component.ts

@@ -1,26 +1,61 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
 import { Store } from '@ngrx/store';
-import 'rxjs/add/observable/of';
+import { Subscription } from 'rxjs/Subscription';
-import 'rxjs/add/observable/throw';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/operator/ignoreElements';
-import 'rxjs/add/operator/takeWhile';
 
-import { AppState } from '../../store/index';
+import { AppState, getPrivilegePageState } from '../../store';
 import { SetPrivilegeOnLinuxAction } from '../../store/actions/device';
+import { LoadAppStartInfoAction, PrivilegeWhatWillThisDoAction } from '../../store/actions/app';
+import { PrivilagePageSate } from '../../models/privilage-page-sate';
 
 @Component({
     selector: 'privilege-checker',
+    changeDetection: ChangeDetectionStrategy.OnPush,
     templateUrl: './privilege-checker.component.html',
     styleUrls: ['./privilege-checker.component.scss']
 })
-export class PrivilegeCheckerComponent {
 
-    constructor(protected store: Store<AppState>) {
+export class PrivilegeCheckerComponent implements OnInit, OnDestroy {
+
+    state: PrivilagePageSate;
+
+    command = `cat <<EOF >/etc/udev/rules.d/50-uhk60.rules
+# Ultimate Hacking Keyboard rules
+# These are the udev rules for accessing the USB interfaces of the UHK as non-root users.
+# Copy this file to /etc/udev/rules.d and physically reconnect the UHK afterwards.
+SUBSYSTEMS=="usb", ATTRS{idVendor}=="1d50", ATTRS{idProduct}=="612[0-7]", MODE:="0666"
+EOF
+udevadm trigger
+udevadm settle`;
+
+    private stateSubscription: Subscription;
+
+    constructor(private store: Store<AppState>,
+                private cdRef: ChangeDetectorRef) {
+    }
+
+    ngOnInit(): void {
+        this.stateSubscription = this.store.select(getPrivilegePageState)
+            .subscribe(state => {
+                this.state = state;
+                this.cdRef.markForCheck();
+            });
+    }
+
+    ngOnDestroy(): void {
+        if (this.stateSubscription) {
+            this.stateSubscription.unsubscribe();
+        }
     }
 
     setUpPermissions(): void {
         this.store.dispatch(new SetPrivilegeOnLinuxAction());
     }
+
+    whatWillThisDo(): void {
+        this.store.dispatch(new PrivilegeWhatWillThisDoAction());
+    }
+
+    retry(): void {
+        this.store.dispatch(new LoadAppStartInfoAction());
+    }
 }

packages/uhk-web/src/app/components/side-menu/side-menu.component.html

@@ -5,6 +5,7 @@
             <input #deviceName cancelable
                    class="pane-title__name"
                    type="text"
+                   [readonly]="state.restoreUserConfiguration"
                    (change)="editDeviceName($event.target.value)"
                    (keyup.enter)="deviceName.blur()"
                    (keyup)="calculateHeaderTextWidth($event.target.value)">
@@ -17,33 +18,43 @@
                     <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'configuration')"></i>
                 </div>
                 <ul [@toggler]="animation['configuration']">
-                    <li class="sidebar__level-2--item">
+                    <li class="sidebar__level-2--item"
+                        *ngIf="!state.restoreUserConfiguration">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
                             <a [routerLink]="['/device/mouse-speed']"
-                               [class.disabled]="updatingFirmware$ | async">Mouse speed</a>
+                               [class.disabled]="state.updatingFirmware">Mouse speed</a>
                         </div>
                     </li>
-                    <li class="sidebar__level-2--item">
+                    <li class="sidebar__level-2--item"
+                        *ngIf="!state.restoreUserConfiguration">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
                             <a [routerLink]="['/device/led-brightness']"
-                               [class.disabled]="updatingFirmware$ | async">LED brightness</a>
+                               [class.disabled]="state.updatingFirmware">LED brightness</a>
                         </div>
                     </li>
-                    <li class="sidebar__level-2--item">
+                    <li class="sidebar__level-2--item"
+                        *ngIf="!state.restoreUserConfiguration">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
                             <a [routerLink]="['/device/configuration']"
-                               [class.disabled]="updatingFirmware$ | async">Configuration</a>
+                               [class.disabled]="state.updatingFirmware">Configuration</a>
+                        </div>
+                    </li>
+                    <li class="sidebar__level-2--item"
+                        *ngIf="state.restoreUserConfiguration">
+                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                            <a [routerLink]="['/device/restore-user-configuration']">Fix configuration</a>
                         </div>
                     </li>
                     <li class="sidebar__level-2--item">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
                             <a [routerLink]="['/device/firmware']"
-                               [class.disabled]="updatingFirmware$ | async">Firmware</a>
+                               [class.disabled]="state.updatingFirmware">Firmware</a>
                         </div>
                     </li>
                 </ul>
             </li>
-            <li class="sidebar__level-1--item">
+            <li class="sidebar__level-1--item"
+                *ngIf="!state.restoreUserConfiguration">
                 <div class="sidebar__level-1">
                     <i class="fa fa-keyboard-o"></i> Keymaps
                     <!--a [routerLink]="['/keymap/add']"
@@ -55,10 +66,10 @@
                        (click)="toggleHide($event, 'keymap')"></i>
                 </div>
                 <ul [@toggler]="animation['keymap']">
-                    <li *ngFor="let keymap of keymaps$ | async" class="sidebar__level-2--item">
+                    <li *ngFor="let keymap of state.keymaps" class="sidebar__level-2--item">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
                             <a [routerLink]="['/keymap', keymap.abbreviation]"
-                               [class.disabled]="updatingFirmware$ | async">{{keymap.name}}</a>
+                               [class.disabled]="state.updatingFirmware">{{keymap.name}}</a>
                             <i *ngIf="keymap.isDefault" class="fa fa-star sidebar__fav"
                                title="This is the default keymap which gets activated when powering the keyboard."
                                data-toggle="tooltip" data-placement="bottom"></i>
@@ -66,26 +77,27 @@
                     </li>
                 </ul>
             </li>
-            <li class="sidebar__level-1--item">
+            <li class="sidebar__level-1--item"
+                *ngIf="!state.restoreUserConfiguration">
                 <div class="sidebar__level-1">
                     <i class="fa fa-play"></i> Macros
                     <a (click)="addMacro()"
                        class="btn btn-default pull-right btn-sm"
-                       [class.disabled]="updatingFirmware$ | async">
+                       [class.disabled]="state.updatingFirmware">
                         <i class="fa fa-plus"></i>
                     </a>
                     <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'macro')"></i>
                 </div>
                 <ul [@toggler]="animation['macro']">
-                    <li *ngFor="let macro of macros$ | async" class="sidebar__level-2--item">
+                    <li *ngFor="let macro of state.macros" class="sidebar__level-2--item">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
                             <a [routerLink]="['/macro', macro.id]"
-                               [class.disabled]="updatingFirmware$ | async">{{macro.name}}</a>
+                               [class.disabled]="state.updatingFirmware">{{macro.name}}</a>
                         </div>
                     </li>
                 </ul>
             </li>
-            <li class="sidebar__level-1--item" *ngIf="showAddonMenu$ | async">
+            <li class="sidebar__level-1--item" *ngIf="state.showAddonMenu">
                 <div class="sidebar__level-1">
                     <i class="fa fa-puzzle-piece"></i> Add-on modules
                     <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'addon')"></i>
@@ -94,25 +106,25 @@
                     <li class="sidebar__level-2--item" data-name="Key cluster" data-abbrev="">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
                             <a [routerLink]="['/add-on', 'Key cluster']"
-                               [class.disabled]="updatingFirmware$ | async">Key cluster</a>
+                               [class.disabled]="state.updatingFirmware">Key cluster</a>
                         </div>
                     </li>
                     <li class="sidebar__level-2--item" data-name="Trackball" data-abbrev="">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
                             <a [routerLink]="['/add-on', 'Trackball']"
-                               [class.disabled]="updatingFirmware$ | async">Trackball</a>
+                               [class.disabled]="state.updatingFirmware">Trackball</a>
                         </div>
                     </li>
                     <li class="sidebar__level-2--item" data-name="Toucpad" data-abbrev="">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
                             <a [routerLink]="['/add-on', 'Touchpad']"
-                               [class.disabled]="updatingFirmware$ | async">Touchpad</a>
+                               [class.disabled]="state.updatingFirmware">Touchpad</a>
                         </div>
                     </li>
                     <li class="sidebar__level-2--item" data-name="Trackpoint" data-abbrev="">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
                             <a [routerLink]="['/add-on', 'Trackpoint']"
-                               [class.disabled]="updatingFirmware$ | async">Trackpoint</a>
+                               [class.disabled]="state.updatingFirmware">Trackpoint</a>
                         </div>
                     </li>
                 </ul>
@@ -123,17 +135,19 @@
         <div class="sidebar__level-0">
             <i class="uhk-icon uhk-icon-agent-icon"></i> Agent
             <i class="fa fa-chevron-up pull-right"
-                (click)="toggleHide($event, 'agent')"></i>
+               (click)="toggleHide($event, 'agent')"></i>
         </div>
         <ul [@toggler]="animation['agent']">
             <li class="sidebar__level-2--item">
                 <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                    <a [routerLink]="['/settings']">Settings</a>
+                    <a [routerLink]="['/settings']"
+                       [class.disabled]="state.updatingFirmware">Settings</a>
                 </div>
             </li>
             <li class="sidebar__level-2--item">
                 <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                    <a [routerLink]="['/about']">About</a>
+                    <a [routerLink]="['/about']"
+                       [class.disabled]="state.updatingFirmware">About</a>
                 </div>
             </li>
         </ul>

packages/uhk-web/src/app/components/side-menu/side-menu.component.scss

@@ -9,6 +9,10 @@
 
 a {
     color: #333;
+
+    &.disabled {
+        opacity: 0.65;
+    }
 }
 
 // General list styles for the sidebar-menu.
@@ -112,6 +116,10 @@ ul {
                 &:focus {
                     text-decoration: none;
                 }
+
+                &.disabled {
+                    opacity: 0.65;
+                }
             }
         }
     }
@@ -164,12 +172,12 @@ ul {
         padding: 0;
         margin: 0 0.25rem;
         text-overflow: ellipsis;
-        background-color: inherit;
+        background-color: transparent;
 
         &:focus {
             box-shadow: 0 0 0 1px #ccc, 0 0 5px 0 #ccc;
             border-color: transparent;
-            background-color: inherit;
+            background-color: transparent;
         }
     }
 }

packages/uhk-web/src/app/components/side-menu/side-menu.component.ts

@@ -1,20 +1,27 @@
-import { AfterContentInit, Component, ElementRef, OnDestroy, Renderer2, ViewChild } from '@angular/core';
+import {
+    AfterContentInit,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    OnDestroy, OnInit,
+    Renderer2,
+    ViewChild
+} from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Keymap, Macro } from 'uhk-common';
 
 import { Store } from '@ngrx/store';
 
-import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/let';
 
-import { AppState, getDeviceName, runningInElectron, showAddonMenu, updatingFirmware } from '../../store';
+import { AppState, getSideMenuPageState } from '../../store';
 import { MacroActions } from '../../store/actions';
-import { getKeymaps, getMacros } from '../../store/reducers/user-configuration';
 import * as util from '../../util';
 import { RenameUserConfigurationAction } from '../../store/actions/user-config';
+import { SideMenuPageState } from '../../models/side-menu-page-state';
 
 @Component({
     animations: [
@@ -30,24 +37,19 @@ import { RenameUserConfigurationAction } from '../../store/actions/user-config';
     ],
     selector: 'side-menu',
     templateUrl: './side-menu.component.html',
-    styleUrls: ['./side-menu.component.scss']
+    styleUrls: ['./side-menu.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SideMenuComponent implements AfterContentInit, OnDestroy {
+export class SideMenuComponent implements AfterContentInit, OnInit, OnDestroy {
-    showAddonMenu$: Observable<boolean>;
+    state: SideMenuPageState;
-    runInElectron$: Observable<boolean>;
-    updatingFirmware$: Observable<boolean>;
-
-    deviceName$: Observable<string>;
-    deviceNameSubscription: Subscription;
-    keymaps$: Observable<Keymap[]>;
-    macros$: Observable<Macro[]>;
     animation: { [key: string]: 'active' | 'inactive' };
-    deviceNameValue: string;
-    updatingFirmware = false;
-    updatingFirmwareSubscription: Subscription;
     @ViewChild('deviceName') deviceName: ElementRef;
 
-    constructor(private store: Store<AppState>, private renderer: Renderer2) {
+    private stateSubscription: Subscription;
+
+    constructor(private store: Store<AppState>,
+                private renderer: Renderer2,
+                private cdRef: ChangeDetectorRef) {
         this.animation = {
             device: 'active',
             configuration: 'active',
@@ -55,29 +57,13 @@ export class SideMenuComponent implements AfterContentInit, OnDestroy {
             macro: 'active',
             addon: 'active'
         };
+    }
 
-        this.keymaps$ = store.let(getKeymaps())
+    ngOnInit(): void {
-            .map(keymaps => keymaps.slice()) // Creating a new array reference, because the sort is working in place
+        this.stateSubscription = this.store.select(getSideMenuPageState).subscribe(data => {
-            .do((keymaps: Keymap[]) => {
+            this.state = data;
-                keymaps.sort((first: Keymap, second: Keymap) => first.name.localeCompare(second.name));
-            });
-
-        this.macros$ = store.let(getMacros())
-            .map(macros => macros.slice()) // Creating a new array reference, because the sort is working in place
-            .do((macros: Macro[]) => {
-                macros.sort((first: Macro, second: Macro) => first.name.localeCompare(second.name));
-            });
-
-        this.showAddonMenu$ = this.store.select(showAddonMenu);
-        this.runInElectron$ = this.store.select(runningInElectron);
-        this.deviceName$ = store.select(getDeviceName);
-        this.deviceNameSubscription = this.deviceName$.subscribe(name => {
-            this.deviceNameValue = name;
             this.setDeviceName();
-        });
+            this.cdRef.markForCheck();
-        this.updatingFirmware$ = store.select(updatingFirmware);
-        this.updatingFirmwareSubscription = this.updatingFirmware$.subscribe(updating => {
-            this.updatingFirmware = updating;
         });
     }
 
@@ -86,12 +72,13 @@ export class SideMenuComponent implements AfterContentInit, OnDestroy {
     }
 
     ngOnDestroy(): void {
-        this.deviceNameSubscription.unsubscribe();
+        if (this.stateSubscription) {
-        this.updatingFirmwareSubscription.unsubscribe();
+            this.stateSubscription.unsubscribe();
+        }
     }
 
     toggleHide(event: Event, type: string) {
-        if (this.updatingFirmware) {
+        if (this.state.updatingFirmware) {
             return;
         }
 
@@ -119,7 +106,7 @@ export class SideMenuComponent implements AfterContentInit, OnDestroy {
     }
 
     editDeviceName(name: string): void {
-        if (!util.isValidName(name) || name.trim() === this.deviceNameValue) {
+        if (!util.isValidName(name) || name.trim() === this.state.deviceName) {
             this.setDeviceName();
             return;
         }
@@ -135,7 +122,7 @@ export class SideMenuComponent implements AfterContentInit, OnDestroy {
 
     private setDeviceName(): void {
         if (this.deviceName) {
-            this.renderer.setProperty(this.deviceName.nativeElement, 'value', this.deviceNameValue);
+            this.renderer.setProperty(this.deviceName.nativeElement, 'value', this.state.deviceName);
             this.calculateHeaderTextWidth(this.deviceName.nativeElement.value);
         }
     }

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.html

@@ -1,16 +1,20 @@
 <svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="viewBox" height="100%" width="100%">
     <svg:g svg-module *ngFor="let module of modules; let i = index"
-            [coverages]="module.coverages"
+           [coverages]="module.coverages"
-            [keyboardKeys]="module.keyboardKeys"
+           [keyboardKeys]="module.keyboardKeys"
-            [keybindAnimationEnabled]="keybindAnimationEnabled"
+           [keybindAnimationEnabled]="keybindAnimationEnabled"
-            [capturingEnabled]="capturingEnabled"
+           [capturingEnabled]="capturingEnabled"
-            [attr.transform]="module.attributes.transform"
+           [attr.transform]="module.attributes.transform"
-            [keyActions]="moduleConfig[i].keyActions"
+           [keyActions]="moduleConfig[i].keyActions"
-            [selectedKey]="selectedKey"
+           [selectedKey]="selectedKey"
-            [@split]="moduleAnimationStates[i]"
+           [@split]="moduleAnimationStates[i]"
-            [selected]="selectedKey?.moduleId === i"
+           [selected]="selectedKey?.moduleId === i"
-            (keyClick)="onKeyClick(i, $event.index, $event.keyTarget)"
+           (keyClick)="onKeyClick(i, $event.index, $event.keyTarget)"
-            (keyHover)="onKeyHover($event.index, $event.event, $event.over, i)"
+           (keyHover)="onKeyHover($event.index, $event.event, $event.over, i)"
-            (capture)="onCapture(i, $event.index, $event.captured)"
+           (capture)="onCapture(i, $event.index, $event.captured)"
     />
 </svg>
+<editable-text *ngIf="showDescription"
+               [ngModel]="description"
+               (ngModelChange)="descriptionChanged.emit($event)"
+               placeholder="No description provided for this keymap."></editable-text>

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.scss

@@ -1,5 +1,10 @@
 :host {
-    display: flex;
+    display: block;
     width: 100%;
     position: relative;
 }
+editable-text {
+    padding-left: 2em;
+    padding-right: 2em;
+    display: block;
+}

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts

@@ -31,9 +31,12 @@ export class SvgKeyboardComponent implements OnInit {
     @Input() selected: boolean;
     @Input() halvesSplit: boolean;
     @Input() keyboardLayout = KeyboardLayout.ANSI;
+    @Input() description: string;
+    @Input() showDescription = false;
     @Output() keyClick = new EventEmitter();
     @Output() keyHover = new EventEmitter();
     @Output() capture = new EventEmitter();
+    @Output() descriptionChanged = new EventEmitter<string>();
 
     modules: SvgModule[];
     viewBox: string;

packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.html

@@ -7,9 +7,11 @@
                      [selectedKey]="selectedKey"
                      [halvesSplit]="halvesSplit"
                      [keyboardLayout]="keyboardLayout"
+                     [description]="keymap.description"
                      (keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)"
                      (keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)"
                      (capture)="onCapture($event.moduleId, $event.keyId, $event.captured)"
+                     (descriptionChanged)="onDescriptionChanged($event)"
     ></keyboard-slider>
     <popover tabindex="0" [visible]="popoverShown" [keyPosition]="keyPosition" [wrapPosition]="wrapPosition" [defaultKeyAction]="popoverInitKeyAction"
              [currentKeymap]="keymap" [currentLayer]="currentLayer" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>

packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts

@@ -2,14 +2,16 @@ import {
     ChangeDetectionStrategy,
     Component,
     ElementRef,
-    Renderer,
+    EventEmitter,
     HostBinding,
     HostListener,
     Input,
     OnChanges,
     OnInit,
-    ViewChild,
+    Output,
-    SimpleChanges
+    Renderer,
+    SimpleChanges,
+    ViewChild
 } from '@angular/core';
 
 import { Observable } from 'rxjs/Observable';
@@ -25,10 +27,10 @@ import {
     KeystrokeAction,
     Layer,
     LayerName,
-    SecondaryRoleAction,
     MouseAction,
     MouseActionParam,
     PlayMacroAction,
+    SecondaryRoleAction,
     SwitchKeymapAction,
     SwitchLayerAction
 } from 'uhk-common';
@@ -38,6 +40,7 @@ import { AppState } from '../../../store';
 import { KeymapActions } from '../../../store/actions';
 import { PopoverComponent } from '../../popover';
 import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
+import { ChangeKeymapDescription } from '../../../models/ChangeKeymapDescription';
 
 interface NameValuePair {
     name: string;
@@ -56,6 +59,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     @Input() tooltipEnabled: boolean = false;
     @Input() halvesSplit: boolean;
     @Input() keyboardLayout: KeyboardLayout.ANSI;
+    @Output() descriptionChanged = new EventEmitter<ChangeKeymapDescription>();
 
     @ViewChild(PopoverComponent, { read: ElementRef }) popover: ElementRef;
 
@@ -237,6 +241,13 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
         return this.currentLayer;
     }
 
+    onDescriptionChanged(description: string): void {
+        this.descriptionChanged.emit({
+            description,
+            abbr: this.keymap.abbreviation
+        });
+    }
+
     private getKeyActionContent(keyAction: KeyAction): Observable<NameValuePair[]> {
         if (keyAction instanceof KeystrokeAction) {
             const keystrokeAction: KeystrokeAction = keyAction;

packages/uhk-web/src/app/components/uhk-header/uhk-header.ts

@@ -3,7 +3,7 @@ import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 
 import { Notification } from 'uhk-common';
-import { AppState, getUndoableNotification } from '../../store/index';
+import { AppState, getUndoableNotification } from '../../store';
 import { DismissUndoNotificationAction, UndoLastAction } from '../../store/actions/app';
 
 @Component({

packages/uhk-web/src/app/directives/autofocus/autofocus.directive.ts

@@ -0,0 +1,16 @@
+import { AfterViewInit, Directive, ElementRef } from '@angular/core';
+
+@Directive({
+    selector: '[autofocus]'
+})
+export class Autofocus implements AfterViewInit {
+    constructor(private el: ElementRef) {
+    }
+
+    ngOnInit() {
+    }
+
+    ngAfterViewInit() {
+        this.el.nativeElement.focus();
+    }
+}

packages/uhk-web/src/app/models/ChangeKeymapDescription.ts

@@ -0,0 +1,4 @@
+export interface ChangeKeymapDescription {
+    abbr: string;
+    description: string;
+}

packages/uhk-web/src/app/models/privilage-page-sate.ts

@@ -0,0 +1,5 @@
+export interface PrivilagePageSate {
+    showWhatWillThisDo: boolean;
+    showWhatWillThisDoContent: boolean;
+    permissionSetupFailed: boolean;
+}

packages/uhk-web/src/app/models/restore-configuration-state.ts

@@ -0,0 +1,4 @@
+export interface RestoreConfigurationState {
+    restoringUserConfiguration: boolean;
+    hasBackupUserConfiguration: boolean;
+}

packages/uhk-web/src/app/models/side-menu-page-state.ts

@@ -0,0 +1,11 @@
+import { Keymap, Macro } from 'uhk-common';
+
+export interface SideMenuPageState {
+    showAddonMenu: boolean;
+    runInElectron: boolean;
+    updatingFirmware: boolean;
+    deviceName: string;
+    keymaps: Keymap[];
+    macros: Macro[];
+    restoreUserConfiguration: boolean;
+}

packages/uhk-web/src/app/services/capture.service.ts

@@ -94,7 +94,7 @@ export class CaptureService {
         this.mapping.set(88, 27);  // X
         this.mapping.set(89, 28);  // Y
         this.mapping.set(90, 29);  // Z
-        this.mapping.set(93, 118);  // Menu
+        this.mapping.set(93, 101);  // Menu
         this.mapping.set(96, 98);  // Num pad 0
         this.mapping.set(97, 89);  // Num pad 1
         this.mapping.set(98, 90);  // Num pad 2

packages/uhk-web/src/app/services/device-renderer.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, NgZone } from '@angular/core';
 import { Action, Store } from '@ngrx/store';
 
-import { DeviceConnectionState, IpcEvents, IpcResponse, LogService } from 'uhk-common';
+import { DeviceConnectionState, IpcEvents, IpcResponse, LogService, SaveUserConfigurationData } from 'uhk-common';
 import { AppState } from '../store';
 import { IpcCommonRenderer } from './ipc-common-renderer';
 import {
@@ -26,8 +26,8 @@ export class DeviceRendererService {
         this.ipcRenderer.send(IpcEvents.device.setPrivilegeOnLinux);
     }
 
-    saveUserConfiguration(buffer: Buffer): void {
+    saveUserConfiguration(data: SaveUserConfigurationData): void {
-        this.ipcRenderer.send(IpcEvents.device.saveUserConfiguration, JSON.stringify(buffer));
+        this.ipcRenderer.send(IpcEvents.device.saveUserConfiguration, JSON.stringify(data));
     }
 
     loadConfigurationFromKeyboard(): void {

packages/uhk-web/src/app/services/mapper.service.ts

@@ -190,6 +190,7 @@ export class MapperService {
         this.basicScanCodeTextMap.set(98, ['Insert', '0']);
         this.basicScanCodeTextMap.set(99, ['Del', '.']);
         this.basicScanCodeTextMap.set(100, ['ISO key', '|']);
+        this.basicScanCodeTextMap.set(101, ['Menu']);
         this.basicScanCodeTextMap.set(104, ['F13']);
         this.basicScanCodeTextMap.set(105, ['F14']);
         this.basicScanCodeTextMap.set(106, ['F15']);
@@ -202,7 +203,6 @@ export class MapperService {
         this.basicScanCodeTextMap.set(113, ['F22']);
         this.basicScanCodeTextMap.set(114, ['F23']);
         this.basicScanCodeTextMap.set(115, ['F24']);
-        this.basicScanCodeTextMap.set(118, ['Menu']);
         this.basicScanCodeTextMap.set(176, ['00']);
         this.basicScanCodeTextMap.set(177, ['000']);
 
@@ -236,7 +236,7 @@ export class MapperService {
         this.basicScancodeIcons.set(80, 'icon-kbd__mod--arrow-left');
         this.basicScancodeIcons.set(81, 'icon-kbd__mod--arrow-down');
         this.basicScancodeIcons.set(82, 'icon-kbd__mod--arrow-up');
-        this.basicScancodeIcons.set(118, 'icon-kbd__mod--menu');
+        this.basicScancodeIcons.set(101, 'icon-kbd__mod--menu');
 
         this.mediaScancodeIcons = new Map<number, string>();
         this.mediaScancodeIcons.set(138, 'icon-kbd__fn--browser');

packages/uhk-web/src/app/shared.module.ts

@@ -8,6 +8,7 @@ import { ConfirmationPopoverModule } from 'angular-confirmation-popover';
 import { DragulaModule } from 'ng2-dragula/ng2-dragula';
 import { Select2Module } from 'ng2-select2/ng2-select2';
 import { NouisliderModule } from 'ng2-nouislider';
+import { ClipboardModule } from 'ngx-clipboard';
 
 import { AddOnComponent } from './components/add-on';
 import { KeyboardSliderComponent } from './components/keyboard/slider';
@@ -15,7 +16,8 @@ import {
     DeviceConfigurationComponent,
     DeviceFirmwareComponent,
     MouseSpeedComponent,
-    LEDBrightnessComponent
+    LEDBrightnessComponent,
+    RestoreConfigurationComponent
 } from './components/device';
 import { KeymapAddComponent, KeymapEditComponent, KeymapHeaderComponent } from './components/keymap';
 import { LayersComponent } from './components/layers';
@@ -101,6 +103,8 @@ import { UhkDeviceLoadingGuard } from './services/uhk-device-loading.guard';
 import { UhkDeviceLoadedGuard } from './services/uhk-device-loaded.guard';
 import { XtermComponent } from './components/xterm/xterm.component';
 import { SliderWrapperComponent } from './components/slider-wrapper/slider-wrapper.component';
+import { EditableTextComponent } from './components/editable-text/editable-text.component';
+import { Autofocus } from './directives/autofocus/autofocus.directive';
 
 @NgModule({
     declarations: [
@@ -169,7 +173,10 @@ import { SliderWrapperComponent } from './components/slider-wrapper/slider-wrapp
         ProgressButtonComponent,
         LoadingDevicePageComponent,
         XtermComponent,
-        SliderWrapperComponent
+        SliderWrapperComponent,
+        EditableTextComponent,
+        Autofocus,
+        RestoreConfigurationComponent
     ],
     imports: [
         CommonModule,
@@ -182,7 +189,8 @@ import { SliderWrapperComponent } from './components/slider-wrapper/slider-wrapp
         NotifierModule.withConfig(angularNotifierConfig),
         ConfirmationPopoverModule.forRoot({
             confirmButtonType: 'danger' // set defaults here
-        })
+        }),
+        ClipboardModule
     ],
     providers: [
         SvgModuleProviderService,

packages/uhk-web/src/app/store/actions/app.ts

@@ -17,7 +17,10 @@ export const ActionTypes = {
     DISMISS_UNDO_NOTIFICATION: type(PREFIX + 'dismiss notification action'),
     LOAD_HARDWARE_CONFIGURATION_SUCCESS: type(PREFIX + 'load hardware configuration success'),
     ELECTRON_MAIN_LOG_RECEIVED: type(PREFIX + 'Electron main log received'),
-    OPEN_URL_IN_NEW_WINDOW: type(PREFIX + 'Open URL in new Window')
+    OPEN_URL_IN_NEW_WINDOW: type(PREFIX + 'Open URL in new Window'),
+    PRIVILEGE_WHAT_WILL_THIS_DO: type(PREFIX + 'What will this do clicked'),
+    SETUP_PERMISSION_ERROR: type(PREFIX + 'Setup permission error'),
+    LOAD_APP_START_INFO: type(PREFIX + 'Load app start info')
 };
 
 export class AppBootsrappedAction implements Action {
@@ -31,25 +34,29 @@ export class AppStartedAction implements Action {
 export class ShowNotificationAction implements Action {
     type = ActionTypes.APP_SHOW_NOTIFICATION;
 
-    constructor(public payload: Notification) { }
+    constructor(public payload: Notification) {
+    }
 }
 
 export class ApplyCommandLineArgsAction implements Action {
     type = ActionTypes.APPLY_COMMAND_LINE_ARGS;
 
-    constructor(public payload: CommandLineArgs) { }
+    constructor(public payload: CommandLineArgs) {
+    }
 }
 
 export class ProcessAppStartInfoAction implements Action {
     type = ActionTypes.APP_PROCESS_START_INFO;
 
-    constructor(public payload: AppStartInfo) { }
+    constructor(public payload: AppStartInfo) {
+    }
 }
 
 export class UndoLastAction implements Action {
     type = ActionTypes.UNDO_LAST;
 
-    constructor(public payload: any) {}
+    constructor(public payload: any) {
+    }
 }
 
 export class UndoLastSuccessAction implements Action {
@@ -63,19 +70,37 @@ export class DismissUndoNotificationAction implements Action {
 export class LoadHardwareConfigurationSuccessAction implements Action {
     type = ActionTypes.LOAD_HARDWARE_CONFIGURATION_SUCCESS;
 
-    constructor(public payload: HardwareConfiguration) {}
+    constructor(public payload: HardwareConfiguration) {
+    }
 }
 
 export class ElectronMainLogReceivedAction implements Action {
     type = ActionTypes.ELECTRON_MAIN_LOG_RECEIVED;
 
-    constructor(public payload: ElectronLogEntry) {}
+    constructor(public payload: ElectronLogEntry) {
+    }
 }
 
 export class OpenUrlInNewWindowAction implements Action {
     type = ActionTypes.OPEN_URL_IN_NEW_WINDOW;
 
-    constructor(public payload: string) {}
+    constructor(public payload: string) {
+    }
+}
+
+export class PrivilegeWhatWillThisDoAction implements Action {
+    type = ActionTypes.PRIVILEGE_WHAT_WILL_THIS_DO;
+}
+
+export class SetupPermissionErrorAction implements Action {
+    type = ActionTypes.SETUP_PERMISSION_ERROR;
+
+    constructor(public payload: string) {
+    }
+}
+
+export class LoadAppStartInfoAction implements Action {
+    type = ActionTypes.LOAD_APP_START_INFO;
 }
 
 export type Actions
@@ -90,4 +115,7 @@ export type Actions
     | LoadHardwareConfigurationSuccessAction
     | ElectronMainLogReceivedAction
     | OpenUrlInNewWindowAction
+    | PrivilegeWhatWillThisDoAction
+    | SetupPermissionErrorAction
+    | LoadAppStartInfoAction
     ;

packages/uhk-web/src/app/store/actions/device.ts

@@ -1,5 +1,5 @@
 import { Action } from '@ngrx/store';
-import { DeviceConnectionState, IpcResponse, type } from 'uhk-common';
+import { DeviceConnectionState, HardwareModules, IpcResponse, type } from 'uhk-common';
 
 const PREFIX = '[device] ';
 
@@ -22,7 +22,11 @@ export const ActionTypes = {
     UPDATE_FIRMWARE_REPLY: type(PREFIX + 'update firmware reply'),
     UPDATE_FIRMWARE_SUCCESS: type(PREFIX + 'update firmware success'),
     UPDATE_FIRMWARE_FAILED: type(PREFIX + 'update firmware failed'),
-    UPDATE_FIRMWARE_OK_BUTTON: type(PREFIX + 'update firmware ok button click')
+    UPDATE_FIRMWARE_OK_BUTTON: type(PREFIX + 'update firmware ok button click'),
+    MODULES_INFO_LOADED: type(PREFIX + 'module info loaded'),
+    HAS_BACKUP_USER_CONFIGURATION: type(PREFIX + 'Store backup user configuration'),
+    RESTORE_CONFIGURATION_FROM_BACKUP: type(PREFIX + 'Restore configuration from backup'),
+    RESTORE_CONFIGURATION_FROM_BACKUP_SUCCESS: type(PREFIX + 'Restore configuration from backup success')
 };
 
 export class SetPrivilegeOnLinuxAction implements Action {
@@ -114,6 +118,28 @@ export class ResetMouseSpeedSettingsAction implements Action {
     type = ActionTypes.RESET_MOUSE_SPEED_SETTINGS;
 }
 
+export class HardwareModulesLoadedAction implements Action {
+    type = ActionTypes.MODULES_INFO_LOADED;
+
+    constructor(public payload: HardwareModules) {
+    }
+}
+
+export class RestoreUserConfigurationFromBackupAction implements Action {
+    type = ActionTypes.RESTORE_CONFIGURATION_FROM_BACKUP;
+}
+
+export class HasBackupUserConfigurationAction implements Action {
+    type = ActionTypes.HAS_BACKUP_USER_CONFIGURATION;
+
+    constructor(public payload: boolean) {
+    }
+}
+
+export class RestoreUserConfigurationFromBackupSuccessAction implements Action {
+    type = ActionTypes.RESTORE_CONFIGURATION_FROM_BACKUP_SUCCESS;
+}
+
 export type Actions
     = SetPrivilegeOnLinuxAction
     | SetPrivilegeOnLinuxReplyAction
@@ -132,4 +158,8 @@ export type Actions
     | UpdateFirmwareSuccessAction
     | UpdateFirmwareFailedAction
     | UpdateFirmwareOkButtonAction
+    | HardwareModulesLoadedAction
+    | RestoreUserConfigurationFromBackupAction
+    | HasBackupUserConfigurationAction
+    | RestoreUserConfigurationFromBackupSuccessAction
     ;

packages/uhk-web/src/app/store/actions/keymap.ts

@@ -1,6 +1,7 @@
 import { Action } from '@ngrx/store';
 import { KeyAction, Keymap, Macro } from 'uhk-common';
 import { UndoUserConfigData } from '../../models/undo-user-config-data';
+import { ChangeKeymapDescription } from '../../models/ChangeKeymapDescription';
 
 export type KeymapAction =
     KeymapActions.AddKeymapAction |
@@ -11,7 +12,8 @@ export type KeymapAction =
     KeymapActions.SetDefaultAction |
     KeymapActions.RemoveKeymapAction |
     KeymapActions.SaveKeyAction |
-    KeymapActions.CheckMacroAction;
+    KeymapActions.CheckMacroAction |
+    KeymapActions.EditDescriptionAction;
 
 export namespace KeymapActions {
     export const ADD = '[Keymap] Add keymap';
@@ -98,6 +100,16 @@ export namespace KeymapActions {
         payload: UndoUserConfigData
     };
 
+    export const EDIT_DESCRIPTION = '[Keymap] Edit description';
+
+    export class EditDescriptionAction {
+        type = EDIT_DESCRIPTION;
+
+        constructor(public payload: ChangeKeymapDescription) {
+
+        }
+    }
+
     export function loadKeymaps(): Action {
         return {
             type: KeymapActions.LOAD_KEYMAPS

packages/uhk-web/src/app/store/effects/app.ts

@@ -40,6 +40,13 @@ export class ApplicationEffects {
             this.logService.info('Renderer appStart effect end');
         });
 
+    @Effect({dispatch: false})
+    appStartInfo$: Observable<Action> = this.actions$
+        .ofType(ActionTypes.LOAD_APP_START_INFO)
+        .do(() => {
+            this.appRendererService.getAppStartInfo();
+        });
+
     @Effect({dispatch: false})
     showNotification$: Observable<Action> = this.actions$
         .ofType<ShowNotificationAction>(ActionTypes.APP_SHOW_NOTIFICATION)

packages/uhk-web/src/app/store/effects/device.ts

@@ -13,11 +13,19 @@ import 'rxjs/add/operator/mergeMap';
 import 'rxjs/add/operator/withLatestFrom';
 import 'rxjs/add/operator/switchMap';
 
-import { DeviceConnectionState, IpcResponse, NotificationType, UhkBuffer, UserConfiguration } from 'uhk-common';
+import {
+    DeviceConnectionState,
+    HardwareConfiguration,
+    IpcResponse,
+    NotificationType,
+    UserConfiguration
+} from 'uhk-common';
 import {
     ActionTypes,
     ConnectionStateChangedAction,
     HideSaveToKeyboardButton,
+    ResetUserConfigurationAction,
+    RestoreUserConfigurationFromBackupSuccessAction,
     SaveConfigurationAction,
     SaveConfigurationReplyAction,
     SaveToKeyboardSuccessAction,
@@ -31,14 +39,16 @@ import {
     UpdateFirmwareWithAction
 } from '../actions/device';
 import { DeviceRendererService } from '../../services/device-renderer.service';
-import { ShowNotificationAction } from '../actions/app';
+import { SetupPermissionErrorAction, ShowNotificationAction } from '../actions/app';
 import { AppState } from '../index';
 import {
     ActionTypes as UserConfigActions,
+    ApplyUserConfigurationFromFileAction,
     LoadConfigFromDeviceAction,
     LoadResetUserConfigurationAction
 } from '../actions/user-config';
 import { DefaultUserConfigurationService } from '../../services/default-user-configuration.service';
+import { DataStorageRepositoryService } from '../../services/datastorage-repository.service';
 
 @Injectable()
 export class DeviceEffects {
@@ -76,30 +86,23 @@ export class DeviceEffects {
     setPrivilegeOnLinuxReply$: Observable<Action> = this.actions$
         .ofType<SetPrivilegeOnLinuxReplyAction>(ActionTypes.SET_PRIVILEGE_ON_LINUX_REPLY)
         .map(action => action.payload)
-        .mergeMap((response: any) => {
+        .map((response: any): any => {
             if (response.success) {
-                return [
+                return new ConnectionStateChangedAction({
-                    new ConnectionStateChangedAction({
+                    connected: true,
-                        connected: true,
+                    hasPermission: true
-                        hasPermission: true
+                });
-                    })
-                ];
             }
-            return [
+
-                <any>new ShowNotificationAction({
+            return new SetupPermissionErrorAction(response.error);
-                    type: NotificationType.Error,
-                    message: response.error.message || response.error
-                })
-            ];
         });
 
     @Effect({dispatch: false})
     saveConfiguration$: Observable<Action> = this.actions$
         .ofType(ActionTypes.SAVE_CONFIGURATION)
         .withLatestFrom(this.store)
-        .map(([action, state]) => state.userConfiguration)
+        .do(([action, state]) => {
-        .do((userConfiguration: UserConfiguration) => {
+            setTimeout(() => this.sendUserConfigToKeyboard(state.userConfiguration, state.app.hardwareConfig), 100);
-            setTimeout(() => this.sendUserConfigToKeyboard(userConfiguration), 100);
         })
         .switchMap(() => Observable.empty());
 
@@ -126,8 +129,18 @@ export class DeviceEffects {
     @Effect()
     autoHideSaveToKeyboardButton$: Observable<Action> = this.actions$
         .ofType(ActionTypes.SAVE_TO_KEYBOARD_SUCCESS)
-        .switchMap(() => Observable.timer(1000)
+        .withLatestFrom(this.store)
-            .switchMap(() => Observable.of(new HideSaveToKeyboardButton()))
+        .switchMap(([action, state]) => Observable.timer(1000)
+            .mergeMap(() => {
+                const actions = [new HideSaveToKeyboardButton()];
+
+                if (state.device.hasBackupUserConfiguration) {
+                    actions.push(new RestoreUserConfigurationFromBackupSuccessAction());
+                    this.router.navigate(['/']);
+                }
+
+                return actions;
+            })
         );
 
     @Effect()
@@ -162,8 +175,16 @@ export class DeviceEffects {
         });
 
     @Effect() saveResetUserConfigurationToDevice$ = this.actions$
-        .ofType(UserConfigActions.LOAD_RESET_USER_CONFIGURATION, UserConfigActions.APPLY_USER_CONFIGURATION_FROM_FILE)
+        .ofType<ApplyUserConfigurationFromFileAction
-        .switchMap(() => Observable.of(new SaveConfigurationAction()));
+            | LoadResetUserConfigurationAction>(
+            UserConfigActions.LOAD_RESET_USER_CONFIGURATION,
+            UserConfigActions.APPLY_USER_CONFIGURATION_FROM_FILE)
+        .map(action => action.payload)
+        .switchMap((config: UserConfiguration) => {
+            this.dataStorageRepository.saveConfig(config);
+
+            return Observable.of(new SaveConfigurationAction());
+        });
 
     @Effect({dispatch: false}) updateFirmware$ = this.actions$
         .ofType<UpdateFirmwareAction>(ActionTypes.UPDATE_FIRMWARE)
@@ -189,16 +210,22 @@ export class DeviceEffects {
         .ofType<UpdateFirmwareOkButtonAction>(ActionTypes.UPDATE_FIRMWARE_OK_BUTTON)
         .do(() => this.deviceRendererService.startConnectionPoller());
 
+    @Effect() restoreUserConfiguration$ = this.actions$
+        .ofType<ResetUserConfigurationAction>(ActionTypes.RESTORE_CONFIGURATION_FROM_BACKUP)
+        .map(() => new SaveConfigurationAction());
+
     constructor(private actions$: Actions,
                 private router: Router,
                 private deviceRendererService: DeviceRendererService,
                 private store: Store<AppState>,
+                private dataStorageRepository: DataStorageRepositoryService,
                 private defaultUserConfigurationService: DefaultUserConfigurationService) {
     }
 
-    private sendUserConfigToKeyboard(userConfiguration: UserConfiguration): void {
+    private sendUserConfigToKeyboard(userConfiguration: UserConfiguration, hardwareConfig: HardwareConfiguration): void {
-        const uhkBuffer = new UhkBuffer();
+        this.deviceRendererService.saveUserConfiguration({
-        userConfiguration.toBinary(uhkBuffer);
+            uniqueId: hardwareConfig && hardwareConfig.uniqueId,
-        this.deviceRendererService.saveUserConfiguration(uhkBuffer.getBufferContent());
+            configuration: userConfiguration.toJsonObject()
+        });
     }
 }

packages/uhk-web/src/app/store/effects/keymap.ts

@@ -7,14 +7,17 @@ import { Observable } from 'rxjs/Observable';
 
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/pairwise';
 import 'rxjs/add/operator/startWith';
 import 'rxjs/add/operator/switchMap';
 import 'rxjs/add/operator/withLatestFrom';
 import 'rxjs/add/observable/of';
 
 import { Keymap } from 'uhk-common';
+import { findNewItem } from '../../util';
 import { KeymapActions } from '../actions';
 import { AppState } from '../index';
+import { getKeymaps } from '../reducers/user-configuration';
 
 @Injectable()
 export class KeymapEffects {
@@ -32,10 +35,10 @@ export class KeymapEffects {
 
     @Effect({ dispatch: false }) addOrDuplicate$: any = this.actions$
         .ofType(KeymapActions.ADD, KeymapActions.DUPLICATE)
-        .withLatestFrom(this.store)
+        .withLatestFrom(this.store.let(getKeymaps()).pairwise(), (action, latest) => latest)
-        .map(latest => latest[1].userConfiguration.keymaps)
+        .do(([prevKeymaps, newKeymaps]) => {
-        .do(keymaps => {
+            const newKeymap = findNewItem(prevKeymaps, newKeymaps);
-            this.router.navigate(['/keymap', keymaps[keymaps.length - 1].abbreviation]);
+            this.router.navigate(['/keymap', newKeymap.abbreviation]);
         });
 
     @Effect({ dispatch: false }) remove$: any = this.actions$

packages/uhk-web/src/app/store/effects/macro.ts

@@ -2,14 +2,18 @@ import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { Actions, Effect } from '@ngrx/effects';
-import { Store } from '@ngrx/store';
+import { Store, Action } from '@ngrx/store';
 
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/pairwise';
 import 'rxjs/add/operator/withLatestFrom';
 
+import { Macro } from 'uhk-common';
 import { KeymapActions, MacroActions } from '../actions';
 import { AppState } from '../index';
+import { getMacros } from '../reducers/user-configuration';
+import { findNewItem } from '../../util';
 
 @Injectable()
 export class MacroEffects {
@@ -27,23 +31,17 @@ export class MacroEffects {
             }
         });
 
-    @Effect({ dispatch: false }) add$: any = this.actions$
+    @Effect({ dispatch: false }) addOrDuplicate$: any = this.actions$
-        .ofType(MacroActions.ADD)
+        .ofType(MacroActions.ADD, MacroActions.DUPLICATE)
-        .withLatestFrom(this.store)
+        .withLatestFrom(this.store.let(getMacros()).pairwise(), (action, latest) => ([action, latest[0], latest[1]]))
-        .map(([action, state]) => state.userConfiguration.macros)
+        .do(([action, prevMacros, newMacros]: [Action, Macro[], Macro[]]) => {
-        .map(macros => macros[macros.length - 1])
+            const newMacro = findNewItem(prevMacros, newMacros);
-        .do(lastMacro => {
+            const commands = ['/macro', newMacro.id];
-            this.router.navigate(['/macro', lastMacro.id, 'new']);
+            if (action.type === MacroActions.ADD) {
+                commands.push('new');
+            }
+            this.router.navigate(commands);
         });
 
-    @Effect({ dispatch: false }) duplicate: any = this.actions$
+    constructor(private actions$: Actions, private router: Router, private store: Store<AppState>) { }
-        .ofType(MacroActions.DUPLICATE)
-        .withLatestFrom(this.store)
-        .map(([action, state]) => state.userConfiguration.macros)
-        .map(macros => macros[macros.length - 1])
-        .do(lastMacro => {
-            this.router.navigate(['/macro', lastMacro.id]);
-        });
-
-    constructor(private actions$: Actions, private router: Router, private store: Store<AppState>) {}
 }

packages/uhk-web/src/app/store/effects/user-config.ts

@@ -15,8 +15,9 @@ import 'rxjs/add/observable/of';
 import 'rxjs/add/observable/empty';
 
 import {
+    getHardwareConfigFromDeviceResponse,
+    getUserConfigFromDeviceResponse,
     ConfigurationReply,
-    HardwareConfiguration,
     LogService,
     NotificationType,
     UhkBuffer,
@@ -43,7 +44,11 @@ import {
     ShowNotificationAction,
     UndoLastAction
 } from '../actions/app';
-import { ShowSaveToKeyboardButtonAction } from '../actions/device';
+import {
+    HardwareModulesLoadedAction,
+    ShowSaveToKeyboardButtonAction,
+    HasBackupUserConfigurationAction
+} from '../actions/device';
 import { DeviceRendererService } from '../../services/device-renderer.service';
 import { UndoUserConfigData } from '../../models/undo-user-config-data';
 import { UploadFileData } from '../../models/upload-file-data';
@@ -51,29 +56,6 @@ import { UploadFileData } from '../../models/upload-file-data';
 @Injectable()
 export class UserConfigEffects {
 
-    private static getUserConfigFromDeviceResponse(json: string): UserConfiguration {
-        const data = JSON.parse(json);
-        const userConfig = new UserConfiguration();
-        userConfig.fromBinary(UhkBuffer.fromArray(data));
-
-        if (userConfig.userConfigMajorVersion > 0) {
-            return userConfig;
-        }
-
-        return null;
-    }
-
-    private static getHardwareConfigFromDeviceResponse(json: string): HardwareConfiguration {
-        const data = JSON.parse(json);
-        const hardwareConfig = new HardwareConfiguration();
-        hardwareConfig.fromBinary(UhkBuffer.fromArray(data));
-
-        if (hardwareConfig.uniqueId > 0) {
-            return hardwareConfig;
-        }
-        return null;
-    }
-
     @Effect() loadUserConfig$: Observable<Action> = defer(() => {
         return Observable.of(new LoadUserConfigSuccessAction(this.getUserConfiguration()));
     });
@@ -81,7 +63,7 @@ export class UserConfigEffects {
     @Effect() saveUserConfig$: Observable<Action> = (this.actions$
         .ofType(
             KeymapActions.ADD, KeymapActions.DUPLICATE, KeymapActions.EDIT_NAME, KeymapActions.EDIT_ABBR,
-            KeymapActions.SET_DEFAULT, KeymapActions.REMOVE, KeymapActions.SAVE_KEY,
+            KeymapActions.SET_DEFAULT, KeymapActions.REMOVE, KeymapActions.SAVE_KEY, KeymapActions.EDIT_DESCRIPTION,
             MacroActions.ADD, MacroActions.DUPLICATE, MacroActions.EDIT_NAME, MacroActions.REMOVE, MacroActions.ADD_ACTION,
             MacroActions.SAVE_ACTION, MacroActions.DELETE_ACTION, MacroActions.REORDER_ACTION,
             ActionTypes.RENAME_USER_CONFIGURATION, ActionTypes.SET_USER_CONFIGURATION_VALUE) as
@@ -146,23 +128,24 @@ export class UserConfigEffects {
             }
 
             const result = [];
+            let newPageDestination = ['/'];
+
             try {
-                const userConfig = UserConfigEffects.getUserConfigFromDeviceResponse(data.userConfiguration);
+                const userConfig = getUserConfigFromDeviceResponse(data.userConfiguration);
                 result.push(new LoadUserConfigSuccessAction(userConfig));
 
             } catch (err) {
                 this.logService.error('Eeprom user-config parse error:', err);
-                result.push(
+                const userConfig = new UserConfiguration().fromJsonObject(data.backupConfiguration);
-                    new ShowNotificationAction({
-                        type: NotificationType.Error,
-                        message: err
-                    }));
 
-                result.push(new LoadUserConfigSuccessAction(this.getUserConfiguration()));
+                result.push(new HasBackupUserConfigurationAction(!!data.backupConfiguration));
+                result.push(new LoadUserConfigSuccessAction(userConfig));
+
+                newPageDestination = ['/device/restore-user-configuration'];
             }
 
             try {
-                const hardwareConfig = UserConfigEffects.getHardwareConfigFromDeviceResponse(data.hardwareConfiguration);
+                const hardwareConfig = getHardwareConfigFromDeviceResponse(data.hardwareConfiguration);
                 result.push(new LoadHardwareConfigurationSuccessAction(hardwareConfig));
             } catch (err) {
                 this.logService.error('Eeprom hardware-config parse error:', err);
@@ -173,7 +156,9 @@ export class UserConfigEffects {
                     }));
             }
 
-            this.router.navigate(['/']);
+            result.push(new HardwareModulesLoadedAction(data.modules));
+
+            this.router.navigate(newPageDestination);
 
             return result;
         });

packages/uhk-web/src/app/store/index.ts

@@ -39,7 +39,6 @@ export const metaReducers: MetaReducer<AppState>[] = environment.production
     : [storeFreeze];
 
 export const getUserConfiguration = (state: AppState) => state.userConfiguration;
-export const getDeviceName = createSelector(getUserConfiguration, fromUserConfig.getDeviceName);
 
 export const appState = (state: AppState) => state.app;
 
@@ -47,10 +46,10 @@ export const showAddonMenu = createSelector(appState, fromApp.showAddonMenu);
 export const getUndoableNotification = createSelector(appState, fromApp.getUndoableNotification);
 export const getPrevUserConfiguration = createSelector(appState, fromApp.getPrevUserConfiguration);
 export const runningInElectron = createSelector(appState, fromApp.runningInElectron);
-export const getHardwareConfiguration = createSelector(appState, fromApp.getHardwareConfiguration);
 export const getKeyboardLayout = createSelector(appState, fromApp.getKeyboardLayout);
 export const deviceConfigurationLoaded = createSelector(appState, fromApp.deviceConfigurationLoaded);
 export const getAgentVersionInfo = createSelector(appState, fromApp.getAgentVersionInfo);
+export const getPrivilegePageState = createSelector(appState, fromApp.getPrivilagePageState);
 
 export const appUpdateState = (state: AppState) => state.appUpdate;
 export const getShowAppUpdateAvailable = createSelector(appUpdateState, fromAppUpdate.getShowAppUpdateAvailable);
@@ -77,3 +76,29 @@ export const xtermLog = createSelector(deviceState, fromDevice.xtermLog);
 export const firmwareOkButtonDisabled = createSelector(deviceState, fromDevice.firmwareOkButtonDisabled);
 // tslint:disable-next-line: max-line-length
 export const flashFirmwareButtonDisbabled = createSelector(runningInElectron, deviceState, (electron, state: fromDevice.State) => !electron || state.updatingFirmware);
+export const getHardwareModules = createSelector(deviceState, fromDevice.getHardwareModules);
+export const getBackupUserConfigurationState = createSelector(deviceState, fromDevice.getBackupUserConfigurationState);
+export const getRestoreUserConfiguration = createSelector(deviceState, fromDevice.getHasBackupUserConfiguration);
+
+export const getSideMenuPageState = createSelector(
+    showAddonMenu,
+    runningInElectron,
+    updatingFirmware,
+    getUserConfiguration,
+    getRestoreUserConfiguration,
+    (showAddonMenuValue: boolean,
+     runningInElectronValue: boolean,
+     updatingFirmwareValue: boolean,
+     userConfiguration: UserConfiguration,
+     restoreUserConfiguration: boolean) => {
+        return {
+            showAddonMenu: showAddonMenuValue,
+            runInElectron: runningInElectronValue,
+            updatingFirmware: updatingFirmwareValue,
+            deviceName: userConfiguration.deviceName,
+            keymaps: userConfiguration.keymaps,
+            macros: userConfiguration.macros,
+            restoreUserConfiguration
+        };
+    }
+);

packages/uhk-web/src/app/store/reducers/app.reducer.ts

@@ -1,13 +1,20 @@
 import { ROUTER_NAVIGATION } from '@ngrx/router-store';
 import { Action } from '@ngrx/store';
-import { VersionInformation } from 'uhk-common';
+import {
+    HardwareConfiguration,
+    Notification,
+    NotificationType,
+    runInElectron,
+    UserConfiguration,
+    VersionInformation
+} from 'uhk-common';
 
-import { HardwareConfiguration, Notification, NotificationType, runInElectron, UserConfiguration } from 'uhk-common';
 import { ActionTypes, ShowNotificationAction } from '../actions/app';
 import { ActionTypes as UserConfigActionTypes } from '../actions/user-config';
 import { ActionTypes as DeviceActionTypes } from '../actions/device';
 import { KeyboardLayout } from '../../keyboard/keyboard-layout.enum';
 import { getVersions } from '../../util';
+import { PrivilagePageSate } from '../../models/privilage-page-sate';
 
 export interface State {
     started: boolean;
@@ -19,6 +26,8 @@ export interface State {
     configLoading: boolean;
     hardwareConfig?: HardwareConfiguration;
     agentVersionInfo?: VersionInformation;
+    privilegeWhatWillThisDoClicked: boolean;
+    permissionError?: any;
 }
 
 export const initialState: State = {
@@ -27,7 +36,8 @@ export const initialState: State = {
     navigationCountAfterNotification: 0,
     runningInElectron: runInElectron(),
     configLoading: true,
-    agentVersionInfo: getVersions()
+    agentVersionInfo: getVersions(),
+    privilegeWhatWillThisDoClicked: false
 };
 
 export function reducer(state = initialState, action: Action & { payload: any }) {
@@ -115,6 +125,24 @@ export function reducer(state = initialState, action: Action & { payload: any })
             };
         }
 
+        case ActionTypes.PRIVILEGE_WHAT_WILL_THIS_DO:
+            return {
+                ...state,
+                privilegeWhatWillThisDoClicked: true
+            };
+
+        case ActionTypes.SETUP_PERMISSION_ERROR:
+            return {
+                ...state,
+                permissionError: action.payload
+            };
+
+        case DeviceActionTypes.SET_PRIVILEGE_ON_LINUX:
+            return {
+                ...state,
+                permissionError: null
+            };
+
         default:
             return state;
     }
@@ -124,7 +152,6 @@ export const showAddonMenu = (state: State) => state.showAddonMenu;
 export const getUndoableNotification = (state: State) => state.undoableNotification;
 export const getPrevUserConfiguration = (state: State) => state.prevUserConfig;
 export const runningInElectron = (state: State) => state.runningInElectron;
-export const getHardwareConfiguration = (state: State) => state.hardwareConfig;
 export const getKeyboardLayout = (state: State): KeyboardLayout => {
     if (state.hardwareConfig && state.hardwareConfig.isIso) {
         return KeyboardLayout.ISO;
@@ -134,3 +161,12 @@ export const getKeyboardLayout = (state: State): KeyboardLayout => {
 };
 export const deviceConfigurationLoaded = (state: State) => !state.runningInElectron ? true : !!state.hardwareConfig;
 export const getAgentVersionInfo = (state: State) => state.agentVersionInfo || {} as VersionInformation;
+export const getPrivilagePageState = (state: State): PrivilagePageSate => {
+    const permissionSetupFailed = !!state.permissionError;
+
+    return {
+        permissionSetupFailed,
+        showWhatWillThisDo: !state.privilegeWhatWillThisDoClicked && !permissionSetupFailed,
+        showWhatWillThisDoContent: state.privilegeWhatWillThisDoClicked || permissionSetupFailed
+    };
+};