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