Addressed #34

Merge remote-tracking branch 'refs/remotes/origin/main'
Updated dependencies, addressed #33
2022-05-30 06:16:10 +01:00 · 2022-05-30 06:10:20 +01:00 · 2022-05-30 06:10:01 +01:00 · 2022-02-13 07:49:49 +11:00 · 2022-01-09 15:02:06 +00:00 · 2022-01-09 06:39:13 +00:00
53 changed files with 6959 additions and 11083 deletions
@@ -1,6 +1,6 @@
 WEB_PORT=3000
-DB_HOSTNAME=database
+DB_HOSTNAME=localhost
 DB_DATABASE=template
 DB_USERNAME=template
 DB_PASSWORD=pikachu
@@ -0,0 +1,5 @@
 # These are supported funding model platforms
 patreon: krgamestudios
 ko_fi: krgamestudios
 custom: ["https://www.paypal.com/donate/?hosted_button_id=73Q82T2ZHV8AA"]
@@ -109,6 +109,7 @@ public/*.js
 public/*.css
 public/*.map
 public/*.gz
 public/*.txt
 letsencrypt/
 mysql/
@@ -1,6 +1,8 @@
 # MERN-template
-A website template using the MERN stack. The primary technology involved is:
+A website template using the MERN stack. It is geared towards Persistent Browser Based Games (think neopets), but is flexible enough for a number of different uses.
 The primary technology involved is:
 * React
 * Nodejs
@@ -27,6 +29,7 @@ A clean install is this easy:
 ```
 git clone https://github.com/krgamestudios/MERN-template.git
 cd MERN-template
 node configure-script.js
 docker-compose up --build
 ```
@@ -53,6 +56,7 @@ To set up this template in development mode:
 	- Account deletion
 	- Password management
 	- JSON web token authentication
 	- Optional post validation hook
 - Fully Featured News Blog (as a microservice)
 	- Publish, edit or delete articles as needed
 	- Secured via admin panel
@@ -72,6 +76,8 @@ To set up this template in development mode:
 - Full documentation
 	- Modding tutorials
 - Fully Featured News Blog (as a microservice)
 	- Individual pages for news articles
 # Coming Eventually
@@ -83,7 +89,6 @@ To set up this template in development mode:
 	- Private messaging
 	- Broadcasting to all channels
 	- Badges next to usernames
 - Better compression for client files
 - Backend for leaderboards (modding tutorial?)
 - Backend for energy systems (modding tutorial?)
- Backend for items, shops, trading and currency
+- Backend for items, shops, trading and currency (modding tutorial?)
@@ -4,8 +4,8 @@ import 'regenerator-runtime/runtime';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './components/app';
+import App from './pages/app';
-import TokenProvider from './components/utilities/token-provider';
+import TokenProvider from './pages/utilities/token-provider';
 ReactDOM.render(
 	<TokenProvider>
@@ -1,46 +0,0 @@
 //react
 import React, { useContext } from 'react';
 import { BrowserRouter, Switch } from 'react-router-dom';
 import { TokenContext } from './utilities/token-provider';
 //library components
 import LazyRoute from './utilities/lazy-route';
 import Markdown from './panels/markdown';
 //styling
 //import a styling template here
 //common components
 import Header from './panels/header';
 import Footer from './panels/footer';
 import PopupChat from './panels/popup-chat';
 const App = props => {
 	const authTokens = useContext(TokenContext);
 	//default render
 	return (
 		<BrowserRouter>
 				<Header />
 				<Switch>
 					<LazyRoute exact path='/' component={() => import('./pages/homepage')} />
 					<LazyRoute path='/signup' component={() => import('./pages/signup')} />
 					<LazyRoute path='/login' component={() => import('./pages/login')} />
 					<LazyRoute path='/account' component={() => import('./pages/account')} />
 					<LazyRoute path='/admin' component={() => import('./pages/admin')} />
 					<LazyRoute path='/mod' component={() => import('./pages/mod')} />
 					<LazyRoute path='/privacypolicy' component={async () => () => <Markdown content={require('../markdown/privacy-policy.md').default} />} />
 					<LazyRoute path='/credits' component={async () => () => <Markdown content={require('../markdown/credits.md').default} />} />
 					<LazyRoute path='*' component={() => import('./pages/not-found')} />
 				</Switch>
 				{ authTokens.accessToken ? <PopupChat /> : <></> }
 				<Footer />
 		</BrowserRouter>
 	);
 };
 export default App;
@@ -1,105 +0,0 @@
 import React, { useEffect, useContext, useRef } from 'react';
 import { Redirect } from 'react-router-dom';
 import { TokenContext } from '../utilities/token-provider';
 import DeleteAccount from '../panels/delete-account';
 const Account = props => {
 	//context
 	const authTokens = useContext(TokenContext);
 	//misplaced?
 	if (!authTokens.accessToken) {
 		return <Redirect to='/' />;
 	}
 	//refs
 	const passwordRef = useRef();
 	const retypeRef = useRef();
 	const contactRef = useRef();
 	//grab the user's info
 	useEffect(() => {
 		authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/account`, {
 			method: 'GET',
 			headers: {
 				'Access-Control-Allow-Origin': '*'
 			}
 		})
 			.then(blob => blob.json())
 			.then(json => contactRef.current.checked = json.contact)
 			.catch(e => console.error(e))
 		;
 	}, []);
 	//render the thing
 	return (
 		<div className='page'>
 			<h1 className='centered'>Account</h1>
 			<form className='constricted' onSubmit={async evt => {
 				evt.preventDefault();
 				const [err] = await update(passwordRef.current.value, retypeRef.current.value, contactRef.current.checked, authTokens.tokenFetch);
 				if (err) {
 					alert(err);
 					return;
 				}
 				alert('Details updated');
 				passwordRef.current.value = retypeRef.current.value = '';
 			}}>
 				<div>
 					<div>
 						<label htmlFor='password'>Change Password:</label> 
 						<input type='password' name='password' ref={passwordRef} />
 					</div>
 					<div>
 						<label htmlFor='retype'>Retype Password:</label> 
 						<input type='password' name='retype' ref={retypeRef} />
 					</div>
 					<div>
 						<label htmlFor='contact'>Allow Promotional Emails:</label>
 						<input type='checkbox' name='contact' ref={contactRef} />
 					</div>
 				</div>
 				<button type='submit'>Update Information</button>
 			</form>
 			<DeleteAccount className='constricted' />
 		</div>
 	);
 };
 const update = async (password, retype, contact, tokenFetch) => {
 	if (password != retype) {
 		return ['Passwords do not match'];
 	}
 	if (password && password.length < 8) {
 		return ['Password is too short'];
 	}
 	const result = await tokenFetch(`${process.env.AUTH_URI}/auth/account`, {
 		method: 'PATCH',
 		headers: {
 			'Access-Control-Allow-Origin': '*',
 			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
 			password: password ? password : null,
 			contact
 		})
 	});
 	if (!result.ok) {
 		return [`${await result.status}: ${await result.text()}`];
 	} else {
 		return [null];
 	}
 }
 export default Account;
@@ -1,32 +0,0 @@
 import React, { useContext } from 'react';
 import { Redirect } from 'react-router-dom';
 import { TokenContext } from '../utilities/token-provider';
 import NewsPublisher from '../panels/news-publisher';
 import NewsEditor from '../panels/news-editor';
 import GrantAdmin from '../panels/grant-admin';
 import GrantMod from '../panels/grant-mod';
 const Admin = props => {
 	//context
 	const authTokens = useContext(TokenContext);
 	//misplaced? (admin only)
 	if (!authTokens.accessToken || !authTokens.getPayload().admin) {
 		return <Redirect to='/' />;
 	}
 	return (
 		<div className='page'>
 			<h1 className='centered'>Administration Tools</h1>
 			<NewsPublisher />
 			<NewsEditor />
 			<GrantAdmin />
 			<GrantMod />
 		</div>
 	);
 };
 export default Admin;
@@ -1,14 +0,0 @@
 import React from 'react';
 import NewsFeed from '../panels/news-feed';
 const HomePage = props => {
 	return (
 		<div className='page'>
 			<p>This is the MERN template homepage.</p>
 			<NewsFeed />
 		</div>
 	);
 };
 export default HomePage;
@@ -1,27 +0,0 @@
 import React, { useContext } from 'react';
 import { Redirect } from 'react-router-dom';
 import { TokenContext } from '../utilities/token-provider';
 import ChatReports from '../panels/chat-reports';
 import BanUser from '../panels/ban-user';
 const Mod = props => {
 	//context
 	const authTokens = useContext(TokenContext);
 	//misplaced? (admin only)
 	if (!authTokens.accessToken || !(authTokens.getPayload().admin || authTokens.getPayload().mod)) {
 		return <Redirect to='/' />;
 	}
 	return (
 		<div className='page'>
 			<h1 className='centered'>Moderation Tools</h1>
 			<ChatReports />
 			<BanUser />
 		</div>
 	);
 };
 export default Mod;
@@ -1,11 +0,0 @@
 import React from 'react';
 const NotFound = props => {
 	return (
 		<div className='page'>
 			<h1 className='middle centered'>Page Not Found</h1>
 		</div>
 	);
 };
 export default NotFound;
@@ -1,129 +0,0 @@
 import React, { useContext, useRef } from 'react';
 import { Redirect } from 'react-router-dom';
 import { TokenContext } from '../utilities/token-provider';
 //utilities
 const validateEmail = require('../../../common/utilities/validate-email');
 const validateUsername = require('../../../common/utilities/validate-username');
 const SignUp = props => {
 	//context
 	const authTokens = useContext(TokenContext);
 	//misplaced?
 	if (authTokens.accessToken) {
 		return <Redirect to='/' />;
 	}
 	//refs
 	const emailRef = useRef();
 	const usernameRef = useRef();
 	const passwordRef = useRef();
 	const retypeRef = useRef();
 	const contactRef = useRef();
 	return (
 		<div className='page'>
 			<h1 className='centered'>Signup</h1>
 			<form className='constricted' onSubmit={
 				async evt => { //on submit
 					evt.preventDefault();
 					const [result, redirect] = await handleSubmit(emailRef.current.value, usernameRef.current.value, passwordRef.current.value, retypeRef.current.value, contactRef.current.checked);
 					if (result) {
 						alert(result);
 					}
 					//redirect
 					if (redirect) {
 						props.history.push('/');
 					}
 				}
 			}>
 				<div>
 					<label htmlFor='email'>Email:</label>
 					<input type='email' name='email' ref={emailRef} />
 				</div>
 				<div>
 					<label htmlFor='username'>Username:</label>
 					<input type='text' name='username' ref={usernameRef} />
 				</div>
 				<div>
 					<label htmlFor='password'>Password:</label>
 					<input type='password' name='password' ref={passwordRef} />
 				</div>
 				<div>
 					<label htmlFor='retype'>Retype Password:</label>
 					<input type='password' name='retype' ref={retypeRef} />
 				</div>
 				<div>
 					<label htmlFor='contact'>Allow Promotional Emails:</label>
 					<input type='checkbox' name='contact' ref={contactRef} />
 				</div>
 				<button type='submit'>Signup</button>
 			</form>
 		</div>
 	);
 };
 const handleSubmit = async (email, username, password, retype, contact) => {
 	email = email.trim();
 	username = username.trim();
 	const err = handleValidation(email, username, password, retype);
 	if (err) {
 		return [err];
 	}
 	//send to the auth server
 	const result = await fetch(`${process.env.AUTH_URI}/auth/signup`, {
 		method: 'POST',
 		headers: {
 			'Content-Type': 'application/json',
 			'Access-Control-Allow-Origin': '*'
 		},
 		body: JSON.stringify({
 			email,
 			username,
 			password,
 			contact
 		})
 	});
 	if (!result.ok) {
 		const err = `${result.status}: ${await result.text()}`;
 		console.error(err);
 		return [err, false];
 	}
 	return [await result.text(), true];
 };
 //returns an error message, or null on success
 const handleValidation = (email, username, password, retype) => {
 	if (!validateEmail(email)) {
 		return 'invalid email';
 	}
 	if (!validateUsername(username)) {
 		return 'invalid username';
 	}
 	if (password.length < 8) {
 		return 'invalid password (Must be at least 8 characters long)';
 	}
 	if (password !== retype) {
 		return 'passwords do not match';
 	}
 	return null;
 };
 export default SignUp;
@@ -1,67 +0,0 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { TokenContext } from '../utilities/token-provider';
 import dateFormat from 'dateformat';
 const ChatReports = props => {
 	const [reports, setReports] = useState([]);
 	const authTokens = useContext(TokenContext);
 	useEffect(async () => {
 		const result = await authTokens.tokenFetch(`${process.env.CHAT_URI}/admin/reports`, {
 			method: 'GET',
 			headers: {
 				'Access-Control-Allow-Origin': '*'
 			}
 		});
 		if (!result.ok) {
 			const err = `${result.status}: ${await result.text()}`;
 			console.log(err);
 			alert(err);
 		} else {
 			setReports(await result.json());
 		}
 	}, []);
 	return (
 		<table>
 			<thead>
 				<tr>
 					<th>Date</th> 
 					<th>Username</th>
 					<th>Room Name</th>
 					<th>Content</th>
 					<th>Reported By</th>
 				</tr>
 			</thead>
 			<tbody>
 				{reports.map((report, index) => (
 					<tr key={index}>
 						<td>{dateFormat(report.chatlog.createdAt, 'yyyy-mm-dd, H:MM:ss')}</td>
 						<td>{report.chatlog.username}</td>
 						<td>{report.chatlog.room}</td>
 						<td>{report.chatlog.text}</td>
 						<td>{report.reporter.join(', ')}</td>
 						<td><button onClick={() => deleteReportsFor(report.chatlogId, authTokens.tokenFetch, setReports)}>Delete</button></td>
 					</tr>
 				))}
 			</tbody>
 		</table>
 	);
 };
 const deleteReportsFor = (chatlogId, tokenFetch, setReports) => {
 	tokenFetch(`${process.env.CHAT_URI}/admin/reports`, {
 		method: 'DELETE',
 		headers: {
 			'Content-Type': 'application/json',
 			'Access-Control-Allow-Origin': '*'
 		},
 		body: JSON.stringify({ chatlogId })
 	});
 	setReports(reports => reports.filter(report => report.chatlogId != chatlogId));
 };
 export default ChatReports;
@@ -1,12 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 const Footer = () => {
 	return (
 		<footer>
 			<p className='centered'>MERN template designed by <a href='https://krgamestudios.com'>Kayne Ruse, KR Game Studios</a> - <Link to='/privacypolicy'>Privacy Policy</Link> - <Link to='/credits'>Credits</Link></p>
 		</footer>
 	);
 };
 export default Footer;
@@ -1,76 +0,0 @@
 import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
 import { TokenContext } from '../utilities/token-provider';
 const Visitor = () => {
 	return (
 		<div>
 			<Link to='/signup'>Sign Up</Link>
 			<span> - </span>
 			<Link to='/login'>Log In</Link>
 		</div>
 	);
 };
 const Member = () => {
 	const authTokens = useContext(TokenContext);
 	return (
 		<div>
 			<Link to='/account'>Account</Link>
 			<span> - </span>
 			{ authTokens.getPayload().admin ?
 				<span>
 					<Link to='/admin'>Admin</Link>
 					<span> - </span>
 				</span>:
 				<span />
 			}
 			{ authTokens.getPayload().mod ?
 				<span>
 					<Link to='/mod'>Moderation</Link>
 					<span> - </span>
 				</span>:
 				<span />
 			}
 			{ /* Logout button logs you out of the server too */ }
 			<Link to='/' onClick={async () => {
 				const result = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/logout`, { //NOTE: this gets overwritten as a bugfix
 					method: 'DELETE',
 					headers: {
 						'Content-Type': 'application/json',
 						'Access-Control-Allow-Origin': '*'
 					},
 					body: JSON.stringify({
 						token: authTokens.refreshToken
 					})
 				});
 				//any problems?
 				if (!result.ok) {
 					console.error(await result.text());
 				} else {
 					authTokens.setAccessToken('');
 					authTokens.setRefreshToken('');
 				}
 			}}>Log out</Link>
 		</div>
 	);
 };
 const Header = () => {
 	const authTokens = useContext(TokenContext);
 	return (
 		<header>
 			<h1><Link to='/'>MERN Template</Link></h1>
 			{ authTokens.accessToken ? <Member /> : <Visitor /> }
 		</header>
 	);
 };
 export default Header;
@@ -1,34 +0,0 @@
 import React, { useState, useEffect } from 'react';
 import ReactMarkdown from 'react-markdown/with-html';
 const Markdown = props => {
 	//content?
 	let [contentHook, setContentHook] = useState(null);
 	//check arguments
 	if (!props.content) {
 		if (!props.uri) {
 			throw 'Markdown requires either content or uri prop';
 		}
 		//once
 		useEffect(() => {
 			fetch(props.uri)
 				.then(blob => blob.text())
 				.then(blob => setContentHook(blob))
 				.catch(e => console.error(e))
 			;
 		}, []);
 	} else
 	//assume raw info
 	if (!contentHook) {
 		setContentHook(props.content);
 	}
 	return (
 		<ReactMarkdown escapeHtml={false} props={{...props}}>{contentHook}</ReactMarkdown>
 	);
 };
 export default Markdown;
@@ -1,6 +0,0 @@
 # Credits
 MERN Template developed by Kayne Ruse, KR Game Studios
 [https://github.com/krgamestudios/MERN-template](https://github.com/krgamestudios/MERN-template)
@@ -1,2 +0,0 @@
 # Privacy Policy
@@ -0,0 +1,103 @@
 import React, { useEffect, useContext, useRef } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import ApplyToBody from '../utilities/apply-to-body';
 import { TokenContext } from '../utilities/token-provider';
 import DeleteAccount from './panels/delete-account';
 const Account = props => {
 	//context
 	const authTokens = useContext(TokenContext);
 	//misplaced?
 	if (!authTokens.accessToken) {
 		return <Redirect to='/' />;
 	}
 	//refs
 	const passwordRef = useRef();
 	const retypeRef = useRef();
 	const contactRef = useRef();
 	//grab the user's info
 	useEffect(() => {
 		authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/account`, {
 			method: 'GET'
 		})
 			.then(blob => blob.json())
 			.then(json => contactRef.current.checked = json.contact)
 			.catch(e => console.error(e))
 		;
 	}, []);
 	//render the thing
 	return (
 		<>
 			<ApplyToBody className='dashboard' />
 			<div className='page'>
 				<div className='central panel centered middle'>
 					<div className='panel'>
 						<h1 className='text centered'>Account</h1>
 						<div className='panel'>
 							<form className='constrained' onSubmit={async evt => {
 								evt.preventDefault();
 								const [err] = await update(passwordRef.current.value, retypeRef.current.value, contactRef.current.checked, authTokens.tokenFetch);
 								if (err) {
 									alert(err);
 									return;
 								}
 								alert('Details updated');
 								passwordRef.current.value = retypeRef.current.value = '';
 							}}>
 								<input type='password' name='password' placeholder='New Password' ref={passwordRef} />
 								<input type='password' name='retype'  placeholder='Retype New Password' ref={retypeRef} />
 								<span>
 									<label htmlFor='contact'>Allow Promotional Emails:</label>
 									<input type='checkbox' name='contact' ref={contactRef} />
 								</span>
 								<button type='submit'>Update Information</button>
 							</form>
 							<DeleteAccount />
 						</div>
 						<Link to='/' className='text centered'>Return Home</Link>\
 					</div>
 				</div>
 			</div>
 		</>
 	);
 };
 const update = async (password, retype, contact, tokenFetch) => {
 	if (password != retype) {
 		return ['Passwords do not match'];
 	}
 	if (password && password.length < 8) {
 		return ['Password is too short'];
 	}
 	const result = await tokenFetch(`${process.env.AUTH_URI}/auth/account`, {
 		method: 'PATCH',
 		headers: {
 			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
 			password: password ? password : null,
 			contact
 		})
 	});
 	if (!result.ok) {
 		return [`${await result.status}: ${await result.text()}`];
 	} else {
 		return [null];
 	}
 }
 export default Account;
