Factorize Header/Footer code.v0.0.7

8 files changed, 90 insertions, 44 deletions

diff --git a/cmd/web/Makefile b/cmd/web/Makefile
index c5d5d62..85bba5b 100644
--- a/cmd/web/Makefile
+++ b/cmd/web/Makefile
@@ -4,7 +4,7 @@ export PATH := $(PATH):./node_modules/.bin
 
 SRC_DIR=js
 BUILD_DIR=build/js
-JSX_SRC= main.jsx signup.jsx signin.jsx otp.jsx poloniex.jsx password_reset.jsx change_password.jsx
+JSX_SRC= header_footer.jsx main.jsx signup.jsx signin.jsx otp.jsx poloniex.jsx password_reset.jsx change_password.jsx
 JS_SRC= cookies.js app.js api.js
 STATIC_FILES= index.html style.css
 JSX_OBJS=$(addprefix $(BUILD_DIR)/,$(JSX_SRC:.jsx=.js))
diff --git a/cmd/web/js/app.js b/cmd/web/js/app.js
index c24a761..878878d 100644
--- a/cmd/web/js/app.js
+++ b/cmd/web/js/app.js
@@ -4,6 +4,7 @@ import cookies from './cookies.js';
 import page from 'page';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import {Header, Footer} from './header_footer.js';
 
 var App = {};
 var cookieExpire = 60 * 60 * 24 * 7;
@@ -117,7 +118,11 @@ App.mount = function(app) {
   var root = React.createElement(
       'div',
       {className: 'container'},
-      app
+      [
+       React.createElement(Header, {key: 'header', isLoggedIn: App.isUserSignedIn()}),
+       React.createElement(React.Fragment, {key: 'app'}, app),
+       React.createElement(Footer, {key: 'footer', isLoggedIn: App.isUserSignedIn()})
+      ],
   );
 
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));
diff --git a/cmd/web/js/change_password.jsx b/cmd/web/js/change_password.jsx
index aedf4af..74cde0f 100644
--- a/cmd/web/js/change_password.jsx
+++ b/cmd/web/js/change_password.jsx
@@ -47,7 +47,7 @@ class ChangePasswordForm extends React.Component {
     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">
+          <div className="offset-1 col-10 offset-md-4 col-md-4 text-center">
             <form role="form" onSubmit={this.handleSubmit}>
               <input className="form-control" type="password" placeholder="password" onChange={this.handlePasswordChange} />
               <input className="form-control submit" type="submit" value="Change password" />
diff --git a/cmd/web/js/header_footer.jsx b/cmd/web/js/header_footer.jsx
new file mode 100644
index 0000000..3cb9937
--- /dev/null
+++ b/cmd/web/js/header_footer.jsx
@@ -0,0 +1,78 @@
+import React from 'react';
+
+class Signout extends React.Component {
+  render = () => {
+    return <a href="/signout"><u>Logout</u></a>;
+  }
+}
+
+class Logo extends React.Component {
+  render() {
+    return <div id="logo" className="w-100 h-100 align-self-center">
+             <h1><a href="/">CryptoPF</a></h1>
+           </div>;
+  }
+}
+
+class Footer extends React.Component {
+  render = () => {
+    var elements = this.props.elements;
+    if (elements === undefined) {
+      elements = [];
+    }
+
+    if (this.props.isLoggedIn === true) {
+      elements = elements.concat(<Signout />);
+    }
+
+    if (elements.length > 0) {
+      elements = [<hr key="hr"/>].concat(elements);
+    }
+
+    var rows = elements.map(function(element, i) {
+      return <div className="row text-center"  key={'footer-el-' + i}>
+               <div className="col-12">
+                 {element}
+               </div>
+             </div>;
+    });
+    return <div id="footer" className="row">
+             <div className="offset-4 col-4 d-sm-none">
+               {rows}
+             </div>
+           </div>;
+  }
+}
+
+class Header extends React.Component {
+  render = () => {
+    var elements = this.props.elements;
+    if (elements === undefined) {
+      elements = [];
+    }
+
+    if (this.props.isLoggedIn === true) {
+      elements = elements.concat(<Signout />);
+    }
+
+    elements = elements.map(function(element, i) {
+      return <div className="text-center"  key={'header-el-' + i}>
+               {element}
+             </div>;
+    });
+
+    return <div id="header" className="row">
+              <div className="offset-3 col-6 offset-md-4 col-md-4">
+                <Logo />
+              </div>
+              <div className="col-3 col-md-4 align-self-center h-100 d-none d-sm-flex justify-content-end">
+                {elements}
+              </div>
+           </div>;
+  }
+}
+
+export {
+  Header,
+  Footer,
+};
diff --git a/cmd/web/js/main.jsx b/cmd/web/js/main.jsx
index 909f1bd..8a4fce8 100644
--- a/cmd/web/js/main.jsx
+++ b/cmd/web/js/main.jsx
@@ -10,35 +10,6 @@ import cookies from './cookies.js';
 import React from 'react';
 import qs from 'qs';
 
-class Header extends React.Component {
-  render = () => {
-    if (this.props.displayLogout === true) {
-      return <div id="header" className="row">
-                <div className="offset-4 col-4">
-                  <Logo />
-                </div>
-                <div className="offset-2 col-2 align-self-center h-100">
-                  <a href="/signout"><u>Logout</u></a>
-                </div>
-              </div>;
-    }
-      return <div id="header" className="row">
-                <div className="offset-4 col-4">
-                  <Logo />
-                </div>
-              </div>;
-
-  }
-}
-
-class Logo extends React.Component {
-  render() {
-    return <div id="logo" className="w-100 h-100 align-self-center">
-             <h1><a href="/">CryptoPF</a></h1>
-           </div>;
-  }
-}
-
 App.page('/signup', false, function(context) {
   if (App.isUserSignedIn()) {
     App.go('/me');
@@ -46,7 +17,6 @@ App.page('/signup', false, function(context) {
   }
 
   App.mount(<div>
-      <Header />
       <SignupForm onSuccess={App.onUserSignUp}/>
     </div>);
 });
@@ -58,7 +28,6 @@ App.page('/signin', false, function(context) {
   }
 
   App.mount(<div>
-      <Header />
       <SigninForm onSuccess={App.onUserSignIn}/>
     </div>);
 });
@@ -70,7 +39,6 @@ App.page('/reset-password', false, function(context) {
   }
 
   App.mount(<div>
-      <Header />
       <PasswordResetForm />
     </div>);
 });
@@ -89,7 +57,6 @@ App.page('/change-password', false, function(context) {
   }
 
   App.mount(<div>
-      <Header />
       <ChangePasswordForm token={token} onSuccess={App.go.bind(App, '/signin')}/>
     </div>);
 });
