Work on signup/login

js/components/ascribe_forms/form_login.js

@@ -11,6 +11,7 @@ import UserActions from '../../actions/user_actions';
 
 import Form from './form';
 import Property from './property';
+import FormPropertyHeader from './form_property_header';
 
 import apiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
@@ -19,20 +20,25 @@ import { getLangText } from '../../utils/lang_utils';
 
 
 let LoginForm = React.createClass({
+
     propTypes: {
+        headerMessage: React.PropTypes.string,
+        submitMessage: React.PropTypes.string,
         redirectOnLoggedIn: React.PropTypes.bool,
         redirectOnLoginSuccess: React.PropTypes.bool
     },
 
+    mixins: [Router.Navigation],
+
     getDefaultProps() {
         return {
+            headerMessage: 'Enter ascribe',
+            submitMessage: 'Log in',
             redirectOnLoggedIn: true,
             redirectOnLoginSuccess: true
         };
     },
 
-    mixins: [Router.Navigation],
-
     getInitialState() {
         return UserStore.getState();
     },
@@ -80,6 +86,7 @@ let LoginForm = React.createClass({
     render() {
         return (
             <Form
+                className="ascribe-form-bordered"
                 ref="loginForm"
                 url={apiUrls.users_login}
                 handleSuccess={this.handleSuccess}
@@ -87,13 +94,16 @@ let LoginForm = React.createClass({
                     <button
                         type="submit"
                         className="btn ascribe-btn ascribe-btn-login">
-                        {getLangText('Enter')} ascribe
+                        {getLangText(this.props.submitMessage)}
                     </button>}
                 spinner={
                     <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
                     </button>
                     }>
+                <FormPropertyHeader>
+                    <h3>{getLangText(this.props.headerMessage)}</h3>
+                </FormPropertyHeader>
                 <Property
                     name='email'
                     label={getLangText('Email')}>
@@ -114,7 +124,6 @@ let LoginForm = React.createClass({
                         name="password"
                         required/>
                 </Property>
-                <hr />
             </Form>
         );
     }

js/components/ascribe_forms/form_signup.js

@@ -21,11 +21,20 @@ import apiUrls from '../../constants/api_urls';
 let SignupForm = React.createClass({
 
     propTypes: {
+        headerMessage: React.PropTypes.string,
+        submitMessage: React.PropTypes.string,
         handleSuccess: React.PropTypes.func
     },
 
     mixins: [Router.Navigation],
 
+    getDefaultProps() {
+        return {
+            headerMessage: 'Welcome to ascribe',
+            submitMessage: 'Sign up'
+        };
+    },
+
     getInitialState() {
         return UserStore.getState();
     },
@@ -72,7 +81,7 @@ let SignupForm = React.createClass({
                 getFormData={this.getFormData}
                 buttons={
                     <button type="submit" className="btn ascribe-btn ascribe-btn-login">
-                        {getLangText('Sign up to ascribe')}
+                        {getLangText(this.props.submitMessage)}
                     </button>}
                 spinner={
                     <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
@@ -80,7 +89,7 @@ let SignupForm = React.createClass({
                     </button>
                     }>
                 <FormPropertyHeader>
-                    <h3>{getLangText('Welcome to ascribe')}</h3>
+                    <h3>{getLangText(this.props.headerMessage)}</h3>
                 </FormPropertyHeader>
                 <Property
                     name='email'

js/components/login_container.js

@@ -24,7 +24,6 @@ let LoginContainer = React.createClass({
     render() {
         return (
             <div className="ascribe-login-wrapper">
-                <br/>
                 <LoginForm
                     message={this.props.message} />
                 <div className="ascribe-login-text">

js/components/password_reset_container.js

@@ -39,7 +39,7 @@ let PasswordResetContainer = React.createClass({
                 return (
                     <div>
                         <div className="ascribe-login-text ascribe-login-header">
-                            {getLangText('Reset your ascribe password')}
+                            {getLangText('Reset your password')}
                         </div>
                         <PasswordRequestResetForm
                             handleRequestSuccess={this.handleRequestSuccess}/>
@@ -157,4 +157,4 @@ let PasswordResetForm = React.createClass({
     }
 });
 
-export default PasswordResetContainer;
+export default PasswordResetContainer;

js/components/whitelabel/prize/components/login_container.js

@@ -0,0 +1,27 @@
+'use strict';
+
+import React from 'react';
+import Router from 'react-router';
+
+import LoginForm from '../../../ascribe_forms/form_login';
+
+let Link = Router.Link;
+
+
+let LoginContainer = React.createClass({
+    render() {
+        return (
+            <div className="ascribe-login-wrapper">
+                <LoginForm headerMessage="Log in" />
+                <div className="ascribe-login-text">
+                    I'm not a user <Link to="signup">Sign up...</Link><br/>
+                    I forgot my password <Link to="password_reset">Rescue me...</Link>
+                </div>
+            </div>
+        );
+    }
+});
+
+
+
+export default LoginContainer;

js/components/whitelabel/prize/components/signup_container.js

@@ -0,0 +1,45 @@
+'use strict';
+
+import React from 'react';
+import SignupForm from '../../../ascribe_forms/form_signup';
+
+
+let SignupContainer = React.createClass({
+    getInitialState() {
+        return {
+            submitted: false,
+            message: null
+        };
+    },
+
+    handleSuccess(message){
+        this.setState({
+            submitted: true,
+            message: message
+        });
+    },
+
+    render() {
+        if (this.state.submitted){
+            return (
+                <div className="ascribe-login-wrapper">
+                    <br/>
+                    <div className="ascribe-login-text ascribe-login-header">
+                    {this.state.message}
+                    </div>
+                </div>
+            );
+        }
+        return (
+            <div className="ascribe-login-wrapper">
+                <SignupForm
+                    headerMessage="Sign up to the prize"
+                    submitMessage="Sign up"
+                    handleSuccess={this.handleSuccess}/>
+            </div>
+        );
+    }
+});
+
+
+export default SignupContainer;

js/components/whitelabel/prize/routes.js

@@ -4,6 +4,9 @@ import React from 'react';
 import Router from 'react-router';
 
 import Landing from './components/landing';
+import LoginContainer from './components/login_container';
+import SignupContainer from './components/signup_container';
+import PasswordResetContainer from '../../../components/password_reset_container';
 
 import App from './app';
 import AppConstants from '../../../constants/application_constants';
@@ -16,8 +19,9 @@ function getRoutes(commonRoutes) {
     return (
         <Route name="app" path={baseUrl} handler={App}>
             <Route name="landing" path="/" handler={Landing} />
-
+            <Route name="login" path="login" handler={LoginContainer} />
-            {commonRoutes}
+            <Route name="signup" path="signup" handler={SignupContainer} />
+            <Route name="password_reset" path="password_reset" handler={PasswordResetContainer} />
         </Route>
     );
 }