@@ -1,11 +1,13 @@
 import React, { useContext, useRef } from 'react';
-import { Redirect } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
 import ApplyToBody from '../utilities/apply-to-body';
 import { TokenContext } from '../utilities/token-provider';
 const validateEmail = require('../../../common/utilities/validate-email');
-const LogIn = props => {
+const Login = props => {
 	//context
 	const authTokens = useContext(TokenContext);
@@ -19,39 +21,40 @@ const LogIn = props => {
 	const passwordRef = useRef();
 	return (
-		<div className='page'>
+		<>
-			<h1 className='centered'>Login</h1>
+			<ApplyToBody className='dashboard' />
-			<form className='constricted' onSubmit={
+			<div className='page'>
-				async evt => {
+				<div className='central panel centered middle'>
-					//on submit
+					<div className='panel'>
-					evt.preventDefault();
+						<h1 className='text centered'>Login</h1>
-					const [err, newTokens] = await handleSubmit(emailRef.current.value, passwordRef.current.value);
+						<form className='constrained' onSubmit={
-					if (err) {
+							async evt => {
-						alert(err);
+								//on submit
-					}
+								evt.preventDefault();
 								const [err, newTokens] = await handleSubmit(emailRef.current.value, passwordRef.current.value);
 								if (err) {
 									alert(err);
 								}
-					//save auth tokens and redirect
+								//save auth tokens and redirect
-					if (newTokens) {
+								if (newTokens) {
-						authTokens.setAccessToken(newTokens.accessToken);
+									authTokens.setAccessToken(newTokens.accessToken);
-						authTokens.setRefreshToken(newTokens.refreshToken);
+									authTokens.setRefreshToken(newTokens.refreshToken);
-						props.history.push('/');
+									props.history.push('/');
-					}
+								}
-				}
+							}
-			}>
+						}>
-				<div>
+							<input type='email' name='email' placeholder='your@email.com' ref={emailRef} />
-					<label htmlFor="email">Email:</label>
+							<input type='password' name='password' placeholder='********' ref={passwordRef} />
-					<input type="email" name="email" ref={emailRef} />
+							<button type='submit'>Login</button>
 						</form>
 						<Link to='/recover' className='text centered'>Forgot Password?</Link>
 						<Link to='/' className='text centered'>Return Home</Link>
 					</div>
 				</div>
-
+			</div>
-				<div>
+		</>
 					<label htmlFor="password">Password:</label>
 					<input type="password" name="password" ref={passwordRef} />
 				</div>
 				<button type='submit'>Login</button>
 			</form>
 		</div>
 	);
 };
@@ -69,8 +72,7 @@ const handleSubmit = async (email, password) => {
 	const result = await fetch(`${process.env.AUTH_URI}/auth/login`, {
 		method: 'POST',
 		headers: {
-			'Content-Type': 'application/json',
+			'Content-Type': 'application/json'
 			'Access-Control-Allow-Origin': '*'
 		},
 		body: JSON.stringify({
 			email,
@@ -104,4 +106,4 @@ const handleValidation = (email, password) => {
 };
-export default LogIn;
+export default Login;
@@ -1,6 +1,6 @@
 import React, { useState, useContext, useRef } from 'react';
-import { TokenContext } from '../utilities/token-provider';
+import { TokenContext } from '../../utilities/token-provider';
 //DOCS: isolated the delete account button into it's own panel, so it can be easily moved as needed
 const DeleteAccount = props => {
@@ -9,25 +9,27 @@ const DeleteAccount = props => {
 	const passwordRef = useRef();
 	if (!open) {
-		return <button onClick={() => setOpen(true)} className={props.className}>Delete Account</button>
+		return (
 			<button onClick={() => setOpen(true)}>Delete Account</button>
 		);
 	}
 	return (
-		<form className={props.className} onSubmit={async evt => {
+		<div className='panel centered middle'>
-			evt.preventDefault();
+			<h2 className='text centered'>Delete Your Account?</h2>
-			const [err] = await handleSubmit(passwordRef.current.value, authTokens);
+			<form className='constrained' onSubmit={async evt => {
-			if (err) {
+				evt.preventDefault();
-				alert(err);
+				const [err] = await handleSubmit(passwordRef.current.value, authTokens);
-			}
+				if (err) {
-		}}>
+					alert(err);
-			<div>
+				}
-				<label htmlFor="password">Password:</label>
+			}}>
-				<input type="password" name="password" ref={passwordRef} />
+				<input type="password" name="password" placeholder='Password' ref={passwordRef} />
 			</div>
-			<button type='submit'>Delete Account</button>
+				<button type='submit' style={{backgroundColor: 'red'}}>Delete Account</button>
-			<button type='cancel' onClick={() => { passwordRef.current.value = ''; setOpen(false); }}>Cancel</button>
+				<button type='cancel' onClick={() => { passwordRef.current.value = ''; setOpen(false); }}>Cancel</button>
-		</form>
+			</form>
 		</div>
 	);
 };
@@ -36,7 +38,6 @@ const handleSubmit = async (password, authTokens) => {
 	const result = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/account`, {
 		method: 'DELETE',
 		headers: {
 			'Access-Control-Allow-Origin': '*',
 			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
@@ -52,7 +53,6 @@ const handleSubmit = async (password, authTokens) => {
 	const result2 = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/logout`, {
 		method: 'DELETE',
 		headers: {
 			'Access-Control-Allow-Origin': '*',
 			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
@@ -0,0 +1,36 @@
 import React, { useContext, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { TokenContext } from '../../utilities/token-provider';
 //TODO: make this an ACTUAL BUTTON
 const Logout = () => {
 	const authTokens = useContext(TokenContext);
 	return (
 		<>
 			{ /* Logout logs you out of the server too */ }
 			<Link to='/' onClick={async () => {
 				const result = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/logout`, { //NOTE: this gets overwritten as a bugfix
 					method: 'DELETE',
 					headers: {
 						'Content-Type': 'application/json'
 					},
 					body: JSON.stringify({
 						token: authTokens.refreshToken
 					})
 				});
 				//any problems?
 				if (!result.ok) {
 					console.error(await result.text());
 				} else {
 					authTokens.setAccessToken('');
 					authTokens.setRefreshToken('');
 				}
 			}}>Logout</Link>
 		</>
 	);
 };
 export default Logout;
@@ -0,0 +1,94 @@
 import React, { useContext, useRef } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import ApplyToBody from '../utilities/apply-to-body';
 import { TokenContext } from '../utilities/token-provider';
 //utilities
 const validateEmail = require('../../../common/utilities/validate-email');
 const Recover = props => {
 	//context
 	const authTokens = useContext(TokenContext);
 	//misplaced?
 	if (authTokens.accessToken) {
 		return <Redirect to='/' />;
 	}
 	//refs
 	const emailRef = useRef();
 	const recoverRef = useRef();
 	return (
 		<>
 			<ApplyToBody className='dashboard' />
 			<div className='page'>
 				<div className='central panel centered middle'>
 					<h1 className='text centered'>Forgot Password</h1>
 					<form className='constrained' onSubmit={
 						async evt => { //on submit
 							recoverRef.current.disabled = true;
 							evt.preventDefault();
 							const [result, redirect] = await handleSubmit(emailRef.current.value);
 							if (result) {
 								alert(result);
 								recoverRef.current.disabled = false;
 							}
 							//redirect
 							if (redirect) {
 								props.history.push('/');
 							}
 						}
 					}>
 						<input type='email' name='email' placeholder='your@email.com' ref={emailRef} />
 						<button type='submit' ref={recoverRef}>Recover Password</button>
 					</form>
 					<Link to='/' className='text centered'>Return Home</Link>
 				</div>
 			</div>
 		</>
 	);
 };
 const handleSubmit = async (email) => {
 	email = email.trim();
 	const err = handleValidation(email);
 	if (err) {
 		return [err];
 	}
 	//send to the auth server
 	const result = await fetch(`${process.env.AUTH_URI}/auth/recover`, {
 		method: 'POST',
 		headers: {
 			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
 			email
 		})
 	});
 	if (!result.ok) {
 		const err = `${result.status}: ${await result.text()}`;
 		console.error(err);
 		return [err, false];
 	}
 	return [await result.text(), true];
 };
 //returns an error message, or null on success
 const handleValidation = (email) => {
 	if (!validateEmail(email)) {
 		return 'invalid email';
 	}
 	return null;
 };
 export default Recover;
@@ -0,0 +1,85 @@
 import React, { useContext, useRef } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import queryString from 'query-string';
 import ApplyToBody from '../utilities/apply-to-body';
 import { TokenContext } from '../utilities/token-provider';
 const Reset = props => {
 	//context
 	const authTokens = useContext(TokenContext);
 	//query
 	const query = queryString.parse(props.location.search);
 	//misplaced?
 	if (authTokens.accessToken || !query.email || !query.token) {
 		return <Redirect to='/' />;
 	}
 	//refs
 	const passwordRef = useRef();
 	const retypeRef = useRef();
 	//render the thing
 	return (
 		<>
 			<ApplyToBody className='dashboard' />
 			<div className='page'>
 				<div className='central panel centered middle'>
 					<h1 className='text centered'>Reset Password</h1>
 					<form className='constrained' onSubmit={async evt => {
 						evt.preventDefault();
 						const [err, redirect] = await update(passwordRef.current.value, retypeRef.current.value, query);
 						if (err) {
 							alert(err);
 							return;
 						}
 						alert('Details updated'); //TODO: replace with a message from the auth server
 						//redirect
 						if (redirect) {
 							props.history.push('/');
 						}
 					}}>
 						<input type='password' name='password' placeholder='New Password' ref={passwordRef} />
 						<input type='password' name='retype' placeholder='Retype New Password' ref={retypeRef} />
 						<button type='submit'>Update Information</button>
 					</form>
 					<Link to='/' className='text centered'>Return Home</Link>
 				</div>
 			</div>
 		</>
 	);
 };
 const update = async (password, retype, query) => {
 	if (password != retype) {
 		return ['Passwords do not match'];
 	}
 	if (password && password.length < 8) {
 		return ['Password is too short'];
 	}
 	const result = await fetch(`${process.env.AUTH_URI}/auth/reset?email=${query.email}&token=${query.token}`, {
 		method: 'PATCH',
 		headers: {
 			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
 			password: password ? password : null,
 		})
 	});
 	if (!result.ok) {
 		return [`${await result.status}: ${await result.text()}`];
 	} else {
 		return [null, true];
 	}
 }
 export default Reset;
@@ -0,0 +1,126 @@
 import React, { useContext, useRef } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import ApplyToBody from '../utilities/apply-to-body';
 import { TokenContext } from '../utilities/token-provider';
 //utilities
 const validateEmail = require('../../../common/utilities/validate-email');
 const validateUsername = require('../../../common/utilities/validate-username');
 const Signup = props => {
 	//context
 	const authTokens = useContext(TokenContext);
 	//misplaced?
 	if (authTokens.accessToken) {
 		return <Redirect to='/' />;
 	}
 	//refs
 	const emailRef = useRef();
 	const usernameRef = useRef();
 	const passwordRef = useRef();
 	const retypeRef = useRef();
 	const contactRef = useRef();
 	const signupRef = useRef();
 	return (
 		<>
 			<ApplyToBody className='dashboard' />
 			<div className='page'>
 				<div className='central panel centered middle'>
 					<h1 className='text centered'>Signup</h1>
 					<form className='constrained' onSubmit={
 						async evt => { //on submit
 							signupRef.current.disabled = true;
 							evt.preventDefault();
 							const [result, redirect] = await handleSubmit(emailRef.current.value, usernameRef.current.value, passwordRef.current.value, retypeRef.current.value, contactRef.current.checked);
 							if (result) {
 								alert(result);
 								signupRef.current.disabled = false;
 							}
 							//redirect
 							if (redirect) {
 								props.history.push('/');
 							}
 						}
 					}>
 						<input type='email' name='email' placeholder='your@email.com' ref={emailRef} />
 						<input type='text' name='username' placeholder='Username' ref={usernameRef} />
 						<input type='password' name='password' placeholder='********' ref={passwordRef} />
 						<input type='password' name='retype' placeholder='********' ref={retypeRef} />
 						<span>
 							<label htmlFor='contact'>Allow Emails:</label>
 							<input type='checkbox' name='contact' ref={contactRef} defaultChecked='true' />
 						</span>
 						<button type='submit' ref={signupRef}>Signup</button>
 					</form>
 					<Link to='/recover' className='text centered'>Forgot Password?</Link>
 					<Link to='/' className='text centered'>Return Home</Link>
 				</div>
 			</div>
 		</>
 	);
 };
 const handleSubmit = async (email, username, password, retype, contact) => {
 	email = email.trim();
 	username = username.trim();
 	const err = handleValidation(email, username, password, retype);
 	if (err) {
 		return [err];
 	}
 	//send to the auth server
 	const result = await fetch(`${process.env.AUTH_URI}/auth/signup`, {
 		method: 'POST',
 		headers: {
 			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
 			email,
 			username,
 			password,
 			contact
 		})
 	});
 	if (!result.ok) {
 		const err = `${result.status}: ${await result.text()}`;
 		console.error(err);
 		return [err, false];
 	}
 	return [await result.text(), true];
 };
 //returns an error message, or null on success
 const handleValidation = (email, username, password, retype) => {
 	if (!validateEmail(email)) {
 		return 'invalid email';
 	}
 	if (!validateUsername(username)) {
 		return 'invalid username';
 	}
 	if (password.length < 8) {
 		return 'invalid password (Must be at least 8 characters long)';
 	}
 	if (password !== retype) {
 		return 'passwords do not match';
 	}
 	return null;
 };
 export default Signup;
@@ -0,0 +1,37 @@
 import React, { useContext } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import ApplyToBody from '../utilities/apply-to-body';
 import { TokenContext } from '../utilities/token-provider';
 import GrantAdmin from './panels/grant-admin';
 import GrantMod from './panels/grant-mod';
 const Admin = props => {
 	//context
 	const authTokens = useContext(TokenContext);
 	//misplaced? (admin only)
 	if (!authTokens.accessToken || !authTokens.getPayload().admin) {
 		return <Redirect to='/' />;
 	}
 	return (
 		<>
 			<ApplyToBody className='dashboard' />
 			<div className='page panel'>
 				<div className='central panel'>
 					<h1 className='text centered'>Administration Tools</h1>
 					<br />
 					<GrantAdmin />
 					<br />
 					<GrantMod />
 					<Link to='/' className='text centered'>Return Home</Link>
 				</div>
 			</div>
 		</>
 	);
 };
 export default Admin;
@@ -0,0 +1,43 @@
 import React, { useContext } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import ApplyToBody from '../utilities/apply-to-body';
 import { TokenContext } from '../utilities/token-provider';
 import NewsPublisher from './panels/news-publisher';
 import NewsEditor from './panels/news-editor';
 import ChatReports from './panels/chat-reports';
 import BanUser from './panels/ban-user';
 const Mod = props => {
 	//context
 	const authTokens = useContext(TokenContext);
 	//misplaced? (admin only)
 	if (!authTokens.accessToken || !(authTokens.getPayload().admin || authTokens.getPayload().mod)) {
 		return <Redirect to='/' />;
 	}
 	return (
 		<>
 			<ApplyToBody className='dashboard' />
 			<div className='page panel'>
 				<div className='central panel'>
 					<h1 className='text centered'>Moderation Tools</h1>
 					<NewsPublisher />
 					<br />
 					<NewsEditor />
 					<br />
 					<BanUser />
 					<br />
 					<ChatReports />
 					<Link to='/' className='text centered'>Return Home</Link>
 				</div>
 			</div>
 		</>
 	);
 };
 export default Mod;
@@ -1,6 +1,6 @@
 import React, { useRef, useContext } from 'react';
-import { TokenContext } from '../utilities/token-provider';
+import { TokenContext } from '../../utilities/token-provider';
 const BanUser = props => {
 	//context
@@ -10,13 +10,10 @@ const BanUser = props => {
 	const usernameRef = useRef();
 	return (
-		<div>
+		<div className='panel'>
-			<h2 className='centered'>Permanently Ban User</h2>
+			<h2 className='text centered'>Permanently Ban User</h2>
-			<form>
+			<form className='constrained'>
-				<div>
+				<input type='text' name='username' placeholder='Username' ref={usernameRef} />
 					<label htmlFor='username'>Username:</label>
 					<input type='text' name='username' ref={usernameRef} />
 				</div>
 				<button type='button' onClick={async evt => {
 					evt.preventDefault();
@@ -45,8 +42,7 @@ const handleButtonPress = async (username, tokenFetch) => {
 	const result = await tokenFetch(`${process.env.AUTH_URI}/admin/banuser`, {
 		method: 'POST',
 		headers: {
-			'Content-Type': 'application/json',
+			'Content-Type': 'application/json'
 			'Access-Control-Allow-Origin': '*'
 		},
 		body: JSON.stringify({
 			username
@@ -0,0 +1,65 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { TokenContext } from '../../utilities/token-provider';
 import dateFormat from 'dateformat';
 const ChatReports = props => {
 	const [reports, setReports] = useState([]);
 	const authTokens = useContext(TokenContext);
 	useEffect(async () => {
 		const result = await authTokens.tokenFetch(`${process.env.CHAT_URI}/admin/reports`);
 		if (!result.ok) {
 			const err = `${result.status}: ${await result.text()}`;
 			console.log(err);
 			alert(err);
 		} else {
 			setReports(await result.json());
 		}
 	}, []);
 	return (
 		<div className='panel' style={{minWidth: '100%'}}>
 			<h2 className='text centered'>Chat Reports</h2>
 			<table>
 				<thead>
 					<tr>
 						<th>Date</th>
 						<th>Username</th>
 						<th className='mobile hide'>Room Name</th>
 						<th>Content</th>
 						<th>Reported By</th>
 						<th className='mobile hide'>Delete</th>
 					</tr>
 				</thead>
 				<tbody>
 					{reports.map((report, index) => (
 						<tr key={index}>
 							<td className='text centered'>{dateFormat(report.chatlog.createdAt, 'yyyy-mm-dd, H:MM:ss')}</td>
 							<td className='text centered'>{report.chatlog.username}</td>
 							<td className='text mobile hide centered'>{report.chatlog.room}</td>
 							<td className='text centered'>{report.chatlog.text}</td>
 							<td className='text centered'>{report.reporter.join(', ')}</td>
 							<td className='text mobile hide centered'><button onClick={() => deleteReportsFor(report.chatlogIndex, authTokens.tokenFetch, setReports)}>Delete</button></td>
 						</tr>
 					))}
 				</tbody>
 			</table>
 		</div>
 	);
 };
 const deleteReportsFor = (chatlogIndex, tokenFetch, setReports) => {
 	tokenFetch(`${process.env.CHAT_URI}/admin/reports`, {
 		method: 'DELETE',
 		headers: {
 			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({ chatlogIndex })
 	});
 	setReports(reports => reports.filter(report => report.chatlogIndex != chatlogIndex));
 };
 export default ChatReports;
@@ -1,6 +1,6 @@
 import React, { useRef, useContext } from 'react';
-import { TokenContext } from '../utilities/token-provider';
+import { TokenContext } from '../../utilities/token-provider';
 const GrantAdmin = props => {
 	//context
@@ -10,13 +10,10 @@ const GrantAdmin = props => {
 	const usernameRef = useRef();
 	return (
-		<div>
+		<div className='panel'>
-			<h2 className='centered'>Grant Admin Privileges</h2>
+			<h2 className='text centered'>Grant Admin Privileges</h2>
-			<form>
+			<form className='constrained'>
-				<div>
+				<input type='text' name='username' placeholder='Username' ref={usernameRef} />
 					<label htmlFor='username'>Username:</label>
 					<input type='text' name='username' ref={usernameRef} />
 				</div>
 				<button type='button' onClick={async evt => {
 					evt.preventDefault();
@@ -54,8 +51,7 @@ const handleButtonPress = async (username, tokenFetch, method) => {
 	const result = await tokenFetch(`${process.env.AUTH_URI}/admin/admin`, {
 		method: method,
 		headers: {
-			'Content-Type': 'application/json',
+			'Content-Type': 'application/json'
 			'Access-Control-Allow-Origin': '*'
 		},
 		body: JSON.stringify({
 			username
@@ -1,6 +1,6 @@
 import React, { useRef, useContext } from 'react';
-import { TokenContext } from '../utilities/token-provider';
+import { TokenContext } from '../../utilities/token-provider';
 const GrantMod = props => {
 	//context
@@ -10,13 +10,10 @@ const GrantMod = props => {
 	const usernameRef = useRef();
 	return (
-		<div>
+		<div className='panel'>
-			<h2 className='centered'>Grant Moderation Privileges</h2>
+			<h2 className='text centered'>Grant Moderation Privileges</h2>
-			<form>
+			<form className='constrained'>
-				<div>
+				<input type='text' name='username' placeholder='Username' ref={usernameRef} />
 					<label htmlFor='username'>Username:</label>
 					<input type='text' name='username' ref={usernameRef} />
 				</div>
 				<button type='button' onClick={async evt => {
 					evt.preventDefault();
@@ -54,8 +51,7 @@ const handleButtonPress = async (username, tokenFetch, method) => {
 	const result = await tokenFetch(`${process.env.AUTH_URI}/admin/mod`, {
 		method: method,
 		headers: {
-			'Content-Type': 'application/json',
+			'Content-Type': 'application/json'
 			'Access-Control-Allow-Origin': '*'
 		},
 		body: JSON.stringify({
 			username
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useContext, useRef } from 'react';
-import Select from 'react-dropdown-select';
+import Select from 'react-select';
-import { TokenContext } from '../utilities/token-provider';
+import { TokenContext } from '../../utilities/token-provider';
 const NewsEditor = props => {
 	//context
@@ -21,8 +21,7 @@ const NewsEditor = props => {
 		const result = await fetch(`${process.env.NEWS_URI}/news/metadata?limit=999`, {
 			method: 'GET',
 			headers: {
-				'Content-Type': 'application/json',
+				'Content-Type': 'application/json'
 				'Access-Control-Allow-Origin': '*'
 			},
 		});
@@ -36,38 +35,30 @@ const NewsEditor = props => {
 	}, []);
 	return (
-		<div>
+		<div className='panel'>
-			<h2 className='centered'>News Editor</h2>
+			<h2 className='text centered'>News Editor</h2>
-			<div>
+			<Select
-				<label htmlFor='article'>Article: </label>
+				options={articles.map(article => { return { label: article.title, index: article.index }; })}
-				<Select
+				onChange={async ({index}) => {
-					options={articles.map(article => { return { label: article.title, value: article.index }; })}
+					//fetch this article
-					onChange={async values => {
+					const result = await fetch(`${process.env.NEWS_URI}/news/archive/${index}`);
 						//fetch this article
 						const index = values[0].value;
-						const result = await fetch(`${process.env.NEWS_URI}/news/archive/${index}`, {
+					if (!result.ok) {
-							headers: {
+						const err = `${result.status}: ${await result.text()}`;
-								'Access-Control-Allow-Origin': '*'
+						console.log(err);
-							}
+						alert(err);
-						});
+					} else {
 						const article = await result.json();
 						titleRef.current.value = article.title;
 						authorRef.current.value = article.author;
 						bodyRef.current.value = article.body;
 						setIndex(index);
 				}
 				}}
 				placeholder='Select Article'
 			/>
-						if (!result.ok) {
+			<form className='constrained' onSubmit={async evt => {
 							const err = `${result.status}: ${await result.text()}`;
 							console.log(err);
 							alert(err);
 						} else {
 							const article = await result.json();
 							titleRef.current.value = article.title;
 							authorRef.current.value = article.author;
 							bodyRef.current.value = article.body;
 							setIndex(index);
 						}
 					}}
 				/>
 			</div>
 			<form onSubmit={async evt => {
 				//onSubmit
 				evt.preventDefault();
 				const [err] = await handleSubmit(titleRef.current.value, authorRef.current.value, bodyRef.current.value, index, authTokens.tokenFetch);
@@ -78,20 +69,9 @@ const NewsEditor = props => {
 					alert(`Edited as article index ${index}`);
 				}
 			}}>
-				<div>
+				<input type='text' name='title' placeholder='Title' ref={titleRef} />
-					<label htmlFor='title'>Title: </label>
+				<input type='text' name='author' placeholder='Author' ref={authorRef} />
-					<input type='text' name='title' ref={titleRef} />
+				<textarea name='body' rows='10' cols='150' placeholder='Body of the article goes here...' ref={bodyRef} />
 				</div>
 				<div>
 					<label htmlFor='author'>Author: </label>
 					<input type='text' name='author' ref={authorRef} />
 				</div>
 				<div>
 					<label htmlFor='body'>Body: </label>
 					<textarea name='body' rows='10' cols='150' ref={bodyRef} />
 				</div>
 				<button type='submit'>Update</button>
 				<button type='button' onClick={async evt => {
@@ -122,8 +102,7 @@ const handleSubmit = async (title, author, body, index, tokenFetch) => {
 	const result = await tokenFetch(`${process.env.NEWS_URI}/news/${index}`, {
 		method: 'PATCH',
 		headers: {
-			'Content-Type': 'application/json',
+			'Content-Type': 'application/json'
 			'Access-Control-Allow-Origin': '*'
 		},
 		body: JSON.stringify({
 			title,
@@ -1,6 +1,6 @@
 import React, { useContext, useRef } from 'react';
-import { TokenContext } from '../utilities/token-provider';
+import { TokenContext } from '../../utilities/token-provider';
 const NewsPublisher = props => {
 	//context
@@ -12,33 +12,22 @@ const NewsPublisher = props => {
 	const bodyRef = useRef();
 	return (
-		<div>
+		<div className='panel'>
-			<h2 className='centered'>News Publisher</h2>
+			<h2 className='text centered'>News Publisher</h2>
-			<form onSubmit={async evt => {
+			<form className='constrained' onSubmit={async evt => {
 				//on submit
 				evt.preventDefault();
 				const [err, index] = await handleSubmit(titleRef.current.value, authorRef.current.value, bodyRef.current.value, authTokens.tokenFetch);
 				if (err) {
 					alert(err);
 				} else {
-					titleRef.current.value = authorRef.current.value = bodyRef.current.value = '';
+					titleRef.current.value = authorRef.current.value = bodyRef.current.value = ''; //TODO: null bug here?
 					alert(`Published as article index ${index}`);
 				}
 			}}>
-				<div>
+				<input type='text' name='title' placeholder='Title' ref={titleRef} />
-					<label htmlFor='title'>Title: </label>
+				<input type='text' name='author' placeholder='Author' ref={authorRef} />
-					<input type='text' name='title' ref={titleRef} />
+				<textarea name='body' rows='10' cols='150' placeholder='Body of the article goes here...' ref={bodyRef} />
 				</div>
 				<div>
 					<label htmlFor='author'>Author: </label>
 					<input type='text' name='author' ref={authorRef} />
 				</div>
 				<div>
 					<label htmlFor='body'>Body: </label>
 					<textarea name='body' rows='10' cols='150' ref={bodyRef} />
 				</div>
 				<button type='submit'>Publish</button>
 			</form>
@@ -57,8 +46,7 @@ const handleSubmit = async (title, author, body, tokenFetch) => {
 		{
 			method: 'POST',
 			headers: {
-				'Content-Type': 'application/json',
+				'Content-Type': 'application/json'
 				'Access-Control-Allow-Origin': '*'
 			},
 			body: JSON.stringify({
 				title,
@@ -0,0 +1,47 @@
 //react
 import React, { useContext } from 'react';
 import { BrowserRouter, Switch } from 'react-router-dom';
 import { TokenContext } from './utilities/token-provider';
 //library components
 import LazyRoute from './utilities/lazy-route';
 //styling
 import '../styles/styles.css';
 //common components
 import Footer from './panels/footer';
 import PopupChat from './panels/popup-chat';
 const App = props => {
 	const authTokens = useContext(TokenContext);
 	//default render
 	return (
 		<BrowserRouter>
 				<Switch>
 					<LazyRoute exact path='/' component={() => import('./homepage')} />
 					<LazyRoute path='/signup' component={() => import('./accounts/signup')} />
 					<LazyRoute path='/login' component={() => import('./accounts/login')} />
 					<LazyRoute path='/account' component={() => import('./accounts/account')} />
 					<LazyRoute path='/dashboard' component={() => import('./dashboard')} />
 					<LazyRoute path='/recover' component={() => import('./accounts/recover')} />
 					<LazyRoute path='/reset' component={() => import('./accounts/reset')} />
 					<LazyRoute path='/admin' component={() => import('./administration/admin')} />
 					<LazyRoute path='/mod' component={() => import('./administration/mod')} />
 					<LazyRoute path='/privacypolicy' component={() => import('./static/privacy-policy')} />
 					<LazyRoute path='/credits' component={() => import('./static/credits')} />
 					<LazyRoute path='*' component={() => import('./not-found')} />
 				</Switch>
 				{ authTokens.accessToken ? <PopupChat /> : <></> }
 				<Footer />
 		</BrowserRouter>
 	);
 };
 export default App;
@@ -0,0 +1,34 @@
 import React, { useContext } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import ApplyToBody from './utilities/apply-to-body';
 import { TokenContext } from './utilities/token-provider';
 import Logout from './accounts/panels/logout';
 const Dashboard = props => {
 	//context
 	const authTokens = useContext(TokenContext);
 	//misplaced?
 	if (!authTokens.accessToken) {
 		return <Redirect to='/' />;
 	}
 	return (
 		<>
 			<ApplyToBody className='dashboard' />
 			<div className='page'>
 				<div className='central panel centered middle'>
 					<Link to='/account'>Account</Link>
 					{ authTokens.getPayload().admin ? <Link to='/admin' className='text centered'>Admin</Link> : <></> }
 					{ authTokens.getPayload().mod ? <Link to='/mod' className='text centered'>Mod</Link> : <></> }
 					<Logout />
 				</div>
 			</div>
 		</>
 	);
 };
 export default Dashboard;
@@ -0,0 +1,45 @@
 import React, { useContext } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import ApplyToBody from './utilities/apply-to-body';
 import { TokenContext } from './utilities/token-provider';
 import NewsFeed from './panels/news-feed';
 const HomePage = props => {
 	//context
 	const authTokens = useContext(TokenContext);
 	//misplaced?
 	if (authTokens.accessToken) {
 		return <Redirect to='/dashboard' />;
 	}
 	return (
 		<>
 			<ApplyToBody className='homepage' />
 			<div className='page'>
 				<div className='panel above'>
 					<header>
 						<h1 className='text centered'>MERN Template</h1>
 						<h2 className='text centered'>This is the MERN-template</h2>
 					</header>
 					<div className='panel centered middle'>
 						<Link to='/signup'><button>Sign Up</button></Link>
 						<Link to='/login'><button>Login</button></Link>
 					</div>
 				</div>
 				<div className='panel below'>
 					<div className='central'>
 						<NewsFeed />
 					</div>
 				</div>
 			</div>
 		</>
 	);
 };
 export default HomePage;
@@ -0,0 +1,21 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import ApplyToBody from './utilities/apply-to-body';
 const NotFound = props => {
 	return (
 		<>
 			<ApplyToBody className='dashboard' />
 			<div className='page'>
 				<div className='central panel centered middle'>
 					<h1 className='text centered'>Page Not Found</h1>
 					<br />
 					<Link className='text centered' to='/'>Return Home</Link>
 				</div>
 			</div>
 		</>
 	);
 };
 export default NotFound;
@@ -0,0 +1,21 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 const Break = () => {
 	return (
 		<>
 			<span className='mobile hide'> - </span>
 			<br className='mobile show' />
 		</>
 	);
 }
 const Footer = () => {
 	return (
 		<footer>
 			<p className='text centered'>© <a href='https://krgamestudios.com'>KR Game Studios</a> 2020-2022<Break /><Link to='/privacypolicy'>Privacy Policy</Link><Break /><Link to='/credits'>Credits</Link></p>
 		</footer>
 	);
 };
 export default Footer;
@@ -10,8 +10,7 @@ const NewsFeed = props => {
 		fetch(`${process.env.NEWS_URI}/news`, {
 			method: 'GET',
 			headers: {
-				'Content-Type': 'application/json',
+				'Content-Type': 'application/json'
 				'Access-Control-Allow-Origin': '*'
 			},
 			signal: aborter.current.signal //oh dear
 		})
@@ -24,19 +23,22 @@ const NewsFeed = props => {
 	}, []);
 	return (
-		<div>
+		<div className='panel'>
-			<h1 className='centered'>News Feed</h1>
+			<h1 className='text centered'>News Feed</h1>
 			{articles.map((article, index) => {
 				console.log(article)
 				return (
-					<div key={index}>
+					<div key={index} className='panel'>
 						<hr />
 						<h2>{article.title}</h2>
-						<p>Written by <strong>{article.author}</strong>, {
+						<br />
 						<p><em>Written by <strong>{article.author}</strong>, {
 							article.edits > 0 ?
 							<span>Last Updated {dateFormat(article.updatedAt, 'fullDate')} ({`${article.edits} edit${article.edits > 1 ? 's': ''}`})</span> :
 							<span>Published {dateFormat(article.createdAt, 'fullDate')}</span>
-						}</p>
+						}</em></p>
-						<p style={{whiteSpace: 'pre-wrap'}}>{article.body}</p>
+						<br />
 						<div dangerouslySetInnerHTML={{ __html: article.rendered }} />
 					</div>
 				);
 			})}
@@ -4,11 +4,12 @@ import { io } from 'socket.io-client';
 import '../../styles/popup-chat.css';
 //TODO: I very much need to move this out of global state
 const socket = io(`${process.env.CHAT_URI}/chat`);
 const PopupChat = props => {
 	const [open, setOpen] = useState(false);
-	const [chatlog, setChatlog] = useState([]);
+	const [chatlog, setChatlog] = useState([{ emphasis: true, text: 'If chat doesn\'t load, reload the page' }]);
 	const inputRef = useRef();
 	const sendRef = useRef();
@@ -77,7 +78,7 @@ const handleSend = (inputRef, pushChatlog, username, accessToken) => {
 	});
 	if (!inputRef.current.value.startsWith('/')) {
-		pushChatlog({ username: username, text: inputRef.current.value });
+		pushChatlog({ createdAt: (new Date(Date.now())).toISOString(), username: username, text: inputRef.current.value });
 	}
 	inputRef.current.value = '';
@@ -85,7 +86,36 @@ const handleSend = (inputRef, pushChatlog, username, accessToken) => {
 //render each line
 const processLine = (line, index, accessToken) => {
-	let content = <div className='content'>{line.username ? <span className='username'>{line.username}: </span> : ''}{line.text ? <span className='text'>{line.text}</span> : ''}</div>;
+	//utility functions
 	const isValidDate = d => {
 		return d instanceof Date && !isNaN(d);
 	};
 	const isToday = d => {
 		const now = new Date(Date.now());
 		return d.getDate() == now.getDate() && d.getMonth() == now.getMonth() && d.getFullYear() == now.getFullYear();
 	};
 	const isThisYear = d => {
 		const now = new Date(Date.now());
 		return d.getFullYear() == now.getFullYear();
 	};
 	//parse the date
 	const date = new Date(line.createdAt);
 	//split it up so we can format each field individually
 	const year = `${date.getFullYear()}`;
 	const month = `${date.getMonth() + 1}`;
 	const day = `${date.getDate()}`;
 	const hours = `${date.getHours()}`;
 	const minutes = `${date.getMinutes()}`.padStart(2, '0');
 	//combine into the final timestamp
 	const timestamp = !isValidDate(date) ? '' : isToday(date) ? `${hours}:${minutes}` : isThisYear(date) ? `${month}/${day}` : `${year}`;
 	//generate the content string
 	let content = <div className='content row'>{timestamp.length > 0 ? <span className='timestamp col'>{timestamp}</span> : null }<span className='inner col'>{line.username ? <span className='username'>{line.username}: </span> : ''}{line.text ? <span className='text'>{line.text}</span> : ''}</span></div>;
 	//decorators
 	if (line.emphasis) {
@@ -96,7 +126,8 @@ const processLine = (line, index, accessToken) => {
 		content = <strong>{content}</strong>;
 	}
-	return <li key={index} className='line'>{content}<div className='report'><a onClick={() => processReport(line, accessToken)} style={{ display: line.id && !line.notification ? 'flex' : 'none' }}>!!!</a></div></li>;
+
 	return <li key={index} className='line table noCollapse'>{content}<a className='report' onClick={() => processReport(line, accessToken)}>!!!</a></li>;
 };
 const processReport = (line, accessToken) => {
@@ -105,7 +136,7 @@ const processReport = (line, accessToken) => {
 	if (yes) {
 		socket.emit('report', {
 			accessToken,
-			id: line.id
+			index: line.index
 		});
 	}
 };
@@ -0,0 +1,16 @@
 import React from 'react';
 const Static = props => {
 	return (
 		<>
 			<header>
 				<h1 className='text centered'>Credits</h1>
 			</header>
 			<h2>MERN-template</h2>
 			<p>The <a href='https://github.com/krgamestudios/MERN-template'>MERN-template</a> developed by Kayne Ruse, KR Game Studios</p>
 		</>
 	);
 };
 export default Static;
@@ -0,0 +1,12 @@
 import React from 'react';
 const Static = props => {
 	return (
 		<header>
 			<h1 className="text centered">Privacy Policy</h1>
 		</header>
 	);
 };
 export default Static;
@@ -0,0 +1,19 @@
 import React, { useEffect } from 'react';
 //applies the classname of 'body'
 const ApplyToBody = (props) => {
 	useEffect(()  => {
 		document.body.classList.add(props.className);
 		return () => {
 			document.body.classList.remove(props.className);
 		};
 	}, []);
 	return (
 		<></>
 	);
 };
 export default ApplyToBody;
@@ -3,7 +3,10 @@ import decode from 'jwt-decode';
 export const TokenContext = createContext();
 //DOCS: tokenFetch() and tokenCallback() are actually closures here
 const TokenProvider = props => {
 	//state to be used
 	const [accessToken, setAccessToken] = useState('');
 	const [refreshToken, setRefreshToken] = useState('');
@@ -13,6 +16,7 @@ const TokenProvider = props => {
 		setRefreshToken(localStorage.getItem("refreshToken") || '');
 	}, []);
 	//update the stored copies
 	useEffect(() => {
 		localStorage.setItem("accessToken", accessToken);
 		localStorage.setItem("refreshToken", refreshToken);
@@ -27,12 +31,25 @@ const TokenProvider = props => {
 		const expired = new Date(decode(accessToken).exp * 1000) < Date.now();
 		if (expired) {
 			//BUGFIX: if logging out, just skip over the refresh token
 			if (url === `${process.env.AUTH_URI}/auth/logout`) {
 				return fetch(url, {
 					method: 'DELETE',
 					headers: {
 						'Content-Type': 'application/json',
 						'Authorization': `Bearer ${bearer}`
 					},
 					body: JSON.stringify({
 						token: refreshToken
 					})
 				});
 			}
 			//ping the auth server for a new token
 			const response = await fetch(`${process.env.AUTH_URI}/auth/token`, {
 				method: 'POST',
 				headers: {
-					'Content-Type': 'application/json',
+					'Content-Type': 'application/json'
 					'Access-Control-Allow-Origin': '*'
 				},
 				body: JSON.stringify({
 					token: refreshToken
@@ -50,21 +67,6 @@ const TokenProvider = props => {
 			setAccessToken(newAuth.accessToken);
 			setRefreshToken(newAuth.refreshToken);
 			bearer = newAuth.accessToken;
 			//BUGFIX: logging out correctly requires the new refresh token
 			if (url == `${process.env.AUTH_URI}/auth/logout`) {
 				return fetch(`${process.env.AUTH_URI}/auth/logout`, {
 					method: 'DELETE',
 					headers: {
 						'Content-Type': 'application/json',
 						'Access-Control-Allow-Origin': '*',
 						'Authorization': `Bearer ${bearer}`
 					},
 					body: JSON.stringify({
 						token: newAuth.refreshToken
 					})
 				});
 			}
 		}
 		//finally, delegate to fetch
@@ -87,8 +89,7 @@ const TokenProvider = props => {
 			const response = await fetch(`${process.env.AUTH_URI}/auth/token`, {
 				method: 'POST',
 				headers: {
-					'Content-Type': 'application/json',
+					'Content-Type': 'application/json'
 					'Access-Control-Allow-Origin': '*'
 				},
 				body: JSON.stringify({
 					token: refreshToken
@@ -1,6 +1,14 @@
 /* clear from the rest of the CSS files */
 .chat button, .chat input {
 	border-radius: unset !important;
 	font-size: unset !important;
 	margin: unset !important;
 }
 .chat {
 	position: fixed;
-	bottom: 23px;
+	bottom: 3.6em; /* Allow space for the footer */
 	right: 28px;
 	width: 280px;
 	border: solid;
@@ -8,71 +16,86 @@
 	border-width: 2px;
 	background-color: #CCC;
 	display: inline-block;
 	max-height: calc(50vh - 23px);
 }
-.chat > button.open {
+.chat button.open {
 	color: white;
 	background-color: grey;
 }
-.chat > button.send {
+.chat button.send {
 	color: white;
 	background-color: green;
 	border-style: solid;
 	border-width: 2px;
 	border-color: darkslategray;
 }
-.chat > button.close {
+.chat button.close {
 	color: black;
 	background-color: red;
 	border-color: maroon;
 	border-width: 2px;
 }
-.chat > button {
+.chat button {
 	width: 100%;
 	height: 2em;
 	opacity: 0.8;
 	border: unset;
 }
-.chat > button:hover {
+.chat button:hover {
 	opacity: 1;
 }
-.chat > .input {
+.chat .input {
-	width: calc(100% - 10px);
+	width: 100%;
 	height: 2em;
 }
-.chat > .log {
+.chat .log {
-	min-height: 300px;
+	min-height: 280px;
 }
-.chat > .log > .scrollable > .line {
+.chat .line {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 }
-.chat > .log > .scrollable > .line > .report {
+.chat .report {
 	color: red;
 	display: none;
 }
-.chat > .log > .scrollable > .line:hover {
+.chat .line:hover {
 	background-color: #BBB;
 }
-.chat > .log > .scrollable > .line:hover > .report {
+.chat .line:hover .report {
 	display: flex;
 }
-.chat > .log > .scrollable > .line > .content > .username {
+.chat .timestamp {
 	max-width: 44px;
 }
 .chat .inner {
 	flex: 1 !important;
 	display: inline-block !important;
 	flex-direction: row !important;
 }
 .chat .username {
 	font-weight: bold;
 }
-.chat > .log > .scrollable {
+.chat .scrollable {
 	margin: 0;
 	padding: 10px;
 	min-height: 280px;
-	max-height: calc(50vh - 23px - 20px - 6em);
+	max-height: 180px;
 	overflow-x: wrap;
 	overflow-y: scroll;
 }
@@ -80,3 +103,13 @@
 .chat ul {
 	list-style: none;
 }
@media screen and (max-width: 768px) {
 	.chat {
 		position: unset;
 		bottom: unset;
 		right: unset;
 		width: calc(100% + 20px);
 		margin-left: -10px;
 	}
 }
@@ -0,0 +1,323 @@
 /* global defaults */
 * {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
 }
 html {
 	scroll-behavior: smooth;
 }
 body, #root {
 	font: 12pt Helvetica, Arial;
 	min-width: 100vw;
 	min-height: 100vh;
 	display: flex;
 	flex-direction: column;
 	overflow-x: hidden;
 	overflow-y: auto;
 	background-color: #fefefe;
 	color: #010101;
 }
 h1 {
 	font-size: 40pt;
 	font-weight: bold;
 }
 h2 {
 	font-size: 24pt;
 	font-weight: bold;
 }
 h3 {
 	font-size: 16pt;
 	font-weight: bold;
 }
 ul {
 	list-style-type: disc;
 	list-style-position: inside;
 	padding-bottom: .5em;
 }
 p {
 	margin-bottom: 0 !important;
 	padding-bottom: 1em;
 }
 pre {
 	padding: 5px;
 	margin-bottom: 1em;
 	background-color: lightgray;
 	overflow-x: scroll;
 }
 a {
 	color: blue;
 	text-decoration: none;
 }
 blockquote {
 	padding-top: 0.5em;
 	padding-left: 1em;
 	margin-bottom: 1em;
 	border-left: 3px solid #ccc;
 }
 .text.left {
 	text-align: left;
 }
 .text.centered {
 	text-align: center;
 }
 .text.right {
 	text-align: right;
 }
 .centered {
 	justify-content: center;
 }
 .middle {
 	align-items: center;
 }
 /* header */
 header {
 	flex: 0 1 auto;
 	margin-top: 1em;
 	margin-bottom: 1em;
 	justify-self: flex-start;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 }
 /* footer */
 footer {
 	padding-top: 0.5em;
 	flex: 0 1 auto;
 	justify-self: flex-end;
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
 }
 /* central display */
 .central {
 	padding: 0 10px;
 	margin: 0 20%;
 	min-height: calc(100vh - 3.6em);
 }
@media screen and (max-width: 768px) {
 	.central {
 		margin: 0;
 	}
 }
 /* components */
 .page {
 	flex: 1 0 auto;
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-start;
 }
 .page.centered {
 	justify-content: center;
 }
 .page.middle {
 	align-items: center;
 }
 .panel {
 	flex: 0 1 auto;
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-start;
 	padding-bottom: 1em;
 }
 .panel.centered {
 	justify-content: center;
 }
 .panel.middle {
 	align-items: middle;
 }
 button:disabled {
 	opacity: 0.5;
 }
 input, button {
 	text-indent: 0.3em;
 	border-radius: 0.2em;
 	font-size: 1.8em;
 	margin: 0.2em;
 	padding: 0.2em 0;
 }
 textarea {
 	margin-left: 0.5em;
 	margin-right: -0.4em;
 	max-height: none !important;
 	resize: vertical;
 	overflow: auto;
 }
 /* "constrained" means reusable input area */
 .constrained {
 	flex: 0 1 auto;
 	align-self: center;
 	max-width: 480px;
 	display: flex;
 	flex-direction: column;
 	margin-bottom: 1em;
 }
 .constrained > * {
 	flex: 1 0 auto;
 	max-height: 2em;
 	display: flex;
 	flex-direction: row;
 }
 .constrained button, button.constrained {
 	display: inline-block;
 }
 .constrained label {
 	font-size: 1.8em;
 	text-indent: 0.4em;
 }
@media screen and (max-width: 480px) {
 	.constrained {
 		max-width: 100vw;
 	}
 }
 /* flexbox tables */
 .table {
 	flex: 1;
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-start;
 }
 .table .row {
 	flex: 1;
 	display: flex;
 	flex-direction: row;
 	justify-content: flex-start;
 }
@media screen and (max-width: 480px) {
 	.table .row {
 		flex-direction: column;
 	}
 }
@media screen and (max-width: 768px) {
 	.table .row.tabletCollapse {
 		flex-direction: column;
 	}
 }
 .table .row .col {
 	flex: 1 1 1%;
 	display: flex;
 	flex-direction: column;
 	min-width: 0;
 }
 .table .row .col.double {
 	flex: 2 1 2%;
 }
 .table .row .col.half {
 	flex: 0.5 1 0.5%;
 }
@media screen and (max-width: 480px) {
 	.table .row .col.double {
 		flex: 2 1 2.5%;
 	}
 }
 .table.noCollapse .row, .table .row.noCollapse {
 	flex-direction: row;
 }
 /* mobile control */
 .mobile.show {
 	display: none;
 }
@media screen and (max-width: 480px) {
 	.mobile.centered {
 		text-align: initial;
 	}
 	.mobile.show {
 		display: inline-block;
 	}
 	.mobile.hide {
 		display: none;
 	}
 	.mobile.centered {
 		text-align: center;
 	}
 	/* hybrid of table and mobile control */
 	.mobile.hide.col {
 		display: none;
 	}
 	.mobile.col.half {
 		flex: 0.5;
 	}
 }
 /* tablet control */
 .tablet.show {
 	display: none;
 }
@media screen and (max-width: 768px) {
 	.tablet.centered {
 		text-align: initial;
 	}
 	.tablet.show {
 		display: inline-block;
 	}
 	.tablet.hide {
 		display: none;
 	}
 	.tablet.centered {
 		text-align: center;
 	}
 	/* hybrid of table and tablet control */
 	.tablet.hide.col {
 		display: none;
 	}
 	.tablet.col.half {
 		flex: 0.5;
 	}
 }
@@ -46,6 +46,14 @@ See https://github.com/krgamestudios/MERN-template/wiki for help.
 `
 );
 	//determine local computer address for mac user vs everyone else
 	let macUser = '';
 	while (macUser.toLowerCase() !== 'yes' && macUser.toLowerCase() !== 'no') {
 		macUser = await question('Will the MERN Template be running locally on a MacOS system? (yes or no)', '');
 	}
 	const localAddress = macUser ? 'localhost' : '%';
 	//project configuration
 	const projectName = await question('Project Name', 'template');
 	const projectWebAddress = await question('Project Web Address', 'example.com');
@@ -57,13 +65,15 @@ See https://github.com/krgamestudios/MERN-template/wiki for help.
 	const newsName = await question('News Name', 'news');
 	const newsWebAddress = await question('News Web Address', `${newsName}.${projectWebAddress}`);
 	const newsDBUser = await question('News DB Username', newsName);
-	const newsDBPass = await question('News DB Password', 'charizard');
+	const newsDBPass = await question('News DB Password', 'venusaur');
 	//auth configuration
 	const authName = await question('Auth Name', 'auth');
 	const authWebAddress = await question('Auth Web Address', `${authName}.${projectWebAddress}`);
 	const authPostValidationHook = await question('Auth Post Validation Hook', '');
 	const authResetAddress = await question('Auth Reset Addr', `${projectWebAddress}/reset`);
 	const authDBUser = await question('Auth DB Username', authName);
-	const authDBPass = await question('Auth DB Password', 'venusaur');
+	const authDBPass = await question('Auth DB Password', 'charizard');
 	const emailSMTP = await question('Email SMTP', 'smtp.example.com');
 	const emailUser = await question('Email Address', 'foobar@example.com');
@@ -123,7 +133,7 @@ services:
      - traefik.http.routers.${projectName}router.service=${projectName}service@docker
      - traefik.http.services.${projectName}service.loadbalancer.server.port=${projectPort}
    environment:
-      - WEB_PORT=3000
+      - WEB_PORT=${projectPort}
      - DB_HOSTNAME=database
      - DB_DATABASE=${projectName}
      - DB_USERNAME=${projectDBUser}
@@ -179,6 +189,8 @@ services:
    environment:
      - WEB_PROTOCOL=https
      - WEB_ADDRESS=${authWebAddress}
      - HOOK_POST_VALIDATION=${authPostValidationHook}
      - WEB_RESET_ADDRESS=${authResetAddress}
      - WEB_PORT=${authPort}
      - DB_HOSTNAME=database
      - DB_DATABASE=${authName}
@@ -243,11 +255,14 @@ services:
      - --api.insecure=false
      - --providers.docker=true
      - --providers.docker.exposedbydefault=false
      - --entrypoints.web.address=:80
      - --entrypoints.web.http.redirections.entryPoint.to=websecure
      - --entrypoints.web.http.redirections.entryPoint.scheme=https
      - --entrypoints.web.http.redirections.entrypoint.permanent=true
      - --entrypoints.websecure.address=:443
      - --certificatesresolvers.myresolver.acme.tlschallenge=true
      - --certificatesresolvers.myresolver.acme.email=${supportEmail}
      - --certificatesresolvers.myresolver.acme.storage=/letsencrypt/acme.json
      -  traefik.docker.network=app-network
    ports:
      - 80:80
      - 443:443
@@ -263,36 +278,39 @@ networks:
 `;
 	const dockerfile = `
-FROM node:15
+FROM node:16
 WORKDIR "/app"
 COPY package*.json ./
 RUN npm install
 COPY . /app
 RUN mkdir /app/public
 RUN chown node:node /app/public
 RUN npm install --production
 EXPOSE ${projectPort}
 USER node
 ENTRYPOINT ["bash", "-c"]
 CMD ["sleep 10 && npm start"]
 `;
 	const sqlfile = `
 CREATE DATABASE IF NOT EXISTS ${projectName};
-CREATE USER IF NOT EXISTS '${projectDBUser}'@'%' IDENTIFIED BY '${projectDBPass}';
+CREATE USER IF NOT EXISTS '${projectDBUser}'@'${localAddress}' IDENTIFIED BY '${projectDBPass}';
-GRANT ALL PRIVILEGES ON ${projectName}.* TO '${projectDBUser}'@'%';
+GRANT ALL PRIVILEGES ON ${projectName}.* TO '${projectDBUser}'@'${localAddress}';
 CREATE DATABASE IF NOT EXISTS ${newsName};
-CREATE USER IF NOT EXISTS '${newsDBUser}'@'%' IDENTIFIED BY '${newsDBPass}';
+CREATE USER IF NOT EXISTS '${newsDBUser}'@'${localAddress}' IDENTIFIED BY '${newsDBPass}';
-GRANT ALL PRIVILEGES ON ${newsName}.* TO '${newsDBUser}'@'%';
+GRANT ALL PRIVILEGES ON ${newsName}.* TO '${newsDBUser}'@'${localAddress}';
 CREATE DATABASE IF NOT EXISTS ${authName};
-CREATE USER IF NOT EXISTS '${authDBUser}'@'%' IDENTIFIED BY '${authDBPass}';
+CREATE USER IF NOT EXISTS '${authDBUser}'@'${localAddress}' IDENTIFIED BY '${authDBPass}';
-GRANT ALL PRIVILEGES ON ${authName}.* TO '${authDBUser}'@'%';
+GRANT ALL PRIVILEGES ON ${authName}.* TO '${authDBUser}'@'${localAddress}';
 CREATE DATABASE IF NOT EXISTS ${chatName};
-CREATE USER IF NOT EXISTS '${chatDBUser}'@'%' IDENTIFIED BY '${chatDBPass}';
+CREATE USER IF NOT EXISTS '${chatDBUser}'@'${localAddress}' IDENTIFIED BY '${chatDBPass}';
-GRANT ALL PRIVILEGES ON ${chatName}.* TO '${chatDBUser}'@'%';
+GRANT ALL PRIVILEGES ON ${chatName}.* TO '${chatDBUser}'@'${localAddress}';
 FLUSH PRIVILEGES;
 `;
 	fs.writeFileSync('docker-compose.yml', ymlfile);
 	fs.writeFileSync('Dockerfile', dockerfile);
 	fs.writeFileSync('startup.sql', sqlfile);
@@ -1,6 +1,6 @@
 {
  "name": "mern-template",
-  "version": "1.0.0",
+  "version": "1.2.0",
  "description": "A website template using the MERN stack.",
  "main": "server/server.js",
  "scripts": {
@@ -8,10 +8,13 @@
    "build": "npm run build:server && npm run build:client",
    "build:server": "exit 0",
    "build:client": "webpack --env=production --config webpack.config.js",
-    "dev": "concurrently npm:watch:server npm:watch:client",
+    "dev": "concurrently npm:dev:server npm:dev:client",
-    "watch:server": "nodemon . --ext js,jsx,json --ignore 'node_modules/*'",
+    "dev:server": "nodemon --ext js,jsx,json --ignore 'node_modules/*'",
-    "watch:client": "webpack serve --env=development --config webpack.config.js",
+    "dev:client": "webpack serve --env=development --config webpack.config.js",
-    "analyzer": "webpack --env=production --analyzer --config webpack.config.js"
+    "local": "concurrently npm:local:server npm:local:client",
    "local:server": "nodemon --ext js,jsx,json --ignore 'node_modules/*'",
    "local:client": "webpack serve --env=local --config webpack.config.js",
    "analyze": "webpack --env=production --env=analyze --config webpack.config.js"
  },
  "repository": {
    "type": "git",
@@ -24,37 +27,36 @@
  },
  "homepage": "https://github.com/KRGameStudios/MERN-template#readme",
  "dependencies": {
-    "@babel/core": "^7.12.10",
+    "@babel/core": "^7.14.8",
-    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-env": "^7.14.8",
-    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-react": "^7.14.5",
-    "@loadable/component": "^5.14.1",
+    "@loadable/component": "^5.15.0",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
-    "concurrently": "^5.3.0",
+    "compression-webpack-plugin": "^8.0.1",
-    "css-loader": "^5.1.3",
+    "concurrently": "^6.2.0",
    "css-loader": "^6.2.0",
    "dateformat": "^4.5.1",
-    "dotenv": "^8.2.0",
+    "dotenv": "^10.0.0",
    "express": "^4.17.1",
-    "html-webpack-plugin": "^5.0.0-alpha.14",
+    "html-webpack-plugin": "^5.3.2",
    "jwt-decode": "^3.1.2",
-    "mariadb": "^2.5.2",
+    "mariadb": "^2.5.4",
-    "raw-loader": "^4.0.2",
+    "query-string": "^7.0.1",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
    "react-dropdown-select": "^4.7.4",
    "react-markdown": "^5.0.3",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
-    "sequelize": "^6.4.0",
+    "react-select": "^5.2.1",
-    "socket.io-client": "^4.0.0",
+    "sequelize": "^6.6.5",
-    "style-loader": "^2.0.0",
+    "socket.io-client": "^4.1.3",
-    "universal-cookie": "^4.0.4",
+    "style-loader": "^3.2.1",
-    "webpack": "^5.15.0",
+    "webpack": "^5.46.0",
-    "webpack-cli": "^4.3.1"
+    "webpack-bundle-analyzer": "^4.4.2",
    "webpack-cli": "^4.7.2"
  },
  "devDependencies": {
-    "nodemon": "^2.0.7",
+    "nodemon": "^2.0.12",
-    "webpack-bundle-analyzer": "^4.3.0",
+    "webpack-dev-server": "^4.6.0"
    "webpack-dev-server": "^3.11.2"
  }
 }
@@ -8,10 +8,24 @@ const path = require('path');
 const express = require('express');
 const app = express();
 const server = require('http').Server(app);
 const bodyParser = require('body-parser');
 //config
-app.use(bodyParser.json());
+app.use(express.json());
 //handle compressed files (middleware)
 app.get('*.js', (req, res, next) => {
 	req.url = req.url + '.gz';
 	res.set('Content-Encoding', 'gzip');
 	res.set('Content-Type', 'text/javascript');
 	next();
 });
 app.get('*.css', (req, res, next) => {
 	req.url = req.url + '.gz';
 	res.set('Content-Encoding', 'gzip');
 	res.set('Content-Type', 'text/css');
 	next();
 });
 //database connection
 const database = require('./database');
@@ -2,23 +2,24 @@
 const { DefinePlugin } = require('webpack');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 //libraries
 const path = require('path');
 //the exported config function
-module.exports = ({ production, analyzer }) => {
+module.exports = ({ production, development, local, analyze }) => {
 	return {
 		mode: production ? "production" : "development",
 		entry: path.resolve(__dirname, 'client', 'client.jsx'),
 		output: {
 			path: path.resolve(__dirname, 'public'),
 			publicPath: '/',
 			filename: '[name].[chunkhash].js',
 			sourceMapFilename: '[name].[chunkhash].js.map'
 		},
-		devtool: 'eval-source-map',
+		devtool: production ? false : 'eval-source-map',
 		resolve: {
 			extensions: ['.js', '.jsx']
 		},
@@ -41,23 +42,15 @@ module.exports = ({ production, analyzer }) => {
 					test: /\.(css)$/,
 					use: ['style-loader', 'css-loader']
 				},
 				{
 					test: /\.(md)$/,
 					use: [
 						{
 							loader: 'raw-loader'
 						},
 					],
 				},
 			]
 		},
 		plugins: [
 			new DefinePlugin({
 				'process.env': {
 					'PRODUCTION': production,
-					'NEWS_URI': production ? `"${process.env.NEWS_URI}"` : '"https://dev-news.eggtrainer.com"',
+					'NEWS_URI': production ? `"${process.env.NEWS_URI}"` : development ? '"https://dev-news.krgamestudios.com"' : '"http://localhost:3100"',
-					'AUTH_URI': production ? `"${process.env.AUTH_URI}"` : '"https://dev-auth.eggtrainer.com"',
+					'AUTH_URI': production ? `"${process.env.AUTH_URI}"` : development ? '"https://dev-auth.krgamestudios.com"' : '"http://localhost:3200"',
-					'CHAT_URI': production ? `"${process.env.CHAT_URI}"` : '"https://dev-chat.eggtrainer.com"',
+					'CHAT_URI': production ? `"${process.env.CHAT_URI}"` : development ? '"https://dev-chat.krgamestudios.com"' : '"http://localhost:3300"',
 				}
 			}),
 			new CleanWebpackPlugin({
@@ -71,46 +64,42 @@ module.exports = ({ production, analyzer }) => {
 					removeAttributeQuotes: production
 				}
 			}),
 			new CompressionPlugin({
 				filename: "[path][base].gz[query]",
 				algorithm: "gzip",
 				test: /\.js$|\.css$/,
 				minRatio: 0.8
 			}),
 			new BundleAnalyzerPlugin({
-				analyzerMode: analyzer ? 'server' : 'disabled'
+				analyzerMode: analyze ? 'server' : 'disabled'
 			})
 		],
 		devServer: {
 			contentBase: path.resolve(__dirname, 'public'),
 			compress: true,
 			port: 3001,
 			proxy: {
 				'/api/': 'http://localhost:3000/'
 			},
 			overlay: {
 				errors: true
 			},
 			stats: {
 				colors: true,
 				hash: false,
 				version: false,
 				timings: false,
 				assets: false,
 				chunks: false,
 				modules: false,
 				reasons: false,
 				children: false,
 				source: false,
 				errors: true,
 				errorDetails: false,
 				warnings: true,
 				publicPath: false
 			},
 			host: '0.0.0.0',
 			disableHostCheck: true,
 			clientLogLevel: 'silent',
 			historyApiFallback: true,
 			hot: true,
-			injectHot: true
+			host: 'localhost',
-		},
+			port: 3001,
-		watchOptions: {
+			client: {
-			ignored: /(node_modules)/
+				overlay: {
 					errors: true,
 					warnings: true,
 				},
 			},
 			watchFiles: {
 				options: {
 					ignored: ['node_modules/**']
 				}
 			},
 			proxy: {
 				'/api': {
 					target: 'http://localhost:3000'
 				}
 			},
 			static: '/public',
 			historyApiFallback: true
 		}
 	}
 };
Author	SHA1	Message	Date
Kayne Ruse	ed01fe6db5	Addressed #34	2022-05-30 06:16:10 +01:00
Kayne Ruse	cfb8d20ad2	Merge remote-tracking branch 'refs/remotes/origin/main'	2022-05-30 06:10:20 +01:00
Kayne Ruse	d44cae397d	Updated dependencies, addressed #33	2022-05-30 06:10:01 +01:00
Kayne Ruse	b97fff05b3	Added FUNDING.yml	2022-02-13 07:49:49 +11:00
Kayne Ruse	22703bfbcb	Swapped day and month around	2022-01-09 15:02:06 +00:00
Kayne Ruse	14a3c9eabe	Added timestamps to the chatbox	2022-01-09 06:39:13 +00:00
Kayne Ruse	8e90a4a540	Trying a fix	2022-01-08 04:59:21 +00:00
Kayne Ruse	1d3c94a1aa	Shortened the code with a ternary	2022-01-06 14:26:30 +00:00
Kayne Ruse	ca5e79ccf3	Merge pull request #32 from kcampbelljr/macos-docs Macos docs	2022-01-07 01:15:36 +11:00
Kayne Ruse	03acce1907	Removed an unused dependency	2022-01-06 14:00:51 +00:00
Keith Campbell	c0b7280533	removed macos, updated code on original configure script, testing..	2022-01-05 23:23:09 -05:00
Keith Campbell	2925cce7ca	created a copy of the configure script and made the changes needed for now, should we add a macos check to the original configure script instead?	2022-01-04 23:51:02 -05:00
Kayne Ruse	b90670b922	Tweaked credits	2022-01-03 19:21:57 +00:00
Kayne Ruse	290f25f898	Added prox to the credits	2022-01-03 08:45:27 +00:00
Kayne Ruse	3cdef433f9	Tweaked moderator privileges	2022-01-02 18:11:11 +00:00
Kayne Ruse	53c8ddab54	Removed rehype-raw	2021-12-30 14:28:10 +00:00
Kayne Ruse	4e94c5338d	Removed client-side markdown rendering	2021-12-30 13:21:34 +00:00
Kayne Ruse	55ff5765c6	Swapped out a library	2021-12-27 03:34:00 +00:00
Kayne Ruse	d486059430	Updated webpack.config.js	2021-12-26 16:12:23 +00:00
Kayne Ruse	9d8c948dbb	Updated dependencies	2021-12-24 07:37:43 +00:00
Kayne Ruse	b21fa8db9e	Tweaked webpack.config.js	2021-12-20 13:52:43 +00:00
Kayne Ruse	c130b74e2d	Added an example proxy route to webpack.config.js	2021-12-20 07:33:01 +00:00
Kayne Ruse	d37b93d5f7	Updated webpack-dev-server to 4.6.0	2021-12-20 07:07:36 +00:00
Kayne Ruse	829cb2e3da	Disabled source map in prod	2021-12-20 06:19:23 +00:00
Kayne Ruse	29f0dbb1ca	Fixed HTTPS redirection	2021-12-15 18:39:37 +00:00
Kayne Ruse	13ad7d2435	Updated README.md	2021-12-11 16:57:48 +00:00
Kayne Ruse	e30853e0cd	Updated configure-script.js	2021-12-11 11:38:17 +00:00
Kayne Ruse	1e16a96f86	Updated README.md	2021-12-11 05:01:10 +00:00
Kayne Ruse	cff73107b2	Updated package-lock.json	2021-11-17 06:13:41 +00:00
Kayne Ruse	76417747b3	Bumped node to version 16 LTS	2021-11-17 04:58:08 +00:00
Kayne Ruse	b8323723ed	Updated package-lock.json	2021-11-15 22:37:51 +00:00
Kayne Ruse	415b2f32f1	Bumped version number	2021-08-24 08:02:17 +01:00
Kayne Ruse	a0dbe0aee1	Imported the directory structure from egg trainer	2021-08-22 02:22:28 +10:00
Kayne Ruse	f415a7ece2	Fixed analyzer	2021-08-20 21:21:18 +01:00
Kayne Ruse	9c863f309f	Fixed webpack config	2021-08-21 05:49:01 +10:00
Kayne Ruse	7547b1717e	Added gzip compression for JS files	2021-08-21 05:36:23 +10:00
Kayne Ruse	22e6286e0a	Webpack config tweak	2021-08-16 07:44:32 +10:00
Kayne Ruse	c766c43223	No longer needs the refreshToken to logout	2021-08-15 00:54:28 +10:00
Kayne Ruse	bb1590bae7	Bumped version number	2021-08-10 17:39:09 +10:00
Kayne Ruse	5f7b9dda3a	Tweaked README.md	2021-08-07 13:54:39 +10:00
Kayne Ruse	051f3dfb2a	Updated README.md	2021-07-30 10:20:14 +10:00
Kayne Ruse	85456e0892	Minor markdown tweak	2021-07-30 03:36:40 +10:00
Kayne Ruse	6130337846	Fixed classNames	2021-07-30 01:34:06 +10:00
Kayne Ruse	ac99f3bf38	Fixed CSS classes	2021-07-29 22:13:17 +10:00
Kayne Ruse	20e94db628	I really hate these line endings	2021-07-29 21:15:32 +10:00
Kayne Ruse	bcb4a37f5a	Tweak	2021-07-29 21:13:53 +10:00
Kayne Ruse	3b0d3c87b1	Tweak	2021-07-28 15:52:50 +01:00
Kayne Ruse	51a116503d	Bumped version number	2021-07-28 15:43:09 +01:00
Kayne Ruse	eb370663d2	Tweaked some display	2021-07-29 00:37:23 +10:00
Kayne Ruse	462116d980	Fixed whitespace	2021-07-28 23:18:22 +10:00
Kayne Ruse	af06ddc06d	Working on password recovery	2021-07-28 23:01:41 +10:00
Kayne Ruse	f937ee47db	Removed universal-cookie, fixed package.json versioning	2021-07-26 05:05:39 +01:00
Kayne Ruse	6d0dd419ca	Fixed #22	2021-07-26 13:48:08 +10:00
Kayne Ruse	2919467dff	Fixed #23	2021-07-26 13:38:33 +10:00
Kayne Ruse	269caac88c	Tweaked README.md	2021-07-25 20:35:34 +01:00
Kayne Ruse	69c297fa74	Stupid line endings	2021-07-25 19:22:17 +10:00
Kayne Ruse	0f538be3e5	Fixed #20	2021-07-25 18:53:14 +10:00
Kayne Ruse	f85b6e8793	Fixed passwords	2021-07-25 18:52:46 +10:00
Kayne Ruse	2af9532930	Fixed deploy bug, properly	2021-07-24 14:01:20 +01:00
Kayne Ruse	191da50740	Deploy bug	2021-07-24 22:20:17 +10:00
Kayne Ruse	f24c7990f6	Fixed line-endings	2021-07-24 20:23:18 +10:00
Kayne Ruse	7a48780f50	Update package.json	2021-07-23 21:25:24 +10:00
Kayne Ruse	33952a9896	Changed chat line id to index	2021-07-23 21:24:19 +10:00
Kayne Ruse	8076b0cc40	Pointed to new dev-services	2021-07-22 21:48:42 +01:00
Kayne Ruse	e216474196	Bumped version number	2021-07-15 08:53:57 +10:00
Kayne Ruse	2532bf1867	Updated packages to fix vulnerabilities	2021-07-15 08:52:54 +10:00
Kayne Ruse	93a3c30e81	Fixed the database hostname It's supposed to point to localhost when developing locally.	2021-04-08 04:21:31 +10:00
Kayne Ruse	ae8c82e83a	Fixed embedded source-map error	2021-04-07 05:00:16 +10:00
Kayne Ruse	bc6a795750	WHOOPS THAT WAS A MISTAKE	2021-04-07 03:18:48 +10:00
Kayne Ruse	9947ef13c1	Added a workaround for a mysql bug	2021-04-07 02:21:44 +10:00
Kayne Ruse	d3f0b1ac7d	Fixed WEB_PORT setting	2021-04-03 03:59:08 +11:00