1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
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'
import bitmask from 'lib/bitmask'
import App from 'app'
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,
expanded: false,
}
this.logout = this.logout.bind(this)
this.expand = this.expand.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})
}
)
}
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.state.expanded) {
body = <div>
<UserPasswordForm account={this.props.account} />
</div>
}
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"
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 = (
<div>
<Login
onLogin={this.props.onLogin}
domain={this.props.account.domain}
address={address}
/>
<br />
<Glyphicon glyph="user" />
<a href="javascript:void(0)" onClick={App.show.bind(App, 'wizard')}>Create a new account...</a>
</div>
)
return (
<SectionLayout icon="user" className="wide-margin" header={header}/>
)
}
}
|
