From a0dbe0aee1d4263dfec87d2626eae6e9bbc2eceb Mon Sep 17 00:00:00 2001
From: Kayne Ruse <kayneruse@gmail.com>
Date: Sun, 22 Aug 2021 02:22:28 +1000
Subject: [PATCH] Imported the directory structure from egg trainer

---
 README.md                                     |   5 +-
 client/client.jsx                             |   4 +-
 client/components/app.jsx                     |  49 ---
 client/components/pages/admin.jsx             |  32 --
 client/components/pages/homepage.jsx          |  14 -
 client/components/pages/mod.jsx               |  27 --
 client/components/pages/not-found.jsx         |  11 -
 client/components/panels/chat-reports.jsx     |  67 ----
 client/components/panels/footer.jsx           |  12 -
 client/components/panels/header.jsx           |  78 -----
 client/markdown/credits.md                    |   8 +-
 client/markdown/privacy-policy.md             |   4 +-
 .../pages => pages/accounts}/account.jsx      |  66 ++--
 .../pages => pages/accounts}/login.jsx        |  69 ++--
 .../accounts}/panels/delete-account.jsx       |  34 +-
 client/pages/accounts/panels/logout.jsx       |  37 ++
 .../pages => pages/accounts}/recover.jsx      |  54 +--
 .../pages => pages/accounts}/reset.jsx        |  59 ++--
 .../pages => pages/accounts}/signup.jsx       |  89 +++--
 client/pages/administration/admin.jsx         |  43 +++
 client/pages/administration/mod.jsx           |  35 ++
 .../administration}/panels/ban-user.jsx       |  13 +-
 .../administration/panels/chat-reports.jsx    |  71 ++++
 .../administration}/panels/grant-admin.jsx    |  13 +-
 .../administration}/panels/grant-mod.jsx      |  13 +-
 .../administration}/panels/news-editor.jsx    |  75 ++--
 .../administration}/panels/news-publisher.jsx |  29 +-
 client/pages/app.jsx                          |  48 +++
 client/pages/dashboard.jsx                    |  35 ++
 client/pages/homepage.jsx                     |  46 +++
 client/pages/not-found.jsx                    |  21 ++
 client/pages/panels/footer.jsx                |  21 ++
 .../panels/news-feed.jsx                      |  32 +-
 .../panels/popup-chat.jsx                     |   5 +-
 client/pages/utilities/apply-to-body.jsx      |  19 ++
 .../utilities/lazy-route.jsx                  |   0
 client/pages/utilities/markdown-page.jsx      |  22 ++
 .../utilities/markdown-panel.jsx}             |   4 +-
 .../utilities/token-provider.jsx              |   0
 client/styles/popup-chat.css                  |  59 +++-
 client/styles/styles.css                      | 323 ++++++++++++++++++
 41 files changed, 1034 insertions(+), 612 deletions(-)
 delete mode 100644 client/components/app.jsx
 delete mode 100644 client/components/pages/admin.jsx
 delete mode 100644 client/components/pages/homepage.jsx
 delete mode 100644 client/components/pages/mod.jsx
 delete mode 100644 client/components/pages/not-found.jsx
 delete mode 100644 client/components/panels/chat-reports.jsx
 delete mode 100644 client/components/panels/footer.jsx
 delete mode 100644 client/components/panels/header.jsx
 rename client/{components/pages => pages/accounts}/account.jsx (51%)
 rename client/{components/pages => pages/accounts}/login.jsx (52%)
 rename client/{components => pages/accounts}/panels/delete-account.jsx (62%)
 create mode 100644 client/pages/accounts/panels/logout.jsx
 rename client/{components/pages => pages/accounts}/recover.jsx (55%)
 rename client/{components/pages => pages/accounts}/reset.jsx (53%)
 rename client/{components/pages => pages/accounts}/signup.jsx (52%)
 create mode 100644 client/pages/administration/admin.jsx
 create mode 100644 client/pages/administration/mod.jsx
 rename client/{components => pages/administration}/panels/ban-user.jsx (80%)
 create mode 100644 client/pages/administration/panels/chat-reports.jsx
 rename client/{components => pages/administration}/panels/grant-admin.jsx (83%)
 rename client/{components => pages/administration}/panels/grant-mod.jsx (83%)
 rename client/{components => pages/administration}/panels/news-editor.jsx (65%)
 rename client/{components => pages/administration}/panels/news-publisher.jsx (69%)
 create mode 100644 client/pages/app.jsx
 create mode 100644 client/pages/dashboard.jsx
 create mode 100644 client/pages/homepage.jsx
 create mode 100644 client/pages/not-found.jsx
 create mode 100644 client/pages/panels/footer.jsx
 rename client/{components => pages}/panels/news-feed.jsx (69%)
 rename client/{components => pages}/panels/popup-chat.jsx (90%)
 create mode 100644 client/pages/utilities/apply-to-body.jsx
 rename client/{components => pages}/utilities/lazy-route.jsx (100%)
 create mode 100644 client/pages/utilities/markdown-page.jsx
 rename client/{components/panels/markdown.jsx => pages/utilities/markdown-panel.jsx} (96%)
 rename client/{components => pages}/utilities/token-provider.jsx (100%)
 create mode 100644 client/styles/styles.css

