1 files changed, 71 insertions, 0 deletions
diff --git a/ui/app/components/main_panel/user_section.js b/ui/app/components/main_panel/user_section.js
new file mode 100644
index 0000000..0b4ba13
--- /dev/null
+++ b/ui/app/components/main_panel/user_section.js
@@ -0,0 +1,71 @@
+import React from 'react'
+import { Button, Glyphicon, Alert } from 'react-bootstrap'
+import SectionLayout from './section_layout'
+import Login from 'components/login'
+import Spinner from 'components/spinner'
+import Account from 'models/account'
+
+import bitmask from 'lib/bitmask'
+
+export default class UserSection extends React.Component {
+
+  static get defaultProps() {return{
+    account: null,
+    onLogout: null,
+    onLogin: null
+  }}
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      error: null,
+      loading: false
+    }
+    this.logout = this.logout.bind(this)
+  }
+
+  logout() {
+    this.setState({loading: true})
+    this.props.account.logout().then(
+      account => {
+        this.setState({error: null, loading: false})
+        if (this.props.onLogout) {
+          this.props.onLogout(account)
+        }
+      }, error => {
+        this.setState({error: error, loading: false})
+      }
+    )
+  }
+
+  render () {
+    let message = null
+    if (this.state.error) {
+      // style may be: success, warning, danger, info
+      message = (
+        <Alert bsStyle="danger">{this.state.error}</Alert>
+      )
+    }
+
+    if (this.props.account.authenticated) {
+      let button = null
+      if (this.state.loading) {
+        button = <Button disabled={true}><Spinner /></Button>
+      } else {
+        button = <Button onClick={this.logout}>Log Out</Button>
+      }
+      return (
+        <SectionLayout icon="user" buttons={button} status="on">
+          <h1>{this.props.account.address}</h1>
+          {message}
+        </SectionLayout>
+      )
+    } else {
+      return (
+        <SectionLayout icon="user" className="wide-margin">
+          <Login onLogin={this.props.onLogin} domain={this.props.account.domain} />
+        </SectionLayout>
+      )
+    }
+  }
+}