1 import Api from './api.js';
2 import React from 'react';
3 import Panel from './panel.js';
5 class AccountInformation extends React.Component {
8 this.state = {'email': null};
12 Api.Call('USER_ACCOUNT', {}, function(err, status, data) {
14 console.error(err, data);
18 this.setState({'email': data.email});
22 componentDidMount = () => {
27 var component = <p>Loading...</p>;
28 if (this.state.email !== null) {
29 component = <p>Email: {this.state.email}</p>;
37 class PoloniexConfiguration extends React.Component {
40 this.state = {'apiKey': '', 'apiSecret': '', 'status': 'loading', 'editMode': false};
43 checkCredentials = () => {
44 Api.Call('MARKET_TEST_CREDENTIALS', {'name': 'poloniex'}, function(err, status, data) {
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'});
57 this.setState({'status': 'ok'});
61 handleCredentialsChange = (key, secret) => {
62 this.setState({'apiKey': key, 'apiSecret': secret});
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) {
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'});
78 this.checkCredentials();
82 componentDidMount = () => {
83 this.checkCredentials();
87 Api.Call('MARKET', {'name': 'poloniex'}, function(err, status, data) {
88 this.setState({'editMode': true});
90 console.error(err, data);
94 var newStatus = this.state.status;
95 if (!data.key || !data.secret) {
96 newStatus = 'emptyCredentials';
99 this.setState({'apiKey': data.key, 'apiSecret': data.secret, 'status': newStatus});
104 var displayText = null;
105 switch (this.state.status) {
107 displayText = 'Checking Poloniex credentials...';
109 case 'invalidCredentials':
110 displayText = 'Invalid poloniex credentials';
113 displayText = 'Your API key is IP restricted.';
115 case 'emptyCredentials':
116 displayText = 'Please provide poloniex credentials';
119 displayText = 'You are all set !';
122 console.error('unknown status', this.state.status);
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}/>
140 class PoloniexCredentialsForm extends React.Component {
141 handleSubmit = (e) => {
142 this.props.onCredentialsSubmit();
146 handleApiKeyChange = (event) => {
147 this.props.onCredentialsChange(event.target.value, this.props.apiSecret);
150 handleApiSecretChange = (event) => {
151 this.props.onCredentialsChange(this.props.apiKey, event.target.value);
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';
160 var iconName = 'icon-cancel-circled';
161 switch (this.props.status) {
163 iconName = 'icon-hourglass-2';
166 iconName = 'icon-ok-circled';
172 <div className="row config-status">
173 <div className="col-12">
174 <span><i className={iconName}></i>{this.props.statusMessage}</span>
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>
194 class UserAccount extends React.Component {
198 <Panel component={<AccountInformation/>} title="Account" />
199 <Panel component={<PoloniexConfiguration/>} title="Poloniex credentials" topClassName="api-credentials-form" />
205 export default UserAccount;