diff --git a/README.md b/README.md
index 398e55d..dd027a7 100644
--- a/README.md
+++ b/README.md
@@ -75,6 +75,8 @@ To set up this template in development mode:
 
 - Full documentation
 	- Modding tutorials
+- Fully Featured News Blog (as a microservice)
+	- Individual pages for news articles
 
 # Coming Eventually
 
@@ -86,7 +88,6 @@ To set up this template in development mode:
 	- Private messaging
 	- Broadcasting to all channels
 	- Badges next to usernames
-- Better compression for client files
 - Backend for leaderboards (modding tutorial?)
 - Backend for energy systems (modding tutorial?)
-- Backend for items, shops, trading and currency
+- Backend for items, shops, trading and currency (modding tutorial?)
diff --git a/client/client.jsx b/client/client.jsx
index 1b52ed2..b6b08de 100644
--- a/client/client.jsx
+++ b/client/client.jsx
@@ -4,8 +4,8 @@ import 'regenerator-runtime/runtime';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-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>
diff --git a/client/components/app.jsx b/client/components/app.jsx
deleted file mode 100644
index 394d8f7..0000000
--- a/client/components/app.jsx
+++ /dev/null
@@ -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;
diff --git a/client/components/pages/admin.jsx b/client/components/pages/admin.jsx
deleted file mode 100644
index 9ef6dbf..0000000
--- a/client/components/pages/admin.jsx
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/client/components/pages/homepage.jsx b/client/components/pages/homepage.jsx
deleted file mode 100644
index 66d0cc8..0000000
--- a/client/components/pages/homepage.jsx
+++ /dev/null
@@ -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;
diff --git a/client/components/pages/mod.jsx b/client/components/pages/mod.jsx
deleted file mode 100644
index 22eccc5..0000000
--- a/client/components/pages/mod.jsx
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/client/components/pages/not-found.jsx b/client/components/pages/not-found.jsx
deleted file mode 100644
index bd080b1..0000000
--- a/client/components/pages/not-found.jsx
+++ /dev/null
@@ -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;
diff --git a/client/components/panels/chat-reports.jsx b/client/components/panels/chat-reports.jsx
deleted file mode 100644
index ea4f4aa..0000000
--- a/client/components/panels/chat-reports.jsx
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/client/components/panels/footer.jsx b/client/components/panels/footer.jsx
deleted file mode 100644
index ceb35ac..0000000
--- a/client/components/panels/footer.jsx
+++ /dev/null
@@ -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;
diff --git a/client/components/panels/header.jsx b/client/components/panels/header.jsx
deleted file mode 100644
index fee3d2d..0000000
--- a/client/components/panels/header.jsx
+++ /dev/null
@@ -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;
diff --git a/client/markdown/credits.md b/client/markdown/credits.md
index c48c416..f7f37b6 100644
--- a/client/markdown/credits.md
+++ b/client/markdown/credits.md
@@ -1,6 +1,10 @@
-# Credits
+<header>
+	<h1 class="text centered">Credits</h1>
+</header>
 
