Tweaked some display

It's supposed to point to localhost when developing locally.

.envdev

@@ -1,9 +1,15 @@
 WEB_PORT=3000
 
-DB_HOSTNAME=database
+DB_HOSTNAME=localhost
 DB_DATABASE=template
 DB_USERNAME=template
 DB_PASSWORD=pikachu
+
+# Select a "TZ database name" that suits your needs: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
 DB_TIMEZONE=Australia/Sydney
 
-SECRET_ACCESS=access
+# Give this any value to enable database logging (such as "true")
+DB_LOGGING=
+
+# Make sure this value matches the system that you connect to
+SECRET_ACCESS=access

README.md

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

client/components/app.jsx

@@ -1,19 +1,23 @@
 //react
-import React from 'react';
+import React, { useContext } from 'react';
 import { BrowserRouter, Switch } from 'react-router-dom';
+import { TokenContext } from './utilities/token-provider';
 
 //library components
-import LazyRoute from './lazy-route';
+import LazyRoute from './utilities/lazy-route';
 import Markdown from './panels/markdown';
 
 //styling
 //import a styling template here
 
 //common components
-import Header from './panels/header.jsx';
+import Header from './panels/header';
-import Footer from './panels/footer.jsx';
+import Footer from './panels/footer';
+import PopupChat from './panels/popup-chat';
 
 const App = props => {
+	const authTokens = useContext(TokenContext);
+
 	//default render
 	return (
 		<BrowserRouter>
@@ -25,13 +29,18 @@ const App = props => {
 					<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>
 	);

client/components/lazy-route.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Route } from 'react-router-dom';
-import Loadable from 'react-loadable';
-
-const Loading = props => {
-	if (props.error) {
-		return <p>{props.error}</p>;
-	}
-
-	if (props.timedOut) {
-		return (
-			<div className='page'>
-				<p>Page Timed Out</p>
-			</div>
-		);
-	}
-
-	if (props.pastDelay) {
-		return (
-			<div className='page'>
-				<p>Page Loading...</p>
-			</div>
-		);
-	}
-
-	return null;
-};
-
-const LazyRoute = lazyProps => {
-	const component = Loadable({
-		loader: lazyProps.component,
-		loading: Loading,
-		timeout: 10000
-	});
-
-	return <Route {...lazyProps} component={component} />
-};
-
-export default LazyRoute;

client/components/pages/admin.jsx

@@ -5,23 +5,26 @@ import { TokenContext } from '../utilities/token-provider';
 
 import NewsPublisher from '../panels/news-publisher';
 import NewsEditor from '../panels/news-editor';
-import PrivilegeEditor from '../panels/privilege-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().privilege != 'administrator') {
+	if (!authTokens.accessToken || !authTokens.getPayload().admin) {
 		return <Redirect to='/' />;
 	}
 
 	return (
 		<div className='page'>
-			<h1 className='centered'>Administration</h1>
+			<h1 className='centered'>Administration Tools</h1>
 			<NewsPublisher />
 			<NewsEditor />
-			<PrivilegeEditor />
+			<GrantAdmin />
+			<GrantMod />
 		</div>
 	);
 };

client/components/pages/mod.jsx

@@ -0,0 +1,27 @@
+import React, { useContext } from 'react';
+import { Redirect } from 'react-router-dom';
+
+import { TokenContext } from '../utilities/token-provider';
+
+import ChatReports from '../panels/chat-reports';
+import BanUser from '../panels/ban-user';
+
+const Mod = props => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//misplaced? (admin only)
+	if (!authTokens.accessToken || !(authTokens.getPayload().admin || authTokens.getPayload().mod)) {
+		return <Redirect to='/' />;
+	}
+
+	return (
+		<div className='page'>
+			<h1 className='centered'>Moderation Tools</h1>
+			<ChatReports />
+			<BanUser />
+		</div>
+	);
+};
+
+export default Mod;

client/components/pages/recover.jsx

