cmd/web/js/account.jsx

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