[feature] add support for authenticated API to bitmask.js

5 files changed, 56 insertions, 18 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index a27cba6..95e4283 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -1,7 +1,6 @@
 import bitmask from 'lib/bitmask'
 import Account from 'models/account'
 import Provider from 'models/provider'
-import EventLogger from 'lib/event_logger'
 
 class Application {
   constructor() {
@@ -11,7 +10,8 @@ class Application {
   // main entry point for the application
   //
   initialize() {
-    this.ev = new EventLogger()
+    window.addEventListener("error", this.handleError.bind(this))
+    window.addEventListener("unhandledrejection", this.handleError.bind(this))
     if (this.debugging()) {
       this.show(this.debug_panel)
     } else {
@@ -45,6 +45,10 @@ class Application {
     this.debug_panel = window.location.hash.replace('#', '')
     return this.debug_panel && this.debug_panel != 'main'
   }
+
+  handleError(e) {
+    this.show('error', {error: e})
+  }
 }
 
 var App = new Application
diff --git a/ui/app/components/error_panel.js b/ui/app/components/error_panel.js
index fc88d45..7b36044 100644
--- a/ui/app/components/error_panel.js
+++ b/ui/app/components/error_panel.js
@@ -9,11 +9,21 @@ export default class ErrorPanel extends React.Component {
   }
 
   render () {
+    var error_msg = null
+    var error = this.props.error
+    console.log(error)
+    if (error instanceof Error && error.stack) {
+      error_msg = error.stack
+    } else if (error instanceof PromiseRejectionEvent) {
+      error_msg = "Error connecting to bitmaskd"
+    } else {
+      error_msg = error.toString()
+    }
     return (
-      <Center width="400">
+      <Center width="600">
         <Area>
           <h1>Error</h1>
-          {this.props.error}
+          {error_msg}
         </Area>
       </Center>
     )
diff --git a/ui/app/components/panel_switcher.js b/ui/app/components/panel_switcher.js
index 0e3f0dc..d707a60 100644
--- a/ui/app/components/panel_switcher.js
+++ b/ui/app/components/panel_switcher.js
@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 
 import DebugPanel from './debug_panel'
+import ErrorPanel from './error_panel'
 import Splash from './splash'
 import GreeterPanel from './greeter_panel'
 import MainPanel from './main_panel'
@@ -35,7 +36,7 @@ export default class PanelSwitcher extends React.Component {
       )
     }
     if (this.state.debug && this.state.panel) {
-      window.location.hash = this.state.panel
+      //window.location.hash = this.state.panel
       //elems.push(
       //  elem(DebugPanel, {key: 'debug'})
       //)
@@ -57,5 +58,6 @@ export default class PanelSwitcher extends React.Component {
   render_greeter(props) {return elem(GreeterPanel, props)}
   render_main(props)    {return elem(MainPanel, props)}
   render_addressbook(props) {return elem(Addressbook, props)}
+  render_error(props)   {return elem(ErrorPanel, props)}
 
 }
diff --git a/ui/app/lib/bitmask.js b/ui/app/lib/bitmask.js
index 9526cb0..a6cf8e5 100644
--- a/ui/app/lib/bitmask.js
+++ b/ui/app/lib/bitmask.js
@@ -36,8 +36,11 @@ catch (err) {}
 
 var bitmask = function(){
     var event_handlers = {};
-
     var api_url = '/API/';
+    var api_token = null;
+    var last_uid = null;
+    var last_uuid = null;
+
     if (window.location.protocol === "file:") {
         api_url = 'http://localhost:7070/API/';
     }
@@ -45,10 +48,18 @@ var bitmask = function(){
     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)
+            }
 
             req.onload = function() {
                 if (req.status == 200) {
@@ -77,18 +88,20 @@ var bitmask = function(){
     };
 
     function event_polling() {
-        call(['events', 'poll']).then(function(response) {
-            if (response !== null) {
-                var evnt = response[0];
-                var content = response[1];
-                if (evnt in event_handlers) {
-                    event_handlers[evnt](evnt, content);
+        if (api_token) {
+            call(['events', 'poll']).then(function(response) {
+                if (response !== null) {
+                    var evnt = response[0];
+                    var content = response[1];
+                    if (evnt in event_handlers) {
+                        event_handlers[evnt](evnt, content);
+                    }
                 }
-            }
-            event_polling();
-        }, function(error) {
-            setTimeout(event_polling, 5000);
-        });
+                event_polling();
+            }, function(error) {
+                setTimeout(event_polling, 5000);
+            });
+        }
     };
     event_polling();
 
@@ -100,6 +113,7 @@ var bitmask = function(){
     };
 
     return {
+        api_token: function() {return api_token},
         bonafide: {
             provider: {
                 create: function(domain) {
@@ -162,7 +176,12 @@ var bitmask = function(){
                     if (typeof autoconf !== 'boolean') {
                         autoconf = false;
                     }
-                    return call(['bonafide', 'user', 'authenticate', uid, password, autoconf]);
+                    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/app/models/account.js b/ui/app/models/account.js
index e93d757..0251da0 100644
--- a/ui/app/models/account.js
+++ b/ui/app/models/account.js
@@ -112,6 +112,9 @@ export default class Account {
   // returns a promise, fullfill is passed account object
   //
   static active() {
+    if (!bitmask.api_token()) {
+      return new Promise((resolve, reject) => {resolve(null)})
+    }
     return bitmask.bonafide.user.active().then(
       response => {
         if (response.user == '<none>') {