JS clean.v0.0.15

9 files changed, 47 insertions, 24 deletions

diff --git a/cmd/web/js/account.jsx b/cmd/web/js/account.jsx
index 988d840..9a976f4 100644
--- a/cmd/web/js/account.jsx
+++ b/cmd/web/js/account.jsx
@@ -177,12 +177,10 @@ class PoloniexCredentialsForm extends React.Component {
         <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>
diff --git a/cmd/web/js/change_password.jsx b/cmd/web/js/change_password.jsx
index 74cde0f..dfa5701 100644
--- a/cmd/web/js/change_password.jsx
+++ b/cmd/web/js/change_password.jsx
@@ -47,9 +47,10 @@ 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-1 col-10 offset-md-4 col-md-4 text-center">
+          <div className="offset-1 col-10 box 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} />
+              <label className="w-100 text-left"><strong>New password</strong></label>
+              <input className="form-control" type="password" onChange={this.handlePasswordChange} />
               <input className="form-control submit" type="submit" value="Change password" />
               <div className={cName}>{this.state.msg}</div>
             </form>
diff --git a/cmd/web/js/main.jsx b/cmd/web/js/main.jsx
index 8014377..a64b342 100644
--- a/cmd/web/js/main.jsx
+++ b/cmd/web/js/main.jsx
@@ -86,6 +86,7 @@ App.page('/confirm', false, function(context) {
 
 App.page('/signout', true, function(context) {
   cookies.removeItem('jwt');
+  cookies.removeItem('isAdmin');
 
   App.go('/');
 });
diff --git a/cmd/web/js/otp.jsx b/cmd/web/js/otp.jsx
index 6c22c8c..5f04e21 100644
--- a/cmd/web/js/otp.jsx
+++ b/cmd/web/js/otp.jsx
@@ -61,11 +61,12 @@ class OtpEnrollForm extends React.Component {
 }
     return (
         <div className="row otp-enroll">
-          <div className="offset-4 col-4 col-xs-offset-1 col-xs-10 text-center">
+          <div className="offset-1 col-10 box offset-md-4 col-md-4 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} />
+                <label className="w-100 text-left"><strong>Code</strong></label>
+                <input className="form-control" type="pass" onChange={this.handlePassChange} />
                 <input className="form-control submit" type="submit" value="Validate" />
                 <div className={cName}>{this.state.msg}</div>
               </form>
diff --git a/cmd/web/js/panel.jsx b/cmd/web/js/panel.jsx
index c293e9a..7f9f9a3 100644
--- a/cmd/web/js/panel.jsx
+++ b/cmd/web/js/panel.jsx
@@ -11,7 +11,7 @@ class Panel extends React.Component {
 
     return (
       <div className={className}>
-        <div className="box col-12">
+        <div className="box offset-1 col-10">
           <div className="row">
             <div className="col-4">{this.props.title}</div>
           </div>
diff --git a/cmd/web/js/password_reset.jsx b/cmd/web/js/password_reset.jsx
index b6a10ec..7193a93 100644
--- a/cmd/web/js/password_reset.jsx
+++ b/cmd/web/js/password_reset.jsx
@@ -42,9 +42,10 @@ 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-1 col-10 offset-md-4 col-md-4 text-center">
+          <div className="offset-1 col-10 box 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} />
+              <label className="w-100 text-left"><strong>Email address</strong></label>
+              <input className="form-control" type="email" onChange={this.handleEmailChange} />
               <input className="form-control submit" type="submit" value="Reset" />
               <div className={cName}>{this.state.msg}</div>
             </form>
diff --git a/cmd/web/js/signin.jsx b/cmd/web/js/signin.jsx
index 5b3b661..cf486ad 100644
--- a/cmd/web/js/signin.jsx
+++ b/cmd/web/js/signin.jsx
@@ -43,17 +43,28 @@ class SigninForm extends React.Component {
   render = () => {
     var cName = classNames('form-message', {'hidden': this.state.hideMsg, 'message-ok': this.state.msgOk});
     return (
+        <React.Fragment>
         <div className="row sign-in">
-          <div className="offset-1 col-10 offset-md-4 col-md-4 text-center">
+          <div className="offset-1 col-10 box 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} />
+              <label className="w-100 text-left"><strong>Email address</strong></label>
+              <input className="form-control" type="email" onChange={this.handleEmailChange} />
+              <span className="w-100 d-inline-block text-left">
+                <label><strong>Password</strong></label>
+                <a className="blue-link hint-text float-right" href="/reset-password">Forgot password?</a>
+              </span>
+              <input className="form-control" type="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>
           </div>
         </div>
+        <div className="row">
+          <div className="offset-1 col-10 box offset-md-4 col-md-4 text-center">
+            <span>New to CryptoPF? <a href="#" className="blue-link" onClick={App.onInternNavigation.bind(this, '/signup')}>Create an account.</a></span>
+          </div>
+        </div>
+        </React.Fragment>
        );
   }
 }
diff --git a/cmd/web/js/signup.jsx b/cmd/web/js/signup.jsx
index 08509e8..15f9e88 100644
--- a/cmd/web/js/signup.jsx
+++ b/cmd/web/js/signup.jsx
@@ -51,13 +51,14 @@ 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-1 col-10 offset-md-4 col-md-4 text-center">
+          <div className="offset-1 box 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} />
+              <label className="w-100 text-left"><strong>Email address</strong></label>
+              <input className="form-control" type="email" onChange={this.handleEmailChange} />
+              <label className="w-100 text-left"><strong>Password</strong></label>
+              <input className="form-control" type="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>
diff --git a/cmd/web/static/style.css b/cmd/web/static/style.css
index ad718d7..1ba682b 100644
--- a/cmd/web/static/style.css
+++ b/cmd/web/static/style.css
@@ -3,6 +3,7 @@
 body {
   font-family: 'Fira Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif;
   background-color: rgb(246, 248, 251);
+  font-size: 0.9em;
 }
 
 ul {
@@ -64,7 +65,6 @@ h1 {
 .sign-in .form-control {
   margin-bottom: 20px;
   border-radius: 2px;
-  border: none;
   background-color: white;
 }
 
@@ -83,12 +83,21 @@ h1 {
 .sign-in .submit {
   background-color: rgb(20, 20, 20);
   color: white;
+  font-weight: bold;
+}
+
+.blue-link {
+  color: #0366d6;
+}
+
+.hint-text {
+  font-size: 0.9em;
+  margin-top: 1px;
 }
 
 .api-credentials-form .form-control {
   margin-bottom: 20px;
   border-radius: 2px;
-  border: none;
   background-color: white;
 }
 
@@ -100,13 +109,13 @@ h1 {
 .otp-enroll .form-control {
   margin-bottom: 20px;
   border-radius: 2px;
-  border: none;
   background-color: white;
 }
 
 .otp-enroll .submit {
   background-color: rgb(20, 20, 20);
   color: white;
+  font-weight: bold;
 }
 .form-message {
   background-color: rgba(255, 6, 6, .33);