cmd/web/js/account.jsx

   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;