-MERN Template developed by Kayne Ruse, KR Game Studios
+## MERN-template
+
+The MERN-template developed by Kayne Ruse, KR Game Studios
 
 [https://github.com/krgamestudios/MERN-template](https://github.com/krgamestudios/MERN-template)
 
diff --git a/client/markdown/privacy-policy.md b/client/markdown/privacy-policy.md
index c6e8ae9..537a9a5 100644
--- a/client/markdown/privacy-policy.md
+++ b/client/markdown/privacy-policy.md
@@ -1,2 +1,4 @@
-# Privacy Policy
+<header>
+	<h1 class="text centered">Privacy Policy</h1>
+</header>
 
diff --git a/client/components/pages/account.jsx b/client/pages/accounts/account.jsx
similarity index 51%
rename from client/components/pages/account.jsx
rename to client/pages/accounts/account.jsx
index 6f34894..f91a78f 100644
--- a/client/components/pages/account.jsx
+++ b/client/pages/accounts/account.jsx
@@ -1,9 +1,11 @@
 import React, { useEffect, useContext, useRef } from 'react';
-import { Redirect } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
+
+import ApplyToBody from '../utilities/apply-to-body';
 
 import { TokenContext } from '../utilities/token-provider';
 
-import DeleteAccount from '../panels/delete-account';
+import DeleteAccount from './panels/delete-account';
 
 const Account = props => {
 	//context
@@ -35,42 +37,42 @@ const Account = props => {
 
 	//render the thing
 	return (
-		<div className='page'>
-			<h1 className='centered'>Account</h1>
-			<form className='constrained' onSubmit={async evt => {
-				evt.preventDefault();
-				const [err] = await update(passwordRef.current.value, retypeRef.current.value, contactRef.current.checked, authTokens.tokenFetch);
+		<>
+			<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;
-				}
+								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>
+								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} />
 
-					<div>
-						<label htmlFor='retype'>Retype Password:</label> 
-						<input type='password' name='retype' ref={retypeRef} />
-					</div>
+								<span>
+									<label htmlFor='contact'>Allow Promotional Emails:</label>
+									<input type='checkbox' name='contact' ref={contactRef} />
+								</span>
 
-					<div>
-						<label htmlFor='contact'>Allow Promotional Emails:</label>
-						<input type='checkbox' name='contact' ref={contactRef} />
+								<button type='submit'>Update Information</button>
+							</form>
+							<DeleteAccount />
+						</div>
+						<Link to='/' className='text centered'>Return Home</Link>\
 					</div>
 				</div>
-
-				<button type='submit'>Update Information</button>
-			</form>
-
-			<DeleteAccount className='constrained' />
-		</div>
+			</div>
+		</>
 	);
 };
 
diff --git a/client/components/pages/login.jsx b/client/pages/accounts/login.jsx
similarity index 52%
rename from client/components/pages/login.jsx
rename to client/pages/accounts/login.jsx
index 1cdc87f..8441d8d 100644
--- a/client/components/pages/login.jsx
+++ b/client/pages/accounts/login.jsx
@@ -1,11 +1,13 @@
 import React, { useContext, useRef } from 'react';
-import { Redirect } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
+
+import ApplyToBody from '../utilities/apply-to-body';
 
 import { TokenContext } from '../utilities/token-provider';
 
 const validateEmail = require('../../../common/utilities/validate-email');
 
-const LogIn = props => {
+const Login = props => {
 	//context
 	const authTokens = useContext(TokenContext);
 
@@ -19,39 +21,40 @@ const LogIn = props => {
 	const passwordRef = useRef();
 
 	return (
-		<div className='page'>
-			<h1 className='centered'>Login</h1>
-			<form className='constrained' onSubmit={
-				async evt => {
-					//on submit
-					evt.preventDefault();
-					const [err, newTokens] = await handleSubmit(emailRef.current.value, passwordRef.current.value);
-					if (err) {
-						alert(err);
-					}
+		<>
+			<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, 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);
+								//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} />
+									props.history.push('/');
+								}
+							}
+						}>
+							<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>
-					<label htmlFor="password">Password:</label>
-					<input type="password" name="password" ref={passwordRef} />
-				</div>
-
-				<button type='submit'>Login</button>
-			</form>
-		</div>
+			</div>
+		</>
 	);
 };
 
@@ -104,4 +107,4 @@ const handleValidation = (email, password) => {
 };
 
 
-export default LogIn;
\ No newline at end of file
+export default Login;
\ No newline at end of file
diff --git a/client/components/panels/delete-account.jsx b/client/pages/accounts/panels/delete-account.jsx
similarity index 62%
rename from client/components/panels/delete-account.jsx
rename to client/pages/accounts/panels/delete-account.jsx
index deffa43..50d2711 100644
--- a/client/components/panels/delete-account.jsx
+++ b/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>
 	);
 };
 
