summaryrefslogtreecommitdiff
path: root/ui/app/components/main_panel/user_section.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/main_panel/user_section.js')
-rw-r--r--ui/app/components/main_panel/user_section.js78
1 files changed, 50 insertions, 28 deletions
diff --git a/ui/app/components/main_panel/user_section.js b/ui/app/components/main_panel/user_section.js
index acaea234..317f9931 100644
--- a/ui/app/components/main_panel/user_section.js
+++ b/ui/app/components/main_panel/user_section.js
@@ -1,6 +1,8 @@
import React from 'react'
import { Button, Glyphicon, Alert } from 'react-bootstrap'
import SectionLayout from './section_layout'
+import UserPasswordForm from './user_password_form'
+
import Login from 'components/login'
import Spinner from 'components/spinner'
import Account from 'models/account'
@@ -19,9 +21,11 @@ export default class UserSection extends React.Component {
super(props)
this.state = {
error: null,
- loading: false
+ loading: false,
+ expanded: false,
}
this.logout = this.logout.bind(this)
+ this.expand = this.expand.bind(this)
}
logout() {
@@ -38,42 +42,60 @@ export default class UserSection extends React.Component {
)
}
+ expand() {
+ this.setState({expanded: !this.state.expanded})
+ }
+
render () {
+ if (this.props.account.authenticated) {
+ return this.renderAccount()
+ } else {
+ return this.renderLoginForm()
+ }
+ }
+
+ renderAccount() {
+ let button = null
let message = null
+ let body = null
+ let header = <h1>{this.props.account.address}</h1>
+
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>
- )
+ if (this.state.expanded) {
+ body = <UserPasswordForm account={this.props.account} />
+ }
+ if (this.state.loading) {
+ button = <Button disabled={true}><Spinner /></Button>
} else {
- let address = null
- if (this.props.account.userpart) {
- address = this.props.account.address
- }
- return (
- <SectionLayout icon="user" className="wide-margin">
- <Login
- onLogin={this.props.onLogin}
- domain={this.props.account.domain}
- address={address}
- />
- </SectionLayout>
- )
+ button = <Button onClick={this.logout}>Log Out</Button>
+ }
+
+ return (
+ <SectionLayout icon="user" buttons={button} status="on"
+ onExpand={this.expand} header={header} body={body} message={message} />
+ )
+ }
+
+ renderLoginForm() {
+ let address = null
+ if (this.props.account.userpart) {
+ address = this.props.account.address
}
+ let header = (
+ <Login
+ onLogin={this.props.onLogin}
+ domain={this.props.account.domain}
+ address={address}
+ />
+ )
+ return (
+ <SectionLayout icon="user" className="wide-margin" header={header}/>
+ )
}
+
}