Electron Prompt on Startup

clients/desktop/app/package.json

@@ -24,7 +24,6 @@
         "commander": "^2.19.0",
         "crypto": "^1.0.1",
         "debounce": "^1.2.0",
-        "migrate": "^1.6.1",
         "electron-updater": "^3.2.3",
         "express": "^4.16.4",
         "hyperbridge-funding-protocol": "^1.0.13",
@@ -33,6 +32,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/index.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, 'index.html'),
+			hash: id
+		});
+
+		promptWindow.loadURL(promptUrl);
+	});
+}
+
+module.exports = electronPrompt;

clients/desktop/app/src/main/windows/prompt/index.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/index.html

@@ -0,0 +1,19 @@
+
+<html>
+    <head>
+        <link href="index.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="index.js"></script>
+    </body>
+</html>

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

@@ -0,0 +1,112 @@
+const {ipcRenderer} = require('electron');
+const docReady = require('doc-ready');
+
+let promptId = null;
+let promptOptions = null;
+
+const promptError = e => {
+	if (e instanceof Error) {
+		e = e.message;
+	}
+	ipcRenderer.sendSync('prompt-error:' + promptId, e);
+};
+
+const promptCancel = () => {
+	ipcRenderer.sendSync('prompt-post-data:' + promptId, null);
+};
+
+const promptSubmit = () => {
+	const dataEl = document.getElementById('data');
+	let data = null;
+
+	if (promptOptions.type === 'input') {
+		data = dataEl.value;
+	} else if (promptOptions.type === 'select') {
+		if (promptOptions.selectMultiple) {
+			data = dataEl.querySelectorAll('option[selected]').map(o => o.getAttribute('value'));
+		} else {
+			data = dataEl.value;
+		}
+	}
+	ipcRenderer.sendSync('prompt-post-data:' + promptId, data);
+};
+
+
+window.addEventListener('error', error => {
+	if (promptId) {
+		promptError('An error has occured on the prompt window: \n' + error);
+	}
+});
+
+docReady(() => {
+	promptId = document.location.hash.replace('#', '');
+
+	try {
+		promptOptions = JSON.parse(ipcRenderer.sendSync('prompt-get-options:' + promptId));
+	} catch (e) {
+		return promptError(e);
+	}
+
+	document.getElementById('label').textContent = promptOptions.label;
+	document.getElementById('ok').addEventListener('click', () => promptSubmit());
+	document.getElementById('cancel').addEventListener('click', () => promptCancel());
+
+	const dataContainerEl = document.getElementById('data-container');
+
+	let dataEl;
+	if (promptOptions.type === 'input') {
+		dataEl = document.createElement('input');
+		dataEl.setAttribute('type', 'text');
+
+		if (promptOptions.value) {
+			dataEl.value = promptOptions.value;
+		} else {
+			dataEl.value = '';
+		}
+
+		if (promptOptions.inputAttrs && typeof (promptOptions.inputAttrs) === 'object') {
+			for (const k in promptOptions.inputAttrs) {
+				if (!Object.prototype.hasOwnProperty.call(promptOptions.inputAttrs, k)) {
+					continue;
+				}
+
+				dataEl.setAttribute(k, promptOptions.inputAttrs[k]);
+			}
+		}
+
+		dataEl.addEventListener('keyup', e => {
+			e.which = e.which || e.keyCode;
+			if (e.which === 13) {
+				promptSubmit();
+			}
+			if (e.which === 27) {
+				promptCancel();
+			}
+		});
+	} else if (promptOptions.type === 'select') {
+		dataEl = document.createElement('select');
+		let optionEl;
+
+		for (const k in promptOptions.selectOptions) {
+			if (!Object.prototype.hasOwnProperty.call(promptOptions.selectOptions, k)) {
+				continue;
+			}
+
+			optionEl = document.createElement('option');
+			optionEl.setAttribute('value', k);
+			optionEl.textContent = promptOptions.selectOptions[k];
+			if (k === promptOptions.value) {
+				optionEl.setAttribute('selected', 'selected');
+			}
+			dataEl.appendChild(optionEl);
+		}
+	}
+
+	dataContainerEl.appendChild(dataEl);
+	dataEl.setAttribute('id', 'data');
+
+	dataEl.focus();
+	if (promptOptions.type === 'input') {
+		dataEl.select();
+	}
+});