]>
Commit | Line | Data |
---|---|---|
16e43cc7 | 1 | import Api from './api.js'; |
2 | import React from 'react'; | |
d5b8f0ff | 3 | import Panel from './panel.js'; |
335b0c9b | 4 | import Icon from './icon.js'; |
d1c0ccfc | 5 | |
6 | class AccountInformation extends React.Component { | |
7 | constructor(props) { | |
8 | super(props); | |
9 | this.state = {'email': null}; | |
10 | } | |
11 | ||
12 | loadAccount = () => { | |
13 | Api.Call('USER_ACCOUNT', {}, function(err, status, data) { | |
14 | if (err) { | |
15 | console.error(err, data); | |
16 | return; | |
17 | } | |
18 | ||
19 | this.setState({'email': data.email}); | |
20 | }.bind(this)); | |
21 | } | |
22 | ||
23 | componentDidMount = () => { | |
24 | this.loadAccount(); | |
25 | } | |
26 | ||
27 | render = () => { | |
28 | var component = <p>Loading...</p>; | |
29 | if (this.state.email !== null) { | |
30 | component = <p>Email: {this.state.email}</p>; | |
31 | } | |
32 | ||
33 | return component; | |
34 | } | |
35 | ||
36 | } | |
16e43cc7 | 37 | |
38 | class PoloniexConfiguration extends React.Component { | |
39 | constructor(props) { | |
40 | super(props); | |
d1c0ccfc | 41 | this.state = {'apiKey': '', 'apiSecret': '', 'status': 'loading', 'editMode': false}; |
16e43cc7 | 42 | } |
43 | ||
44 | checkCredentials = () => { | |
24e47979 | 45 | Api.Call('MARKET_TEST_CREDENTIALS', {'name': 'poloniex'}, function(err, status, data) { |
16e43cc7 | 46 | if (err) { |
47 | console.error(err, data); | |
48 | if (err.code === 'invalid_market_credentials') { | |
49 | this.setState({'status': 'invalidCredentials'}); | |
50 | } else if (err.code === 'ip_restricted_api_key') { | |
51 | this.setState({'status': 'ipRestricted'}); | |
c6aa553f | 52 | } else if (err.code === 'market_credentials_not_configured') { |
53 | this.setState({'status': 'emptyCredentials'}); | |
16e43cc7 | 54 | } |
55 | return; | |
56 | } | |
57 | ||
58 | this.setState({'status': 'ok'}); | |
59 | }.bind(this)); | |
60 | } | |
61 | ||
62 | handleCredentialsChange = (key, secret) => { | |
63 | this.setState({'apiKey': key, 'apiSecret': secret}); | |
64 | } | |
65 | ||
66 | handleCredentialsSubmit = () => { | |
c6aa553f | 67 | this.setState({'status': 'loading', 'editMode': false}); |
16e43cc7 | 68 | Api.Call('UPDATE_MARKET', {'key': this.state.apiKey, 'secret': this.state.apiSecret, 'name': 'poloniex'}, function(err, status, data) { |
69 | if (err) { | |
70 | console.error(err, data); | |
299b6b6d | 71 | if (err.code === 'invalid_market_credentials') { |
72 | this.setState({'status': 'invalidCredentials'}); | |
73 | } else if (err.code === 'ip_restricted_api_key') { | |
74 | this.setState({'status': 'ipRestricted'}); | |
75 | } | |
16e43cc7 | 76 | return; |
77 | } | |
78 | ||
16e43cc7 | 79 | this.checkCredentials(); |
80 | }.bind(this)); | |
81 | } | |
82 | ||
83 | componentDidMount = () => { | |
c6aa553f | 84 | this.checkCredentials(); |
85 | } | |
86 | ||
87 | onEditClick = () => { | |
88 | Api.Call('MARKET', {'name': 'poloniex'}, function(err, status, data) { | |
d1c0ccfc | 89 | this.setState({'editMode': true}); |
16e43cc7 | 90 | if (err) { |
91 | console.error(err, data); | |
92 | return; | |
93 | } | |
94 | ||
95 | var newStatus = this.state.status; | |
96 | if (!data.key || !data.secret) { | |
97 | newStatus = 'emptyCredentials'; | |
16e43cc7 | 98 | } |
99 | ||
100 | this.setState({'apiKey': data.key, 'apiSecret': data.secret, 'status': newStatus}); | |
101 | }.bind(this)); | |
102 | } | |
103 | ||
104 | render = () => { | |
105 | var displayText = null; | |
106 | switch (this.state.status) { | |
107 | case 'loading': | |
108 | displayText = 'Checking Poloniex credentials...'; | |
109 | break; | |
110 | case 'invalidCredentials': | |
111 | displayText = 'Invalid poloniex credentials'; | |
112 | break; | |
113 | case 'ipRestricted': | |
114 | displayText = 'Your API key is IP restricted.'; | |
115 | break; | |
116 | case 'emptyCredentials': | |
117 | displayText = 'Please provide poloniex credentials'; | |
118 | break; | |
119 | case 'ok': | |
120 | displayText = 'You are all set !'; | |
121 | break; | |
122 | default: | |
123 | console.error('unknown status', this.state.status); | |
124 | displayText = null; | |
125 | } | |
d1c0ccfc | 126 | |
16e43cc7 | 127 | return ( |
16e43cc7 | 128 | <PoloniexCredentialsForm onLoadCredentials={this.onLoadCredentials} |
129 | onCredentialsSubmit={this.handleCredentialsSubmit} | |
130 | onCredentialsChange={this.handleCredentialsChange} | |
131 | apiSecret={this.state.apiSecret} | |
132 | apiKey={this.state.apiKey} | |
133 | status={this.state.status} | |
c6aa553f | 134 | statusMessage={displayText} |
135 | editMode={this.state.editMode} | |
136 | onEditClick={this.onEditClick}/> | |
16e43cc7 | 137 | ); |
138 | } | |
139 | } | |
140 | ||
141 | class PoloniexCredentialsForm extends React.Component { | |
16e43cc7 | 142 | handleSubmit = (e) => { |
143 | this.props.onCredentialsSubmit(); | |
16e43cc7 | 144 | e.preventDefault(); |
145 | } | |
146 | ||
147 | handleApiKeyChange = (event) => { | |
148 | this.props.onCredentialsChange(event.target.value, this.props.apiSecret); | |
149 | } | |
150 | ||
151 | handleApiSecretChange = (event) => { | |
152 | this.props.onCredentialsChange(this.props.apiKey, event.target.value); | |
153 | } | |
154 | ||
16e43cc7 | 155 | render = () => { |
c6aa553f | 156 | var submitType = this.props.editMode === true ? 'submit' : 'hidden'; |
157 | var buttonDisplay = this.props.editMode === true ? 'none' : 'inline'; | |
158 | var secretDisplayed = this.props.editMode === true ? this.props.apiSecret : 'XXXXXXX'; | |
159 | var keyDisplayed = this.props.editMode === true ? this.props.apiKey : 'XXXXXXX'; | |
16e43cc7 | 160 | |
335b0c9b | 161 | var iconName = 'icon-cancel'; |
16e43cc7 | 162 | switch (this.props.status) { |
163 | case 'loading': | |
335b0c9b | 164 | iconName = 'icon-loop'; |
16e43cc7 | 165 | break; |
166 | case 'ok': | |
335b0c9b | 167 | iconName = 'icon-ok'; |
16e43cc7 | 168 | break; |
169 | } | |
170 | ||
171 | return ( | |
d1c0ccfc | 172 | <React.Fragment> |
173 | <div className="row config-status"> | |
174 | <div className="col-12"> | |
335b0c9b | 175 | <span><Icon icon={iconName} /> {this.props.statusMessage}</span> |
16e43cc7 | 176 | </div> |
177 | </div> | |
d1c0ccfc | 178 | <div className="row"> |
179 | <div className="col-12"> | |
180 | <form role="form" onSubmit={this.handleSubmit}> | |
a6820180 | 181 | <label className="w-100">Key:</label> |
182 | <input className="form-control" type="text" value={keyDisplayed} onChange={this.handleApiKeyChange} disabled={!this.props.editMode}/> | |
183 | <label className="w-100">Secret:</label> | |
184 | <input className="form-control" type="text" value={secretDisplayed} onChange={this.handleApiSecretChange} disabled={!this.props.editMode}/> | |
d1c0ccfc | 185 | <input className="form-control submit" type={submitType} value="Save" /> |
186 | <button className="form-control submit" style={{display: buttonDisplay}} onSubmit={null} onClick={this.props.onEditClick} type="button">Show/Edit</button> | |
187 | </form> | |
188 | </div> | |
189 | </div> | |
190 | </React.Fragment> | |
16e43cc7 | 191 | ); |
192 | } | |
193 | } | |
194 | ||
d1c0ccfc | 195 | class UserAccount extends React.Component { |
196 | render = () => { | |
197 | return ( | |
198 | <React.Fragment> | |
335b0c9b | 199 | <Panel component={<AccountInformation/>} title={<div><Icon icon="icon-user" /> Account</div>} /> |
200 | <Panel component={<PoloniexConfiguration/>} title={<div><Icon icon="poloniex"/> Poloniex credentials</div>} topClassName="api-credentials-form" /> | |
d1c0ccfc | 201 | </React.Fragment> |
202 | ); | |
203 | } | |
204 | } | |
205 | ||
206 | export default UserAccount; |