Broke up the home page

src/components/pages/home.jsx

@@ -4,21 +4,13 @@ import { withRouter, Link } from 'react-router-dom';
 
 //panels
 import CommonLinks from '../panels/common_links.jsx';
-
-import Signup from '../panels/signup.jsx';
-import Login from '../panels/login.jsx';
-import PasswordRecover from '../panels/password_recover.jsx';
-
 import NewsPanel from '../panels/news_panel.jsx';
 
 class Home extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			signupSent: false,
-			signupMsg: '',
-			recoverSent: false,
-			recoverMsg: ''
+			//
 		};
 	}
 
@@ -27,10 +19,24 @@ class Home extends React.Component {
 		//get the correct side panel
 		let SidePanel;
 
-		if (this.props.id) {
-			SidePanel = this.LoggedInSidePanel.bind(this);
-		} else {
-			SidePanel = this.LoggedOutSidePanel.bind(this);
+		if (this.props.id) { //logged in
+			SidePanel = () => {
+				return (
+					<div className='sidePanel'>
+						<CommonLinks />
+					</div>
+				);
+			}
+		} else { //logged out
+			SidePanel = () => {
+				return (
+					<div className='sidePanel'>
+						<p><Link to='/signup'>Sign Up</Link></p>
+						<p><Link to='/login'>Login</Link></p>
+						<p><Link to='/passwordrecover'>Recover Password</Link></p>
+					</div>
+				);
+			}
 		}
 
 		//return the home page
@@ -47,77 +53,11 @@ class Home extends React.Component {
 			</div>
 		);
 	}
-
-	//panel functions
-	LoggedInSidePanel() {
-		//reset the other mode
-		if (this.state.signupSent) {
-			this.setState({ signupSent: false });
-		}
-
-		if (this.state.recoverSent) {
-			this.setState({ recoverSent: false });
-		}
-
-		//finally return the side panel
-		return (
-			<div className='sidePanel'>
-				<CommonLinks />
-			</div>
-		);
-	}
-
-	LoggedOutSidePanel() {
-		//build the signup panel
-		let SignupPanel;
-
-		if (!this.state.signupSent) {
-			SignupPanel = () => {
-				return (
-					<Signup onSignup={(msg) => this.setState( {signupSent: true, signupMsg: msg} )} />
-				);
-			}
-		} else {
-			SignupPanel = () => {
-				return (
-					<p>{this.state.signupMsg}</p>
-				);
-			}
-		}
-
-		//build the recover panel
-		let RecoverPanel;
-
-		if (!this.state.recoverSent) {
-			RecoverPanel = () => {
-				return (
-					<PasswordRecover onEmailSent={(msg) => this.setState( {recoverSent: true, recoverMsg: msg} )} />
-				);
-			}
-		}
-		else {
-			RecoverPanel = () => {
-				return (
-					<p>{this.state.recoverMsg}</p>
-				);
-			}
-		}
-
-		//finally return the side panel 
-		return (
-			<div className='sidePanel'>
-				<SignupPanel />
-				<Login onSubmit={() => {this.props.history.push('/profile');}} />
-				<RecoverPanel />
-			</div>
-		);
-	}
 }
 
 function mapStoreToProps(store) {
 	return {
-		id: store.account.id,
-		token: store.account.token
+		id: store.account.id
 	}
 }
 

src/components/pages/login.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { withRouter, Link } from 'react-router-dom';
+
+//panels
+import LoginPanel from '../panels/login.jsx';
+
+class Login extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			//
+		}
+	}
+
+	render() {
+		return (
+			<div className='page constrained'>
+				<LoginPanel onSubmit={() => this.props.history.push('/profile')} />
+				<Link to='/' className='centered'>Return Home</Link>
+			</div>
+		);
+	}
+};
+
+export default withRouter(Login);

