summaryrefslogtreecommitdiff
path: root/ui/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components')
-rw-r--r--ui/app/components/error_panel.js66
-rw-r--r--ui/app/components/main_panel/index.js11
-rw-r--r--ui/app/components/main_panel/user_section.js17
-rw-r--r--ui/app/components/panel_switcher.js16
4 files changed, 92 insertions, 18 deletions
diff --git a/ui/app/components/error_panel.js b/ui/app/components/error_panel.js
index 7b36044..f5d33e8 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 2949b1b..05a1e90 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 317f993..b792bb4 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 d707a60..9a06b49 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)