feat(device): Add confirmation question before reset the configuration (#449)

* feat(device): Add confirmation question before reset the configuration

* feat(device): text change

* style: fix ts-lint error

package.json

@@ -50,7 +50,7 @@
   },
   "scripts": {
     "postinstall": "lerna bootstrap",
-    "test":"run-p -sn test:test-serializer test:uhk-common",
+    "test": "run-p -sn test:test-serializer test:uhk-common",
     "test:test-serializer": "lerna exec --scope test-serializer npm test",
     "test:uhk-common": "lerna exec --scope uhk-common npm test",
     "test:uhk-web": "lerna exec --scope uhk-web npm test",

packages/uhk-web/package-lock.json

@@ -412,6 +412,14 @@
 			"resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
 			"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
 		},
+		"angular-confirmation-popover": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/angular-confirmation-popover/-/angular-confirmation-popover-3.2.0.tgz",
+			"integrity": "sha512-sScEbZe9INhHsIjjHXwnhsc+dBGnJlYACYZAKQ5edxVQOwaAynzDxAOAauxKWaL1y4CmxNYuc4Ax/6jAbs8SUA==",
+			"requires": {
+				"positioning": "1.3.1"
+			}
+		},
 		"angular-notifier": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/angular-notifier/-/angular-notifier-2.0.0.tgz",
@@ -6868,6 +6876,11 @@
 				}
 			}
 		},
+		"positioning": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/positioning/-/positioning-1.3.1.tgz",
+			"integrity": "sha512-9ac2qRSW1jAK2+MTZaAY/g1UKBBzSD6cfVq6ztKUW4zBcux/tCFq8FvDe4oen0Z3rfhZm4X1rwXaFrbLVrcC3Q=="
+		},
 		"postcss": {
 			"version": "5.2.18",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",

packages/uhk-web/package.json

@@ -39,6 +39,7 @@
     "@types/jquery": "3.2.9",
     "@types/node-hid": "0.5.2",
     "@types/usb": "1.1.3",
+    "angular-confirmation-popover": "3.2.0",
     "angular-notifier": "2.0.0",
     "autoprefixer": "6.5.3",
     "bootstrap": "3.3.7",

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

@@ -6,8 +6,13 @@
 <ul class="list-unstyled btn-list">
     <li>
         <button class="btn btn-danger"
-                (click)="resetUserConfiguration()">Reset user configuration including all your keymaps and macros
-        </button>
+                mwlConfirmationPopover
+                title="Are you sure?"
+                placement="bottom"
+                confirmText="Yes"
+                cancelText="No"
+                (confirm)="resetUserConfiguration()">Reset user configuration
+        </button> - including all your keymaps and macros
     </li>
     <li>
         <button class="btn btn-default"

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

@@ -22,11 +22,11 @@ export class DeviceSettingsComponent {
         this.store.dispatch(new ResetUserConfigurationAction());
     }
 
-    saveConfigurationInJSONFormat(){
+    saveConfigurationInJSONFormat() {
         this.store.dispatch(new SaveUserConfigInJsonFileAction());
     }
 
-    saveConfigurationInBINFormat(){
+    saveConfigurationInBINFormat() {
         this.store.dispatch(new SaveUserConfigInBinaryFileAction());
     }
 }

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

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NotifierModule } from 'angular-notifier';
+import { ConfirmationPopoverModule } from 'angular-confirmation-popover';
 
 import { DragulaModule } from 'ng2-dragula/ng2-dragula';
 import { Select2Module } from 'ng2-select2/ng2-select2';
@@ -163,7 +164,10 @@ import { UhkDeviceLoadedGuard } from './services/uhk-device-loaded.guard';
         DragulaModule,
         routing,
         Select2Module,
-        NotifierModule.withConfig(angularNotifierConfig)
+        NotifierModule.withConfig(angularNotifierConfig),
+        ConfirmationPopoverModule.forRoot({
+            confirmButtonType: 'danger' // set defaults here
+        })
     ],
     providers: [
         SvgModuleProviderService,