Imported the directory structure from egg trainer

2021-08-22 02:22:28 +10:00
parent f415a7ece2
commit a0dbe0aee1
41 changed files with 1034 additions and 612 deletions
@@ -0,0 +1,107 @@
+import React, { useEffect, useContext, useRef } from 'react';
+import { Link, Redirect } from 'react-router-dom';
+
+import ApplyToBody from '../utilities/apply-to-body';
+
+import { TokenContext } from '../utilities/token-provider';
+
+import DeleteAccount from './panels/delete-account';
+
+const Account = props => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//misplaced?
+	if (!authTokens.accessToken) {
+		return <Redirect to='/' />;
+	}
+
+	//refs
+	const passwordRef = useRef();
+	const retypeRef = useRef();
+	const contactRef = useRef();
+
+	//grab the user's info
+	useEffect(() => {
+		authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/account`, {
+			method: 'GET',
+			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 (
+		<>
+			<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: {
+			'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;
@@ -0,0 +1,110 @@
+import React, { useContext, useRef } from 'react';
+import { Link, Redirect } from 'react-router-dom';
+
+import ApplyToBody from '../utilities/apply-to-body';
+
+import { TokenContext } from '../utilities/token-provider';
+
+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 (
+		<>
+			<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);
+
+									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>
+		</>
+	);
+};
+
+//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;
@@ -0,0 +1,75 @@
+import React, { useState, useContext, useRef } from 'react';
+
+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 => {
+	const authTokens = useContext(TokenContext);
+	const [open, setOpen] = useState(false);
+	const passwordRef = useRef();
+
+	if (!open) {
+		return (
+			<button onClick={() => setOpen(true)}>Delete Account</button>
+		);
+	}
+
+	return (
+		<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' style={{backgroundColor: 'red'}}>Delete Account</button>
+				<button type='cancel' onClick={() => { passwordRef.current.value = ''; setOpen(false); }}>Cancel</button>
+			</form>
+		</div>
+	);
+};
+
+const handleSubmit = async (password, authTokens) => {
+	//schedule a deletion
+	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({
+			password
+		})
+	});
+
+	if (!result.ok) {
+		return [`${await result.status}: ${await result.text()}`];
+	}
+
+	//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
+		})
+	});
+
+	if (!result2.ok) {
+		return [`${await result2.status}: ${await result2.text()}`];
+	}
+
+	authTokens.setAccessToken('');
+	authTokens.setRefreshToken('');
+
+	return [null];
+};
+
+export default DeleteAccount;
@@ -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;
@@ -0,0 +1,95 @@
+import React, { useContext, useRef } from 'react';
+import { Link, Redirect } from 'react-router-dom';
+
+import ApplyToBody from '../utilities/apply-to-body';
+
+import { TokenContext } from '../utilities/token-provider';
+
+//utilities
+const validateEmail = require('../../../common/utilities/validate-email');
+
+const Recover = props => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//misplaced?
+	if (authTokens.accessToken) {
+		return <Redirect to='/' />;
+	}
+
+	//refs
+	const emailRef = useRef();
+	const recoverRef = useRef();
+
+	return (
+		<>
+			<ApplyToBody className='dashboard' />
+			<div className='page'>
+				<div className='central panel centered middle'>
+					<h1 className='text centered'>Forgot Password</h1>
+					<form className='constrained' onSubmit={
+						async evt => { //on submit
+							recoverRef.current.disabled = true;
+							evt.preventDefault();
+							const [result, redirect] = await handleSubmit(emailRef.current.value);
+							if (result) {
+								alert(result);
+								recoverRef.current.disabled = false;
+							}
+
+							//redirect
+							if (redirect) {
+								props.history.push('/');
+							}
+						}
+					}>
+						<input type='email' name='email' placeholder='your@email.com' ref={emailRef} />
+						<button type='submit' ref={recoverRef}>Recover Password</button>
+					</form>
+					<Link to='/' className='text centered'>Return Home</Link>
+				</div>
+			</div>
+		</>
+	);
+};
+
+const handleSubmit = async (email) => {
+	email = email.trim();
+
+	const err = handleValidation(email);
+
+	if (err) {
+		return [err];
+	}
+
+	//send to the auth server
+	const result = await fetch(`${process.env.AUTH_URI}/auth/recover`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			'Access-Control-Allow-Origin': '*'
+		},
+		body: JSON.stringify({
+			email
+		})
+	});
+
+	if (!result.ok) {
+		const err = `${result.status}: ${await result.text()}`;
+		console.error(err);
+		return [err, false];
+	}
+
+	return [await result.text(), true];
+};
+
+//returns an error message, or null on success
+const handleValidation = (email) => {
+	if (!validateEmail(email)) {
+		return 'invalid email';
+	}
+
+	return null;
+};
+
+export default Recover;
@@ -0,0 +1,86 @@
+import React, { useContext, useRef } from 'react';
+import { Link, Redirect } from 'react-router-dom';
+import queryString from 'query-string';
+
+import ApplyToBody from '../utilities/apply-to-body';
+
+import { TokenContext } from '../utilities/token-provider';
+
+const Reset = props => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//query
+	const query = queryString.parse(props.location.search);
+
+	//misplaced?
+	if (authTokens.accessToken || !query.email || !query.token) {
+		return <Redirect to='/' />;
+	}
+
+	//refs
+	const passwordRef = useRef();
+	const retypeRef = useRef();
+
+	//render the thing
+	return (
+		<>
+			<ApplyToBody className='dashboard' />
+			<div className='page'>
+				<div className='central panel centered middle'>
+					<h1 className='text centered'>Reset Password</h1>
+					<form className='constrained' onSubmit={async evt => {
+						evt.preventDefault();
+						const [err, redirect] = await update(passwordRef.current.value, retypeRef.current.value, query);
+
+						if (err) {
+							alert(err);
+							return;
+						}
+
+						alert('Details updated'); //TODO: replace with a message from the auth server
+
+						//redirect
+						if (redirect) {
+							props.history.push('/');
+						}
+					}}>
+						<input type='password' name='password' placeholder='New Password' ref={passwordRef} />
+						<input type='password' name='retype' placeholder='Retype New Password' ref={retypeRef} />
+						<button type='submit'>Update Information</button>
+					</form>
+					<Link to='/' className='text centered'>Return Home</Link>
+				</div>
+			</div>
+		</>
+	);
+};
+
+const update = async (password, retype, query) => {
+	if (password != retype) {
+		return ['Passwords do not match'];
+	}
+
+	if (password && password.length < 8) {
+		return ['Password is too short'];
+	}
+
+	const result = await fetch(`${process.env.AUTH_URI}/auth/reset?email=${query.email}&token=${query.token}`, {
+		method: 'PATCH',
+		headers: {
+			'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, true];
+	}
+}
+
+export default Reset;
@@ -0,0 +1,127 @@
+import React, { useContext, useRef } from 'react';
+import { Link, Redirect } from 'react-router-dom';
+
+import ApplyToBody from '../utilities/apply-to-body';
+
+import { TokenContext } from '../utilities/token-provider';
+
+//utilities
+const validateEmail = require('../../../common/utilities/validate-email');
+const validateUsername = require('../../../common/utilities/validate-username');
+
+const Signup = props => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//misplaced?
+	if (authTokens.accessToken) {
+		return <Redirect to='/' />;
+	}
+
+	//refs
+	const emailRef = useRef();
+	const usernameRef = useRef();
+	const passwordRef = useRef();
+	const retypeRef = useRef();
+	const contactRef = useRef();
+	const signupRef = useRef();
+
+	return (
+		<>
+			<ApplyToBody className='dashboard' />
+			<div className='page'>
+				<div className='central panel centered middle'>
+					<h1 className='text centered'>Signup</h1>
+					<form className='constrained' onSubmit={
+						async evt => { //on submit
+							signupRef.current.disabled = true;
+							evt.preventDefault();
+							const [result, redirect] = await handleSubmit(emailRef.current.value, usernameRef.current.value, passwordRef.current.value, retypeRef.current.value, contactRef.current.checked);
+							if (result) {
+								alert(result);
+								signupRef.current.disabled = false;
+							}
+
+							//redirect
+							if (redirect) {
+								props.history.push('/');
+							}
+						}
+					}>
+
+						<input type='email' name='email' placeholder='your@email.com' ref={emailRef} />
+						<input type='text' name='username' placeholder='Username' ref={usernameRef} />
+						<input type='password' name='password' placeholder='********' ref={passwordRef} />
+						<input type='password' name='retype' placeholder='********' ref={retypeRef} />
+
+						<span>
+							<label htmlFor='contact'>Allow Emails:</label>
+							<input type='checkbox' name='contact' ref={contactRef} defaultChecked='true' />
+						</span>
+
+						<button type='submit' ref={signupRef}>Signup</button>
+					</form>
+					<Link to='/recover' className='text centered'>Forgot Password?</Link>
+					<Link to='/' className='text centered'>Return Home</Link>
+				</div>
+			</div>
+		</>
+	);
+};
+
+const handleSubmit = async (email, username, password, retype, contact) => {
+	email = email.trim();
+	username = username.trim();
+
+	const err = handleValidation(email, username, password, retype);
+
+	if (err) {
+		return [err];
+	}
+
+	//send to the auth server
+	const result = await fetch(`${process.env.AUTH_URI}/auth/signup`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			'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;
@@ -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;
@@ -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;
@@ -0,0 +1,62 @@
+import React, { useRef, useContext } from 'react';
+
+import { TokenContext } from '../../utilities/token-provider';
+
+const BanUser = props => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//ref
+	const usernameRef = useRef();
+
+	return (
+		<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();
+					const yes = confirm('Permanently ban this user from the website?');
+
+					if (!yes) {
+						return;
+					}
+
+					const [err, result] = await handleButtonPress(usernameRef.current.value, authTokens.tokenFetch);
+
+					if (err) {
+						alert(err);
+					}
+
+					if (result) {
+						usernameRef.current.value = '';
+					}
+				}}>Submit</button>
+			</form>
+		</div>
+	);
+};
+
+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': '*'
+		},
+		body: JSON.stringify({
+			username
+		})
+	});
+
+	if (!result.ok) {
+		const err = `${result.status}: ${await result.text()}`;
+		console.log(err);
+		return [err, false];
+	}
+
+	return [null, true];
+};
+
+export default BanUser;
@@ -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;
@@ -0,0 +1,71 @@
+import React, { useRef, useContext } from 'react';
+
+import { TokenContext } from '../../utilities/token-provider';
+
+const GrantAdmin = props => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//ref
+	const usernameRef = useRef();
+
+	return (
+		<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();
+					const [err, result] = await handleButtonPress(usernameRef.current.value, authTokens.tokenFetch, 'POST');
+
+					if (err) {
+						alert(err);
+					}
+
+					if (result) {
+						alert('admin set');
+						usernameRef.current.value = '';
+					}
+				}}>Submit</button>
+
+				<button type='button' onClick={async evt => {
+					evt.preventDefault();
+					const [err, result] = await handleButtonPress(usernameRef.current.value, authTokens.tokenFetch, 'DELETE');
+
+					if (err) {
+						alert(err);
+					}
+
+					if (result) {
+						alert('admin removed');
+						usernameRef.current.value = '';
+					}
+				}}>Remove</button>
+			</form>
+		</div>
+	);
+};
+
+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': '*'
+		},
+		body: JSON.stringify({
+			username
+		})
+	});
+
+	if (!result.ok) {
+		const err = `${result.status}: ${await result.text()}`;
+		console.log(err);
+		return [err, false];
+	}
+
+	return [null, true];
+};
+
+export default GrantAdmin;
@@ -0,0 +1,71 @@
+import React, { useRef, useContext } from 'react';
+
+import { TokenContext } from '../../utilities/token-provider';
+
+const GrantMod = props => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//ref
+	const usernameRef = useRef();
+
+	return (
+		<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();
+					const [err, result] = await handleButtonPress(usernameRef.current.value, authTokens.tokenFetch, 'POST');
+
+					if (err) {
+						alert(err);
+					}
+
+					if (result) {
+						alert('mod set');
+						usernameRef.current.value = '';
+					}
+				}}>Submit</button>
+
+				<button type='button' onClick={async evt => {
+					evt.preventDefault();
+					const [err, result] = await handleButtonPress(usernameRef.current.value, authTokens.tokenFetch, 'DELETE');
+
+					if (err) {
+						alert(err);
+					}
+
+					if (result) {
+						alert('mod removed');
+						usernameRef.current.value = '';
+					}
+				}}>Remove</button>
+			</form>
+		</div>
+	);
+};
+
+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': '*'
+		},
+		body: JSON.stringify({
+			username
+		})
+	});
+
+	if (!result.ok) {
+		const err = `${result.status}: ${await result.text()}`;
+		console.log(err);
+		return [err, false];
+	}
+
+	return [null, true];
+};
+
+export default GrantMod;
@@ -0,0 +1,146 @@
+import React, { useState, useEffect, useContext, useRef } from 'react';
+import Select from 'react-dropdown-select';
+
+import { TokenContext } from '../../utilities/token-provider';
+
+const NewsEditor = props => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//refs
+	const titleRef = useRef();
+	const authorRef = useRef();
+	const bodyRef = useRef();
+
+	//state
+	const [articles, setArticles] = useState([]);
+	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());
+		}
+	}, []);
+
+	return (
+		<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);
+				}
+				}}
+				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);
+				if (err) {
+					alert(err);
+				} else {
+					titleRef.current.value = authorRef.current.value = bodyRef.current.value = '';
+					alert(`Edited as article index ${index}`);
+				}
+			}}>
+				<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 => {
+					//onDelete
+					const [err, result] = await handleDelete(index, authTokens.tokenFetch);
+
+					if (err) {
+						alert(err);
+						return;
+					}
+
+					if (result) {
+						titleRef.current.value = authorRef.current.value = bodyRef.current.value = '';
+						alert(`Article deleted`);
+					}
+				}}>Delete</button>
+			</form>
+		</div>
+	);
+};
+
+const handleSubmit = async (title, author, body, index, tokenFetch) => {
+	title = title.trim();
+	author = author.trim();
+	body = body.trim();
+
+	//fetch POST json data
+	const result = await tokenFetch(`${process.env.NEWS_URI}/news/${index}`, {
+		method: 'PATCH',
+		headers: {
+			'Content-Type': 'application/json',
+			'Access-Control-Allow-Origin': '*'
+		},
+		body: JSON.stringify({
+			title,
+			author,
+			body
+		})
+	});
+
+	if (!result.ok) {
+		return [`${result.status}: ${await result.text()}`];
+	}
+
+	return [null];
+};
+
+const handleDelete = async (index, tokenFetch) => {
+	const conf = confirm('Are you sure you want to delete this article?');
+
+	if (conf) {
+		const result = await tokenFetch(`${process.env.NEWS_URI}/news/${index}`, {
+			method: 'DELETE'
+		});
+
+		if (!result.ok) {
+			const err = `${result.status}: ${await result.text()}`;
+			return [err, false];
+		}
+	}
+
+	return [null, conf];
+};
+
+export default NewsEditor;
@@ -0,0 +1,69 @@
+import React, { useContext, useRef } from 'react';
+
+import { TokenContext } from '../../utilities/token-provider';
+
+const NewsPublisher = props => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//refs
+	const titleRef = useRef();
+	const authorRef = useRef();
+	const bodyRef = useRef();
+
+	return (
+		<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 = ''; //TODO: null bug here?
+					alert(`Published as article index ${index}`);
+				}
+			}}>
+				<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>
+	);
+};
+
+const handleSubmit = async (title, author, body, tokenFetch) => {
+	title = title.trim();
+	author = author.trim();
+	body = body.trim();
+
+	//fetch POST json data
+	const result = await tokenFetch(
+		`${process.env.NEWS_URI}/news`,
+		{
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				'Access-Control-Allow-Origin': '*'
+			},
+			body: JSON.stringify({
+				title,
+				author,
+				body
+			})
+		}
+	);
+
+	if (!result.ok) {
+		return [`${result.status}: ${await result.text()}`];
+	}
+
+	const json = await result.json();
+
+	return [null, json.index];
+};
+
+export default NewsPublisher;
@@ -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;
@@ -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;
@@ -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;
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import ApplyToBody from './utilities/apply-to-body';
+
+const NotFound = props => {
+	return (
+		<>
+			<ApplyToBody className='dashboard' />
+			<div className='page'>
+				<div className='central panel centered middle'>
+					<h1 className='text centered'>Page Not Found</h1>
+					<br />
+					<Link className='text centered' to='/'>Return Home</Link>
+				</div>
+			</div>
+		</>
+	);
+};
+
+export default NotFound;
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Break = () => {
+	return (
+		<>
+			<span className='mobile hide'> - </span>
+			<br className='mobile show' />
+		</>
+	);
+}
+
+const Footer = () => {
+	return (
+		<footer>
+			<p className='text centered'>© <a href='https://krgamestudios.com'>KR Game Studios</a> 2020-2021<Break /><Link to='/privacypolicy'>Privacy Policy</Link><Break /><Link to='/credits'>Credits</Link></p>
+		</footer>
+	);
+};
+
+export default Footer;
@@ -0,0 +1,51 @@
+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
+
+	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())
+			.then(json => setArticles(json))
+			.catch(e => null) //swallow errors
+		;
+
+		return () => aborter.current.abort(); //This is an ugly, ugly solution, but it's the only one that works
+	}, []);
+
+	return (
+		<div className='panel'>
+			<h1 className='text centered'>News Feed</h1>
+			{articles.map((article, index) => {
+				return (
+					<div key={index} className='panel'>
+						<hr />
+						<h2>{article.title}</h2>
+						<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>
+						}</em></p>
+						<br />
+						<MarkdownPanel style={{whiteSpace: 'pre-wrap'}} content={article.body} />
+					</div>
+				);
+			})}
+		</div>
+	);
+};
+
+export default NewsFeed;
@@ -0,0 +1,114 @@
+import React, { useState, useEffect, useRef, useContext } from 'react';
+import { TokenContext } from '../utilities/token-provider';
+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([{ emphasis: true, text: 'If chat doesn\'t load, reload the page' }]);
+
+	const inputRef = useRef();
+	const sendRef = useRef();
+	const endRef = useRef();
+
+	const authTokens = useContext(TokenContext);
+
+	const pushChatlog = line => setChatlog(prevChatlog => [...prevChatlog, line]);
+
+	useEffect(() => {
+		socket.on('message', message => pushChatlog(message));
+		socket.on('backlog', messages => setChatlog(prev => [...prev, ...messages]));
+		socket.on('disconnect', reason => pushChatlog({ emphasis: true, text: 'Lost connection' }));
+	}, []);
+
+	useEffect(() => {
+		if (open) {
+			endRef.current.scrollIntoView();
+		}
+	}, [chatlog, open]);
+
+	if (!open) {
+		return (
+			<div className='chat'>
+				<button type='button' className='open' onClick={() => authTokens.tokenCallback(accessToken => handleOpen(setOpen, accessToken))}>Open Chat</button>
+			</div>
+		);
+	}
+
+	return (
+		<div className='chat'>
+			<div className='log'>
+				<ul className='scrollable'>
+					{chatlog.map((line, index) => processLine(line, index, authTokens.accessToken))}
+					<li ref={endRef} />
+				</ul>
+			</div>
+			<input type='text' className='input' placeholder='message' onKeyPress={evt => evt.key == 'Enter' ? sendRef.current.click() : ''} ref={inputRef} />
+			<button type='button' className='send' onClick={() => authTokens.tokenCallback(accessToken => handleSend(inputRef, pushChatlog, authTokens.getPayload().username, accessToken))} ref={sendRef}>Send</button>
+			<button type='button' className='close' onClick={() => handleClose(setOpen)}>Close Chat</button>
+		</div>
+	);
+};
+
+//handlers
+const handleOpen = (setOpen, accessToken) => {
+	setOpen(true);
+
+	socket.emit('open chat', {
+		accessToken
+	});
+};
+
+const handleClose = setOpen => {
+	setOpen(false);
+};
+
+const handleSend = (inputRef, pushChatlog, username, accessToken) => {
+	if (inputRef.current.value == '') {
+		return;
+	}
+
+	socket.emit('message', {
+		accessToken,
+		text: inputRef.current.value
+	});
+
+	if (!inputRef.current.value.startsWith('/')) {
+		pushChatlog({ username: username, text: inputRef.current.value });
+	}
+
+	inputRef.current.value = '';
+};
+
+//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>;
+
+	//decorators
+	if (line.emphasis) {
+		content = <em>{content}</em>;
+	}
+
+	if (line.strong) {
+		content = <strong>{content}</strong>;
+	}
+
+	return <li key={index} className='line'>{content}<a className='report' onClick={() => processReport(line, accessToken)}>!!!</a></li>;
+};
+
+const processReport = (line, accessToken) => {
+	const yes = confirm('Report this message?');
+
+	if (yes) {
+		socket.emit('report', {
+			accessToken,
+			index: line.index
+		});
+	}
+};
+
+export default PopupChat;
@@ -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;
@@ -0,0 +1,13 @@
+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;
@@ -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;
@@ -0,0 +1,35 @@
+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))
+			;
+		}, []);
+	}
+
+	//assume raw info
+	else if (!contentHook) {
+		setContentHook(props.content);
+	}
+
+	return (
+		<ReactMarkdown rehypePlugins={[rehypeRaw]} props={{...props}}>{contentHook}</ReactMarkdown>
+	);
+};
+
+export default Markdown;
@@ -0,0 +1,127 @@
+import React, { useState, useEffect, createContext } from 'react';
+import decode from 'jwt-decode';
+
+export const TokenContext = createContext();
+
+//DOCS: tokenFetch() and tokenCallback() are actually closures here
+
+const TokenProvider = props => {
+	//state to be used
+	const [accessToken, setAccessToken] = useState('');
+	const [refreshToken, setRefreshToken] = useState('');
+
+	//make the access and refresh tokens 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]);
+
+	//wrap the default fetch function
+	const tokenFetch = async (url, options) => {
+		//use this?
+		let bearer = accessToken;
+
+		//if expired (10 minutes, normally)
+		const expired = new Date(decode(accessToken).exp * 1000) < Date.now();
+
+		if (expired) {
+			//BUGFIX: if logging out, just skip over the refresh token
+			if (url === `${process.env.AUTH_URI}/auth/logout`) {
+				return fetch(url, {
+					method: 'DELETE',
+					headers: {
+						'Content-Type': 'application/json',
+						'Access-Control-Allow-Origin': '*',
+						'Authorization': `Bearer ${bearer}`
+					},
+					body: JSON.stringify({
+						token: refreshToken
+					})
+				});
+			}
+
+			//ping the auth server for a new token
+			const response = await fetch(`${process.env.AUTH_URI}/auth/token`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					'Access-Control-Allow-Origin': '*'
+				},
+				body: JSON.stringify({
+					token: refreshToken
+				})
+			});
+
+			//any errors, throw them
+			if (!response.ok) {
+				throw `${response.status}: ${await response.text()}`;
+			}
+
+			//save the new auth stuff (setting bearer as well)
+			const newAuth = await response.json();
+
+			setAccessToken(newAuth.accessToken);
+			setRefreshToken(newAuth.refreshToken);
+			bearer = newAuth.accessToken;
+		}
+
+		//finally, delegate to fetch
+		return fetch(url, {
+			...(options || {}),
+			headers: {
+				...(options || { headers: {} }).headers,
+				'Authorization': `Bearer ${bearer}`
+			}
+		});
+	};
+
+	//access the refreshed token via callback
+	const tokenCallback = async (cb) => {
+		//if expired (10 minutes, normally)
+		const expired = new Date(decode(accessToken).exp * 1000) < Date.now();
+
+		if (expired) {
+			//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
+				})
+			});
+
+			//any errors, throw them
+			if (!response.ok) {
+				throw `${response.status}: ${await response.text()}`;
+			}
+
+			//save the new auth stuff (setting bearer as well)
+			const newAuth = await response.json();
+
+			setAccessToken(newAuth.accessToken);
+			setRefreshToken(newAuth.refreshToken);
+
+			//finally
+			return cb(newAuth.accessToken);
+		} else {
+			return cb(accessToken);
+		}
+	};
+
+	return (
+		<TokenContext.Provider value={{ accessToken, refreshToken, setAccessToken, setRefreshToken, tokenFetch, tokenCallback, getPayload: () => decode(accessToken) }}>
+			{props.children}
+		</TokenContext.Provider>
+	)
+};
+
+export default TokenProvider;