fix(user-config): Validate device, keymap, and macro names (#543)

* fix(user-config): Validate device, keymap, and macro names

* fix device name renaming

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

@@ -74,7 +74,7 @@ export class KeymapHeaderComponent implements OnChanges {
     }
 
     editKeymapName(name: string) {
-        if (name.length === 0) {
+        if (!util.isValidName(name)) {
             this.setName();
             return;
         }

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

@@ -59,7 +59,7 @@ export class MacroHeaderComponent implements AfterViewInit, OnChanges {
     }
 
     editMacroName(name: string) {
-        if (name.length === 0) {
+        if (!util.isValidName(name)) {
             this.setName();
             return;
         }

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

@@ -118,7 +118,11 @@ export class SideMenuComponent implements AfterContentInit, OnDestroy {
         this.store.dispatch(MacroActions.addMacro());
     }
 
-    editDeviceName(name): void {
+    editDeviceName(name: string): void {
+        if (!util.isValidName(name) || name.trim() === this.deviceNameValue) {
+            this.setDeviceName();
+            return;
+        }
         this.store.dispatch(new RenameUserConfigurationAction(name));
     }
 

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

@@ -39,9 +39,10 @@ export const metaReducers: MetaReducer<AppState>[] = environment.production
     : [storeFreeze];
 
 export const getUserConfiguration = (state: AppState) => state.userConfiguration;
-export const getDeviceName = (state: AppState) => state.userConfiguration.deviceName;
+export const getDeviceName = createSelector(getUserConfiguration, fromUserConfig.getDeviceName);
 
 export const appState = (state: AppState) => state.app;
+
 export const showAddonMenu = createSelector(appState, fromApp.showAddonMenu);
 export const autoWriteUserConfiguration = createSelector(appState, fromApp.autoWriteUserConfiguration);
 export const getUndoableNotification = createSelector(appState, fromApp.getUndoableNotification);

packages/uhk-web/src/app/store/reducers/user-configuration.ts

@@ -4,10 +4,11 @@ import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/map';
 
-import { KeyAction, Keymap, KeyActionHelper, Layer, Macro, Module, SwitchLayerAction, UserConfiguration } from 'uhk-common';
+import { KeyAction, KeyActionHelper, Keymap, Layer, Macro, Module, SwitchLayerAction, UserConfiguration } from 'uhk-common';
 import { KeymapActions, MacroActions } from '../actions';
 import { AppState } from '../index';
 import { ActionTypes } from '../actions/user-config';
+import { isValidName } from '../../util';
 
 export const initialState: UserConfiguration = new UserConfiguration();
 
@@ -31,7 +32,11 @@ export function reducer(state = initialState, action: Action & { payload?: any }
             break;
         }
         case KeymapActions.EDIT_NAME: {
-            const name: string = action.payload.name;
+            if (!isValidName(action.payload.name)) {
+                break;
+            }
+
+            const name: string = action.payload.name.trim();
 
             const duplicate = state.keymaps.some((keymap: Keymap) => {
                 return keymap.name === name && keymap.abbreviation !== action.payload.abbr;
@@ -169,7 +174,11 @@ export function reducer(state = initialState, action: Action & { payload?: any }
             break;
         }
         case MacroActions.EDIT_NAME: {
-            const name: string = action.payload.name;
+            if (!isValidName(action.payload.name)) {
+                break;
+            }
+
+            const name: string = action.payload.name.trim();
 
             const duplicate = state.macros.some((macro: Macro) => {
                 return macro.id !== action.payload.id && macro.name === name;
@@ -242,7 +251,9 @@ export function reducer(state = initialState, action: Action & { payload?: any }
             break;
 
         case ActionTypes.RENAME_USER_CONFIGURATION: {
-            changedUserConfiguration.deviceName = action.payload;
+            if (isValidName(action.payload)) {
+                changedUserConfiguration.deviceName = action.payload.trim();
+            }
             break;
         }
 
@@ -399,3 +410,5 @@ function setKeyActionToLayer(newLayer: Layer, moduleIndex: number, keyIndex: num
     newModule.keyActions = newModule.keyActions.slice();
     newModule.keyActions[keyIndex] = newKeyAction;
 }
+
+export const getDeviceName = (state: UserConfiguration) => state.deviceName;

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

@@ -1 +1,2 @@
 export * from './html-helper';
+export * from './validators';

packages/uhk-web/src/app/util/validators.ts

@@ -0,0 +1,3 @@
+export function isValidName(name: string): boolean {
+    return name && name.trim().length > 0;
+}