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