creating container and component for /join

Author: dvidsilva

src/components/header/index.js

@@ -34,7 +34,7 @@ class Header extends React.Component {
     }
 
     render() {
-        const { authenticated, username } = this.props.profile;
+        const { authenticated } = this.props.profile;
 
         return (<header className="header">
             <div className="navbar">
@@ -65,7 +65,7 @@ class Header extends React.Component {
                                     <Link to="/challenges">Challenges</Link>
                                 </li>
                                 <li>
-                                    {!authenticated && <Link className="red-button" to="/signup" onClick={this.toggleVisibility}>Signup {username}</Link>}
+                                    {!authenticated && <Link className="red-button" to="/join" onClick={this.toggleVisibility}>Join</Link>}
                                     {authenticated && <Link className="red-button" to="/profile" onClick={this.toggleVisibility}>Profile</Link>}
                                 </li>
                             </ul>

src/components/join/form.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import Link from 'Lib/buttons/Link';
+import blueBg from 'Images/blue-bg.jpg';
+import femaleOctocat from 'Images/femalecodertocat.png';
+import { BACKEND_URL } from 'Constants';
+
+class JoinForm extends React.Component {
+    render() {
+        return (
+            <section id="hero" className="dark-bg img-bg img-bg-soft" style={{ backgroundImage: `url(${blueBg})` }}>
+                <div className="container inner-top-md inner-bottom-sm">
+                    <div className="row">
+                        <div className="col-md-5 inner-right inner-bottom-xs">
+                            <header>
+                                <h1>Signup</h1>
+                                <p>Use github to create or access your account.</p>
+                                <p>
+                                    <Link to={`${BACKEND_URL}/api/auth/github`} target="_self" css={{ fontSize: '18px', padding: '15px 35px 17px', marginTop: '35px' }}>
+                                        <i className="icon-github" />
+                                        Github Signup
+                                    </Link>
+                                </p>
+                            </header>
+                        </div>
+                        <div className="col-md-7">
+                            <div>
+                                <img src={femaleOctocat} alt="Female coder octocat by jeejkang" />
+                                <p className="text-center">
+                                    <a href="https://octodex.github.com/femalecodertocat" target="_blank">
+                                        Female coder octocat
+                                    </a>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        );
+    }
+}
+
+export default JoinForm;

src/containers/join/index.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import femaleOctocat from '../../assets/images/femalecodertocat.png';
+import { PROD_URL } from '../../constants';
+import { Helmet } from 'react-helmet';
+import { readEndpoint } from 'redux-json-api';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import ReactRouterPropTypes from 'react-router-prop-types';
+import { reduxForm } from 'redux-form';
+import JoinForm from 'Components/join/form';
+
+
+class SignupContainer extends React.Component {
+    static propTypes = {
+        readEndpoint: PropTypes.func.isRequired,
+        authenticated: PropTypes.bool.isRequired,
+        history: ReactRouterPropTypes.history.isRequired,
+    }
+
+    componentWillReceiveProps() {
+        if (this.props.authenticated) {
+            this.props.history.push('/profile');
+        }
+    }
+
+    render() {
+        return(
+            <React.Fragment>
+                <JoinForm />
+                <Helmet>
+                    <title>Signup for codecorgi and build your dev profile</title>
+                    <meta property="og:type" content="business.business" />
+                    <meta property="og:title" content="Signup for codecorgi and build your dev profile" />
+                    <meta property="og:url" content={ `${PROD_URL}/join` } />
+                    <meta property="og:image" content={`${femaleOctocat}` } />
+                    <meta name="twitter:title" content="Signup for codecorgi and build your dev profile" />
+                    <meta name="twitter:image" content={`${femaleOctocat}` } />
+                </Helmet>
+            </React.Fragment>
+        );
+    }
+}
+
+const mapStateToProps = (state) => {
+    const { profile } = state;
+    return {
+        authenticated: profile.authenticated || false,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => bindActionCreators({
+    readEndpoint,
+}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
+    form: 'bid',
+    enableReinitialize: true,
+    keepDirtyOnReinitialize: true,
+})(SignupContainer));

src/routes.js

@@ -7,7 +7,7 @@ import WeAreOpenSource from './containers/about/openSource';
 import Profile from './containers/profile';
 import e404 from './containers/404';
 import ProfileEdit from './containers/profile/Edit';
-import Signup from './containers/signup';
+import Join from './containers/join';
 import SubmitFormContainer from './containers/submit/form';
 import SubmitEditContainer from './containers/submit/edit';
 import SubmitViewContainer from './containers/submit';
@@ -23,7 +23,7 @@ class Routes extends React.Component {
                 <Route exact path="/" component={Home} />
                 <Route exact path="/about/open-source" component={WeAreOpenSource} />
                 <Route exact path="/about" component={About} />
-                <Route exact path="/signup" component={Signup} />
+                <Route exact path="/join" component={Join} />
                 <Route exact path="/learning" component={LearningPageContainer} />
                 <Route exact path="/challenges" component={ChallengesContainer} />
                 <Route exact path="/418" component={() => <EasterEgg type="418" />} />