]> git.immae.eu Git - perso/Immae/Projets/Cryptomonnaies/Cryptoportfolio/Front.git/blobdiff - cmd/web/js/account.jsx
Add go version
[perso/Immae/Projets/Cryptomonnaies/Cryptoportfolio/Front.git] / cmd / web / js / account.jsx
index 3dc8afd084b48551ca7e2a673fed7781db2178d7..a80b44a83bf82b43dba74ac959cdca261606874f 100644 (file)
@@ -1,27 +1,7 @@
 import Api from './api.js';
 import React from 'react';
-import classnames from 'classnames';
-
-class Panel extends React.Component {
-  render = () => {
-    if (this.props.component === null) {
-      return <div></div>;
-    }
-
-    var className = classnames('row', this.props.topClassName);
-
-    return (
-      <div className={className}>
-        <div className="box col-12">
-          <div className="row">
-            <div className="col-4">{this.props.title}</div>
-          </div>
-          <hr/>
-          {this.props.component}
-        </div>
-      </div>);
-  }
-}
+import Panel from './panel.js';
+import Icon from './icon.js';
 
 class AccountInformation extends React.Component {
   constructor(props) {
@@ -178,13 +158,13 @@ class PoloniexCredentialsForm extends React.Component {
     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;
     }
 
@@ -192,18 +172,16 @@ class PoloniexCredentialsForm extends React.Component {
         <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>
@@ -218,8 +196,8 @@ class UserAccount extends React.Component {
   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>
     );
   }