4 files changed, 92 insertions, 18 deletions

diff --git a/ui/app/components/error_panel.js b/ui/app/components/error_panel.js
index 7b360448..f5d33e8f 100644
--- a/ui/app/components/error_panel.js
+++ b/ui/app/components/error_panel.js
@@ -1,6 +1,37 @@
 import React from 'react'
 import Center from './center'
 import Area from './area'
+import { Modal } from 'react-bootstrap'
+
+import App from 'app'
+
+class ErrorMessage extends React.Component {
+  static get defaultProps() {return{
+    message: null,
+    stack: null
+  }}
+
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    let stack = null
+    if (this.props.stack) {
+      stack = <ul>
+        {this.props.stack.split("\n").slice(0,10).map(i =>
+          <li>{i}</li>
+        )}
+      </ul>
+    }
+    return(
+      <div>
+        <p>{this.props.message}</p>
+        {stack}
+      </div>
+    )
+  }
+}
 
 export default class ErrorPanel extends React.Component {
 
@@ -8,24 +39,39 @@ export default class ErrorPanel extends React.Component {
     super(props)
   }
 
+  hide() {
+    App.hideError()
+  }
+
   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"
+
+    if (error.error) {
+      error = error
+    } else if (error.reason) {
+      error = error.reason
+    }
+
+    if (error.stack && error.message) {
+      error_msg = <ErrorMessage message={error.message} stack={error.stack} />
+    } else if (error.message) {
+      error_msg = <ErrorMessage message={error.message} />
     } else {
-      error_msg = error.toString()
+      error_msg = <ErrorMessage message={error.toString()} />
     }
+
     return (
-      <Center width="600">
-        <Area>
-          <h1>Error</h1>
+      <Modal show={true} onHide={this.hide.bind(this)}>
+        <Modal.Header closeButton>
+          <Modal.Title>Error</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
           {error_msg}
-        </Area>
-      </Center>
+        </Modal.Body>
+      </Modal>
     )
   }
 }
diff --git a/ui/app/components/main_panel/index.js b/ui/app/components/main_panel/index.js
index 2949b1b3..05a1e903 100644
--- a/ui/app/components/main_panel/index.js
+++ b/ui/app/components/main_panel/index.js
@@ -68,6 +68,7 @@ export default class MainPanel extends React.Component {
   render() {
     let emailSection = null
     let vpnSection = null
+    let sidePanel = null
 
     if (this.state.account.authenticated) {
       if (this.state.account.hasEmail) {
@@ -75,12 +76,18 @@ export default class MainPanel extends React.Component {
       }
     }
 
-    return (
-      <div className="main-panel">
+    if (false) {
+      sidePanel = (
         <AccountList account={this.state.account}
           accounts={this.state.accounts}
           onSelect={this.activateAccount}
           onRemove={this.removeAccount}/>
+      )
+    }
+
+    return (
+      <div className="main-panel">
+        {sidePanel}
         <div className="body">
           <UserSection account={this.state.account} onLogin={this.activateAccount} onLogout={this.activateAccount}/>
           {vpnSection}
diff --git a/ui/app/components/main_panel/user_section.js b/ui/app/components/main_panel/user_section.js
index 317f9931..b792bb43 100644
--- a/ui/app/components/main_panel/user_section.js
+++ b/ui/app/components/main_panel/user_section.js
@@ -9,6 +9,8 @@ import Account from 'models/account'
 
 import bitmask from 'lib/bitmask'
 
+import App from 'app'
+
 export default class UserSection extends React.Component {
 
   static get defaultProps() {return{
@@ -87,11 +89,16 @@ export default class UserSection extends React.Component {
       address = this.props.account.address
     }
     let header = (
-      <Login
-        onLogin={this.props.onLogin}
-        domain={this.props.account.domain}
-        address={address}
-      />
+      <div>
+        <Login
+          onLogin={this.props.onLogin}
+          domain={this.props.account.domain}
+          address={address}
+        />
+        <br />
+        <Glyphicon glyph="user" />&nbsp;
+        <a href="#" onClick={App.show.bind(App, 'wizard')}>Create a new account...</a>
+      </div>
     )
     return (
       <SectionLayout icon="user" className="wide-margin" header={header}/>
diff --git a/ui/app/components/panel_switcher.js b/ui/app/components/panel_switcher.js
index d707a602..9a06b49f 100644
--- a/ui/app/components/panel_switcher.js
+++ b/ui/app/components/panel_switcher.js
@@ -19,17 +19,31 @@ export default class PanelSwitcher extends React.Component {
     this.state = {
       panel: null,
       panel_properties: null,
-      debug: true
+      debug: true,
+      error: null
     }
     App.switcher = this
   }
 
+  showError(error) {
+    this.setState({error: error})
+  }
+
+  hideError() {
+    this.setState({error: null})
+  }
+
   show(component_name, properties={}) {
     this.setState({panel: component_name, panel_properties: properties})
   }
 
   render() {
     let elems = []
+    if (this.state.error) {
+      elems.push(
+        <ErrorPanel error={this.state.error} key="error" />
+      )
+    }
     if (this.panelExist(this.state.panel)) {
       elems.push(
         this.panelRender(this.state.panel, this.state.panel_properties)