@@ -0,0 +1,91 @@
+import React, { useContext, useRef } from 'react';
+import { Redirect } from 'react-router-dom';
+
+import { TokenContext } from '../utilities/token-provider';
+
+//utilities
+const validateEmail = require('../../../common/utilities/validate-email');
+
+const Recover = props => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//misplaced?
+	if (authTokens.accessToken) {
+		return <Redirect to='/' />;
+	}
+
+	//refs
+	const emailRef = useRef();
+	const recoverRef = useRef();
+
+	return (
+		<div className='page'>
+			<h1 className='centered'>Recover Password</h1>
+			<form className='constricted' onSubmit={
+				async evt => { //on submit
+					recoverRef.current.disabled = true;
+					evt.preventDefault();
+					const [result, redirect] = await handleSubmit(emailRef.current.value);
+					if (result) {
+						alert(result);
+						recoverRef.current.disabled = false;
+					}
+
+					//redirect
+					if (redirect) {
+						props.history.push('/');
+					}
+				}
+			}>
+				<div>
+					<label htmlFor='email'>Enter Your Email:</label>
+					<input type='email' name='email' ref={emailRef} />
+				</div>
+
+				<button type='submit' ref={recoverRef}>Recover Password</button>
+			</form>
+		</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;

client/components/pages/reset.jsx

@@ -0,0 +1,89 @@
+import React, { useContext, useRef } from 'react';
+import { Redirect } from 'react-router-dom';
+import queryString from 'query-string';
+
+import { TokenContext } from '../utilities/token-provider';
+
+const Reset = props => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//query
+	const query = queryString.parse(props.location.search);
+
+	//misplaced?
+	if (authTokens.accessToken || !query.email || !query.token) {
+		return <Redirect to='/' />;
+	}
+
+	//refs
+	const passwordRef = useRef();
+	const retypeRef = useRef();
+	const resetRef = useRef();
+
+	//render the thing
+	return (
+		<div className='page'>
+			<h1 className='centered'>Reset Password</h1>
+			<form className='constricted' onSubmit={async evt => {
+				evt.preventDefault();
+				const [err] = await update(passwordRef.current.value, retypeRef.current.value, query);
+
+				if (err) {
+					alert(err);
+					return;
+				}
+
+				alert('Details updated');
+
+				//redirect
+				if (redirect) {
+					props.history.push('/');
+				}
+			}}>
+				<div>
+					<div>
+						<label htmlFor='password'>Enter New Password:</label> 
+						<input type='password' name='password' ref={passwordRef} />
+					</div>
+
+					<div>
+						<label htmlFor='retype'>Retype New Password:</label> 
+						<input type='password' name='retype' ref={retypeRef} />
+					</div>
+				</div>
+
+				<button type='submit'>Update Information</button>
+			</form>
+		</div>
+	);
+};
+
+const update = async (password, retype, query) => {
+	if (password != retype) {
+		return ['Passwords do not match'];
+	}
+
+	if (password && password.length < 8) {
+		return ['Password is too short'];
+	}
+
+	const result = await fetch(`${process.env.AUTH_URI}/auth/reset?email=${query.email}&token=${query.token}`, {
+		method: 'PATCH',
+		headers: {
+			'Access-Control-Allow-Origin': '*',
+			'Content-Type': 'application/json'
+		},
+		body: JSON.stringify({
+			password: password ? password : null,
+		})
+	});
+
+	if (!result.ok) {
+		return [`${await result.status}: ${await result.text()}`];
+	} else {
+		return [null];
+	}
+}
+
+export default Reset;

client/components/pages/signup.jsx

