Bumped version number

Macos docs

.github/FUNDING.yml

@@ -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"]

.gitignore

@@ -1,118 +1,119 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and *not* Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Output files
-public/*.html
-public/*.js
-public/*.css
-public/*.map
-public/*.gz
-
-letsencrypt/
-mysql/
-Dockerfile
-docker-compose.yml
-startup.sql
-
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Output files
+public/*.html
+public/*.js
+public/*.css
+public/*.map
+public/*.gz
+public/*.txt
+
+letsencrypt/
+mysql/
+Dockerfile
+docker-compose.yml
+startup.sql
+

README.md

@@ -1,91 +1,95 @@
-# MERN-template
-
-A website template using the MERN stack. The primary technology involved is:
-
-* React
-* Nodejs
-* MariaDB (with Sequelize)
-* Docker (with docker-compose)
-
-This template is designed to support the development of persistent browser based games (PBBGs), but it, and it's component microservices, can be used elsewhere.
-
-This template is released under the zlib license (see LICENSE).
-
-See the [github wiki](https://github.com/krgamestudios/MERN-template/wiki) for full documentation.
-
-# Microservices
-
-There are external components to this template referred to as "microservices". These can be omitted entirely by simply removing the React components that access them. These are also available via [docker hub](https://hub.docker.com/u/krgamestudios).
-
-* News Server: https://github.com/krgamestudios/news-server
-* Auth Server: https://github.com/krgamestudios/auth-server
-* Chat Server: https://github.com/krgamestudios/chat-server
-
-# Setup Deployment
-
-A clean install is this easy:
-
-```
-git clone https://github.com/krgamestudios/MERN-template.git
-cd MERN-template
-npm install
-node configure-script.js
-docker-compose up --build
-```
-
-# Setup Development
-
-To set up this template in development mode:
-
-1. Ensure mariadb is running in your development environment
-2. Run `mariadb sql/create_database.sql` as the root user
-3. Run `npm install`
-4. Run `cp .envdev .env` and enter your details into the `.env` file
-5. Execute `npm run dev`
-6. Navigate to `http://localhost:3001` in your web browser
-
-# Features List
-
-- Mainly one language across the codebase (JavaScript)
-- Full documentation
-	- Setup tutorial
-- Fully Featured Account System (as a microservice)
-	- Email validation
-	- Logging in and out
-	- Account deletion
-	- Password management
-	- JSON web token authentication
-- Fully Featured News Blog (as a microservice)
-	- Publish, edit or delete articles as needed
-	- Secured via admin panel
-- Fully Featured Chat System (as a microservice)
-	- Available when logged in
-	- Chat logs saved to the database
-	- Room-based chat (type `/room name` to access a specific room)
-- Moderation tools
-	- Permanently banning users
-	- Chat-muting users for a time period
-	- Users reporting offensive chat-content
-- Easy To Use Configuration Script
-	- Sets up everything via docker
-	- A default admin account (if desired)
-
-# Coming Soon
-
-- Full documentation
-	- Modding tutorials
-
-# Coming Eventually
-
-- Fully Featured News Blog (as a microservice)
-	- Restore deleted articles
-	- Undo edits
-- Fully Featured Chat System (as a microservice)
-	- Custom emoji
-	- 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
+# MERN-template
+
+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
+* MariaDB (with Sequelize)
+* Docker (with docker-compose)
+
+This template is designed to support the development of persistent browser based games (PBBGs), but it, and it's component microservices, can be used elsewhere.
+
+This template is released under the zlib license (see LICENSE).
+
+See the [github wiki](https://github.com/krgamestudios/MERN-template/wiki) for full documentation.
+
+# Microservices
+
+There are external components to this template referred to as "microservices". These can be omitted entirely by simply removing the React components that access them. These are also available via [docker hub](https://hub.docker.com/u/krgamestudios).
+
+* News Server: https://github.com/krgamestudios/news-server
+* Auth Server: https://github.com/krgamestudios/auth-server
+* Chat Server: https://github.com/krgamestudios/chat-server
+
+# Setup Deployment
+
+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
+```
+
+# Setup Development
+
+To set up this template in development mode:
+
+1. Ensure mariadb is running in your development environment
+2. Run `mariadb tools/create_database.sql` as the root user
+3. Run `npm install`
+4. Run `cp .envdev .env` and enter your details into the `.env` file
+5. Execute `npm run dev`
+6. Navigate to `http://localhost:3001` in your web browser
+
+# Features List
+
+- Mainly one language across the codebase (JavaScript)
+- Full documentation
+	- Setup tutorial
+- Fully Featured Account System (as a microservice)
+	- Email validation
+	- Logging in and out
+	- Account deletion
+	- Password management
+	- JSON web token authentication
+	- HttpOnly cookies for security
+	- Optional post validation hook
+- Fully Featured News Blog (as a microservice)
+	- Publish, edit or delete articles as needed
+	- Secured via admin panel
+- Fully Featured Chat System (as a microservice)
+	- Available when logged in
+	- Chat logs saved to the database
+	- Room-based chat (type `/room name` to access a specific room)
+- Moderation tools
+	- Permanently banning users
+	- Chat-muting users for a time period
+	- Users reporting offensive chat-content
+- Easy To Use Configuration Script
+	- Sets up everything via docker
+	- A default admin account (if desired)
+
+# Coming Soon
+
+- Full documentation
+	- Modding tutorials
+- Fully Featured News Blog (as a microservice)
+	- Individual pages for news articles
+
+# Coming Eventually
+
+- Fully Featured News Blog (as a microservice)
+	- Restore deleted articles
+	- Undo edits
+- Fully Featured Chat System (as a microservice)
+	- Custom emoji
+	- Private messaging
+	- Broadcasting to all channels
+	- Badges next to usernames
+- Backend for leaderboards (modding tutorial?)
+- Backend for energy systems (modding tutorial?)
+- Backend for items, shops, trading and currency (modding tutorial?)

client/client.jsx

@@ -2,14 +2,16 @@
 import 'regenerator-runtime/runtime';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
-import App from './components/app';
-import TokenProvider from './components/utilities/token-provider';
+import App from './pages/app';
+import TokenProvider from './pages/utilities/token-provider';
 
-ReactDOM.render(
-	<TokenProvider>
-		<App />
-	</TokenProvider>,
-	document.querySelector('#root')
-);
+ReactDOM
+	.createRoot(document.getElementById('root'))
+	.render(
+		<TokenProvider>
+			<App />
+		</TokenProvider>
+	)
+;

client/components/app.jsx

@@ -1,49 +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='/recover' component={() => import('./pages/recover')} />
-					<LazyRoute path='/reset' component={() => import('./pages/reset')} />
-
-					<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;

client/components/pages/account.jsx

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

client/components/pages/admin.jsx

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

client/components/pages/homepage.jsx

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

client/components/pages/login.jsx

@@ -1,107 +0,0 @@
-import React, { useContext, useRef } from 'react';
-import { Redirect } from 'react-router-dom';
-
-import { TokenContext } from '../utilities/token-provider';
-
-const validateEmail = require('../../../common/utilities/validate-email');
-
-const LogIn = props => {
-	//context
-	const authTokens = useContext(TokenContext);
-
-	//misplaced?
-	if (authTokens.accessToken) {
-		return <Redirect to='/' />;
-	}
-
-	//refs
-	const emailRef = useRef();
-	const passwordRef = useRef();
-
-	return (
-		<div className='page'>
-			<h1 className='centered'>Login</h1>
-			<form className='constricted' onSubmit={
-				async evt => {
-					//on submit
-					evt.preventDefault();
-					const [err, newTokens] = await handleSubmit(emailRef.current.value, passwordRef.current.value);
-					if (err) {
-						alert(err);
-					}
-
-					//save auth tokens and redirect
-					if (newTokens) {
-						authTokens.setAccessToken(newTokens.accessToken);
-						authTokens.setRefreshToken(newTokens.refreshToken);
-
-						props.history.push('/');
-					}
-				}
-			}>
-				<div>
-					<label htmlFor="email">Email:</label>
-					<input type="email" name="email" ref={emailRef} />
-				</div>
-
-				<div>
-					<label htmlFor="password">Password:</label>
-					<input type="password" name="password" ref={passwordRef} />
-				</div>
-
-				<button type='submit'>Login</button>
-			</form>
-		</div>
-	);
-};
-
-//DOCS: returns two values: err and authTokens
-const handleSubmit = async (email, password) => {
-	email = email.trim();
-
-	const err = handleValidation(email, password);
-
-	if (err) {
-		return [err, false];
-	}
-
-	//send to the auth server
-	const result = await fetch(`${process.env.AUTH_URI}/auth/login`, {
-		method: 'POST',
-		headers: {
-			'Content-Type': 'application/json',
-			'Access-Control-Allow-Origin': '*'
-		},
-		body: JSON.stringify({
-			email,
-			password,
-		})
-	});
-
-	//handle errors
-	if (!result.ok) {
-		const err = `${result.status}: ${await result.text()}`;
-		console.error(err);
-		return [err, false];
-	}
-
-	//return the new auth tokens
-	const newTokens = await result.json();
-	return [null, newTokens];
-};
-
-//returns an error message, or null on success
-const handleValidation = (email, password) => {
-	if (!validateEmail(email)) {
-		return 'invalid email';
-	}
-
-	if (password.length < 8) {
-		return 'invalid password (Must be at least 8 characters long)';
-	}
-
-	return null;
-};
-
-
-export default LogIn;

client/components/pages/mod.jsx

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

client/components/pages/not-found.jsx

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

client/components/pages/reset.jsx

@@ -1,89 +0,0 @@
-import React, { useContext, useRef } from 'react';
-import { Redirect } from 'react-router-dom';
-import queryString from 'query-string';
-
-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();
-	const resetRef = useRef();
-
-	//render the thing
-	return (
-		<div className='page'>
-			<h1 className='centered'>Reset Password</h1>
-			<form className='constricted' onSubmit={async evt => {
-				evt.preventDefault();
-				const [err] = await update(passwordRef.current.value, retypeRef.current.value, query);
-
-				if (err) {
-					alert(err);
-					return;
-				}
-
-				alert('Details updated');
-
-				//redirect
-				if (redirect) {
-					props.history.push('/');
-				}
-			}}>
-				<div>
-					<div>
-						<label htmlFor='password'>Enter New Password:</label> 
-						<input type='password' name='password' ref={passwordRef} />
-					</div>
-
-					<div>
-						<label htmlFor='retype'>Retype New Password:</label> 
-						<input type='password' name='retype' ref={retypeRef} />
-					</div>
-				</div>
-
-				<button type='submit'>Update Information</button>
-			</form>
-		</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: {
-			'Access-Control-Allow-Origin': '*',
-			'Content-Type': 'application/json'
-		},
-		body: JSON.stringify({
-			password: password ? password : null,
-		})
-	});
-
-	if (!result.ok) {
-		return [`${await result.status}: ${await result.text()}`];
-	} else {
-		return [null];
-	}
-}
-
-export default Reset;

client/components/pages/signup.jsx

@@ -1,132 +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();
-	const signupRef = useRef();
-
-	return (
-		<div className='page'>
-			<h1 className='centered'>Signup</h1>
-			<form className='constricted' 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('/');
-					}
-				}
-			}>
-				<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' ref={signupRef}>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;

client/components/panels/chat-reports.jsx

@@ -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.chatlogIndex, authTokens.tokenFetch, setReports)}>Delete</button></td>
-					</tr>
-				))}
-			</tbody>
-		</table>
-	);
-};
-
-const deleteReportsFor = (chatlogIndex, tokenFetch, setReports) => {
-	tokenFetch(`${process.env.CHAT_URI}/admin/reports`, {
-		method: 'DELETE',
-		headers: {
-			'Content-Type': 'application/json',
-			'Access-Control-Allow-Origin': '*'
-		},
-		body: JSON.stringify({ chatlogIndex })
-	});
-
-	setReports(reports => reports.filter(report => report.chatlogIndex != chatlogIndex));
-};
-
-export default ChatReports;

client/components/panels/footer.jsx

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

client/components/panels/header.jsx

@@ -1,78 +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>
-			<span> - </span>
-			<Link to='/recover'>Recover</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;

client/components/panels/markdown.jsx

@@ -1,35 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-
-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 rehypePlugins={[rehypeRaw]} escapeHtml={false} props={{...props}}>{contentHook}</ReactMarkdown>
-	);
-};
-
-export default Markdown;

client/components/utilities/lazy-route.jsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Route } from 'react-router-dom';
-import loadable from '@loadable/component';
-
-const LazyRoute = props => {
-	const { component, ...lazyProps } = props;
-
-	const lazyComponent = loadable(component);
-
-	return <Route {...lazyProps} component={lazyComponent} />
-};
-
-export default LazyRoute;

client/markdown/credits.md

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

client/markdown/privacy-policy.md

@@ -1,2 +0,0 @@
-# Privacy Policy
-

client/pages/accounts/account.jsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useContext, useRef } from 'react';
+import { Link, Navigate } 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 <Navigate 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`)
+			.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;

client/pages/accounts/login.jsx

@@ -0,0 +1,109 @@
+import React, { useContext, useRef } from 'react';
+import { Link, Navigate } 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 => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//misplaced?
+	if (authTokens.accessToken) {
+		return <Navigate to='/' />;
+	}
+
+	//refs
+	const emailRef = useRef();
+	const passwordRef = useRef();
+
+	return (
+		<>
+			<ApplyToBody className='dashboard' />
+			<div className='page'>
+				<div className='central panel centered middle'>
+					<div className='panel'>
+						<h1 className='text centered'>Login</h1>
+						<form className='constrained' onSubmit={
+							async evt => {
+								//on submit
+								evt.preventDefault();
+								const [err, accessToken] = await handleSubmit(emailRef.current.value, passwordRef.current.value);
+								if (err) {
+									alert(err);
+								}
+
+								//save auth tokens and redirect
+								if (accessToken) {
+									authTokens.setAccessToken(accessToken);
+
+									return <Navigate to='/' />;
+								}
+							}
+						}>
+							<input type='email' name='email' placeholder='your@email.com' ref={emailRef} />
+							<input type='password' name='password' placeholder='********' ref={passwordRef} />
+							<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>
+		</>
+	);
+};
+
+//DOCS: returns two values: err and authTokens
+const handleSubmit = async (email, password) => {
+	email = email.trim();
+
+	const err = handleValidation(email, password);
+
+	if (err) {
+		return [err, false];
+	}
+
+	//send to the auth server
+	const result = await fetch(`${process.env.AUTH_URI}/auth/login`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		body: JSON.stringify({
+			email,
+			password,
+		}),
+		credentials: 'include'
+	});
+
+	//handle errors
+	if (!result.ok) {
+		const err = `${result.status}: ${await result.text()}`;
+		console.error(err);
+		return [err, false];
+	}
+
+	//return the new auth tokens
+	const accessToken = await result.text();
+	return [null, accessToken];
+};
+
+//returns an error message, or null on success
+const handleValidation = (email, password) => {
+	if (!validateEmail(email)) {
+		return 'invalid email';
+	}
+
+	if (password.length < 8) {
+		return 'invalid password (Must be at least 8 characters long)';
+	}
+
+	return null;
+};
+
+
+export default Login;

client/pages/accounts/panels/delete-account.jsx

@@ -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 => {
-			evt.preventDefault();
-			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} />
-			</div>
+		<div className='panel centered middle'>
+			<h2 className='text centered'>Delete Your Account?</h2>
+			<form className='constrained' onSubmit={async evt => {
+				evt.preventDefault();
+				const [err] = await handleSubmit(passwordRef.current.value, authTokens);
+				if (err) {
+					alert(err);
+				}
+			}}>
+				<input type="password" name="password" placeholder='Password' ref={passwordRef} />
 
-			<button type='submit'>Delete Account</button>
-			<button type='cancel' onClick={() => { passwordRef.current.value = ''; setOpen(false); }}>Cancel</button>
-		</form>
+				<button type='submit' style={{backgroundColor: 'red'}}>Delete Account</button>
+				<button type='cancel' onClick={() => { passwordRef.current.value = ''; setOpen(false); }}>Cancel</button>
+			</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({
@@ -50,14 +51,7 @@ const handleSubmit = async (password, authTokens) => {
 
 	//force a logout
 	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({
-			token: authTokens.refreshToken
-		})
+		method: 'DELETE'
 	});
 
 	if (!result2.ok) {
@@ -65,7 +59,6 @@ const handleSubmit = async (password, authTokens) => {
 	}
 
 	authTokens.setAccessToken('');
-	authTokens.setRefreshToken('');
 
 	return [null];
 };

client/pages/accounts/panels/logout.jsx

@@ -0,0 +1,29 @@
+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'
+				});
+
+				//any problems?
+				if (!result.ok) {
+					console.error(await result.text());
+				} else {
+					authTokens.setAccessToken('');
+				}
+			}}>Logout</Link>
+		</>
+	);
+};
+
+export default Logout;

client/pages/accounts/recover.jsx

@@ -1,5 +1,7 @@
 import React, { useContext, useRef } from 'react';
-import { Redirect } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+
+import ApplyToBody from '../utilities/apply-to-body';
 
 import { TokenContext } from '../utilities/token-provider';
 
@@ -7,12 +9,15 @@ import { TokenContext } from '../utilities/token-provider';
 const validateEmail = require('../../../common/utilities/validate-email');
 
 const Recover = props => {
+	//history
+	const navigate = useNavigate();
+
 	//context
 	const authTokens = useContext(TokenContext);
 
 	//misplaced?
 	if (authTokens.accessToken) {
-		return <Redirect to='/' />;
+		navigate("/");
 	}
 
 	//refs
@@ -20,32 +25,34 @@ const Recover = props => {
 	const recoverRef = useRef();
 
 	return (
-		<div className='page'>
-			<h1 className='centered'>Recover Password</h1>
-			<form className='constricted' 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;
-					}
+		<>
+			<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('/');
-					}
-				}
-			}>
-				<div>
-					<label htmlFor='email'>Enter Your Email:</label>
-					<input type='email' name='email' ref={emailRef} />
+							//redirect
+							if (redirect) {
+								navigate("/");
+							}
+						}
+					}>
+						<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>
-
-				<button type='submit' ref={recoverRef}>Recover Password</button>
-			</form>
-		</div>
+			</div>
+		</>
 	);
 };
 
@@ -62,8 +69,7 @@ const handleSubmit = async (email) => {
 	const result = await fetch(`${process.env.AUTH_URI}/auth/recover`, {
 		method: 'POST',
 		headers: {
-			'Content-Type': 'application/json',
-			'Access-Control-Allow-Origin': '*'
+			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
 			email

client/pages/accounts/reset.jsx

@@ -0,0 +1,87 @@
+import React, { useContext, useRef } from 'react';
+import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+
+import ApplyToBody from '../utilities/apply-to-body';
+
+import { TokenContext } from '../utilities/token-provider';
+
+const Reset = props => {
+	//params
+	const [params, setParams] = useSearchParams(); //the URLSearchParams API
+
+	//history
+	const navigate = useNavigate();
+
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//misplaced?
+	if (authTokens.accessToken || !params.has('email') || !params.has('token')) {
+		navigate("/");
+	}
+
+	//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, params);
+
+						if (err) {
+							alert(err);
+							return;
+						}
+
+						alert('Details updated'); //TODO: replace with a message from the auth server
+
+						//redirect
+						if (redirect) {
+							navigate("/");
+						}
+					}}>
+						<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, params) => {
+	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=${params.get('email')}&token=${params.get('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;

client/pages/accounts/signup.jsx

@@ -0,0 +1,129 @@
+import React, { useContext, useRef } from 'react';
+import { Link, useNavigate } 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 => {
+	//history
+	const navigate = useNavigate();
+
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//misplaced?
+	if (authTokens.accessToken) {
+		navigate("/");
+	}
+
+	//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) {
+								navigate("/");
+							}
+						}
+					}>
+
+						<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;

client/pages/administration/admin.jsx

@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+import { Link, Navigate } 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 <Navigate 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;

client/pages/administration/mod.jsx

@@ -0,0 +1,43 @@
+import React, { useContext } from 'react';
+import { Link, Navigate } 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 <Navigate 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;

client/pages/administration/panels/ban-user.jsx

@@ -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>
-			<h2 className='centered'>Permanently Ban User</h2>
-			<form>
-				<div>
-					<label htmlFor='username'>Username:</label>
-					<input type='text' name='username' ref={usernameRef} />
-				</div>
+		<div className='panel'>
+			<h2 className='text centered'>Permanently Ban User</h2>
+			<form className='constrained'>
+				<input type='text' name='username' placeholder='Username' ref={usernameRef} />
 
 				<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',
-			'Access-Control-Allow-Origin': '*'
+			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
 			username

client/pages/administration/panels/chat-reports.jsx

@@ -0,0 +1,62 @@
+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(() => {
+		authTokens.tokenFetch(`${process.env.CHAT_URI}/admin/reports`)
+			.then(res => res.json())
+			.then(json => {
+				setReports(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;

client/pages/administration/panels/grant-admin.jsx

@@ -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>
-			<h2 className='centered'>Grant Admin Privileges</h2>
-			<form>
-				<div>
-					<label htmlFor='username'>Username:</label>
-					<input type='text' name='username' ref={usernameRef} />
-				</div>
+		<div className='panel'>
+			<h2 className='text centered'>Grant Admin Privileges</h2>
+			<form className='constrained'>
+				<input type='text' name='username' placeholder='Username' ref={usernameRef} />
 
 				<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',
-			'Access-Control-Allow-Origin': '*'
+			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
 			username

client/pages/administration/panels/grant-mod.jsx

@@ -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>
-			<h2 className='centered'>Grant Moderation Privileges</h2>
-			<form>
-				<div>
-					<label htmlFor='username'>Username:</label>
-					<input type='text' name='username' ref={usernameRef} />
-				</div>
+		<div className='panel'>
+			<h2 className='text centered'>Grant Moderation Privileges</h2>
+			<form className='constrained'>
+				<input type='text' name='username' placeholder='Username' ref={usernameRef} />
 
 				<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',
-			'Access-Control-Allow-Origin': '*'
+			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
 			username

client/pages/administration/panels/news-editor.jsx

@@ -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
@@ -17,57 +17,40 @@ const NewsEditor = props => {
 	const [index, setIndex] = useState(null);
 
 	//run once
-	useEffect(async () => {
-		const result = await fetch(`${process.env.NEWS_URI}/news/metadata?limit=999`, {
-			method: 'GET',
-			headers: {
-				'Content-Type': 'application/json',
-				'Access-Control-Allow-Origin': '*'
-			},
-		});
-
-		if (!result.ok) {
-			const err = `${result.status}: ${await result.text()}`;
-			console.log(err);
-			alert(err);
-		} else {
-			setArticles(await result.json());
-		}
+	useEffect(() => {
+		fetch(`${process.env.NEWS_URI}/news/metadata?limit=999`)
+			.then(res => res.json())
+			.then(json => {
+				setArticles(json)
+			})
+		;
 	}, []);
 
 	return (
-		<div>
-			<h2 className='centered'>News Editor</h2>
-			<div>
-				<label htmlFor='article'>Article: </label>
-				<Select
-					options={articles.map(article => { return { label: article.title, value: article.index }; })}
-					onChange={async values => {
-						//fetch this article
-						const index = values[0].value;
+		<div className='panel'>
+			<h2 className='text centered'>News Editor</h2>
+			<Select
+				options={articles.map(article => { return { label: article.title, index: article.index }; })}
+				onChange={async ({index}) => {
+					//fetch this article
+					const result = await fetch(`${process.env.NEWS_URI}/news/archive/${index}`);
 
-						const result = await fetch(`${process.env.NEWS_URI}/news/archive/${index}`, {
-							headers: {
-								'Access-Control-Allow-Origin': '*'
-							}
-						});
+					if (!result.ok) {
+						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);
+				}
+				}}
+				placeholder='Select Article'
+			/>
 
-						if (!result.ok) {
-							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 => {
+			<form className='constrained' onSubmit={async evt => {
 				//onSubmit
 				evt.preventDefault();
 				const [err] = await handleSubmit(titleRef.current.value, authorRef.current.value, bodyRef.current.value, index, authTokens.tokenFetch);
@@ -78,20 +61,9 @@ const NewsEditor = props => {
 					alert(`Edited as article index ${index}`);
 				}
 			}}>
-				<div>
-					<label htmlFor='title'>Title: </label>
-					<input type='text' name='title' ref={titleRef} />
-				</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>
+				<input type='text' name='title' placeholder='Title' ref={titleRef} />
+				<input type='text' name='author' placeholder='Author' ref={authorRef} />
+				<textarea name='body' rows='10' cols='150' placeholder='Body of the article goes here...' ref={bodyRef} />
 
 				<button type='submit'>Update</button>
 				<button type='button' onClick={async evt => {
@@ -122,8 +94,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',
-			'Access-Control-Allow-Origin': '*'
+			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
 			title,

client/pages/administration/panels/news-publisher.jsx

@@ -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>
-			<h2 className='centered'>News Publisher</h2>
-			<form onSubmit={async evt => {
+		<div className='panel'>
+			<h2 className='text centered'>News Publisher</h2>
+			<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>
-					<label htmlFor='title'>Title: </label>
-					<input type='text' name='title' ref={titleRef} />
-				</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>
+				<input type='text' name='title' placeholder='Title' ref={titleRef} />
+				<input type='text' name='author' placeholder='Author' ref={authorRef} />
+				<textarea name='body' rows='10' cols='150' placeholder='Body of the article goes here...' ref={bodyRef} />
 
 				<button type='submit'>Publish</button>
 			</form>
@@ -57,8 +46,7 @@ const handleSubmit = async (title, author, body, tokenFetch) => {
 		{
 			method: 'POST',
 			headers: {
-				'Content-Type': 'application/json',
-				'Access-Control-Allow-Origin': '*'
+				'Content-Type': 'application/json'
 			},
 			body: JSON.stringify({
 				title,

client/pages/app.jsx

@@ -0,0 +1,60 @@
+//react
+import React, { useContext, Suspense, lazy } from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { TokenContext } from './utilities/token-provider';
+
+//styling
+import '../styles/styles.css';
+
+//common components
+import Footer from './panels/footer';
+import PopupChat from './panels/popup-chat';
+
+//lazy wrappers
+const Homepage = lazy(() => import('./homepage'));
+const Signup = lazy(() => import('./accounts/signup'));
+const Login = lazy(() => import('./accounts/login'));
+const Account = lazy(() => import('./accounts/account'));
+const Dashboard = lazy(() => import('./dashboard'));
+const Recover = lazy(() => import('./accounts/recover'));
+const Reset = lazy(() => import('./accounts/reset'));
+const Admin = lazy(() => import('./administration/admin'));
+const Mod = lazy(() => import('./administration/mod'));
+const PrivacyPolicy = lazy(() => import('./static/privacy-policy'));
+const Credits = lazy(() => import('./static/credits'));
+const NotFound = lazy(() => import('./not-found'));
+
+const App = props => {
+	const authTokens = useContext(TokenContext);
+
+	//default render
+	return (
+		<BrowserRouter>
+			<Suspense>
+				<Routes>
+					<Route exact path='/' element={<Homepage />} />
+
+					<Route path='/signup' element={<Signup />} />
+					<Route path='/login' element={<Login />} />
+					<Route path='/account' element={<Account />} />
+					<Route path='/dashboard' element={<Dashboard />} />
+
+					<Route path='/recover' element={<Recover />} />
+					<Route path='/reset' element={<Reset />} />
+
+					<Route path='/admin' element={<Admin />} />
+					<Route path='/mod' element={<Mod />} />
+
+					<Route path='/privacypolicy' element={<PrivacyPolicy />} />
+					<Route path='/credits' element={<Credits />} />
+
+					<Route path='*' element={<NotFound />} />
+				</Routes>
+			</Suspense>
+			{ authTokens.accessToken ? <PopupChat /> : <></> }
+			<Footer />
+		</BrowserRouter>
+	);
+};
+
+export default App;

client/pages/dashboard.jsx

@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import { Link, Navigate } 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 <Navigate 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;

client/pages/homepage.jsx

@@ -0,0 +1,45 @@
+import React, { useContext } from 'react';
+import { Link, Navigate } 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 <Navigate 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;

client/pages/not-found.jsx

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

client/pages/panels/footer.jsx

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

client/pages/panels/news-feed.jsx

@@ -8,11 +8,6 @@ const NewsFeed = props => {
 	useEffect(() => {
 		//this... um...
 		fetch(`${process.env.NEWS_URI}/news`, {
-			method: 'GET',
-			headers: {
-				'Content-Type': 'application/json',
-				'Access-Control-Allow-Origin': '*'
-			},
 			signal: aborter.current.signal //oh dear
 		})
 			.then(blob => blob.json())
@@ -24,33 +19,21 @@ const NewsFeed = props => {
 	}, []);
 
 	return (
-		<div>
-			<h1 className='centered'>News Feed</h1>
-			{(articles || []).map((article, index) => {
-				//BUGFIX: check for empty data
-				if (!article.title) {
-					return article.title = '';
-				}
-
-				if (!article.author) {
-					return article.author = '';
-				}
-
-				if (!article.body) {
-					return article.body = '';
-				}
-
-				//render
+		<div className='panel'>
+			<h1 className='text centered'>News Feed</h1>
+			{articles.map((article, index) => {
 				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>
-						<p style={{whiteSpace: 'pre-wrap'}}>{article.body}</p>
+						}</em></p>
+						<br />
+						<div dangerouslySetInnerHTML={{ __html: article.rendered }} />
 					</div>
 				);
 			})}

client/pages/panels/popup-chat.jsx

@@ -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.index && !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) => {

client/pages/static/credits.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Static = props => {
+	return (
+		<div className='page central'>
+			<header>
+				<h1 className='text centered'>Credits</h1>
+			</header>
+			<h2 className='text centered'>MERN-template</h2>
+			<p>The <a href='https://github.com/krgamestudios/MERN-template'>MERN-template</a> developed by Kayne Ruse, KR Game Studios</p>
+
+			<Link className='text centered' to='/'>Return Home</Link>
+		</div>
+	);
+};
+
+export default Static;

client/pages/static/privacy-policy.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Static = props => {
+	return (
+		<div className='page central'>
+			<header>
+				<h1 className="text centered">Privacy Policy</h1>
+
+				<Link className='text centered' to='/'>Return Home</Link>
+			</header>
+		</div>
+	);
+};
+
+export default Static;

client/pages/utilities/apply-to-body.jsx

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

client/pages/utilities/token-provider.jsx

@@ -3,20 +3,27 @@ import decode from 'jwt-decode';
 
 export const TokenContext = createContext();
 
-const TokenProvider = props => {
-	const [accessToken, setAccessToken] = useState('');
-	const [refreshToken, setRefreshToken] = useState('');
+//DOCS: tokenFetch() and tokenCallback() are actually closures here
 
-	//make the access and refresh tokens persist between reloads
+const TokenProvider = props => {
+	//state to be used
+	const [accessToken, setAccessToken] = useState('');
+
+	//force a logout under certain conditions
+	const forceLogout = () => {
+		localStorage.removeItem("accessToken");
+		setAccessToken("");
+	};
+
+	//make the access token persist between reloads
 	useEffect(() => {
 		setAccessToken(localStorage.getItem("accessToken") || '');
-		setRefreshToken(localStorage.getItem("refreshToken") || '');
 	}, []);
 
+	//update the stored copies
 	useEffect(() => {
 		localStorage.setItem("accessToken", accessToken);
-		localStorage.setItem("refreshToken", refreshToken);
-	}, [accessToken, refreshToken]);
+	}, [accessToken]);
 
 	//wrap the default fetch function
 	const tokenFetch = async (url, options) => {
@@ -27,20 +34,28 @@ const TokenProvider = props => {
 		const expired = new Date(decode(accessToken).exp * 1000) < Date.now();
 
 		if (expired) {
-			//ping the auth server for a new token
+			//BUGFIX: if logging out, just skip over the refresh token
+			if (url === `${process.env.AUTH_URI}/auth/logout`) {
+				return fetch(url, {
+					method: 'DELETE',
+					headers: {
+						'Authorization': `Bearer ${bearer}`
+					},
+					credentials: 'include'
+				});
+			}
+
+			//ping the auth server for a new access token
 			const response = await fetch(`${process.env.AUTH_URI}/auth/token`, {
 				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-					'Access-Control-Allow-Origin': '*'
-				},
-				body: JSON.stringify({
-					token: refreshToken
-				})
+				credentials: 'include'
 			});
 
 			//any errors, throw them
 			if (!response.ok) {
+				if (response.status == 403) {
+					forceLogout();
+				}
 				throw `${response.status}: ${await response.text()}`;
 			}
 
@@ -48,23 +63,7 @@ const TokenProvider = props => {
 			const newAuth = await response.json();
 
 			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
@@ -73,7 +72,8 @@ const TokenProvider = props => {
 			headers: {
 				...(options || { headers: {} }).headers,
 				'Authorization': `Bearer ${bearer}`
-			}
+			},
+			credentials: 'include'
 		});
 	};
 
@@ -86,17 +86,14 @@ const TokenProvider = props => {
 			//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',
-					'Access-Control-Allow-Origin': '*'
-				},
-				body: JSON.stringify({
-					token: refreshToken
-				})
+				credentials: 'include'
 			});
 
 			//any errors, throw them
 			if (!response.ok) {
+				if (response.status == 403) {
+					forceLogout();
+				}
 				throw `${response.status}: ${await response.text()}`;
 			}
 
@@ -104,7 +101,6 @@ const TokenProvider = props => {
 			const newAuth = await response.json();
 
 			setAccessToken(newAuth.accessToken);
-			setRefreshToken(newAuth.refreshToken);
 
 			//finally
 			return cb(newAuth.accessToken);
@@ -114,7 +110,7 @@ const TokenProvider = props => {
 	};
 
 	return (
-		<TokenContext.Provider value={{ accessToken, refreshToken, setAccessToken, setRefreshToken, tokenFetch, tokenCallback, getPayload: () => decode(accessToken) }}>
+		<TokenContext.Provider value={{ accessToken, setAccessToken, tokenFetch, tokenCallback, getPayload: () => decode(accessToken) }}>
 			{props.children}
 		</TokenContext.Provider>
 	)

client/styles/popup-chat.css

@@ -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 {
-	width: calc(100% - 10px);
+.chat .input {
+	width: 100%;
 	height: 2em;
 }
 
-.chat > .log {
-	min-height: 300px;
+.chat .log {
+	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;
+	}
+}

client/styles/styles.css

@@ -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;
+	}
+}

client/template.html

@@ -22,6 +22,6 @@
 		<meta property="og:description" content="" />
 	</head>
 	<body>
-		<div id = "root"></div>
+		<div id="root"></div>
 	</body>
 </html>

configure-script.js

@@ -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');
@@ -62,6 +70,7 @@ See https://github.com/krgamestudios/MERN-template/wiki for help.
 	//auth configuration
 	const authName = await question('Auth Name', 'auth');
 	const authWebAddress = await question('Auth Web Address', `${authName}.${projectWebAddress}`);
+	const authPostValidationHookArray = await question('Auth Post Validation Hook Array', '');
 	const authResetAddress = await question('Auth Reset Addr', `${projectWebAddress}/reset`);
 	const authDBUser = await question('Auth DB Username', authName);
 	const authDBPass = await question('Auth DB Password', 'charizard');
@@ -180,6 +189,7 @@ services:
     environment:
       - WEB_PROTOCOL=https
       - WEB_ADDRESS=${authWebAddress}
+      - HOOK_POST_VALIDATION_ARRAY=${authPostValidationHookArray}
       - WEB_RESET_ADDRESS=${authResetAddress}
       - WEB_PORT=${authPort}
       - DB_HOSTNAME=database
@@ -245,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
@@ -265,7 +278,7 @@ networks:
 `;
 
 	const dockerfile = `
-FROM node:15
+FROM node:18
 WORKDIR "/app"
 COPY . /app
 RUN mkdir /app/public
@@ -279,24 +292,25 @@ CMD ["sleep 10 && npm start"]
 
 	const sqlfile = `
 CREATE DATABASE IF NOT EXISTS ${projectName};
-CREATE USER IF NOT EXISTS '${projectDBUser}'@'%' IDENTIFIED BY '${projectDBPass}';
-GRANT ALL PRIVILEGES ON ${projectName}.* TO '${projectDBUser}'@'%';
+CREATE USER IF NOT EXISTS '${projectDBUser}'@'${localAddress}' IDENTIFIED BY '${projectDBPass}';
+GRANT ALL PRIVILEGES ON ${projectName}.* TO '${projectDBUser}'@'${localAddress}';
 
 CREATE DATABASE IF NOT EXISTS ${newsName};
-CREATE USER IF NOT EXISTS '${newsDBUser}'@'%' IDENTIFIED BY '${newsDBPass}';
-GRANT ALL PRIVILEGES ON ${newsName}.* TO '${newsDBUser}'@'%';
+CREATE USER IF NOT EXISTS '${newsDBUser}'@'${localAddress}' IDENTIFIED BY '${newsDBPass}';
+GRANT ALL PRIVILEGES ON ${newsName}.* TO '${newsDBUser}'@'${localAddress}';
 
 CREATE DATABASE IF NOT EXISTS ${authName};
-CREATE USER IF NOT EXISTS '${authDBUser}'@'%' IDENTIFIED BY '${authDBPass}';
-GRANT ALL PRIVILEGES ON ${authName}.* TO '${authDBUser}'@'%';
+CREATE USER IF NOT EXISTS '${authDBUser}'@'${localAddress}' IDENTIFIED BY '${authDBPass}';
+GRANT ALL PRIVILEGES ON ${authName}.* TO '${authDBUser}'@'${localAddress}';
 
 CREATE DATABASE IF NOT EXISTS ${chatName};
-CREATE USER IF NOT EXISTS '${chatDBUser}'@'%' IDENTIFIED BY '${chatDBPass}';
-GRANT ALL PRIVILEGES ON ${chatName}.* TO '${chatDBUser}'@'%';
+CREATE USER IF NOT EXISTS '${chatDBUser}'@'${localAddress}' IDENTIFIED BY '${chatDBPass}';
+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);

package.json

@@ -1,61 +1,60 @@
-{
-  "name": "mern-template",
-  "version": "1.0.2",
-  "description": "A website template using the MERN stack.",
-  "main": "server/server.js",
-  "scripts": {
-    "start": "npm run build && node server/server.js",
-    "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",
-    "watch:server": "nodemon ./* --ext js,jsx,json --ignore 'node_modules/*'",
-    "watch:client": "webpack serve --env=development --config webpack.config.js",
-    "analyzer": "webpack --env=production --analyzer --config webpack.config.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/KRGameStudios/MERN-template.git"
-  },
-  "author": "Kayne Ruse",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/KRGameStudios/MERN-template/issues"
-  },
-  "homepage": "https://github.com/KRGameStudios/MERN-template#readme",
-  "dependencies": {
-    "@babel/core": "^7.14.8",
-    "@babel/preset-env": "^7.14.8",
-    "@babel/preset-react": "^7.14.5",
-    "@loadable/component": "^5.15.0",
-    "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "^3.0.0",
-    "concurrently": "^6.2.0",
-    "css-loader": "^6.2.0",
-    "dateformat": "^4.5.1",
-    "dotenv": "^10.0.0",
-    "express": "^4.17.1",
-    "html-webpack-plugin": "^5.3.2",
-    "jwt-decode": "^3.1.2",
-    "mariadb": "^2.5.4",
-    "query-string": "^7.0.1",
-    "raw-loader": "^4.0.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-dropdown-select": "^4.7.4",
-    "react-markdown": "^6.0.2",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "rehype-raw": "^5.1.0",
-    "sequelize": "^6.6.5",
-    "socket.io-client": "^4.1.3",
-    "style-loader": "^3.2.1",
-    "webpack": "^5.46.0",
-    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.7.2"
-  },
-  "devDependencies": {
-    "nodemon": "^2.0.12",
-    "webpack-dev-server": "^3.11.2"
-  }
-}
+{
+  "name": "mern-template",
+  "version": "1.4.0",
+  "description": "A website template using the MERN stack.",
+  "main": "server/server.js",
+  "scripts": {
+    "start": "npm run build && node server/server.js",
+    "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:dev:server npm:dev:client",
+    "dev:server": "nodemon --ext js,jsx,json --ignore 'node_modules/*'",
+    "dev:client": "webpack serve --env=development --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",
+    "url": "git+https://github.com/KRGameStudios/MERN-template.git"
+  },
+  "author": "Kayne Ruse",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/KRGameStudios/MERN-template/issues"
+  },
+  "homepage": "https://github.com/KRGameStudios/MERN-template#readme",
+  "dependencies": {
+    "@babel/core": "^7.20.5",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "babel-loader": "^8.3.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "compression-webpack-plugin": "^10.0.0",
+    "concurrently": "^7.6.0",
+    "css-loader": "^6.7.2",
+    "dateformat": "^5.0.3",
+    "dotenv": "^16.0.3",
+    "express": "^4.18.2",
+    "html-webpack-plugin": "^5.5.0",
+    "jwt-decode": "^3.1.2",
+    "mariadb": "^3.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.4.3",
+    "react-select": "^5.6.1",
+    "sequelize": "^6.25.8",
+    "socket.io-client": "^4.5.4",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-cli": "^4.10.0"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.20",
+    "webpack-dev-server": "^4.11.1"
+  }
+}

server/server.js

@@ -12,6 +12,21 @@ const server = require('http').Server(app);
 //config
 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');
 

webpack.config.js

@@ -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: production ? 'source-map' : '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.krgamestudios.com"',
-					'AUTH_URI': production ? `"${process.env.AUTH_URI}"` : '"https://dev-auth.krgamestudios.com"',
-					'CHAT_URI': production ? `"${process.env.CHAT_URI}"` : '"https://dev-chat.krgamestudios.com"',
+					'NEWS_URI': production ? `"${process.env.NEWS_URI}"` : development ? '"https://dev-news.krgamestudios.com"' : '"http://localhost:3100"',
+					'AUTH_URI': production ? `"${process.env.AUTH_URI}"` : development ? '"https://dev-auth.krgamestudios.com"' : '"http://localhost:3200"',
+					'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
-		},
-		watchOptions: {
-			ignored: /(node_modules)/
+			host: 'localhost',
+			port: 3001,
+			client: {
+				overlay: {
+					errors: true,
+					warnings: true,
+				},
+			},
+
+			watchFiles: {
+				options: {
+					ignored: ['node_modules/**']
+				}
+			},
+
+			proxy: {
+				'/api': {
+					target: 'http://localhost:3000'
+				}
+			},
+
+			static: '/public',
+
+			historyApiFallback: true
 		}
 	}
 };
-