store signup in redux

server/controllers/user.controller.js

@@ -24,7 +24,10 @@ export function createUser(req, res, next) {
 				if (err) {
 					return next(err);
 				}
-				res.json({success: true});
+				res.json({
+					email: req.user.email,
+					username: req.user.username
+				});
 			});
 		});
   });

shared/components/Nav/Nav.jsx

@@ -7,7 +7,8 @@ class Nav extends React.Component {
 			<nav className="nav">
 				<ul className="nav__items">
 					<li>
-						<Link to={`/login`}>Login</Link> or <Link to={`/signup`}>Sign Up</Link>
+						{this.props.user.authenticated && <p>Hello, {this.props.user.username}!</p>}
+						{!this.props.user.authenticated && <p><Link to={`/login`}>Login</Link> or <Link to={`/signup`}>Sign Up</Link></p>}
 					</li>
 				</ul>
 			</nav>

shared/components/SignupForm/SignupForm.jsx

@@ -5,19 +5,19 @@ class SignupForm extends React.Component {
 		const {fields: { username, email, password, confirmPassword }, handleSubmit} = this.props;
 		return (
 			<form className="signup-form" onSubmit={handleSubmit(this.props.signUpUser.bind(this))}>
-				<p>
+				<p className="signup-form__field">
 					<label className="signup-form__username-label" for="username">Username:</label>
 					<input className="signup-form__username-input" id="username" type="text" placeholder="Username" {...username}/>
 				</p>
-				<p>
+				<p className="signup-form__field">
 					<label className="signup-form__email-label" for="email">Email:</label>
 					<input className="signup-form__email-input" id="email" type="text" placeholder="Email" {...email}/>
 				</p>
-				<p>
+				<p className="signup-form__field">
 					<label className="signup-form__password-label" for="password">Password:</label>
 					<input className="signup-form__password-input" id="password" type="password" placeholder="Password" {...password}/>
 				</p>
-				<p>
+				<p className="signup-form__field">
 					<label className="signup-form__confirm-password-label" for="confirm-password">Confirm Password:</label>
 					<input className="signup-form__confirm-password-input" id="confirm-password" type="password" placeholder="Confirm Password" {...confirmPassword}/>
 				</p>

shared/containers/IDEView/IDEView.jsx

@@ -12,7 +12,7 @@ class IDEView extends React.Component {
 	render() {
 		return (
 			<div className="ide">
-				<Nav />
+				<Nav user={this.props.user}/>
 				<Toolbar 
 					className="Toolbar"
 					isPlaying={this.props.ide.isPlaying}
@@ -46,7 +46,8 @@ function mapStateToProps(state) {
 	return {
 		file: state.file,
 		ide: state.ide,
-		preferences: state.preferences
+		preferences: state.preferences,
+		user: state.user
 	}
 }
 

shared/redux/actions/user.js

@@ -9,7 +9,9 @@ export function signUpUser(formValues) {
   return function(dispatch) {
     axios.post(`${ROOT_URL}/signup`, formValues, {withCredentials: true})
       .then(response => {
-        dispatch({ type: ActionTypes.AUTH_USER });
+        dispatch({ type: ActionTypes.AUTH_USER,
+                    user: response.data
+        });
         browserHistory.push('/');
       })
       .catch(response => dispatch(authError(response.data.error)));

shared/redux/reducers/user.js

@@ -1,9 +1,10 @@
 import * as ActionTypes from '../constants/constants'
 
-const user = (state = {}, action) => {
+const user = (state = {authenticated: false}, action) => {
 	switch (action.type) {
 		case ActionTypes.AUTH_USER:
-			return { ...state, error: '', authenticated: true };
+			return { ...action.user,
+							authenticated: true };
 		default:
 			return state;
 	}

styles/base/_reset.scss

@@ -7,7 +7,7 @@ html, body {
 	height: 100%;
 }
 
-ul {
+ul, p {
 	padding: 0;
 	margin: 0;
 }

styles/components/_signup.scss

@@ -19,3 +19,7 @@
 .signup-form__confirm-password-input {
 	width: #{300 / $base-font-size}rem;
 }
+
+.signup-form__field {
+	margin: #{20 / $base-font-size}rem 0;
+}