diff options
Diffstat (limited to 'cmd/web/js/account.jsx')
-rw-r--r-- | cmd/web/js/account.jsx | 177 |
1 files changed, 177 insertions, 0 deletions
diff --git a/cmd/web/js/account.jsx b/cmd/web/js/account.jsx new file mode 100644 index 0000000..43e7083 --- /dev/null +++ b/cmd/web/js/account.jsx | |||
@@ -0,0 +1,177 @@ | |||
1 | import Api from './api.js'; | ||
2 | import React from 'react'; | ||
3 | |||
4 | class PoloniexConfiguration extends React.Component { | ||
5 | constructor(props) { | ||
6 | super(props); | ||
7 | this.state = {'apiKey': '', 'apiSecret': '', 'apiRequested': false, 'status': 'loading'}; | ||
8 | } | ||
9 | |||
10 | checkCredentials = () => { | ||
11 | Api.Call('MARKET_BALANCE', {'name': 'poloniex', 'currency': 'BTC'}, function(err, status, data) { | ||
12 | if (err) { | ||
13 | console.error(err, data); | ||
14 | if (err.code === 'invalid_market_credentials') { | ||
15 | this.setState({'status': 'invalidCredentials'}); | ||
16 | } else if (err.code === 'ip_restricted_api_key') { | ||
17 | this.setState({'status': 'ipRestricted'}); | ||
18 | } | ||
19 | return; | ||
20 | } | ||
21 | |||
22 | this.setState({'status': 'ok'}); | ||
23 | }.bind(this)); | ||
24 | } | ||
25 | |||
26 | handleCredentialsChange = (key, secret) => { | ||
27 | this.setState({'apiKey': key, 'apiSecret': secret}); | ||
28 | } | ||
29 | |||
30 | handleCredentialsSubmit = () => { | ||
31 | |||
32 | /* | ||
33 | *If (!this.state.apiKey || !this.state.apiSecret) { | ||
34 | * return; | ||
35 | *} | ||
36 | */ | ||
37 | |||
38 | Api.Call('UPDATE_MARKET', {'key': this.state.apiKey, 'secret': this.state.apiSecret, 'name': 'poloniex'}, function(err, status, data) { | ||
39 | if (err) { | ||
40 | console.error(err, data); | ||
41 | return; | ||
42 | } | ||
43 | |||
44 | this.setState({'status': 'loading'}); | ||
45 | this.checkCredentials(); | ||
46 | }.bind(this)); | ||
47 | } | ||
48 | |||
49 | componentDidMount = () => { | ||
50 | Api.Call('MARKET', {'name': 'poloniex'}, function(err, status, data) { | ||
51 | this.setState({'apiRequested': true}); | ||
52 | if (err) { | ||
53 | console.error(err, data); | ||
54 | return; | ||
55 | } | ||
56 | |||
57 | var newStatus = this.state.status; | ||
58 | if (!data.key || !data.secret) { | ||
59 | newStatus = 'emptyCredentials'; | ||
60 | } else { | ||
61 | this.checkCredentials(); | ||
62 | } | ||
63 | |||
64 | this.setState({'apiKey': data.key, 'apiSecret': data.secret, 'status': newStatus}); | ||
65 | }.bind(this)); | ||
66 | } | ||
67 | |||
68 | render = () => { | ||
69 | var displayText = null; | ||
70 | switch (this.state.status) { | ||
71 | case 'loading': | ||
72 | displayText = 'Checking Poloniex credentials...'; | ||
73 | break; | ||
74 | case 'invalidCredentials': | ||
75 | displayText = 'Invalid poloniex credentials'; | ||
76 | break; | ||
77 | case 'ipRestricted': | ||
78 | displayText = 'Your API key is IP restricted.'; | ||
79 | break; | ||
80 | case 'emptyCredentials': | ||
81 | displayText = 'Please provide poloniex credentials'; | ||
82 | break; | ||
83 | case 'ok': | ||
84 | displayText = 'You are all set !'; | ||
85 | break; | ||
86 | default: | ||
87 | console.error('unknown status', this.state.status); | ||
88 | displayText = null; | ||
89 | } | ||
90 | if (this.state.apiRequested === false) { | ||
91 | return <div></div>; | ||
92 | } | ||
93 | return ( | ||
94 | <div> | ||
95 | <PoloniexCredentialsForm onLoadCredentials={this.onLoadCredentials} | ||
96 | onCredentialsSubmit={this.handleCredentialsSubmit} | ||
97 | onCredentialsChange={this.handleCredentialsChange} | ||
98 | apiSecret={this.state.apiSecret} | ||
99 | apiKey={this.state.apiKey} | ||
100 | status={this.state.status} | ||
101 | statusMessage={displayText}/> | ||
102 | </div> | ||
103 | ); | ||
104 | } | ||
105 | } | ||
106 | |||
107 | class PoloniexCredentialsForm extends React.Component { | ||
108 | constructor(props) { | ||
109 | super(props); | ||
110 | this.state = {'editMode': false}; | ||
111 | } | ||
112 | |||
113 | handleSubmit = (e) => { | ||
114 | this.props.onCredentialsSubmit(); | ||
115 | this.setState({'editMode': false}); | ||
116 | e.preventDefault(); | ||
117 | } | ||
118 | |||
119 | handleApiKeyChange = (event) => { | ||
120 | this.props.onCredentialsChange(event.target.value, this.props.apiSecret); | ||
121 | } | ||
122 | |||
123 | handleApiSecretChange = (event) => { | ||
124 | this.props.onCredentialsChange(this.props.apiKey, event.target.value); | ||
125 | } | ||
126 | |||
127 | onEditClick = () => { | ||
128 | this.setState({'editMode': true}); | ||
129 | } | ||
130 | |||
131 | render = () => { | ||
132 | var submitType = this.state.editMode === true ? 'submit' : 'hidden'; | ||
133 | var buttonDisplay = this.state.editMode === true ? 'none' : 'inline'; | ||
134 | var secretDisplayed = this.state.editMode === true ? this.props.apiSecret : 'XXXXXXX'; | ||
135 | var keyDisplayed = this.state.editMode === true ? this.props.apiKey : 'XXXXXXX'; | ||
136 | |||
137 | var iconName = 'icon-cancel-circled'; | ||
138 | switch (this.props.status) { | ||
139 | case 'loading': | ||
140 | iconName = 'icon-hourglass-2'; | ||
141 | break; | ||
142 | case 'ok': | ||
143 | iconName = 'icon-ok-circled'; | ||
144 | break; | ||
145 | } | ||
146 | |||
147 | return ( | ||
148 | <div className="row api-credentials-form"> | ||
149 | <div className="offset-2 col-8 box"> | ||
150 | <span className="text-center">Poloniex credentials</span> | ||
151 | <hr/> | ||
152 | <div className="row config-status"> | ||
153 | <div className="col-12"> | ||
154 | <span><i className={iconName}></i>{this.props.statusMessage}</span> | ||
155 | </div> | ||
156 | </div> | ||
157 | <div className="row"> | ||
158 | <div className="col-12"> | ||
159 | <form role="form" onSubmit={this.handleSubmit}> | ||
160 | <label className="w-100">Key: | ||
161 | <input className="form-control" type="text" placeholder="key" value={keyDisplayed} onChange={this.handleApiKeyChange} disabled={!this.state.editMode}/> | ||
162 | </label> | ||
163 | <label className="w-100">Secret: | ||
164 | <input className="form-control" type="text" placeholder="secret" value={secretDisplayed} onChange={this.handleApiSecretChange} disabled={!this.state.editMode}/> | ||
165 | </label> | ||
166 | <input className="form-control submit" type={submitType} value="Save" /> | ||
167 | <button className="form-control submit" style={{display: buttonDisplay}} onSubmit={null} onClick={this.onEditClick} type="button">Show/Edit</button> | ||
168 | </form> | ||
169 | </div> | ||
170 | </div> | ||
171 | </div> | ||
172 | </div> | ||
173 | ); | ||
174 | } | ||
175 | } | ||
176 | |||
177 | export default PoloniexConfiguration; | ||