From 989fb5c7dbba174f54f3ae69df788d6685fff46b Mon Sep 17 00:00:00 2001
From: jloup <jeanloup.jamet@gmail.com>
Date: Sat, 24 Feb 2018 17:06:57 +0100
Subject: Upgrade ReactJS. EC6 import modules.

---
 cmd/web/js/api.js       |  12 ++--
 cmd/web/js/app.js       |   8 ++-
 cmd/web/js/cookies.js   |   2 +
 cmd/web/js/main.jsx     |  61 ++++++++-----------
 cmd/web/js/otp.jsx      |  72 ++++++++++++----------
 cmd/web/js/poloniex.jsx | 154 ++++++++++++++++++++++++++----------------------
 cmd/web/js/signin.jsx   |  66 ++++++++++++---------
 cmd/web/js/signup.jsx   | 100 +++++++++++++++++--------------
 8 files changed, 255 insertions(+), 220 deletions(-)

(limited to 'cmd/web/js')

diff --git a/cmd/web/js/api.js b/cmd/web/js/api.js
index 5c19fdf..5cbf5eb 100644
--- a/cmd/web/js/api.js
+++ b/cmd/web/js/api.js
@@ -1,6 +1,6 @@
 'use strict';
 
-var App     = require('./app.js');
+import App from './app.js';
 
 var Api = {};
 
@@ -28,7 +28,7 @@ var ApiEndpoints = {
       {'name': 'email',    'mandatory': true, 'inquery': true},
       {'name': 'password', 'mandatory': true, 'inquery': true}
     ],
-    'buildUrl': function(params) {
+    'buildUrl': function() {
       return '/signup';
     }
   },
@@ -39,7 +39,7 @@ var ApiEndpoints = {
       {'name': 'email',    'mandatory': true, 'inquery': true},
       {'name': 'password', 'mandatory': true, 'inquery': true}
     ],
-    'buildUrl': function(params) {
+    'buildUrl': function() {
       return '/signin';
     }
   },
@@ -80,7 +80,7 @@ var ApiEndpoints = {
     'type': 'GET',
     'auth': true,
     'parameters': [],
-    'buildUrl': function(params) {
+    'buildUrl': function() {
       return '/otp/enroll';
     }
   },
@@ -90,7 +90,7 @@ var ApiEndpoints = {
     'parameters': [
       {'name': 'pass', 'mandatory': true, 'inquery': true},
     ],
-    'buildUrl': function(params) {
+    'buildUrl': function() {
       return '/otp/validate';
     }
   },
@@ -183,5 +183,5 @@ Api.DoRequest = function(type, url, params, headers, callback) {
   });
 };
 
-module.exports.Api = Api;
+export default Api;
 
diff --git a/cmd/web/js/app.js b/cmd/web/js/app.js
index 4946dcc..8573b6e 100644
--- a/cmd/web/js/app.js
+++ b/cmd/web/js/app.js
@@ -1,7 +1,9 @@
 'use strict';
 
-var cookies = require('./cookies.js');
-var page    = require('page');
+import cookies from './cookies.js';
+import page from 'page';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 var App = {};
 var cookieExpire = 60 * 30;
@@ -118,4 +120,4 @@ App.mount = function(app) {
   ReactDOM.render(root, document.getElementById('app'));
 };
 