diff --git a/client/pages/accounts/panels/logout.jsx b/client/pages/accounts/panels/logout.jsx
new file mode 100644
index 0000000..2c9bca8
--- /dev/null
+++ b/client/pages/accounts/panels/logout.jsx
@@ -0,0 +1,37 @@
+import React, { useContext, useRef } from 'react';
+import { Link } from 'react-router-dom';
+
+import { TokenContext } from '../../utilities/token-provider';
+
+//TODO: make this an ACTUAL BUTTON
+const Logout = () => {
+	const authTokens = useContext(TokenContext);
+
+	return (
+		<>
+			{ /* Logout logs you out of the server too */ }
+			<Link to='/' onClick={async () => {
+				const result = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/logout`, { //NOTE: this gets overwritten as a bugfix
+					method: 'DELETE',
+					headers: {
+						'Content-Type': 'application/json',
+						'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('');
+				}
+			}}>Logout</Link>
+		</>
+	);
+};
+
+export default Logout;
\ No newline at end of file
diff --git a/client/components/pages/recover.jsx b/client/pages/accounts/recover.jsx
similarity index 55%
rename from client/components/pages/recover.jsx
rename to client/pages/accounts/recover.jsx
index 98cdc46..bcfd831 100644
--- a/client/components/pages/recover.jsx
+++ b/client/pages/accounts/recover.jsx
@@ -1,5 +1,7 @@
 import React, { useContext, useRef } from 'react';
-import { Redirect } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
+
+import ApplyToBody from '../utilities/apply-to-body';
 
 import { TokenContext } from '../utilities/token-provider';
 
@@ -20,32 +22,34 @@ const Recover = props => {
 	const recoverRef = useRef();
 
 	return (
-		<div className='page'>
-			<h1 className='centered'>Recover Password</h1>
-			<form className='constrained panel' 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) {
+								props.history.push('/');
+							}
+						}
+					}>
+						<input type='email' name='email' placeholder='your@email.com' ref={emailRef} />
+						<button type='submit' ref={recoverRef}>Recover Password</button>
+					</form>
+					<Link to='/' className='text centered'>Return Home</Link>
 				</div>
-
-				<button type='submit' ref={recoverRef}>Recover Password</button>
-			</form>
-		</div>
+			</div>
+		</>
 	);
 };
 
diff --git a/client/components/pages/reset.jsx b/client/pages/accounts/reset.jsx
similarity index 53%
rename from client/components/pages/reset.jsx
rename to client/pages/accounts/reset.jsx
index f5f9d04..fb3721c 100644
--- a/client/components/pages/reset.jsx
+++ b/client/pages/accounts/reset.jsx
@@ -1,7 +1,9 @@
 import React, { useContext, useRef } from 'react';
-import { Redirect } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
 import queryString from 'query-string';
 
+import ApplyToBody from '../utilities/apply-to-body';
+
 import { TokenContext } from '../utilities/token-provider';
 
 const Reset = props => {
@@ -19,43 +21,38 @@ const Reset = props => {
 	//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='constrained panel' onSubmit={async evt => {
-				evt.preventDefault();
-				const [err, redirect] = await update(passwordRef.current.value, retypeRef.current.value, query);
+		<>
+			<ApplyToBody className='dashboard' />
+			<div className='page'>
+				<div className='central panel centered middle'>
+					<h1 className='text centered'>Reset Password</h1>
+					<form className='constrained' onSubmit={async evt => {
+						evt.preventDefault();
+						const [err, redirect] = await update(passwordRef.current.value, retypeRef.current.value, query);
 
-				if (err) {
-					alert(err);
-					return;
-				}
+						if (err) {
+							alert(err);
+							return;
+						}
 
-				alert('Details updated');
+						alert('Details updated'); //TODO: replace with a message from the auth server
 
-				//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>
+						//redirect
+						if (redirect) {
+							props.history.push('/');
+						}
+					}}>
+						<input type='password' name='password' placeholder='New Password' ref={passwordRef} />
+						<input type='password' name='retype' placeholder='Retype New Password' ref={retypeRef} />
+						<button type='submit'>Update Information</button>
+					</form>
+					<Link to='/' className='text centered'>Return Home</Link>
 				</div>
-
-				<button type='submit'>Update Information</button>
-			</form>
-		</div>
+			</div>
+		</>
 	);
 };
 
diff --git a/client/components/pages/signup.jsx b/client/pages/accounts/signup.jsx
similarity index 52%
rename from client/components/pages/signup.jsx
rename to client/pages/accounts/signup.jsx
index 2d363d4..6297b76 100644
--- a/client/components/pages/signup.jsx
+++ b/client/pages/accounts/signup.jsx
@@ -1,5 +1,7 @@
 import React, { useContext, useRef } from 'react';
-import { Redirect } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
+
+import ApplyToBody from '../utilities/apply-to-body';
 
 import { TokenContext } from '../utilities/token-provider';
 
@@ -7,7 +9,7 @@ import { TokenContext } from '../utilities/token-provider';
 const validateEmail = require('../../../common/utilities/validate-email');
 const validateUsername = require('../../../common/utilities/validate-username');
 
-const SignUp = props => {
+const Signup = props => {
 	//context
 	const authTokens = useContext(TokenContext);
 
@@ -25,52 +27,45 @@ const SignUp = props => {
 	const signupRef = useRef();
 
 	return (
-		<div className='page'>
-			<h1 className='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;
-					}
+		<>
+			<ApplyToBody className='dashboard' />
+			<div className='page'>
+				<div className='central panel centered middle'>
+					<h1 className='text centered'>Signup</h1>
+					<form className='constrained' onSubmit={
+						async evt => { //on submit
+							signupRef.current.disabled = true;
+							evt.preventDefault();
+							const [result, redirect] = await handleSubmit(emailRef.current.value, usernameRef.current.value, passwordRef.current.value, retypeRef.current.value, contactRef.current.checked);
+							if (result) {
+								alert(result);
+								signupRef.current.disabled = false;
+							}
 
-					//redirect
-					if (redirect) {
-						props.history.push('/');
-					}
-				}
-			}>
-				<div>
-					<label htmlFor='email'>Email:</label>
-					<input type='email' name='email' ref={emailRef} />
+							//redirect
+							if (redirect) {
+								props.history.push('/');
+							}
+						}
+					}>
+
+						<input type='email' name='email' placeholder='your@email.com' ref={emailRef} />
+						<input type='text' name='username' placeholder='Username' ref={usernameRef} />
+						<input type='password' name='password' placeholder='********' ref={passwordRef} />
+						<input type='password' name='retype' placeholder='********' ref={retypeRef} />
+
+						<span>
+							<label htmlFor='contact'>Allow Emails:</label>
+							<input type='checkbox' name='contact' ref={contactRef} defaultChecked='true' />
+						</span>
+
+						<button type='submit' ref={signupRef}>Signup</button>
+					</form>
+					<Link to='/recover' className='text centered'>Forgot Password?</Link>
+					<Link to='/' className='text centered'>Return Home</Link>
 				</div>
-
-				<div>
-					<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>
+			</div>
+		</>
 	);
 };
 
@@ -129,4 +124,4 @@ const handleValidation = (email, username, password, retype) => {
 	return null;
 };
 
-export default SignUp;
\ No newline at end of file
+export default Signup;
\ No newline at end of file
diff --git a/client/pages/administration/admin.jsx b/client/pages/administration/admin.jsx
new file mode 100644
index 0000000..cf48c97
--- /dev/null
+++ b/client/pages/administration/admin.jsx
@@ -0,0 +1,43 @@
+import React, { useContext } from 'react';
+import { Link, Redirect } from 'react-router-dom';
+
+import ApplyToBody from '../utilities/apply-to-body';
+
+import { TokenContext } from '../utilities/token-provider';
+
+import NewsPublisher from './panels/news-publisher';
+import NewsEditor from './panels/news-editor';
+
+import GrantAdmin from './panels/grant-admin';
+import GrantMod from './panels/grant-mod';
+
+const Admin = props => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//misplaced? (admin only)
+	if (!authTokens.accessToken || !authTokens.getPayload().admin) {
+		return <Redirect to='/' />;
+	}
+
+	return (
+		<>
+			<ApplyToBody className='dashboard' />
+			<div className='page panel'>
+				<div className='central panel'>
+					<h1 className='text centered'>Administration Tools</h1>
+					<NewsPublisher />
+					<br />
+					<NewsEditor />
+					<br />
+					<GrantAdmin />
+					<br />
+					<GrantMod />
+					<Link to='/' className='text centered'>Return Home</Link>
+				</div>
+			</div>
+		</>
+	);
+};
+
+export default Admin;
\ No newline at end of file
diff --git a/client/pages/administration/mod.jsx b/client/pages/administration/mod.jsx
new file mode 100644
index 0000000..4413215
--- /dev/null
+++ b/client/pages/administration/mod.jsx
@@ -0,0 +1,35 @@
+import React, { useContext } from 'react';
+import { Link, Redirect } from 'react-router-dom';
+
+import ApplyToBody from '../utilities/apply-to-body';
+
+import { TokenContext } from '../utilities/token-provider';
+
+import ChatReports from './panels/chat-reports';
+import BanUser from './panels/ban-user';
+
+const Mod = props => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//misplaced? (admin only)
+	if (!authTokens.accessToken || !(authTokens.getPayload().admin || authTokens.getPayload().mod)) {
+		return <Redirect to='/' />;
+	}
+
+	return (
+		<>
+			<ApplyToBody className='dashboard' />
+			<div className='page panel'>
+				<div className='central panel'>
+					<h1 className='text centered'>Moderation Tools</h1>
+					<BanUser />
+					<ChatReports />
+					<Link to='/' className='text centered'>Return Home</Link>
+				</div>
+			</div>
+		</>
+	);
+};
+
+export default Mod;
\ No newline at end of file
diff --git a/client/components/panels/ban-user.jsx b/client/pages/administration/panels/ban-user.jsx
similarity index 80%
rename from client/components/panels/ban-user.jsx
rename to client/pages/administration/panels/ban-user.jsx
index 38dbe1b..17df65e 100644
--- a/client/components/panels/ban-user.jsx
+++ b/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();
diff --git a/client/pages/administration/panels/chat-reports.jsx b/client/pages/administration/panels/chat-reports.jsx
new file mode 100644
index 0000000..bfbd325
--- /dev/null
+++ b/client/pages/administration/panels/chat-reports.jsx
@@ -0,0 +1,71 @@
+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 (
+		<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',
+			'Access-Control-Allow-Origin': '*'
+		},
+		body: JSON.stringify({ chatlogIndex })
+	});
+
+	setReports(reports => reports.filter(report => report.chatlogIndex != chatlogIndex));
+};
+
+export default ChatReports;
\ No newline at end of file
diff --git a/client/components/panels/grant-admin.jsx b/client/pages/administration/panels/grant-admin.jsx
similarity index 83%
rename from client/components/panels/grant-admin.jsx
rename to client/pages/administration/panels/grant-admin.jsx
index f4970d5..236b1d1 100644
--- a/client/components/panels/grant-admin.jsx
+++ b/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();
diff --git a/client/components/panels/grant-mod.jsx b/client/pages/administration/panels/grant-mod.jsx
similarity index 83%
rename from client/components/panels/grant-mod.jsx
rename to client/pages/administration/panels/grant-mod.jsx
index f70905c..cbadf49 100644
--- a/client/components/panels/grant-mod.jsx
+++ b/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();
diff --git a/client/components/panels/news-editor.jsx b/client/pages/administration/panels/news-editor.jsx
similarity index 65%
rename from client/components/panels/news-editor.jsx
rename to client/pages/administration/panels/news-editor.jsx
index 4325586..60943cb 100644
--- a/client/components/panels/news-editor.jsx
+++ b/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 { TokenContext } from '../utilities/token-provider';
+import { TokenContext } from '../../utilities/token-provider';
 
 const NewsEditor = props => {
 	//context
@@ -36,38 +36,36 @@ const NewsEditor = props => {
 	}, []);
 
 	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, value: article.index }; })}
+				onChange={async values => {
+					//fetch this article
+					const index = values[0].value;
 
-						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);
+					const result = await fetch(`${process.env.NEWS_URI}/news/archive/${index}`, {
+						headers: {
+							'Access-Control-Allow-Origin': '*'
 						}
-					}}
-				/>
-			</div>
+					});
 
-			<form onSubmit={async evt => {
+					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'
+			/>
+
+			<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 +76,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 => {
diff --git a/client/components/panels/news-publisher.jsx b/client/pages/administration/panels/news-publisher.jsx
similarity index 69%
rename from client/components/panels/news-publisher.jsx
rename to client/pages/administration/panels/news-publisher.jsx
index 8db99e9..97fcd2a 100644
--- a/client/components/panels/news-publisher.jsx
+++ b/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,34 +12,23 @@ 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>
 		</div>
diff --git a/client/pages/app.jsx b/client/pages/app.jsx
new file mode 100644
index 0000000..ee6de0b
--- /dev/null
+++ b/client/pages/app.jsx
@@ -0,0 +1,48 @@
+//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 MarkdownPage from './utilities/markdown-page';
+
+//styling
+import '../styles/styles.css';
+
+//common components
+import Footer from './panels/footer';
+import PopupChat from './panels/popup-chat';
+
+const App = props => {
+	const authTokens = useContext(TokenContext);
+
+	//default render
+	return (
+		<BrowserRouter>
+				<Switch>
+					<LazyRoute exact path='/' component={() => import('./homepage')} />
+
+					<LazyRoute path='/signup' component={() => import('./accounts/signup')} />
+					<LazyRoute path='/login' component={() => import('./accounts/login')} />
+					<LazyRoute path='/account' component={() => import('./accounts/account')} />
+					<LazyRoute path='/dashboard' component={() => import('./dashboard')} />
+
+					<LazyRoute path='/recover' component={() => import('./accounts/recover')} />
+					<LazyRoute path='/reset' component={() => import('./accounts/reset')} />
+
+					<LazyRoute path='/admin' component={() => import('./administration/admin')} />
+					<LazyRoute path='/mod' component={() => import('./administration/mod')} />
+
+					<LazyRoute path='/privacypolicy' component={async () => () => <MarkdownPage content={require('../markdown/privacy-policy.md').default} />} />
+					<LazyRoute path='/credits' component={async () => () => <MarkdownPage content={require('../markdown/credits.md').default} />} />
+
+					<LazyRoute path='*' component={() => import('./not-found')} />
+				</Switch>
+				{ authTokens.accessToken ? <PopupChat /> : <></> }
+				<Footer />
+		</BrowserRouter>
+	);
+};
+
+export default App;
diff --git a/client/pages/dashboard.jsx b/client/pages/dashboard.jsx
new file mode 100644
index 0000000..e631c59
--- /dev/null
+++ b/client/pages/dashboard.jsx
@@ -0,0 +1,35 @@
+import React, { useContext } from 'react';
+import { Link, Redirect } from 'react-router-dom';
+
+import ApplyToBody from './utilities/apply-to-body';
+
+import { TokenContext } from './utilities/token-provider';
+
+import MarkdownPanel from './utilities/markdown-panel';
+import Logout from './accounts/panels/logout';
+
+const Dashboard = props => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//misplaced?
+	if (!authTokens.accessToken) {
+		return <Redirect to='/' />;
+	}
+
+	return (
+		<>
+			<ApplyToBody className='dashboard' />
+			<div className='page'>
+				<div className='central panel centered middle'>
+					<Link to='/account'>Account</Link>
+					{ authTokens.getPayload().admin ? <Link to='/admin' className='text centered'>Admin</Link> : <></> }
+					{ authTokens.getPayload().mod ? <Link to='/mod' className='text centered'>Mod</Link> : <></> }
+					<Logout />
+				</div>
+			</div>
+		</>
+	);
+};
+
+export default Dashboard;
diff --git a/client/pages/homepage.jsx b/client/pages/homepage.jsx
new file mode 100644
index 0000000..04096e0
--- /dev/null
+++ b/client/pages/homepage.jsx
@@ -0,0 +1,46 @@
+import React, { useContext } from 'react';
+import { Link, Redirect } from 'react-router-dom';
+
+import ApplyToBody from './utilities/apply-to-body';
+
+import { TokenContext } from './utilities/token-provider';
+
+import MarkdownPanel from './utilities/markdown-panel';
+import NewsFeed from './panels/news-feed';
+
+const HomePage = props => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//misplaced?
+	if (authTokens.accessToken) {
+		return <Redirect to='/dashboard' />;
+	}
+
+	return (
+		<>
+			<ApplyToBody className='homepage' />
+			<div className='page'>
+				<div className='panel above'>
+					<header>
+						<h1 className='text centered'>MERN Template</h1>
+						<h2 className='text centered'>This is the MERN-template</h2>
+					</header>
+
+					<div className='panel centered middle'>
+						<Link to='/signup'><button>Sign Up</button></Link>
+						<Link to='/login'><button>Login</button></Link>
+					</div>
+				</div>
+
+				<div className='panel below'>
+					<div className='central'>
+						<NewsFeed />
+					</div>
+				</div>
+			</div>
+		</>
+	);
+};
+
+export default HomePage;
diff --git a/client/pages/not-found.jsx b/client/pages/not-found.jsx
new file mode 100644
index 0000000..5621bb4
--- /dev/null
+++ b/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;
diff --git a/client/pages/panels/footer.jsx b/client/pages/panels/footer.jsx
new file mode 100644
index 0000000..04f1caf
--- /dev/null
+++ b/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-2021<Break /><Link to='/privacypolicy'>Privacy Policy</Link><Break /><Link to='/credits'>Credits</Link></p>
+		</footer>
+	);
+};
+
+export default Footer;
diff --git a/client/components/panels/news-feed.jsx b/client/pages/panels/news-feed.jsx
similarity index 69%
rename from client/components/panels/news-feed.jsx
rename to client/pages/panels/news-feed.jsx
index a3ee588..de54d40 100644
--- a/client/components/panels/news-feed.jsx
+++ b/client/pages/panels/news-feed.jsx
@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
 import dateFormat from 'dateformat';
 
+import MarkdownPanel from '../utilities/markdown-panel';
+
 const NewsFeed = props => {
 	const [articles, setArticles] = useState([]);
 	const aborter = useRef(new AbortController()); //BUGFIX: double-renders = double fetches + react update after unmount
@@ -24,33 +26,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 />
+						<MarkdownPanel style={{whiteSpace: 'pre-wrap'}} content={article.body} />
 					</div>
 				);
 			})}
diff --git a/client/components/panels/popup-chat.jsx b/client/pages/panels/popup-chat.jsx
similarity index 90%
rename from client/components/panels/popup-chat.jsx
rename to client/pages/panels/popup-chat.jsx
index 4018aff..fa256dd 100644
--- a/client/components/panels/popup-chat.jsx
+++ b/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();
@@ -96,7 +97,7 @@ 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'>{content}<a className='report' onClick={() => processReport(line, accessToken)}>!!!</a></li>;
 };
 
 const processReport = (line, accessToken) => {
diff --git a/client/pages/utilities/apply-to-body.jsx b/client/pages/utilities/apply-to-body.jsx
new file mode 100644
index 0000000..4c6c97d
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/client/components/utilities/lazy-route.jsx b/client/pages/utilities/lazy-route.jsx
similarity index 100%
rename from client/components/utilities/lazy-route.jsx
rename to client/pages/utilities/lazy-route.jsx
diff --git a/client/pages/utilities/markdown-page.jsx b/client/pages/utilities/markdown-page.jsx
new file mode 100644
index 0000000..fc290f8
--- /dev/null
+++ b/client/pages/utilities/markdown-page.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import ApplyToBody from '../utilities/apply-to-body';
+
+import MarkdownPanel from './markdown-panel';
+
+const MarkdownPage = props => {
+	return (
+		<>
+			<ApplyToBody className='dashboard' />
+			<div className='page'>
+				<div className='central panel'>
+					<MarkdownPanel uri={props.uri} content={props.content} />
+					<Link to='/' className='text centered'>Return Home</Link>
+				</div>
+			</div>
+		</>
+	)
+};
+
+export default MarkdownPage;
\ No newline at end of file
diff --git a/client/components/panels/markdown.jsx b/client/pages/utilities/markdown-panel.jsx
similarity index 96%
rename from client/components/panels/markdown.jsx
rename to client/pages/utilities/markdown-panel.jsx
index 21c3396..a816236 100644
--- a/client/components/panels/markdown.jsx
+++ b/client/pages/utilities/markdown-panel.jsx
@@ -20,10 +20,10 @@ const Markdown = props => {
 				.catch(e => console.error(e))
 			;
 		}, []);
-	} else
+	}
 
 	//assume raw info
-	if (!contentHook) {
+	else if (!contentHook) {
 		setContentHook(props.content);
 	}
 
diff --git a/client/components/utilities/token-provider.jsx b/client/pages/utilities/token-provider.jsx
similarity index 100%
rename from client/components/utilities/token-provider.jsx
rename to client/pages/utilities/token-provider.jsx
diff --git a/client/styles/popup-chat.css b/client/styles/popup-chat.css
index 7a2619e..7c7ad60 100644
--- a/client/styles/popup-chat.css
+++ b/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,76 @@
 	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 .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 +93,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;
+	}
+}
\ No newline at end of file
diff --git a/client/styles/styles.css b/client/styles/styles.css
new file mode 100644
index 0000000..2420c1b
--- /dev/null
+++ b/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;
+	}
+}