3 files changed, 39 insertions, 13 deletions

diff --git a/cmd/web/js/main.jsx b/cmd/web/js/main.jsx
index 79bf976..c95c748 100644
--- a/cmd/web/js/main.jsx
+++ b/cmd/web/js/main.jsx
@@ -7,13 +7,32 @@ import Api from './api.js';
 import cookies from './cookies.js';
 import React from 'react';
 
+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 className="row">
-              <div id="logo" className="offset-4 col-4">
-                <a href="/">Cryptoportfolio</a>
-              </div>
-            </div>;
+    return <div id="logo" className="w-100">
+             <h1><a href="/">CryptoPF</a></h1>
+           </div>;
   }
 }
 
@@ -24,7 +43,7 @@ App.page('/signup', false, function(context) {
   }
 
   App.mount(<div>
-      <Logo />
+      <Header />
       <SignupForm onSuccess={App.onUserSignUp}/>
     </div>);
 });
@@ -36,7 +55,7 @@ App.page('/signin', false, function(context) {
   }
 
   App.mount(<div>
-      <Logo />
+      <Header />
       <SigninForm onSuccess={App.onUserSignIn}/>
     </div>);
 });
@@ -49,14 +68,14 @@ App.page('/signout', true, function(context) {
 
 App.page('/me', true, function(context) {
   App.mount(<div>
-      <Logo />
+      <Header displayLogout={true} />
       <PoloniexController/>
     </div>);
 });
 
 App.page('/not_confirmed', true, function(context) {
   App.mount(<div>
-      <Logo />
+      <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>
@@ -74,7 +93,7 @@ App.page('/otp/setup', true, function(context) {
     }
 
     App.mount(<div>
-        <Logo />
+        <Header displayLogout={true}/>
         <OtpEnrollForm onSuccess={App.onUserValidateOtp} img={'data:image/png;base64,' + data.base64img} secret={data.secret}/>
       </div>);
 
@@ -83,7 +102,7 @@ App.page('/otp/setup', true, function(context) {
 
 App.page('/otp/validate', true, function(context) {
   App.mount(<div>
-      <Logo />
+      <Header displayLogout={true}/>
       <OtpEnrollForm onSuccess={App.onUserValidateOtp} />
     </div>);
 });
diff --git a/cmd/web/js/otp.jsx b/cmd/web/js/otp.jsx
index aecf032..6c22c8c 100644
--- a/cmd/web/js/otp.jsx
+++ b/cmd/web/js/otp.jsx
@@ -55,6 +55,7 @@ class OtpEnrollForm extends React.Component {
     if (this.props.img) {
       qrCode =
         <div className="row justify-content-center">
+          <p>Please setup 2FA (Google Authenticator, Authy)</p>
           <OtpQrCode img={this.props.img} secret={this.props.secret} />
         </div>;
 }
diff --git a/cmd/web/static/style.css b/cmd/web/static/style.css
index bfa43f0..cdbcd06 100644
--- a/cmd/web/static/style.css
+++ b/cmd/web/static/style.css
@@ -32,14 +32,20 @@ i.cc {
   text-align: center;
   display: inline-block;
   color: white;
-  font-size: 28px;
   background-color: rgb(20, 20, 20);
   border-radius: 4px;
   font-weight: bold;
   padding: 10px 10px 10px 10px;
   vertical-align: middle;
-  margin-bottom: 30px;
+}
+
+#header {
   margin-top: 20px;
+  margin-bottom: 30px;
+}
+
+h1 {
+  font-size: 1.5em;
 }
 
 .sign-in .form-control {