Added privacy settings page

src/components/app.jsx

@@ -80,7 +80,9 @@ export default class App extends React.Component {
 						<LazyRoute path='/news' component={() => import('./pages/news_index.jsx')} />
 						<LazyRoute path='/rules' component={() => import('./pages/rules.jsx')} />
 						<LazyRoute path='/statistics' component={() => import('./pages/statistics.jsx')} />
+
 						<LazyRoute path='/privacypolicy' component={() => import('./pages/privacy_policy.jsx')} />
+						<LazyRoute path='/privacysettings' component={() => import('./pages/privacy_settings.jsx')} />
 
 						<LazyRoute path='*' component={() => import('./pages/page_not_found.jsx')} />
 					</Switch>

src/components/pages/privacy_settings.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+//panels
+import CommonLinks from '../panels/common_links.jsx';
+import PrivacySettingsPanel from '../panels/privacy_settings.jsx';
+
+class PrivacySettings extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			message: '',
+			warning: '' //TODO: unified warning?
+		};
+	}
+
+	componentDidMount() {
+		if (!this.props.loggedIn) {
+			this.props.history.replace('/login');
+		}
+	}
+
+	render() {
+		let warningStyle = {
+			display: this.state.warning.length > 0 ? 'flex' : 'none'
+		};
+
+		let Panel;
+
+		if (this.state.message) {
+			Panel = () => <p className='centered'>{this.state.message}</p>
+		} else {
+			Panel = () => <PrivacySettingsPanel id={this.props.id} token={this.props.token} onSuccess={(msg) => this.setState({message: msg})} setWarning={this.setWarning.bind(this)} />;
+		}
+
+		return (
+			<div className='page'>
+				<div className='sidePanelPage'>
+					<div className='sidePanel'>
+						<CommonLinks />
+					</div>
+
+					<div className='mainPanel'>
+						<div className='warning' style={warningStyle}>
+							<p>{this.state.warning}</p>
+						</div>
+
+						<h1 className='centered'>Privacy Settings</h1>
+						<Panel />
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	setWarning(s) {
+		this.setState({ warning: s });
+	}
+};
+
+PrivacySettings.propTypes = {
+	loggedIn: PropTypes.bool.isRequired,
+	id: PropTypes.number.isRequired,
+	token: PropTypes.number.isRequired
+};
+
+const mapStoreToProps = (store) => {
+	return {
+		loggedIn: store.account.id !== 0,
+		id: store.account.id,
+		token: store.account.token
+	};
+};
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		//
+	};
+};
+
+PrivacySettings = connect(mapStoreToProps, mapDispatchToProps)(PrivacySettings);
+
+
+export default PrivacySettings;

src/components/panels/common_links.jsx

@@ -39,6 +39,7 @@ class CommonLinks extends React.Component {
 					<p className='mobile centered'><Link to='/patronlist' onClick={this.props.onClickPatronList}>Patron List</Link></p>
 					<p className='mobile centered'><Link to='/rules' onClick={this.props.onClickRules}>Rules</Link></p>
 					<p className='mobile centered'><Link to='/statistics' onClick={this.props.onClickStatistics}>Game Stats</Link></p>
+					<p className='mobile centered'><Link to='/privacysettings' onClick={this.props.onClickPrivacySettings}>Privacy Settings</Link></p>
 
 					<Extra />
 
@@ -80,7 +81,8 @@ CommonLinks.propTypes = {
 	onClickTaskList: PropTypes.func,
 	onClickPatronList: PropTypes.func,
 	onClickRules: PropTypes.func,
-	onClickStatistics: PropTypes.func
+	onClickStatistics: PropTypes.func,
+	onClickPrivacySettings: PropTypes.func
 };
 
 function mapStoreToProps(store) {

src/components/panels/privacy_settings.jsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Signup extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			promotions: false
+		};
+
+		this.sendRequest('/privacysettingsrequest');
+	}
+
+	render() {
+		return (
+			<div className='panel'>
+				<form className='table noCollapse' action='/privacysettingsupdaterequest' method='post' onSubmit={this.submit.bind(this)}>
+					<hr />
+					<div className='break' />
+
+					<div className='row'>
+						<label className='col' htmlFor='promotions'>Allow Emails:</label>
+						<input className='col' id='promotions' type='checkbox' name='promotions' checked={this.state.promotions} onChange={this.updatePromotions.bind(this)} />
+						<div className='col double mobile hide' />
+					</div>
+
+					<div className='break' />
+
+					<div className='row'>
+						<button className='col' type='submit'>Update Privacy Settings</button>
+						<div className='col mobile hide' />
+						<div className='col double mobile hide' />
+					</div>
+				</form>
+			</div>
+		);
+	}
+
+	//TODO: Fix this copy/pasted crap
+	//gameplay functions
+	sendRequest(url, args = {}) { //send a unified request, using my credentials
+		//build the XHR
+		let xhr = new XMLHttpRequest();
+		xhr.open('POST', url, true);
+
+		xhr.onreadystatechange = () => {
+			if (xhr.readyState === 4) {
+				if (xhr.status === 200) {
+					let json = JSON.parse(xhr.responseText);
+
+					this.setState({
+						promotions: json.promotions
+					});
+				}
+				else if (xhr.status === 400) {
+					this.setWarning(xhr.responseText);
+				}
+			}
+		};
+
+		xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+		xhr.send(JSON.stringify({
+			id: this.props.id,
+			token: this.props.token,
+			...args
+		}));
+	}
+
+	submit(e) {
+		e.preventDefault();
+
+		//build the XHR
+		let form = e.target;
+		let formData = new FormData(form);
+
+		formData.append('id', this.props.id);
+		formData.append('token', this.props.token);
+
+		let xhr = new XMLHttpRequest();
+
+		xhr.onreadystatechange = () => {
+			if (xhr.readyState === 4) {
+				if (xhr.status === 200) {
+					let json = JSON.parse(xhr.responseText);
+
+					if (this.props.onSuccess) {
+						this.props.onSuccess(json.msg);
+					}
+				}
+
+				else if (xhr.status === 400 && this.props.setWarning) {
+					this.props.setWarning(xhr.responseText);
+				}
+			}
+		};
+
+		//send the XHR
+		xhr.open('POST', form.action, true);
+		xhr.send(formData);
+
+		this.clearInput();
+	}
+
+	clearInput() {
+		this.setState({ promotions: false });
+	}
+
+	updatePromotions(evt) {
+		this.setState({ promotions: !this.state.promotions });
+	}
+};
+
+Signup.propTypes = {
+	id: PropTypes.number.isRequired,
+	token: PropTypes.number.isRequired,
+
+	setWarning: PropTypes.func,
+	onSuccess: PropTypes.func
+};
+
+export default Signup;