Electron Prompt on Startup

clients/desktop/app/package.json

@@ -24,7 +24,8 @@
         "commander": "^2.19.0",
         "crypto": "^1.0.1",
         "debounce": "^1.2.0",
-        "migrate": "^1.6.1",
+        "dev": "^0.1.3",
+        "doc-ready": "^1.0.4",
         "electron-updater": "^3.2.3",
         "express": "^4.16.4",
         "hyperbridge-funding-protocol": "^1.0.13",
@@ -33,6 +34,7 @@
         "hyperbridge-token": "^1.0.12",
         "json-beautify": "^1.0.1",
         "lokijs": "^1.5.5",
+        "migrate": "^1.6.1",
         "minimist": "^1.2.0",
         "mkdirp": "^0.5.1",
         "rimraf": "^2.5.2",

clients/desktop/app/src/main/index.js

@@ -8,7 +8,7 @@ import * as PeerService from '../framework/peer-service'
 import * as Wallet from '../framework/wallet'
 import * as Windows from './windows'
 import * as Updater from './updater'
-
+import electronPrompt from './windows/prompt/main.js'
 
 const config = require('../config')
 
@@ -181,6 +181,21 @@ export const initApp = () => {
         callback({ cancel: false })
       }
     })
+
+    // Test for the electron prompt
+    electronPrompt({
+      title: 'TEST PROMPT',
+      label: 'TEST INPUT',
+      value: 'TEST',
+      inputAttr: {
+        type: 'text'
+      },
+      type: 'input'
+    }, Windows.main).then(r => {
+      console.log('Input is ', r);
+    }).catch(console.error);
+
+
 
     DB.init()
     Windows.main.init(deeplinkUri, !config.IS_PRODUCTION, argv.tools)

clients/desktop/app/src/main/windows/index.js

@@ -1,2 +1,2 @@
 
-export const main = require('./main')
+export const main = require('./main')

clients/desktop/app/src/main/windows/prompt.js

@@ -0,0 +1,98 @@
+const electron = require('electron');
+
+const BrowserWindow = electron.BrowserWindow || electron.remote.BrowserWindow;
+const ipcMain = electron.ipcMain || electron.remote.ipcMain;
+const url = require('url');
+const path = require('path');
+
+function electronPrompt(options, parentWindow) {
+	return new Promise((resolve, reject) => {
+		const id = `${new Date().getTime()}-${Math.random()}`;
+
+		const opts = Object.assign(
+			{
+				width: 370,
+				height: 130,
+				resizable: false,
+				title: 'Prompt',
+				label: 'Please input a value:',
+				alwaysOnTop: false,
+				value: null,
+				type: 'input',
+				selectOptions: null,
+				icon: null
+			},
+			options || {}
+		);
+
+		if (opts.type === 'select' && (opts.selectOptions === null || typeof opts.selectOptions !== 'object')) {
+			return reject(new Error('"selectOptions" must be an object'));
+		}
+
+		let promptWindow = new BrowserWindow({
+			width: opts.width,
+			height: opts.height,
+			resizable: opts.resizable,
+			parent: parentWindow,
+			skipTaskbar: true,
+			alwaysOnTop: opts.alwaysOnTop,
+			useContentSize: true,
+			modal: Boolean(parentWindow),
+			title: opts.title,
+			icon: opts.icon
+		});
+
+		promptWindow.setMenu(null);
+
+		const getOptionsListener = event => {
+			event.returnValue = JSON.stringify(opts);
+		};
+
+		const cleanup = () => {
+			if (promptWindow) {
+				promptWindow.close();
+				promptWindow = null;
+			}
+		};
+
+		const postDataListener = (event, value) => {
+			resolve(value);
+			event.returnValue = null;
+			cleanup();
+		};
+
+		const unresponsiveListener = () => {
+			reject(new Error('Window was unresponsive'));
+			cleanup();
+		};
+
+		const errorListener = (event, message) => {
+			reject(new Error(message));
+			event.returnValue = null;
+			cleanup();
+		};
+
+		ipcMain.on('prompt-get-options:' + id, getOptionsListener);
+		ipcMain.on('prompt-post-data:' + id, postDataListener);
+		ipcMain.on('prompt-error:' + id, errorListener);
+		promptWindow.on('unresponsive', unresponsiveListener);
+
+		promptWindow.on('closed', () => {
+			ipcMain.removeListener('prompt-get-options:' + id, getOptionsListener);
+			ipcMain.removeListener('prompt-post-data:' + id, postDataListener);
+			ipcMain.removeListener('prompt-error:' + id, postDataListener);
+			resolve(null);
+		});
+
+		const promptUrl = url.format({
+			protocol: 'file',
+			slashes: true,
+			pathname: path.join(__dirname, 'prompt/main.html'),
+			hash: id
+		});
+
+		promptWindow.loadURL(promptUrl);
+	});
+}
+
+module.exports = electronPrompt;

clients/desktop/app/src/main/windows/prompt/main.css

@@ -0,0 +1,71 @@
+body {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    line-height: 1.5em;
+    color: #333;
+    background-color: #fff;
+}
+
+#container {
+    align-items: center;
+    justify-content: center;
+    /* display: flex; */
+    height: 100%;
+    overflow: auto;
+
+}
+
+#form {
+    width: 100%;
+}
+
+#label {
+    max-width: 100%;
+    max-height: 100%;
+    margin-bottom: .8em;
+    padding: 0 .5em;
+    /* white-space: nowrap; */
+    /* overflow: hidden; */
+    /* text-overflow: ellipsis; */
+}
+
+#data {
+    border-radius: 2px;
+    background: #fff;
+    width: 90%;
+    padding: .4em .5em;
+    border: 1px solid black;
+    min-height: 2em;
+    margin: 0 0 1.2em;
+}
+
+select#data {
+    height: 2em;
+}
+
+#data-container {
+    text-align: center;
+}
+
+#buttons {
+    text-align: right;
+    padding: 0 .5em 0 0;
+}
+
+#buttons > button {
+    border-radius: 2px;
+    border: 0;
+    margin: 0 0 0 .5em;
+    font-size: .8em;
+    line-height: 1em;
+    padding: .6em 1em
+}
+
+#ok {
+    background-color: #3879D9;
+    color: white;
+}
+
+#cancel {
+    background-color: #DDD;
+    color: black;
+}

clients/desktop/app/src/main/windows/prompt/main.html

@@ -0,0 +1,19 @@
+
+<html>
+    <head>
+        <link href="main.css" rel="stylesheet" />
+    </head>
+    <body>
+        <div id="container">
+            <div id="form">
+                <div id="label">...</div>
+                <div id="data-container"></div>
+                <div id="buttons">
+                    <button id="cancel">Cancel</button>
+                    <button id="ok">OK</button>
+                </div>
+            </div>
+        </div>
+        <script src="main.js"></script>
+    </body>
+</html>