@@ -22,16 +22,19 @@ const SignUp = props => {
 	const passwordRef = useRef();
 	const retypeRef = useRef();
 	const contactRef = useRef();
+	const signupRef = useRef();
 
 	return (
 		<div className='page'>
 			<h1 className='centered'>Signup</h1>
 			<form className='constricted' onSubmit={
 				async evt => { //on submit
+					signupRef.current.disabled = true;
 					evt.preventDefault();
 					const [result, redirect] = await handleSubmit(emailRef.current.value, usernameRef.current.value, passwordRef.current.value, retypeRef.current.value, contactRef.current.checked);
 					if (result) {
 						alert(result);
+						signupRef.current.disabled = false;
 					}
 
 					//redirect
@@ -65,7 +68,7 @@ const SignUp = props => {
 					<input type='checkbox' name='contact' ref={contactRef} />
 				</div>
 
-				<button type='submit'>Signup</button>
+				<button type='submit' ref={signupRef}>Signup</button>
 			</form>
 		</div>
 	);

client/components/panels/ban-user.jsx

@@ -0,0 +1,65 @@
+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>
+			<h2 className='centered'>Permanently Ban User</h2>
+			<form>
+				<div>
+					<label htmlFor='username'>Username:</label>
+					<input type='text' name='username' ref={usernameRef} />
+				</div>
+
+				<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;

client/components/panels/chat-reports.jsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { TokenContext } from '../utilities/token-provider';
+import dateFormat from 'dateformat';
+
+const ChatReports = props => {
+	const [reports, setReports] = useState([]);
+
+	const authTokens = useContext(TokenContext);
+
+	useEffect(async () => {
+		const result = await authTokens.tokenFetch(`${process.env.CHAT_URI}/admin/reports`, {
+			method: 'GET',
+			headers: {
+				'Access-Control-Allow-Origin': '*'
+			}
+		});
+
+		if (!result.ok) {
+			const err = `${result.status}: ${await result.text()}`;
+			console.log(err);
+			alert(err);
+		} else {
+			setReports(await result.json());
+		}
+	}, []);
+
+	return (
+		<table>
+			<thead>
+				<tr>
+					<th>Date</th> 
+					<th>Username</th>
+					<th>Room Name</th>
+					<th>Content</th>
+					<th>Reported By</th>
+				</tr>
+			</thead>
+			<tbody>
+				{reports.map((report, index) => (
+					<tr key={index}>
+						<td>{dateFormat(report.chatlog.createdAt, 'yyyy-mm-dd, H:MM:ss')}</td>
+						<td>{report.chatlog.username}</td>
+						<td>{report.chatlog.room}</td>
+						<td>{report.chatlog.text}</td>
+						<td>{report.reporter.join(', ')}</td>
+						<td><button onClick={() => deleteReportsFor(report.chatlogIndex, authTokens.tokenFetch, setReports)}>Delete</button></td>
+					</tr>
+				))}
+			</tbody>
+		</table>
+	);
+};
+
+const deleteReportsFor = (chatlogIndex, tokenFetch, setReports) => {
+	tokenFetch(`${process.env.CHAT_URI}/admin/reports`, {
+		method: 'DELETE',
+		headers: {
+			'Content-Type': 'application/json',
+			'Access-Control-Allow-Origin': '*'
+		},
+		body: JSON.stringify({ chatlogIndex })
+	});
+
+	setReports(reports => reports.filter(report => report.chatlogIndex != chatlogIndex));
+};
+
+export default ChatReports;

client/components/panels/grant-admin.jsx

@@ -0,0 +1,74 @@
+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>
+			<h2 className='centered'>Grant Admin Privileges</h2>
+			<form>
+				<div>
+					<label htmlFor='username'>Username:</label>
+					<input type='text' name='username' ref={usernameRef} />
+				</div>
+
+				<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;

client/components/panels/grant-mod.jsx

@@ -0,0 +1,74 @@
+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>
+			<h2 className='centered'>Grant Moderation Privileges</h2>
+			<form>
+				<div>
+					<label htmlFor='username'>Username:</label>
+					<input type='text' name='username' ref={usernameRef} />
+				</div>
+
+				<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;

client/components/panels/header.jsx

@@ -9,6 +9,8 @@ const Visitor = () => {
 			<Link to='/signup'>Sign Up</Link>
 			<span> - </span>
 			<Link to='/login'>Log In</Link>
+			<span> - </span>
+			<Link to='/recover'>Recover</Link>
 		</div>
 	);
 };
@@ -21,7 +23,7 @@ const Member = () => {
 			<Link to='/account'>Account</Link>
 			<span> - </span>
 
-			{ authTokens.getPayload().privilege == 'administrator' ?
+			{ authTokens.getPayload().admin ?
 				<span>
 					<Link to='/admin'>Admin</Link>
 					<span> - </span>
@@ -29,6 +31,14 @@ const Member = () => {
 				<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

client/components/panels/markdown.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import ReactMarkdown from 'react-markdown/with-html';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
 
 const Markdown = props => {
 	//content?
@@ -27,7 +28,7 @@ const Markdown = props => {
 	}
 
 	return (
-		<ReactMarkdown escapeHtml={false} props={{...props}}>{contentHook}</ReactMarkdown>
+		<ReactMarkdown rehypePlugins={[rehypeRaw]} escapeHtml={false} props={{...props}}>{contentHook}</ReactMarkdown>
 	);
 };
 

client/components/panels/news-feed.jsx

@@ -1,32 +1,46 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import dateFormat from 'dateformat';
 
-//DOCS: props.uri is the address of a live news-server
 const NewsFeed = props => {
 	const [articles, setArticles] = useState([]);
+	const aborter = useRef(new AbortController()); //BUGFIX: double-renders = double fetches + react update after unmount
 
-	useEffect(async () => {
+	useEffect(() => {
-		const result = await fetch(`${process.env.NEWS_URI}/news`, {
+		//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
+		;
 
-		if (!result.ok) {
+		return () => aborter.current.abort(); //This is an ugly, ugly solution, but it's the only one that works
-			const err = `${result.status}: ${await result.text()}`;
-			console.log(err);
-			alert(err);
-		} else {
-			setArticles(await result.json());
-		}
 	}, []);
 
 	return (
 		<div>
 			<h1 className='centered'>News Feed</h1>
-			{articles.map((article, index) => {
+			{(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
 				return (
 					<div key={index}>
 						<hr />

client/components/panels/popup-chat.jsx

@@ -0,0 +1,113 @@
+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';
+
+const socket = io(`${process.env.CHAT_URI}/chat`);
+
+const PopupChat = props => {
+	const [open, setOpen] = useState(false);
+	const [chatlog, setChatlog] = useState([]);
+
+	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}<div className='report'><a onClick={() => processReport(line, accessToken)} style={{ display: line.index && !line.notification ? 'flex' : 'none' }}>!!!</a></div></li>;
+};
+
+const processReport = (line, accessToken) => {
+	const yes = confirm('Report this message?');
+
+	if (yes) {
+		socket.emit('report', {
+			accessToken,
+			index: line.index
+		});
+	}
+};
+
+export default PopupChat;

client/components/panels/privilege-editor.jsx

@@ -1,70 +0,0 @@
-import React, { useState, useRef, useContext } from 'react';
-import Select from 'react-dropdown-select';
-
-import { TokenContext } from '../utilities/token-provider';
-
-const PrivilegeEditor = props => {
-	//context
-	const authTokens = useContext(TokenContext);
-
-	//state
-	const [privilege, setPrivilege] = useState('normal');
-
-	//ref
-	const usernameRef = useRef();
-
-	return (
-		<div>
-			<h2 className='centered'>Privilege Editor</h2>
-			<form onSubmit={async evt => {
-				evt.preventDefault();
-				const [err, result] = await handleSubmit(usernameRef.current.value, privilege, authTokens.tokenFetch);
-
-				if (err) {
-					alert(err);
-				}
-
-				if (result) {
-					alert('Privilege set');
-					usernameRef.current.value = '';
-				}
-			}}>
-				<div>
-					<label htmlFor='username'>Username:</label>
-					<input type='text' name='username' ref={usernameRef} />
-				</div>
-
-				<Select
-					options={[{ label: 'administrator', value: 1 }, { label: 'moderator', value: 2 }, { label: 'alpha', value: 3 }, { label: 'beta', value: 4 }, { label: 'gamma', value: 5 }, { label: 'normal', value: 6 }]}
-					onChange={values => setPrivilege(values[0].label)}
-				/>
-
-				<button type='submit'>Change</button>
-			</form>
-		</div>
-	);
-};
-
-const handleSubmit = async (username, privilege, tokenFetch) => {
-	const result = await tokenFetch(`${process.env.AUTH_URI}/admin/privilege`, {
-		method: 'PATCH',
-		headers: {
-			'Content-Type': 'application/json',
-			'Access-Control-Allow-Origin': '*'
-		},
-		body: JSON.stringify({
-			username,
-			privilege
-		})
-	});
-
-	if (!result.ok) {
-		const err = `${result.status}: ${await result.text()}`;
-		console.log(err);
-		return [err, false];
-	}
-
-	return [null, true];
-};
-
-export default PrivilegeEditor;

client/components/utilities/lazy-route.jsx

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

client/components/utilities/token-provider.jsx

@@ -11,7 +11,7 @@ const TokenProvider = props => {
 	useEffect(() => {
 		setAccessToken(localStorage.getItem("accessToken") || '');
 		setRefreshToken(localStorage.getItem("refreshToken") || '');
-	}, [])
+	}, []);
 
 	useEffect(() => {
 		localStorage.setItem("accessToken", accessToken);
@@ -77,8 +77,44 @@ const TokenProvider = props => {
 		});
 	};
 
+	//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, getPayload: () => decode(accessToken) }}>
+		<TokenContext.Provider value={{ accessToken, refreshToken, setAccessToken, setRefreshToken, tokenFetch, tokenCallback, getPayload: () => decode(accessToken) }}>
 			{props.children}
 		</TokenContext.Provider>
 	)

client/styles/popup-chat.css

@@ -0,0 +1,82 @@
+.chat {
+	position: fixed;
+	bottom: 23px;
+	right: 28px;
+	width: 280px;
+	border: solid;
+	border-color: black;
+	border-width: 2px;
+	background-color: #CCC;
+	display: inline-block;
+	max-height: calc(50vh - 23px);
+}
+
+.chat > button.open {
+	color: white;
+	background-color: grey;
+}
+
+.chat > button.send {
+	color: white;
+	background-color: green;
+}
+
+.chat > button.close {
+	color: black;
+	background-color: red;
+}
+
+.chat > button {
+	width: 100%;
+	height: 2em;
+	opacity: 0.8;
+}
+
+.chat > button:hover {
+	opacity: 1;
+}
+
+.chat > .input {
+	width: calc(100% - 10px);
+	height: 2em;
+}
+
+.chat > .log {
+	min-height: 300px;
+}
+
+.chat > .log > .scrollable > .line {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+.chat > .log > .scrollable > .line > .report {
+	color: red;
+	display: none;
+}
+
+.chat > .log > .scrollable > .line:hover {
+	background-color: #BBB;
+}
+
+.chat > .log > .scrollable > .line:hover > .report {
+	display: flex;
+}
+
+.chat > .log > .scrollable > .line > .content > .username {
+	font-weight: bold;
+}
+
+.chat > .log > .scrollable {
+	margin: 0;
+	padding: 10px;
+	min-height: 280px;
+	max-height: calc(50vh - 23px - 20px - 6em);
+	overflow-x: wrap;
+	overflow-y: scroll;
+}
+
+.chat ul {
+	list-style: none;
+}

configure-script.js

@@ -40,6 +40,7 @@ impelented are:
 
 * auth-server
 * news-server
+* chat-server
 
 See https://github.com/krgamestudios/MERN-template/wiki for help.
 `
@@ -56,13 +57,14 @@ See https://github.com/krgamestudios/MERN-template/wiki for help.
 	const newsName = await question('News Name', 'news');
 	const newsWebAddress = await question('News Web Address', `${newsName}.${projectWebAddress}`);
 	const newsDBUser = await question('News DB Username', newsName);
-	const newsDBPass = await question('News DB Password', 'charizard');
+	const newsDBPass = await question('News DB Password', 'venusaur');
 
 	//auth configuration
 	const authName = await question('Auth Name', 'auth');
 	const authWebAddress = await question('Auth Web Address', `${authName}.${projectWebAddress}`);
+	const authResetAddress = await question('Auth Reset Addr', `${projectWebAddress}/reset`);
 	const authDBUser = await question('Auth DB Username', authName);
-	const authDBPass = await question('Auth DB Password', 'venusaur');
+	const authDBPass = await question('Auth DB Password', 'charizard');
 
 	const emailSMTP = await question('Email SMTP', 'smtp.example.com');
 	const emailUser = await question('Email Address', 'foobar@example.com');
@@ -70,6 +72,10 @@ See https://github.com/krgamestudios/MERN-template/wiki for help.
 	const emailPhysical = await question('Physical Mailing Address', '');
 
 	//chat goes here
+	const chatName = await question('Chat Name', 'chat');
+	const chatWebAddress = await question('Chat Web Address', `${chatName}.${projectWebAddress}`);
+	const chatDBUser = await question('Chat DB Username', chatName);
+	const chatDBPass = await question('Chat DB Password', 'blastoise');
 
 	//database configuration
 	const dbRootPassword = await question('Database Root Password', 'password');
@@ -101,7 +107,7 @@ See https://github.com/krgamestudios/MERN-template/wiki for help.
 	const projectPort = 3000;
 	const newsPort = 3100;
 	const authPort = 3200;
-	//const chatPort = 3300;
+	const chatPort = 3300;
 
 const ymlfile = `
 version: "3.6"
@@ -118,7 +124,7 @@ services:
       - traefik.http.routers.${projectName}router.service=${projectName}service@docker
       - traefik.http.services.${projectName}service.loadbalancer.server.port=${projectPort}
     environment:
-      - WEB_PORT=3000
+      - WEB_PORT=${projectPort}
       - DB_HOSTNAME=database
       - DB_DATABASE=${projectName}
       - DB_USERNAME=${projectDBUser}
@@ -126,6 +132,7 @@ services:
       - DB_TIMEZONE=${dbTimeZone}
       - NEWS_URI=https://${newsWebAddress}
       - AUTH_URI=https://${authWebAddress}
+      - CHAT_URI=https://${chatWebAddress}
       - SECRET_ACCESS=${accessToken}
     networks:
       - app-network
@@ -143,9 +150,9 @@ services:
       - traefik.http.routers.${newsName}router.entrypoints=websecure
       - traefik.http.routers.${newsName}router.tls.certresolver=myresolver
       - traefik.http.routers.${newsName}router.service=${newsName}service@docker
-      - traefik.http.services.${newsName}service.loadbalancer.server.port=3100
+      - traefik.http.services.${newsName}service.loadbalancer.server.port=${newsPort}
     environment:
-      - WEB_PORT=3100
+      - WEB_PORT=${newsPort}
       - DB_HOSTNAME=database
       - DB_DATABASE=${newsName}
       - DB_USERNAME=${newsDBUser}
@@ -173,6 +180,7 @@ services:
     environment:
       - WEB_PROTOCOL=https
       - WEB_ADDRESS=${authWebAddress}
+      - WEB_RESET_ADDRESS=${authResetAddress}
       - WEB_PORT=${authPort}
       - DB_HOSTNAME=database
       - DB_DATABASE=${authName}
@@ -192,9 +200,31 @@ services:
     depends_on:
       - database
       - traefik
-  
+
-  #chat:
+  ${chatName}:
-  #  image: krgamestudios/chat-server
+    image: krgamestudios/chat-server:latest
+    ports:
+      - ${chatPort}
+    labels:
+      - traefik.enable=true
+      - traefik.http.routers.${chatName}router.rule=Host(\`${chatWebAddress}\`)
+      - traefik.http.routers.${chatName}router.entrypoints=websecure
+      - traefik.http.routers.${chatName}router.tls.certresolver=myresolver
+      - traefik.http.routers.${chatName}router.service=${chatName}service@docker
+      - traefik.http.services.${chatName}service.loadbalancer.server.port=${chatPort}
+    environment:
+      - WEB_PORT=${chatPort}
+      - DB_HOSTNAME=database
+      - DB_DATABASE=${chatName}
+      - DB_USERNAME=${chatDBUser}
+      - DB_PASSWORD=${chatDBPass}
+      - DB_TIMEZONE=${dbTimeZone}
+      - SECRET_ACCESS=${accessToken}
+    networks:
+      - app-network
+    depends_on:
+      - database
+      - traefik
 
   database:
     image: mariadb
@@ -237,10 +267,12 @@ networks:
 	const dockerfile = `
 FROM node:15
 WORKDIR "/app"
-COPY package*.json ./
-RUN npm install
 COPY . /app
+RUN mkdir /app/public
+RUN chown node:node /app/public
+RUN npm install --production
 EXPOSE ${projectPort}
+USER node
 ENTRYPOINT ["bash", "-c"]
 CMD ["sleep 10 && npm start"]
 `;
@@ -258,6 +290,10 @@ CREATE DATABASE IF NOT EXISTS ${authName};
 CREATE USER IF NOT EXISTS '${authDBUser}'@'%' IDENTIFIED BY '${authDBPass}';
 GRANT ALL PRIVILEGES ON ${authName}.* TO '${authDBUser}'@'%';
 
+CREATE DATABASE IF NOT EXISTS ${chatName};
+CREATE USER IF NOT EXISTS '${chatDBUser}'@'%' IDENTIFIED BY '${chatDBPass}';
+GRANT ALL PRIVILEGES ON ${chatName}.* TO '${chatDBUser}'@'%';
+
 FLUSH PRIVILEGES;
 `;
 

package.json

@@ -1,57 +1,61 @@
-{
+{
-  "name": "mern-template",
+  "name": "mern-template",
-  "version": "1.0.0",
+  "version": "1.0.2",
-  "description": "A website template using the MERN stack.",
+  "description": "A website template using the MERN stack.",
-  "main": "server/server.js",
+  "main": "server/server.js",
-  "scripts": {
+  "scripts": {
-    "start": "npm run build && node server/server.js",
+    "start": "npm run build && node server/server.js",
-    "build": "npm run build:server && npm run build:client",
+    "build": "npm run build:server && npm run build:client",
-    "build:server": "exit 0",
+    "build:server": "exit 0",
-    "build:client": "webpack --env=production --config webpack.config.js",
+    "build:client": "webpack --env=production --config webpack.config.js",
-    "dev": "concurrently npm:watch:server npm:watch:client",
+    "dev": "concurrently npm:watch:server npm:watch:client",
-    "watch:server": "nodemon . --ext js,jsx,json --ignore 'node_modules/*'",
+    "watch:server": "nodemon ./* --ext js,jsx,json --ignore 'node_modules/*'",
-    "watch:client": "webpack serve --env=development --config webpack.config.js",
+    "watch:client": "webpack serve --env=development --config webpack.config.js",
-    "analyzer": "webpack --env=production --analyzer --config webpack.config.js"
+    "analyzer": "webpack --env=production --analyzer --config webpack.config.js"
-  },
+  },
-  "repository": {
+  "repository": {
-    "type": "git",
+    "type": "git",
-    "url": "git+https://github.com/KRGameStudios/MERN-template.git"
+    "url": "git+https://github.com/KRGameStudios/MERN-template.git"
-  },
+  },
-  "author": "Kayne Ruse",
+  "author": "Kayne Ruse",
-  "license": "ISC",
+  "license": "ISC",
-  "bugs": {
+  "bugs": {
-    "url": "https://github.com/KRGameStudios/MERN-template/issues"
+    "url": "https://github.com/KRGameStudios/MERN-template/issues"
-  },
+  },
-  "homepage": "https://github.com/KRGameStudios/MERN-template#readme",
+  "homepage": "https://github.com/KRGameStudios/MERN-template#readme",
-  "dependencies": {
+  "dependencies": {
-    "@babel/core": "^7.12.10",
+    "@babel/core": "^7.14.8",
-    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-env": "^7.14.8",
-    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-react": "^7.14.5",
-    "babel-loader": "^8.2.2",
+    "@loadable/component": "^5.15.0",
-    "clean-webpack-plugin": "^3.0.0",
+    "babel-loader": "^8.2.2",
-    "concurrently": "^5.3.0",
+    "clean-webpack-plugin": "^3.0.0",
-    "dateformat": "^4.5.1",
+    "concurrently": "^6.2.0",
-    "dotenv": "^8.2.0",
+    "css-loader": "^6.2.0",
-    "express": "^4.17.1",
+    "dateformat": "^4.5.1",
-    "html-webpack-plugin": "^5.0.0-alpha.14",
+    "dotenv": "^10.0.0",
-    "jwt-decode": "^3.1.2",
+    "express": "^4.17.1",
-    "mariadb": "^2.5.2",
+    "html-webpack-plugin": "^5.3.2",
-    "raw-loader": "^4.0.2",
+    "jwt-decode": "^3.1.2",
-    "react": "^17.0.1",
+    "mariadb": "^2.5.4",
-    "react-dom": "^17.0.1",
+    "query-string": "^7.0.1",
-    "react-dropdown-select": "^4.7.4",
+    "raw-loader": "^4.0.2",
-    "react-loadable": "^5.5.0",
+    "react": "^17.0.2",
-    "react-markdown": "^5.0.3",
+    "react-dom": "^17.0.2",
-    "react-router": "^5.2.0",
+    "react-dropdown-select": "^4.7.4",
-    "react-router-dom": "^5.2.0",
+    "react-markdown": "^6.0.2",
-    "sequelize": "^6.4.0",
+    "react-router": "^5.2.0",
-    "universal-cookie": "^4.0.4",
+    "react-router-dom": "^5.2.0",
-    "webpack": "^5.15.0",
+    "rehype-raw": "^5.1.0",
-    "webpack-cli": "^4.3.1"
+    "sequelize": "^6.6.5",
-  },
+    "socket.io-client": "^4.1.3",
-  "devDependencies": {
+    "style-loader": "^3.2.1",
-    "nodemon": "^2.0.7",
+    "webpack": "^5.46.0",
-    "webpack-bundle-analyzer": "^4.3.0",
+    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-dev-server": "^3.11.2"
+    "webpack-cli": "^4.7.2"
-  }
+  },
-}
+  "devDependencies": {
+    "nodemon": "^2.0.12",
+    "webpack-dev-server": "^3.11.2"
+  }
+}

server/database/index.js

@@ -4,7 +4,7 @@ const sequelize = new Sequelize(process.env.DB_DATABASE, process.env.DB_USERNAME
 	host: process.env.DB_HOSTNAME,
 	dialect: 'mariadb',
 	timezone: process.env.DB_TIMEZONE,
-	logging: false
+	logging: process.env.DB_LOGGING ? console.log : false
 });
 
 sequelize.sync();

server/server.js

@@ -8,10 +8,9 @@ const path = require('path');
 const express = require('express');
 const app = express();
 const server = require('http').Server(app);
-const bodyParser = require('body-parser');
 
 //config
-app.use(bodyParser.json());
+app.use(express.json());
 
 //database connection
 const database = require('./database');

webpack.config.js

@@ -18,7 +18,7 @@ module.exports = ({ production, analyzer }) => {
 			filename: '[name].[chunkhash].js',
 			sourceMapFilename: '[name].[chunkhash].js.map'
 		},
-		devtool: 'eval-source-map',
+		devtool: production ? 'source-map' : 'eval-source-map',
 		resolve: {
 			extensions: ['.js', '.jsx']
 		},
@@ -32,11 +32,15 @@ module.exports = ({ production, analyzer }) => {
 							loader: 'babel-loader',
 							options: {
 								presets: ['@babel/preset-env', '@babel/preset-react'],
-								plugins: ['react-loadable/babel', '@babel/plugin-syntax-dynamic-import']
+								plugins: ['@babel/plugin-syntax-dynamic-import']
 							}
 						}
 					]
 				},
+				{
+					test: /\.(css)$/,
+					use: ['style-loader', 'css-loader']
+				},
 				{
 					test: /\.(md)$/,
 					use: [
@@ -51,9 +55,9 @@ module.exports = ({ production, analyzer }) => {
 			new DefinePlugin({
 				'process.env': {
 					'PRODUCTION': production,
-					'NEWS_URI': production ? `"${process.env.NEWS_URI}"` : '"https://dev-news.eggtrainer.com"',
+					'NEWS_URI': production ? `"${process.env.NEWS_URI}"` : '"https://dev-news.krgamestudios.com"',
-					'AUTH_URI': production ? `"${process.env.AUTH_URI}"` : '"https://dev-auth.eggtrainer.com"',
+					'AUTH_URI': production ? `"${process.env.AUTH_URI}"` : '"https://dev-auth.krgamestudios.com"',
-//					'CHAT_URI': production ? `"${process.env.CHAT_URI}"` : '"https://dev-chat.eggtrainer.com"',
+					'CHAT_URI': production ? `"${process.env.CHAT_URI}"` : '"https://dev-chat.krgamestudios.com"',
 				}
 			}),
 			new CleanWebpackPlugin({