Broke up the home page

public/styles/shared.css

@@ -150,8 +150,8 @@ footer {
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-start;
-	min-width: 320px;
+	min-width: 160px;
-	width: 320px;
+	width: 160px;
 }
 
 @media screen and (max-width: 480px) {
@@ -189,6 +189,18 @@ footer {
 	}
 }
 
+.constrained {
+	align-self: center;
+	max-width: 320px;
+}
+
+@media screen and (max-width: 480px) {
+	.constrained {
+		align-self: stretch;
+		max-width: none;
+	}
+}
+
 /* main panel */
 .mainPanel {
 	margin-left: 30px;

server/accounts.js

@@ -257,9 +257,10 @@ const passwordChangeRequest = (connection) => (req, res) => {
 
 								//send json containing the account info
 								res.status(200).json({
-									token: rand
+									token: rand,
+									msg: log('Password changed!', fields.email)
 								});
-								log('Password changed', fields.email);
+								res.end();
 							});
 						});
 					});

src/components/app.jsx

@@ -3,9 +3,15 @@ import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
 //include pages
 import Home from './pages/home.jsx';
+import Signup from './pages/signup.jsx';
+import Login from './pages/login.jsx';
+import PasswordChange from './pages/password_change.jsx';
+import PasswordRecover from './pages/password_recover.jsx';
+import PasswordReset from './pages/password_reset.jsx';
+
 import Profile from './pages/profile.jsx';
 import Ladder from './pages/ladder.jsx';
-import PasswordReset from './pages/password_reset.jsx'
+
 import PageNotFound from './pages/page_not_found.jsx';
 
 //other stuff
@@ -24,9 +30,15 @@ export default class App extends React.Component {
 				<BrowserRouter>
 					<Switch>
 						<Route exact path='/' component={Home} />
+						<Route path='/signup' component={Signup} />
+						<Route path='/login' component={Login} />
+						<Route path='/passwordchange' component={PasswordChange} />
+						<Route path='/passwordrecover' component={PasswordRecover} />
+						<Route path='/passwordreset' component={PasswordReset} />
+
 						<Route path='/profile' component={Profile} />
 						<Route path='/ladder' component={Ladder} />
-						<Route path='/passwordreset' component={PasswordReset} />
+
 						<Route path='*' component={PageNotFound} />
 					</Switch>
 				</BrowserRouter>

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) {
+		if (this.props.id) { //logged in
-			SidePanel = this.LoggedInSidePanel.bind(this);
+			SidePanel = () => {
-		} else {
+				return (
-			SidePanel = this.LoggedOutSidePanel.bind(this);
+					<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,
+		id: store.account.id
-		token: store.account.token
 	}
 }
 

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);

src/components/panels/common_links.jsx

@@ -24,7 +24,7 @@ class CommonLinks extends React.Component {
 		//disable the profile link when logged out
 		let ProfileLink;
 		if (this.props.loggedIn) {
-			ProfileLink = () => <p>Go to <Link to='/profile' onClick={this.props.onClickProfile}>your profile</Link></p>;
+			ProfileLink = () => <p><Link to='/profile' onClick={this.props.onClickProfile}>Your Profile</Link></p>;
 		} else {
 			ProfileLink = () => null;
 		}
@@ -40,9 +40,10 @@ class CommonLinks extends React.Component {
 
 		return (
 			<div className='panel'>
-				<p>Return <Link to='/' onClick={this.props.onClickHome}>home</Link></p>
+				<p><Link to='/' onClick={this.props.onClickHome}>Return Home</Link></p>
 				<ProfileLink />
-				<p>Go to <Link to='/ladder' onClick={this.props.onClickLadder}>the game ladder</Link></p>
+				<p><Link to='/ladder' onClick={this.props.onClickLadder}>Game Ladder</Link></p>
+				<p><Link to='/passwordchange' onClick={this.props.onClickLadder}>Change Password</Link></p>
 
 				<Extra />
 

src/components/panels/login.jsx

@@ -75,6 +75,8 @@ class Login extends React.Component {
 		//send the XHR
 		xhr.open('POST', form.action, true);
 		xhr.send(formData);
+
+		this.clearInput();
 	}
 
 	validateInput(e) {

src/components/panels/password_change.jsx

@@ -65,7 +65,7 @@ class PasswordChange extends React.Component {
 
 					//DEBUGGING
 					if (this.props.onPasswordChange) {
-						this.props.onPasswordChange();
+						this.props.onPasswordChange(json.msg);
 					}
 				}
 

src/components/panels/signup.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { validateEmail } from '../../../common/utilities.js';
+import PropTypes from 'prop-types';
 
-export default class Signup extends React.Component {
+class Signup extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
@@ -70,6 +71,7 @@ export default class Signup extends React.Component {
 				if (xhr.status === 200) {
 					if (this.props.onSignup) {
 						this.props.onSignup(xhr.responseText);
+						console.log('trying to...');
 					}
 				}
 
@@ -151,3 +153,9 @@ export default class Signup extends React.Component {
 		});
 	}
 }
+
+Signup.propTypes = {
+	onSignup: PropTypes.func
+};
+
+export default Signup;