drafted sign up form

Author: dvidsilva

src/components/fields/Text.js

@@ -7,26 +7,31 @@ class TextField extends Component {
         meta: PropTypes.object.isRequired,
         input: PropTypes.object.isRequired,
         placeholder: PropTypes.string,
+        type: PropTypes.string,
+    }
+
+    static defaultProps = {
+        type: 'text',
     }
 
     render() {
         const { label, meta, input, placeholder } = this.props;
         return(
             <div className={ 'form-group ' + (meta.error && meta.touched && 'has-error')}>
-                <label htmlFor={ input.name }>
+                {label && <label htmlFor={ input.name }>
                     <i className={ meta.error ? 'tint-color icon-asterisk' : 'icon-ok green' } />
                     &nbsp;{ label }:
-                </label>
-                <input type="text"
+                </label>}
+                <input type={ this.props.type }
                     className="form-control"
                     onBlur={ input.onBlur }
                     onChange={ input.onChange }
                     placeholder={ placeholder }
                     value={ input.value }
                 />
-                {/* <span className="help-block">
-                    {meta.error && meta.touched && <span>{meta.error}</span>}&nbsp;
-                </span> */}
+                <p className="help-block">
+                    {meta.error && meta.touched && meta.error}
+                </p>
             </div>
         );
     }

src/components/fields/index.js

@@ -0,0 +1,5 @@
+import TextField from './Text';
+
+export {
+    TextField,
+};

src/components/join/form.js

@@ -6,35 +6,37 @@ import femaleOctocat from 'Images/femalecodertocat.png';
 import { BACKEND_URL } from 'Constants';
 import { jsx } from '@emotion/core';
 import { Link } from 'react-router-dom';
+import { Field } from 'redux-form';
+import { TextField } from 'Components/fields/';
 
 class JoinForm extends React.Component {
     render() {
         return (
             <section css={{  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">
+                        <div className="col-md-6 inner-right inner-bottom-xs">
                             <header>
-                                <h1>Join</h1>
-                                <p>You'll use your email to log in, your username is used when displaying submissions and comments.</p>
-                                <p>
-                                    <StyledLink to={`${BACKEND_URL}/api/auth/github`} css={{ fontSize: '18px', padding: '15px 35px 17px', marginTop: '35px' }}>
-                                        Submit
-                                    </StyledLink>
-                                </p>
-                                <p> Have an account?
-                                    <Link to={`${BACKEND_URL}/api/auth/github`}>
-                                        Log in
-                                    </Link>
-                                </p>
-                                <p>
-                                    <Link to={`${BACKEND_URL}/api/auth/github`}>
-                                        Forgot Password?
-                                    </Link>
-                                </p>
+                                <form css={{ background: 'white', borderRadius: '8px', padding: '18px', margin: '0 10px' }}>
+                                    <h1>Create an account</h1>
+                                    <p>You'll use your email to log in, your username is used when displaying submissions and comments.</p>
+                                    <Field name="username" component={ TextField } type="text" required placeholder="Username"/>
+                                    <Field name="email" component={ TextField } type="email" required placeholder="Email"/>
+                                    <Field name="password" component={ TextField } type="password" required placeholder="Password"/>
+                                    <p>
+                                        <StyledLink to={`${BACKEND_URL}/api/auth/github`} css={{ fontSize: '18px', padding: '15px 35px 17px' }}>
+                                            Submit
+                                        </StyledLink>
+                                    </p>
+                                    <p> Have an account?&nbsp;
+                                        <Link to={`${BACKEND_URL}/api/auth/github`}>
+                                            Log in
+                                        </Link>
+                                    </p>
+                                </form>
                             </header>
                         </div>
-                        <div className="col-md-7">
+                        <div className="col-md-6">
                             <div>
                                 <img src={femaleOctocat} alt="Female coder octocat by jeejkang" />
                                 <p className="text-center">