Merge remote-tracking branch 'remotes/origin/AD-565-add-landing-page-for-sluice' into AD-419-decouple-piece-registration-from-

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,7 +20,10 @@ 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
     },
@@ -28,6 +32,8 @@ let LoginForm = React.createClass({
 
     getDefaultProps() {
         return {
+            headerMessage: 'Enter ascribe',
+            submitMessage: 'Log in',
             redirectOnLoggedIn: true,
             redirectOnLoginSuccess: true
         };
@@ -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={
                     <span 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" />
                     </span>
                     }>
+                <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_register_piece.js

@@ -17,6 +17,12 @@ import { getLangText } from '../../utils/lang_utils';
 
 
 let RegisterPieceForm = React.createClass({
+    propTypes: {
+        handleSuccess: React.PropTypes.func,
+        isFineUploaderEditable: React.PropTypes.bool,
+        children: React.PropTypes.element
+    },
+
     getInitialState(){
         return {
             digitalWorkKey: null,
@@ -162,4 +168,4 @@ let FileUploader = React.createClass({
     }
 });
 
-export default RegisterPieceForm;
+export default RegisterPieceForm;

js/components/ascribe_forms/form_signup.js

@@ -21,11 +21,21 @@ import apiUrls from '../../constants/api_urls';
 let SignupForm = React.createClass({
 
     propTypes: {
-        handleSuccess: React.PropTypes.func
+        headerMessage: React.PropTypes.string,
+        submitMessage: React.PropTypes.string,
+        handleSuccess: React.PropTypes.func,
+        children: React.PropTypes.element
     },
 
     mixins: [Router.Navigation],
 
+    getDefaultProps() {
+        return {
+            headerMessage: 'Welcome to ascribe',
+            submitMessage: 'Sign up'
+        };
+    },
+
     getInitialState() {
         return UserStore.getState();
     },
@@ -72,7 +82,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={
                     <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
@@ -80,7 +90,7 @@ let SignupForm = React.createClass({
                     </span>
                     }>
                 <FormPropertyHeader>
-                    <h3>{getLangText('Welcome to ascribe')}</h3>
+                    <h3>{getLangText(this.props.headerMessage)}</h3>
                 </FormPropertyHeader>
                 <Property
                     name='email'
@@ -111,13 +121,7 @@ let SignupForm = React.createClass({
                         autoComplete="on"
                         required/>
                 </Property>
-                <Property
+                {this.props.children}
-                    name='promo_code'
-                    label={getLangText('Promocode')}>
-                    <input
-                        type="text"
-                        placeholder={getLangText('Enter a promocode here (Optional)')}/>
-                </Property>
                 <Property
                     name="terms"
                     className="ascribe-settings-property-collapsible-toggle"
@@ -129,4 +133,5 @@ let SignupForm = React.createClass({
     }
 });
 
+
 export default SignupForm;

js/components/login_container.js

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

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/register_piece.js

@@ -27,7 +27,6 @@ import SlidesContainer from './ascribe_slides_container/slides_container';
 
 
 import { mergeOptions } from '../utils/general_utils';
-import { getCookie } from '../utils/fetch_api_utils';
 import { getLangText } from '../utils/lang_utils';
 
 let RegisterPiece = React.createClass( {

js/components/signup_container.js

@@ -2,8 +2,10 @@
 
 import React from 'react';
 import SignupForm from './ascribe_forms/form_signup';
+import Property from './ascribe_forms/property';
+
+import { getLangText } from '../utils/lang_utils';
 
-// import { getLangText } from '../utils/lang_utils';
 
 let SignupContainer = React.createClass({
     getInitialState() {
@@ -33,8 +35,15 @@ let SignupContainer = React.createClass({
         }
         return (
             <div className="ascribe-login-wrapper">
-                <br/>
+                <SignupForm>
-                <SignupForm handleSuccess={this.handleSuccess}/>
+                    <Property
+                        name='promo_code'
+                        label={getLangText('Promocode')}>
+                        <input
+                            type="text"
+                            placeholder={getLangText('Enter a promocode here (Optional)')}/>
+                    </Property>
+                </SignupForm>
             </div>
         );
     }

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,10 @@ 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 name="register_piece" path="register_piece" handler={RegisterPiece} />
         </Route>
     );
 }