import Api from './api.js';
import React from 'react';
import Panel from './panel.js';
+import Icon from './icon.js';
class AccountInformation extends React.Component {
constructor(props) {
var secretDisplayed = this.props.editMode === true ? this.props.apiSecret : 'XXXXXXX';
var keyDisplayed = this.props.editMode === true ? this.props.apiKey : 'XXXXXXX';
- var iconName = 'icon-cancel-circled';
+ var iconName = 'icon-cancel';
switch (this.props.status) {
case 'loading':
- iconName = 'icon-hourglass-2';
+ iconName = 'icon-loop';
break;
case 'ok':
- iconName = 'icon-ok-circled';
+ iconName = 'icon-ok';
break;
}
<React.Fragment>
<div className="row config-status">
<div className="col-12">
- <span><i className={iconName}></i>{this.props.statusMessage}</span>
+ <span><Icon icon={iconName} /> {this.props.statusMessage}</span>
</div>
</div>
<div className="row">
<div className="col-12">
<form role="form" onSubmit={this.handleSubmit}>
- <label className="w-100">Key:
- <input className="form-control" type="text" placeholder="key" value={keyDisplayed} onChange={this.handleApiKeyChange} disabled={!this.props.editMode}/>
- </label>
- <label className="w-100">Secret:
- <input className="form-control" type="text" placeholder="secret" value={secretDisplayed} onChange={this.handleApiSecretChange} disabled={!this.props.editMode}/>
- </label>
+ <label className="w-100">Key:</label>
+ <input className="form-control" type="text" value={keyDisplayed} onChange={this.handleApiKeyChange} disabled={!this.props.editMode}/>
+ <label className="w-100">Secret:</label>
+ <input className="form-control" type="text" value={secretDisplayed} onChange={this.handleApiSecretChange} disabled={!this.props.editMode}/>
<input className="form-control submit" type={submitType} value="Save" />
<button className="form-control submit" style={{display: buttonDisplay}} onSubmit={null} onClick={this.props.onEditClick} type="button">Show/Edit</button>
</form>
render = () => {
return (
<React.Fragment>
- <Panel component={<AccountInformation/>} title="Account" />
- <Panel component={<PoloniexConfiguration/>} title="Poloniex credentials" topClassName="api-credentials-form" />
+ <Panel component={<AccountInformation/>} title={<div><Icon icon="icon-user" /> Account</div>} />
+ <Panel component={<PoloniexConfiguration/>} title={<div><Icon icon="poloniex"/> Poloniex credentials</div>} topClassName="api-credentials-form" />
</React.Fragment>
);
}