From 904e99c658e647a1c9acbb80a1f54c593a57bf61 Mon Sep 17 00:00:00 2001 From: elijah Date: Fri, 24 Feb 2017 20:30:55 -0800 Subject: [feature] Update bitmask.js to use authtoken --- README.rst | 23 +++++++++++++++++------ ui/README.md | 2 +- ui/app/components/debug_panel.js | 4 ++-- ui/app/components/greeter_panel.js | 2 +- ui/app/components/main_panel/user_section.js | 2 +- ui/app/lib/bitmask.js | 12 +++++------- ui/package.json | 2 +- 7 files changed, 28 insertions(+), 19 deletions(-) diff --git a/README.rst b/README.rst index 66184df9..126bedc5 100644 --- a/README.rst +++ b/README.rst @@ -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 {   - Create a new account... + Create a new account... 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 { />
  - Create a new account... + Create a new account... ) 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" -- cgit v1.2.3