src/components/pages/password_change.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { withRouter, Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+//panels
+import PasswordChangePanel from '../panels/password_change.jsx';
+
+class PasswordChange extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			changeSent: false,
+			changeMsg: ''
+		}
+	}
+
+	componentDidMount() {
+		if (!this.props.id) {
+			this.props.history.push('/');
+		}
+	}
+
+	render() {
+		let Panel;
+
+		if (!this.state.changeSent) {
+			Panel = () => {
+				return (<PasswordChangePanel onPasswordChange={(msg) => this.setState({ changeSent: true, changeMsg: msg }) } />);
+			}
+		} else {
+			Panel = () => {
+				return (<p>{this.state.changeMsg}</p>);
+			}
+		}
+
+		return (
+			<div className='page constrained'>
+				<Panel />
+				<Link to='/' className='centered'>Return Home</Link>
+			</div>
+		);
+	}
+};
+
+function mapStoreToProps(store) {
+	return {
+		id: store.account.id
+	}
+}
+
+function mapDispatchToProps(dispatch) {
+	return {
+		//
+	}
+}
+
+PasswordChange = connect(mapStoreToProps, mapDispatchToProps)(PasswordChange);
+
+export default withRouter(PasswordChange);

src/components/pages/password_recover.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { withRouter, Link } from 'react-router-dom';
+
+//panels
+import PasswordRecoverPanel from '../panels/password_recover.jsx';
+
+class PasswordRecover extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			recoverSent: false,
+			recoverMsg: ''
+		}
+	}
+
+	render() {
+		let Panel;
+
+		if (!this.state.recoverSent) {
+			Panel = () => {
+				return (<PasswordRecoverPanel onEmailSent={(msg) => this.setState( {recoverSent: true, recoverMsg: msg} )} />);
+			}
+		} else {
+			Panel = () => {
+				return (<p>{this.state.recoverMsg}</p>);
+			}
+		}
+
+		return (
+			<div className='page constrained'>
+				<Panel />
+				<Link to='/' className='centered'>Return Home</Link>
+			</div>
+		);
+	}
+};
+
+export default withRouter(PasswordRecover);

src/components/pages/password_reset.jsx

@@ -30,9 +30,9 @@ class PasswordReset extends React.Component {
 		}
 
 		return (
-			<div className='page centered'>
+			<div className='page constrained'>
 				<Panel />
-				<Link to='/'>Return Home</Link>
+				<Link to='/' className='centered'>Return Home</Link>
 			</div>
 		);
 	}

src/components/pages/profile.jsx

@@ -6,7 +6,6 @@ import queryString from 'query-string';
 
 //panels
 import CommonLinks from '../panels/common_links.jsx';
-import PasswordChange from '../panels/password_change.jsx';
 
 class Profile extends React.Component {
 	constructor(props) {
@@ -124,23 +123,10 @@ class Profile extends React.Component {
 
 	//panel functions
 	MyProfileSidePanel() {
-		//build the password change panel
-		let PasswordChangePanel;
-
-		if (!this.state.changedPassword) {
-			PasswordChangePanel = () => {
-				return (<PasswordChange onPasswordChange={() => { this.setState({changedPassword: true}) }} />);
-			}
-		} else {
-			PasswordChangePanel = () => {
-				return (<p>Password changed!</p>);
-			}
-		}
-
 		//finally return the side panel
 		return (
 			<div className='sidePanel'>
-				<CommonLinks extra={() => <PasswordChangePanel />} />
+				<CommonLinks />
 			</div>
 		);
 	}

src/components/pages/signup.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { withRouter, Link } from 'react-router-dom';
+
+//panels
+import SignupPanel from '../panels/signup.jsx';
+
+class Signup extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			signupSent: false,
+			signupMsg: ''
+		}
+
+		//TODO: referral links
+	}
+
+	render() {
+		let Panel;
+
+		if (!this.state.signupSent) {
+			Panel = () => {
+				return (<SignupPanel onSignup={(msg) => this.setState( {signupSent: true, signupMsg: msg} )} />);
+			}
+		} else {
+			Panel = () => {
+				return (<p>{this.state.signupMsg}</p>);
+			}
+		}
+
+		return (
+			<div className='page constrained'>
+				<Panel />
+				<Link to='/' className='centered'>Return Home</Link>
+			</div>
+		);
+	}
+};
+
+export default withRouter(Signup);