@@ -102,14 +69,12 @@ App.page('/signout', true, function(context) {
 
 App.page('/me', true, function(context) {
   App.mount(<div>
-      <Header displayLogout={true} />
       <PoloniexController/>
     </div>);
 });
 
 App.page('/not_confirmed', true, function(context) {
   App.mount(<div>
-      <Header displayLogout={true}/>
       <div className="row">
         <div className="box offset-3 col-6 text-center">
           <p>Please be patient, you account is being confirmed...</p>
@@ -127,7 +92,6 @@ App.page('/otp/setup', true, function(context) {
     }
 
     App.mount(<div>
-        <Header displayLogout={true}/>
         <OtpEnrollForm onSuccess={App.onUserValidateOtp} img={'data:image/png;base64,' + data.base64img} secret={data.secret}/>
       </div>);
 
@@ -136,7 +100,6 @@ App.page('/otp/setup', true, function(context) {
 
 App.page('/otp/validate', true, function(context) {
   App.mount(<div>
-      <Header displayLogout={true}/>
       <OtpEnrollForm onSuccess={App.onUserValidateOtp} />
     </div>);
 });
diff --git a/cmd/web/js/password_reset.jsx b/cmd/web/js/password_reset.jsx
index 8cbdc60..b6a10ec 100644
--- a/cmd/web/js/password_reset.jsx
+++ b/cmd/web/js/password_reset.jsx
@@ -42,7 +42,7 @@ class PasswordResetForm extends React.Component {
     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">
+          <div className="offset-1 col-10 offset-md-4 col-md-4 text-center">
             <form role="form" onSubmit={this.handleSubmit}>
               <input className="form-control" type="email" placeholder="email" onChange={this.handleEmailChange} />
               <input className="form-control submit" type="submit" value="Reset" />
@@ -54,4 +54,4 @@ class PasswordResetForm extends React.Component {
   }
 }
 
-export default PasswordResetForm;
\ No newline at end of file
+export default PasswordResetForm;
diff --git a/cmd/web/js/signin.jsx b/cmd/web/js/signin.jsx
index bff497e..e0e0f1d 100644
--- a/cmd/web/js/signin.jsx
+++ b/cmd/web/js/signin.jsx
@@ -44,7 +44,7 @@ class SigninForm extends React.Component {
     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">
+          <div className="offset-1 col-10 offset-md-4 col-md-4 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} />
diff --git a/cmd/web/js/signup.jsx b/cmd/web/js/signup.jsx
index affa18e..b7d9287 100644
--- a/cmd/web/js/signup.jsx
+++ b/cmd/web/js/signup.jsx
@@ -51,7 +51,7 @@ class SignupForm extends React.Component {
     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">
+          <div className="offset-1 col-10 offset-md-4 col-md-4 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} />