-module.exports = App;
+export default App;
diff --git a/cmd/web/js/cookies.js b/cmd/web/js/cookies.js
index 9cc7ca9..3dd0925 100644
--- a/cmd/web/js/cookies.js
+++ b/cmd/web/js/cookies.js
@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 'use strict';
 
 /*\
diff --git a/cmd/web/js/main.jsx b/cmd/web/js/main.jsx
index e5e505d..827b83d 100644
--- a/cmd/web/js/main.jsx
+++ b/cmd/web/js/main.jsx
@@ -1,20 +1,21 @@
-var SignupForm         = require('./signup.js').SignupForm;
-var SigninForm         = require('./signin.js').SigninForm;
-var OtpEnrollForm      = require('./otp.js').OtpEnrollForm;
-var PoloniexController = require('./poloniex.js').PoloniexController;
-var App                = require('./app.js');
-var Api                = require('./api.js').Api;
-var cookies            = require('./cookies.js');
+import SignupForm from './signup.js';
+import SigninForm from './signin.js';
+import OtpEnrollForm from './otp.js';
+import PoloniexController from './poloniex.js';
+import App from './app.js';
+import Api from './api.js';
+import cookies from './cookies.js';
+import React from 'react';
 
-var Logo = React.createClass({
-  render: function() {
-    return (<div className='row'>
-              <div id='logo' className='offset-4 col-4'>
-                <a href='/'>Cryptoportfolio</a>
+class Logo extends React.Component {
+  render() {
+    return <div className="row">
+              <div id="logo" className="offset-4 col-4">
+                <a href="/">Cryptoportfolio</a>
               </div>
-            </div>);
+            </div>;
   }
-});
+}
 
 App.page('/signup', false, function(context) {
   if (App.isUserSignedIn()) {
@@ -22,12 +23,10 @@ App.page('/signup', false, function(context) {
     return;
   }
 
-  App.mount(
-    <div>
+  App.mount(<div>
       <Logo />
       <SignupForm onSuccess={App.onUserSignUp}/>
-    </div>
-  );
+    </div>);
 });
 
 App.page('/signin', false, function(context) {
@@ -36,12 +35,10 @@ App.page('/signin', false, function(context) {
     return;
   }
 
-  App.mount(
-    <div>
+  App.mount(<div>
       <Logo />
       <SigninForm onSuccess={App.onUserSignIn}/>
-    </div>
-  );
+    </div>);
 });
 
 App.page('/signout', true, function(context) {
@@ -51,12 +48,10 @@ App.page('/signout', true, function(context) {
 });
 
 App.page('/me', true, function(context) {
-  App.mount(
-    <div>
+  App.mount(<div>
       <Logo />
       <PoloniexController/>
-    </div>
-  );
+    </div>);
 });
 
 App.page('/otp/setup', true, function(context) {
@@ -66,23 +61,19 @@ App.page('/otp/setup', true, function(context) {
       return;
     }
 
-    App.mount(
-      <div>
+    App.mount(<div>
         <Logo />
         <OtpEnrollForm onSuccess={App.onUserValidateOtp} img={'data:image/png;base64,' + data.base64img} secret={data.secret}/>
-      </div>
-    );
+      </div>);
 
-  }.bind(this));
+  });
 });
 
 App.page('/otp/validate', true, function(context) {
-  App.mount(
-    <div>
+  App.mount(<div>
       <Logo />
       <OtpEnrollForm onSuccess={App.onUserValidateOtp} />
-    </div>
-  );
+    </div>);
 });
 
 App.page('/', false, function(context) {
diff --git a/cmd/web/js/otp.jsx b/cmd/web/js/otp.jsx
index a0ee5cc..aecf032 100644
--- a/cmd/web/js/otp.jsx
+++ b/cmd/web/js/otp.jsx
@@ -1,9 +1,10 @@
-var Api        = require('./api.js').Api;
-var App        = require('./app.js');
-var classNames = require('classnames');
+import Api from './api.js';
+import App from './app.js';
+import classNames from 'classnames';
+import React from 'react';
 
-var OtpQrCode = React.createClass({
-  render: function() {
+class OtpQrCode extends React.Component {
+  render = () => {
     return (
       <div>
         <img src={this.props.img} />
@@ -11,13 +12,15 @@ var OtpQrCode = React.createClass({
       </div>
     );
   }
-});
+}
 
-module.exports.OtpEnrollForm = React.createClass({
-  getInitialState: function() {
-    return {'hideMsg': true, 'msg': '', 'msgOk': false, 'pass': ''};
-  },
-  handleSubmit: function(e) {
+class OtpEnrollForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {'hideMsg': true, 'msg': '', 'msgOk': false, 'pass': ''};
+  }
+
+  handleSubmit = (e) => {
     Api.Call('OTP_VALIDATE', {'pass': this.state.pass}, function(err, status, data) {
       if (err) {
         console.error(err, data);
@@ -31,40 +34,45 @@ module.exports.OtpEnrollForm = React.createClass({
     }.bind(this));
 
     e.preventDefault();
-  },
-  handlePassChange: function(event) {
+  }
+
+  handlePassChange = (event) => {
     this.setState({'pass': event.target.value});
-  },
-  hideMessage: function() {
+  }
+
+  hideMessage = () => {
     this.setState({'hideMsg': true});
-  },
-  displayMessage: function(msg, ok) {
+  }
+
+  displayMessage = (msg, ok) => {
     this.setState({'msg': msg, 'msgOk': ok, 'hideMsg': false});
-  },
-  render: function() {
+  }
+
+  render = () => {
     var cName  = classNames('form-message', {'hidden': this.state.hideMsg, 'message-ok': this.state.msgOk});
     var qrCode = null;
 
     if (this.props.img) {
-      qrCode = (
-        <div className='row justify-content-center'>
+      qrCode =
+        <div className="row justify-content-center">
           <OtpQrCode img={this.props.img} secret={this.props.secret} />
-        </div>
-      );
-    }
+        </div>;
+}
     return (
-        <div className='row otp-enroll'>
-          <div className='offset-4 col-4 col-xs-offset-1 col-xs-10 text-center'>
+        <div className="row otp-enroll">
+          <div className="offset-4 col-4 col-xs-offset-1 col-xs-10 text-center">
             {qrCode}
-            <div className='row justify-content-center'>
-              <form role='form' onSubmit={this.handleSubmit}>
-                <input className='form-control' type='pass' placeholder='code' onChange={this.handlePassChange} />
-                <input className='form-control submit' type='submit' value='Validate' />
-                <div className={cName} ref='message'>{this.state.msg}</div>
+            <div className="row justify-content-center">
+              <form role="form" onSubmit={this.handleSubmit}>
+                <input className="form-control" type="pass" placeholder="code" onChange={this.handlePassChange} />
+                <input className="form-control submit" type="submit" value="Validate" />
+                <div className={cName}>{this.state.msg}</div>
               </form>
             </div>
           </div>
         </div>
        );
   }
-});
+}
+
+export default OtpEnrollForm;
diff --git a/cmd/web/js/poloniex.jsx b/cmd/web/js/poloniex.jsx
index 8b577b4..96384fd 100644
--- a/cmd/web/js/poloniex.jsx
+++ b/cmd/web/js/poloniex.jsx
@@ -1,14 +1,18 @@
-var Api        = require('./api.js').Api;
-var classNames = require('classnames');
-
-module.exports.PoloniexController = React.createClass({
-  getInitialState: function() {
-    return {'apiKey': '', 'apiSecret': '', 'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null};
-  },
-  handleCredentialsChange: function(key, secret) {
+import Api from './api.js';
+import classNames from 'classnames';
+import React from 'react';
+
+class PoloniexController extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {'apiKey': '', 'apiSecret': '', 'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null};
+  }
+
+  handleCredentialsChange = (key, secret) => {
     this.setState({'apiKey': key, 'apiSecret': secret});
-  },
-  handleCredentialsSubmit: function() {
+  }
+
+  handleCredentialsSubmit = () => {
     if (!this.state.apiKey || !this.state.apiSecret) {
       return;
     }
@@ -21,8 +25,9 @@ module.exports.PoloniexController = React.createClass({
       this.setState({'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null});
       this.loadBalance();
     }.bind(this));
-  },
-  loadBalance: function() {
+  }
+
+  loadBalance = () => {
     Api.Call('MARKET_BALANCE', {'name': 'poloniex', 'currency': 'BTC'}, function(err, status, data) {
       if (err) {
         console.error(err, data);
@@ -34,8 +39,9 @@ module.exports.PoloniexController = React.createClass({
 
       this.setState({'flag': 'ok', 'valueCurrency': data.valueCurrency, 'balanceValue': data.value, 'balance': data.balance});
     }.bind(this));
-  },
-  componentDidMount: function() {
+  }
+
+  componentDidMount = () => {
     Api.Call('MARKET', {'name': 'poloniex'}, function(err, status, data) {
       if (err) {
         console.error(err, data);
@@ -51,8 +57,9 @@ module.exports.PoloniexController = React.createClass({
 
       this.setState({'apiKey': data.key, 'apiSecret': data.secret, 'flag': flag});
     }.bind(this));
-  },
-  render: function() {
+  }
+
+  render = () => {
     var displayText = null;
     switch (this.state.flag) {
       case 'loading':
@@ -81,13 +88,15 @@ module.exports.PoloniexController = React.createClass({
       </div>
     );
   }
-});
+}
+
+class PoloniexBalance extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {'hideMsg': true, 'msg': '', 'msgOk': false};
+  }
 
-var PoloniexBalance = React.createClass({
-  getInitialState: function() {
-    return {'hideMsg': true, 'msg': '', 'msgOk': false};
-  },
-  render: function() {
+  render = () => {
     var dashboard = null;
 
     if (this.props.balanceValue !== null) {
@@ -96,36 +105,33 @@ var PoloniexBalance = React.createClass({
         return <div key={currency}><i className={classNames('cc', currency)}></i> {this.props.balance[currency]}</div>;
       }.bind(this));
 
-      dashboard = (
-        <div className='row'>
-          <div className='col-4 align-self-center h-100'>
+      dashboard =
+        <div className="row">
+          <div className="col-4 align-self-center h-100">
             <div>
               {balance}
             </div>
           </div>
-          <div className='offset-1 col-7 h-100 align-self-center'>
-            <div className='text-center'>
+          <div className="offset-1 col-7 h-100 align-self-center">
+            <div className="text-center">
               Balance ({this.props.balanceCurrency}): <span>{this.props.balanceValue} <i className={classNames('cc', this.props.balanceCurrency)}></i></span>
             </div>
           </div>
-        </div>
-      );
-    } else {
-      dashboard = (
-        <div className='row'>
-          <div className='col-12 text-center'>
+        </div>;
+} else {
+      dashboard =
+        <div className="row">
+          <div className="col-12 text-center">
            <span>{this.props.displayText}</span>
           </div>
-        </div>
-
-      );
-    }
+        </div>;
+}
 
     return (
-      <div className='row'>
-        <div className='box offset-2 col-8'>
-          <div className='row'>
-            <div className='col-4'>Portfolio</div>
+      <div className="row">
+        <div className="box offset-2 col-8">
+          <div className="row">
+            <div className="col-4">Portfolio</div>
           </div>
           <hr/>
           {dashboard}
@@ -133,53 +139,57 @@ var PoloniexBalance = React.createClass({
       </div>
     );
   }
-});
+}
 
-module.exports.PoloniexBalance = PoloniexBalance;
+class PoloniexCredentialsForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {'hideMsg': true, 'msg': '', 'editMode': false, 'msgOk': false};
+  }
 
-var PoloniexCredentialsForm = React.createClass({
-  getInitialState: function() {
-    return {'hideMsg': true, 'msg': '', 'editMode': false, 'msgOk': false};
-  },
-  handleSubmit: function(e) {
+  handleSubmit = (e) => {
     this.props.onCredentialsSubmit();
     this.setState({'editMode': false});
     e.preventDefault();
-  },
-  handleApiKeyChange: function(event) {
+  }
+
+  handleApiKeyChange = (event) => {
     this.props.onCredentialsChange(event.target.value, this.props.apiSecret);
-  },
-  handleApiSecretChange: function(event) {
+  }
+
+  handleApiSecretChange = (event) => {
     this.props.onCredentialsChange(this.props.apiKey, event.target.value);
-  },
-  onEditClick: function() {
+  }
+
+  onEditClick = () => {
     this.setState({'editMode': true});
-  },
-  render: function() {
-    var submitType      = (this.state.editMode === true) ? 'submit' : 'hidden';
-    var buttonDisplay   = (this.state.editMode === true) ? 'none' : 'inline';
-    var secretDisplayed = (this.state.editMode === true) ? this.props.apiSecret : 'XXXXXXX';
-    var keyDisplayed    = (this.state.editMode === true) ? this.props.apiKey : 'XXXXXXX';
+  }
+
+  render = () => {
+    var submitType      = this.state.editMode === true ? 'submit' : 'hidden';
+    var buttonDisplay   = this.state.editMode === true ? 'none' : 'inline';
+    var secretDisplayed = this.state.editMode === true ? this.props.apiSecret : 'XXXXXXX';
+    var keyDisplayed    = this.state.editMode === true ? this.props.apiKey : 'XXXXXXX';
 
     return (
-        <div className='row api-credentials-form'>
-          <div className='offset-3 col-6 box'>
-            <span className='text-center'>Poloniex credentials</span>
+        <div className="row api-credentials-form">
+          <div className="offset-3 col-6 box">
+            <span className="text-center">Poloniex credentials</span>
             <hr/>
-            <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.state.editMode}/>
+            <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.state.editMode}/>
               </label>
-              <label className='w-100'>Secret:
-                <input className='form-control' type='text' placeholder='secret' value={secretDisplayed} onChange={this.handleApiSecretChange} disabled={!this.state.editMode}/>
+              <label className="w-100">Secret:
+                <input className="form-control" type="text" placeholder="secret" value={secretDisplayed} onChange={this.handleApiSecretChange} disabled={!this.state.editMode}/>
               </label>
-              <input className='form-control submit' type={submitType} value='Save' />
-              <button className='form-control submit' style={{display: buttonDisplay}} onSubmit={null} onClick={this.onEditClick} type='button'>Show/Edit</button>
+              <input className="form-control submit" type={submitType} value="Save" />
+              <button className="form-control submit" style={{display: buttonDisplay}} onSubmit={null} onClick={this.onEditClick} type="button">Show/Edit</button>
             </form>
           </div>
         </div>
        );
   }
-});
+}
 
-module.exports.PoloniexCredentialsForm = PoloniexCredentialsForm;
+export default PoloniexController;
diff --git a/cmd/web/js/signin.jsx b/cmd/web/js/signin.jsx
index a2cfd1b..bff497e 100644
--- a/cmd/web/js/signin.jsx
+++ b/cmd/web/js/signin.jsx
@@ -1,12 +1,15 @@
-var Api        = require('./api.js').Api;
-var App        = require('./app.js');
-var classNames = require('classnames');
-
-module.exports.SigninForm = React.createClass({
-  getInitialState: function() {
-    return {'hideMsg': true, 'msg': '', 'msgOk': false, 'password': '', 'email': ''};
-  },
-  handleSubmit: function(e) {
+import Api from './api.js';
+import App from './app.js';
+import classNames from 'classnames';
+import React from 'react';
+
+class SigninForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {'hideMsg': true, 'msg': '', 'msgOk': false, 'password': '', 'email': ''};
+  }
+
+  handleSubmit = (e) => {
     Api.Call('SIGNIN', {'password': this.state.password, 'email': this.state.email}, function(err, status, data) {
       if (err) {
         console.error(err, data);
@@ -19,34 +22,41 @@ module.exports.SigninForm = React.createClass({
 
     }.bind(this));
     e.preventDefault();
-  },
-  handlePasswordChange: function(event) {
+  }
+
+  handlePasswordChange = (event) => {
     this.setState({'password': event.target.value});
-  },
-  handleEmailChange: function(event) {
+  }
+
+  handleEmailChange = (event) => {
     this.setState({'email': event.target.value});
-  },
-  hideMessage: function() {
+  }
+
+  hideMessage = () => {
     this.setState({'hideMsg': true});
-  },
-  displayMessage: function(msg, ok) {
+  }
+
+  displayMessage = (msg, ok) => {
     this.setState({'msg': msg, 'msgOk': ok, 'hideMsg': false});
-  },
-  render: function() {
+  }
+
+  render = () => {
     var cName = classNames('form-message', {'hidden': this.state.hideMsg, 'message-ok': this.state.msgOk});
     return (
-        <div className='row sign-in'>
-          <div className='offset-4 col-4 col-xs-offset-1 col-xs-10 text-center'>
-            <form role='form' onSubmit={this.handleSubmit}>
-              <input className='form-control' type='email' placeholder='email' onChange={this.handleEmailChange} />
-              <input className='form-control' type='password' placeholder='password' onChange={this.handlePasswordChange} />
-              <input className='form-control submit' type='submit' value='Sign In' />
-              <div className={cName} ref='message'>{this.state.msg}</div>
+        <div className="row sign-in">
+          <div className="offset-4 col-4 col-xs-offset-1 col-xs-10 text-center">
+            <form role="form" onSubmit={this.handleSubmit}>
+              <input className="form-control" type="email" placeholder="email" onChange={this.handleEmailChange} />
+              <input className="form-control" type="password" placeholder="password" onChange={this.handlePasswordChange} />
+              <input className="form-control submit" type="submit" value="Sign In" />
+              <div className={cName}>{this.state.msg}</div>
             </form>
-            <a href='#' onClick={App.onInternNavigation.bind(this, '/signup')}><u>Sign up</u></a>
+            <a href="#" onClick={App.onInternNavigation.bind(this, '/signup')}><u>Sign up</u></a>
           </div>
         </div>
        );
   }
-});
+}
+
+export default SigninForm;
 
diff --git a/cmd/web/js/signup.jsx b/cmd/web/js/signup.jsx
index 404a828..affa18e 100644
--- a/cmd/web/js/signup.jsx
+++ b/cmd/web/js/signup.jsx
@@ -1,56 +1,68 @@
-var Api                = require('./api.js').Api;
-var App                = require('./app.js');
-var classNames         = require('classnames');
-
-module.exports.SignupForm = React.createClass({
-  getInitialState: function() {
-    return {'hideMsg': true, 'msg': '', 'msgOk': false, 'password': '', 'email': ''};
-  },
-  handleSubmit: function(e) {
-    Api.Call('SIGNUP',
-             {
-            'password': this.state.password,
-            'email': this.state.email
-          },
-      function(err, status, data) {
-        if (err) {
-          console.error(err, data);
-          this.displayMessage(App.errorCodeToMessage(err.code), false);
-          return;
-        }
-
-        this.displayMessage('Thank You. Your account is being confirmed. Check your mailbox soon', true);
-        this.props.onSuccess(data.token);
-
-      }.bind(this));
+import Api from './api.js';
+import App from './app.js';
+import classNames from 'classnames';
+import React from 'react';
+
+class SignupForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {'hideMsg': true, 'msg': '', 'msgOk': false, 'password': '', 'email': ''};
+  }
+
+  handleSubmit = (e) => {
+    Api.Call(
+    'SIGNUP',
+    {
+      'password': this.state.password,
+      'email': this.state.email
+    },
+    function(err, status, data) {
+      if (err) {
+        console.error(err, data);
+        this.displayMessage(App.errorCodeToMessage(err.code), false);
+        return;
+      }
+
+      this.displayMessage('Thank You. Your account is being confirmed. Check your mailbox soon', true);
+      this.props.onSuccess(data.token);
+
+    }.bind(this)
+);
     e.preventDefault();
-  },
-  handlePasswordChange: function(event) {
+  }
+
+  handlePasswordChange = (event) => {
     this.setState({'password': event.target.value});
-  },
-  handleEmailChange: function(event) {
+  }
+
+  handleEmailChange = (event) => {
     this.setState({'email': event.target.value});
-  },
-  hideMessage: function() {
+  }
+
+  hideMessage = () => {
     this.setState({'hideMsg': true});
-  },
-  displayMessage: function(msg, ok) {
+  }
+
+  displayMessage = (msg, ok) => {
     this.setState({'msg': msg, 'msgOk': ok, 'hideMsg': false});
-  },
-  render: function() {
+  }
+
+  render = () => {
     var cName = classNames('form-message', {'hidden': this.state.hideMsg, 'message-ok': this.state.msgOk});
     return (
-        <div className='row sign-in'>
-          <div className='offset-4 col-4 col-xs-offset-1 col-xs-10 text-center'>
-            <form role='form' onSubmit={this.handleSubmit}>
-              <input className='form-control' type='email' placeholder='email' onChange={this.handleEmailChange} />
-              <input className='form-control' type='password' placeholder='password' onChange={this.handlePasswordChange} />
-              <input className='form-control submit' type='submit' value='Sign Up' />
-              <div className={cName} ref='message'>{this.state.msg}</div>
-              <a href='#' onClick={App.onInternNavigation.bind(this, '/signin')}><u>Sign In</u></a>
+        <div className="row sign-in">
+          <div className="offset-4 col-4 col-xs-offset-1 col-xs-10 text-center">
+            <form role="form" onSubmit={this.handleSubmit}>
+              <input className="form-control" type="email" placeholder="email" onChange={this.handleEmailChange} />
+              <input className="form-control" type="password" placeholder="password" onChange={this.handlePasswordChange} />
+              <input className="form-control submit" type="submit" value="Sign Up" />
+              <div className={cName}>{this.state.msg}</div>
+              <a href="#" onClick={App.onInternNavigation.bind(this, '/signin')}><u>Sign In</u></a>
             </form>
           </div>
         </div>
        );
   }
-});
+}
+
+export default SignupForm;
-- 
cgit v1.2.3