@@ -65,7 +65,7 @@ class Header extends React.Component {
Challenges
- {!authenticated && Signup {username}}
+ {!authenticated && Join}
{authenticated && Profile}
diff --git a/src/components/join/form.js b/src/components/join/form.js
new file mode 100644
index 0000000..49ae2ff
--- /dev/null
+++ b/src/components/join/form.js
@@ -0,0 +1,57 @@
+/** @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 logoSquared from 'Images/logo-squared.png';
+import { BACKEND_URL } from 'Constants';
+import { Link } from 'react-router-dom';
+import { Field } from 'redux-form';
+import { BasicInput } from 'Components/fields/';
+
+class JoinForm extends React.Component {
+ render() {
+ return (
+ div': { padding: '10px 20px', flexGrow: 1, maxWidth: 450, },
+ '@media (max-width: 860px)': {
+ flexDirection: 'column',
+ paddingBottom: 40,
+ '> div': { maxWidth: '90%' },
+ }
+ }}>
+
+ );
+ }
+}
+
+export default JoinForm;
diff --git a/src/containers/join/index.js b/src/containers/join/index.js
new file mode 100644
index 0000000..4bc0ff8
--- /dev/null
+++ b/src/containers/join/index.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import logoSquared from 'Images/logo-squared.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(
+
+
+ Signup for codecorgi and build your dev profile
+
+
+
+
+
+
+
+ );
+ }
+}
+
+const mapStateToProps = (state) => {
+ const { profile } = state;
+ return {
+ authenticated: profile.authenticated || false,
+ };
+};
+
+const mapDispatchToProps = (dispatch) => bindActionCreators({
+ readEndpoint,
+}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
+ form: 'join',
+ enableReinitialize: false,
+})(SignupContainer));
diff --git a/src/lib/buttons/Link.js b/src/lib/buttons/Link.js
new file mode 100644
index 0000000..c83de86
--- /dev/null
+++ b/src/lib/buttons/Link.js
@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+
+const StyledLink = styled(Link)(
+ {
+ transition: 'background 200ms ease-out, font 200ms ease-out, padding 200ms ease-out, margin 200ms ease-out',
+ display: 'inline-block',
+ padding: '6px 12px',
+ marginBottom: 0,
+ fontSize: '14px',
+ fontWeight: 700,
+ lineHeight: '1.42857143',
+ textAlign: 'center',
+ whiteSpace: 'nowrap',
+ verticalAlign: 'middle',
+ touchAction: 'manipulation',
+ cursor: 'pointer',
+ userSelect: 'none',
+ backgroundImage: 'none',
+ border: '1px solid transparent',
+ borderRadius: '4px',
+ backgroundColor: '#FA6C65',
+ color: '#FFF',
+ textTransform: 'uppercase',
+ textDecoration: 'none',
+ '&:hover, &:active': {
+ backgroundColor: '#CF4C45',
+ outline: 0,
+ color: '#FFF',
+ textDecoration: 'none',
+ },
+ },
+ props => ({
+ ...props.css,
+ }),
+);
+
+export default StyledLink;
diff --git a/src/modules/account.js b/src/modules/account.js
new file mode 100644
index 0000000..733d0f9
--- /dev/null
+++ b/src/modules/account.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));
+ }
+ });
+ };
+}
diff --git a/src/modules/profile.js b/src/modules/profile.js
index 14d9dd2..5cc124a 100644
--- a/src/modules/profile.js
+++ b/src/modules/profile.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,
diff --git a/src/routes.js b/src/routes.js
index 19306e9..d19e93c 100644
--- a/src/routes.js
+++ b/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 {
+
+
+
+
+
+ 
+
+