Added more sttyles to the sign up form

Author: dvidsilva

src/assets/images/logo-squared.png

@@ -0,0 +1,60 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Component } from 'react';
+import { PropTypes } from 'prop-types';
+
+class TextField extends Component {
+    static propTypes = {
+        label: PropTypes.string,
+        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;
+
+        const inputStyle = {
+            display: 'inline-block',
+            height: 40,
+            padding: '0 10px',
+            fontSize: 16,
+            lineHeight: 25,
+            color: '#73879C',
+            resize: 'none',
+            verticalAlign: 'middle',
+            boxShadow: 'none',
+            backgroundColor: '#f5f5f5',
+            border: '1px solid #E6E9ED',
+            borderRadius: 2,
+            transition: 'all 200ms',
+            marginBottom: 1,
+        };
+
+        return(
+            <div css={{ display: 'block', margin: '10px 0' }}>
+                {label && <label htmlFor={ input.name }>
+                    <i className={ meta.error ? 'tint-color icon-asterisk' : 'icon-ok green' } />
+                    &nbsp;{ label }:
+                </label>}
+                <input type={ this.props.type }
+                    css={ inputStyle }
+                    onBlur={ input.onBlur }
+                    onChange={ input.onChange }
+                    placeholder={ placeholder }
+                    value={ input.value }
+                />
+                <p css={{ }}>
+                    {meta.error && meta.touched && meta.error}
+                </p>
+            </div>
+        );
+    }
+}
+
+export default TextField;

src/components/fields/BasicInput.js

@@ -1,4 +1,6 @@
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Component } from 'react';
 import { PropTypes } from 'prop-types';
 
 class TextField extends Component {

src/components/fields/Text.js

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

src/components/fields/index.js

@@ -1,13 +1,13 @@
 /** @jsx jsx */
+import { jsx } from '@emotion/core';
 import React from 'react';
 import StyledLink from 'Lib/buttons/Link';
 import blueBg from 'Images/blue-bg.jpg';
-import femaleOctocat from 'Images/femalecodertocat.png';
+import logoSquared from 'Images/logo-squared.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/';
+import { BasicInput } from 'Components/fields/';
 
 class JoinForm extends React.Component {
     render() {
@@ -16,13 +16,13 @@ class JoinForm extends React.Component {
                 <div className="container inner-top-md inner-bottom-sm">
                     <div className="row">
                         <div className="col-md-6 inner-right inner-bottom-xs">
-                            <header>
+                            <header css={{ p: { fontSize: 16 }}}>
                                 <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"/>
+                                    <Field name="username" component={ BasicInput } type="text" required placeholder="Username" />
+                                    <Field name="email" component={ BasicInput } type="email" required placeholder="Email"/>
+                                    <Field name="password" component={ BasicInput } type="password" required placeholder="Password"/>
                                     <p>
                                         <StyledLink to={`${BACKEND_URL}/api/auth/github`} css={{ fontSize: '18px', padding: '15px 35px 17px' }}>
                                             Submit
@@ -37,13 +37,8 @@ class JoinForm extends React.Component {
                             </header>
                         </div>
                         <div className="col-md-6">
-                            <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 css={{ margin: '10x 20px', textAlign: 'center', }}>
+                                <img src={logoSquared} alt="codecorgi logo" ariaIgnore />
                             </div>
                         </div>
                     </div>

src/components/join/form.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import femaleOctocat from '../../assets/images/femalecodertocat.png';
+import logoSquared from 'Images/logo-squared.png';
 import { PROD_URL } from '../../constants';
 import { Helmet } from 'react-helmet';
 import { readEndpoint } from 'redux-json-api';
@@ -30,12 +30,11 @@ class SignupContainer extends React.Component {
                 <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 property="og:image" content={`${ logoSquared }` } />
                     <meta name="twitter:title" content="Signup for codecorgi and build your dev profile" />
-                    <meta name="twitter:image" content={`${femaleOctocat}` } />
+                    <meta name="twitter:image" content={`${ logoSquared }` } />
                 </Helmet>
             </React.Fragment>
         );
@@ -54,7 +53,6 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
 }, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
-    form: 'bid',
-    enableReinitialize: true,
-    keepDirtyOnReinitialize: true,
+    form: 'join',
+    enableReinitialize: false,
 })(SignupContainer));

src/containers/join/index.js

@@ -0,0 +1,24 @@
+import { writeEndpoint } from 'redux-json-api';
+
+export const USER_CREATED = 'USER_CREATED';
+
+export function signedUp(profile, authenticated = true) {
+    return {
+        type: USER_CREATED,
+        attributes: {
+            authenticated,
+            id: `${profile.id}`,
+            ...profile,
+        }
+    };
+}
+
+export function signUp(data) {
+    return (dispatch) => {
+        dispatch(writeEndpoint('/accounts')).then(response => {
+            if (_get(response, 'body.data[0].attributes', undefined)) {
+                dispatch(signedUp(response.body.data[0].attributes, true));
+            }
+        });
+    };
+}

src/modules/account.js

@@ -1,8 +1,9 @@
 import _merge from 'lodash/merge';
 import _get from 'lodash/get';
-export const PROFILE_RECEIVED = 'PROFILE_RECEIVED';
 import { readEndpoint } from 'redux-json-api';
 
+export const PROFILE_RECEIVED = 'PROFILE_RECEIVED';
+
 export function receiveProfile(profile, authenticated = true) {
     return {
         type: PROFILE_RECEIVED,