Fixed security hole, token now needed to change password

src/components/pages/home.jsx

@@ -13,7 +13,9 @@ class Home extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			changedPassword: false
+			changedPassword: false,
+			signedUp: false,
+			signupMsg: ''
 		};
 	}
 
@@ -27,7 +29,7 @@ class Home extends React.Component {
 
 				if (!this.state.changedPassword) {
 					PasswordChangePanel = () => {
-						return (<PasswordChange onSubmit={() => { this.setState({changedPassword: true}) }} />);
+						return (<PasswordChange onPasswordChange={() => { this.setState({changedPassword: true}) }} />);
 					}
 				} else {
 					PasswordChangePanel = () => {
@@ -48,12 +50,22 @@ class Home extends React.Component {
 				if (this.state.changedPassword) {
 					this.setState({changedPassword: false});
 				}
-				return (
-					<div>
-						<Signup />
-						<Login />
-					</div>
-				);
+
+				if (!this.state.signedUp) {
+					return (
+						<div>
+							<Signup onSignup={(msg) => this.setState( {signedUp: true, signupMsg: msg} )} />
+							<Login />
+						</div>
+					);
+				} else {
+					return (
+						<div>
+							<p>{this.state.signupMsg}</p>
+							<Login />
+						</div>
+					);
+				}
 			};
 		}
 

src/components/panels/password_change.jsx

@@ -55,12 +55,18 @@ class PasswordChange extends React.Component {
 		let xhr = new XMLHttpRequest();
 
 		formData.append('email', this.props.email);
+		formData.append('token', this.props.token);
 
 		xhr.onreadystatechange = () => {
 			if (xhr.readyState === 4) {
 				if (xhr.status === 200) {
 					let json = JSON.parse(xhr.responseText);
 					this.props.sessionChange(json.token);
+
+					//DEBUGGING
+					if (this.props.onPasswordChange) {
+						this.props.onPasswordChange();
+					}
 				}
 
 				else if (xhr.status === 400) {
@@ -72,11 +78,6 @@ class PasswordChange extends React.Component {
 		//send the XHR
 		xhr.open('POST', form.action, true);
 		xhr.send(formData);
-
-		//DEBUGGING
-		if (this.props.onSubmit) {
-			this.props.onSubmit();
-		}
 	}
 
 	validateInput(e) {
@@ -122,7 +123,8 @@ class PasswordChange extends React.Component {
 
 function mapStoreToProps(store) {
 	return {
-		email: store.account.email
+		email: store.account.email,
+		token: store.account.token
 	}
 }
 

src/components/panels/signup.jsx

@@ -26,7 +26,7 @@ export default class Signup extends React.Component {
 					<p>{this.state.warning}</p>
 				</div>
 
-				<form action='/signup' method='post' onSubmit={(e) => this.validateInput(e)}>
+				<form action='/signup' method='post' onSubmit={(e) => this.submit(e)}>
 					<div>
 						<label>Email:</label>
 						<input type='text' name='email' value={this.state.email} onChange={this.updateEmail.bind(this)} />
@@ -53,31 +53,60 @@ export default class Signup extends React.Component {
 		);
 	}
 
-	validateInput(e) {
+	submit(e) {
+		e.preventDefault();
+
+		if (!this.validateInput()) {
+			return;
+		}
+
+		//build the XHR
+		let form = e.target;
+		let formData = new FormData(form);
+		let xhr = new XMLHttpRequest();
+
+		xhr.onreadystatechange = () => {
+			if (xhr.readyState === 4) {
+				if (xhr.status === 200) {
+					if (this.props.onSignup) {
+						this.props.onSignup(xhr.responseText);
+					}
+				}
+
+				else if (xhr.status === 400) {
+					this.setWarning(xhr.responseText);
+				}
+			}
+		};
+
+		//send the XHR
+		xhr.open('POST', form.action, true);
+		xhr.send(formData);
+	}
+
+	validateInput() {
 		if (!validateEmail(this.state.email)) {
-			e.preventDefault();
 			this.setWarning('Invalid Email');
+			return false;
 		}
-
-		else if (this.state.username.length < 4) {
-			e.preventDefault();
+		if (this.state.username.length < 4) {
 			this.setWarning('Minimum username length is 4 characters');
+			return false;
 		}
-
-		else if (this.state.username.length > 100) {
-			e.preventDefault();
+		if (this.state.username.length > 100) {
 			this.setWarning('Maximum username length is 100 characters');
+			return false;
 		}
-
-		else if (this.state.password.length < 8) {
-			e.preventDefault();
+		if (this.state.password.length < 8) {
 			this.setWarning('Minimum password length is 8 characters');
+			return false;
+		}
+		if (this.state.password !== this.state.retype) {
+			this.setWarning('Passwords do not match');
+			return false;
 		}
 
-		else if (this.state.password !== this.state.retype) {
-			e.preventDefault();
-			this.setWarning('Passwords do not match');
-		}
+		return true;
 	}
 
 	setWarning(s) {