[feature] Update bitmask.js to use authtoken

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 {
         <Area position="bottom" type="dark" className="greeter">
           <Glyphicon glyph="user" />
           &nbsp;
-          <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" />&nbsp;
-        <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"