diff options
| -rw-r--r-- | README.rst | 23 | ||||
| -rw-r--r-- | ui/README.md | 2 | ||||
| -rw-r--r-- | ui/app/components/debug_panel.js | 4 | ||||
| -rw-r--r-- | ui/app/components/greeter_panel.js | 2 | ||||
| -rw-r--r-- | ui/app/components/main_panel/user_section.js | 2 | ||||
| -rw-r--r-- | ui/app/lib/bitmask.js | 12 | ||||
| -rw-r--r-- | ui/package.json | 2 |
7 files changed, 28 insertions, 19 deletions
@@ -143,7 +143,10 @@ The above instructions will install a python package that contains a pre- bundled version of the javascript UI. If you want to modify the javascript UI, then you need to be able to update the -javascript bundle whenever a javascript or CSS source file changes. +javascript bundle whenever a javascript or CSS source file changes. To support +this, we build a python package of the javascript UI and install it in +"development mode" so that changes to the contents of the package are reflected +in bitmaskd immediately. Prerequisites:: @@ -152,22 +155,27 @@ Prerequisites:: Next, run ``dev-install``:: cd ui - make dev-install # install JS code as a python package in "develop" mode. + make dev-install Now you should be able to run the user interface with debugging tools:: bitmaskd - chromium-browser http://localhost:7070 + cd ui + npm run ui + +This command is the same as running: + + chromium-browser "http://localhost:7070/#$(cat ~/.config/leap/authtoken)" Firefox does not work as well, because the UI is only tested with webkit-based browsers. -Chromium is not the best for this, however, because it uses a newer webkit. -Instead, try qupzilla:: +Chromium is not the most ideal, however, because it uses a newer webkit than is +available in Qt. Instead, try qupzilla:: sudo apt install qupzilla bitmaskd - qupzilla -ow http://localhost:7070 + qupzilla -ow "http://localhost:7070/#$(cat ~/.config/leap/authtoken)" If you make a change to any of the CSS or JS source files, you need to rebuild the javascript bundle. You can do this continually as files change like so:: @@ -175,6 +183,9 @@ the javascript bundle. You can do this continually as files change like so:: cd ui node run watch +The new javascript bundle will be used when you refresh the page so long as +``make dev-install`` was previously run. + For more information, see ``ui/README.md``. License diff --git a/ui/README.md b/ui/README.md index 5e4f288d..08181615 100644 --- a/ui/README.md +++ b/ui/README.md @@ -30,7 +30,7 @@ python package and installed in the virtualenv: make dev-install # builds and installs JS app as python package pkill bitmaskd # make sure bitmaskd is not already running bitmaskd # launch backend - npm run open # opens http://localhost:7070/ in a browser + npm run ui # opens http://localhost:7070/#authtoken in a browser npm run watch # rebuild JS whenever source file is changed. In order to package for distribution: diff --git a/ui/app/components/debug_panel.js b/ui/app/components/debug_panel.js index 7515ba84..5ffd4051 100644 --- a/ui/app/components/debug_panel.js +++ b/ui/app/components/debug_panel.js @@ -10,11 +10,11 @@ class DebugPanel extends React.Component { } componentDidMount() { - this.click(window.location.hash.replace('#', '')) + //this.click(window.location.hash.replace('#', '')) } click(panel_name) { - window.location.hash = panel_name + //window.location.hash = panel_name App.show(panel_name) } diff --git a/ui/app/components/greeter_panel.js b/ui/app/components/greeter_panel.js index acaf0d57..31403573 100644 --- a/ui/app/components/greeter_panel.js +++ b/ui/app/components/greeter_panel.js @@ -31,7 +31,7 @@ export default class GreeterPanel extends React.Component { <Area position="bottom" type="dark" className="greeter"> <Glyphicon glyph="user" /> - <a href="#" onClick={this.newAccount.bind(this)}>Create a new account...</a> + <a href="javascript:void(0)" onClick={this.newAccount.bind(this)}>Create a new account...</a> </Area> </Center> </div> diff --git a/ui/app/components/main_panel/user_section.js b/ui/app/components/main_panel/user_section.js index b792bb43..17e492d7 100644 --- a/ui/app/components/main_panel/user_section.js +++ b/ui/app/components/main_panel/user_section.js @@ -97,7 +97,7 @@ export default class UserSection extends React.Component { /> <br /> <Glyphicon glyph="user" /> - <a href="#" onClick={App.show.bind(App, 'wizard')}>Create a new account...</a> + <a href="javascript:void(0)" onClick={App.show.bind(App, 'wizard')}>Create a new account...</a> </div> ) return ( diff --git a/ui/app/lib/bitmask.js b/ui/app/lib/bitmask.js index 94912acc..0a628ee3 100644 --- a/ui/app/lib/bitmask.js +++ b/ui/app/lib/bitmask.js @@ -44,21 +44,20 @@ var bitmask = function(){ if (window.location.protocol === "file:") { api_url = 'http://localhost:7070/API/'; } + if (window.location.hash) { + api_token = window.location.hash.replace('#', '') + } function call(command) { var url = api_url + command.slice(0, 3).join('/'); var data = JSON.stringify(command.slice(3)); - var auth_header = null - if (api_token) { - auth_header = "Token " + btoa(last_uid + ":" + api_token) - } return new Promise(function(resolve, reject) { var req = new XMLHttpRequest(); req.open('POST', url); - if (auth_header) { - req.setRequestHeader("Authorization", auth_header) + if (api_token) { + req.setRequestHeader("X-Bitmask-Auth", api_token) } req.onload = function() { @@ -168,7 +167,6 @@ var bitmask = function(){ autoconf = false; } return call(['bonafide', 'user', 'authenticate', uid, password, autoconf]).then(function(response) { - api_token = response.lcl_token last_uuid = response.uuid last_uid = uid return response; diff --git a/ui/package.json b/ui/package.json index c6bdd88d..39d7f175 100644 --- a/ui/package.json +++ b/ui/package.json @@ -27,7 +27,7 @@ "zxcvbn": "^4.4.0" }, "scripts": { - "open": "gnome-open http://localhost:7070", + "ui": "chromium-browser \"http://localhost:7070/#$(cat ~/.config/leap/authtoken)\"", "watch": "NODE_ENV=development webpack --watch", "build": "NODE_ENV=development webpack", "build:production": "NODE_ENV=production webpack" |