Addressed #34

Macos docs

.github/FUNDING.yml

@@ -0,0 +1,5 @@
+# These are supported funding model platforms
+
+patreon: krgamestudios
+ko_fi: krgamestudios
+custom: ["https://www.paypal.com/donate/?hosted_button_id=73Q82T2ZHV8AA"]

client/pages/accounts/account.jsx

@@ -24,10 +24,7 @@ const Account = props => {
 	//grab the user's info
 	useEffect(() => {
 		authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/account`, {
-			method: 'GET',
+			method: 'GET'
-			headers: {
-				'Access-Control-Allow-Origin': '*'
-			}
 		})
 			.then(blob => blob.json())
 			.then(json => contactRef.current.checked = json.contact)
@@ -88,7 +85,6 @@ const update = async (password, retype, contact, tokenFetch) => {
 	const result = await tokenFetch(`${process.env.AUTH_URI}/auth/account`, {
 		method: 'PATCH',
 		headers: {
-			'Access-Control-Allow-Origin': '*',
 			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({

client/pages/accounts/login.jsx

@@ -72,8 +72,7 @@ const handleSubmit = async (email, password) => {
 	const result = await fetch(`${process.env.AUTH_URI}/auth/login`, {
 		method: 'POST',
 		headers: {
-			'Content-Type': 'application/json',
+			'Content-Type': 'application/json'
-			'Access-Control-Allow-Origin': '*'
 		},
 		body: JSON.stringify({
 			email,

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

@@ -38,7 +38,6 @@ const handleSubmit = async (password, authTokens) => {
 	const result = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/account`, {
 		method: 'DELETE',
 		headers: {
-			'Access-Control-Allow-Origin': '*',
 			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({
@@ -54,7 +53,6 @@ const handleSubmit = async (password, authTokens) => {
 	const result2 = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/logout`, {
 		method: 'DELETE',
 		headers: {
-			'Access-Control-Allow-Origin': '*',
 			'Content-Type': 'application/json'
 		},
 		body: JSON.stringify({

client/pages/accounts/panels/logout.jsx

@@ -14,8 +14,7 @@ const Logout = () => {
 				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',
+						'Content-Type': 'application/json'
-						'Access-Control-Allow-Origin': '*'
 					},
 					body: JSON.stringify({
 						token: authTokens.refreshToken

client/pages/accounts/recover.jsx

@@ -66,8 +66,7 @@ const handleSubmit = async (email) => {
 	const result = await fetch(`${process.env.AUTH_URI}/auth/recover`, {
 		method: 'POST',
 		headers: {
-			'Content-Type': 'application/json',
+			'Content-Type': 'application/json'
-			'Access-Control-Allow-Origin': '*'
 		},
 		body: JSON.stringify({
 			email

client/pages/accounts/reset.jsx

@@ -68,7 +68,6 @@ const update = async (password, retype, query) => {
 	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({

client/pages/accounts/signup.jsx

@@ -83,8 +83,7 @@ const handleSubmit = async (email, username, password, retype, contact) => {
 	const result = await fetch(`${process.env.AUTH_URI}/auth/signup`, {
 		method: 'POST',
 		headers: {
-			'Content-Type': 'application/json',
+			'Content-Type': 'application/json'
-			'Access-Control-Allow-Origin': '*'
 		},
 		body: JSON.stringify({
 			email,

client/pages/administration/admin.jsx

@@ -5,9 +5,6 @@ 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';
 
@@ -26,9 +23,6 @@ const Admin = props => {
 			<div className='page panel'>
 				<div className='central panel'>
 					<h1 className='text centered'>Administration Tools</h1>
-					<NewsPublisher />
-					<br />
-					<NewsEditor />
 					<br />
 					<GrantAdmin />
 					<br />

client/pages/administration/mod.jsx

@@ -5,6 +5,9 @@ import ApplyToBody from '../utilities/apply-to-body';
 
 import { TokenContext } from '../utilities/token-provider';
 
+import NewsPublisher from './panels/news-publisher';
+import NewsEditor from './panels/news-editor';
+
 import ChatReports from './panels/chat-reports';
 import BanUser from './panels/ban-user';
 
@@ -23,7 +26,12 @@ const Mod = props => {
 			<div className='page panel'>
 				<div className='central panel'>
 					<h1 className='text centered'>Moderation Tools</h1>
+					<NewsPublisher />
+					<br />
+					<NewsEditor />
+					<br />
 					<BanUser />
+					<br />
 					<ChatReports />
 					<Link to='/' className='text centered'>Return Home</Link>
 				</div>

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

@@ -42,8 +42,7 @@ const handleButtonPress = async (username, tokenFetch) => {
 	const result = await tokenFetch(`${process.env.AUTH_URI}/admin/banuser`, {
 		method: 'POST',
 		headers: {
-			'Content-Type': 'application/json',
+			'Content-Type': 'application/json'
-			'Access-Control-Allow-Origin': '*'
 		},
 		body: JSON.stringify({
 			username

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

@@ -8,12 +8,7 @@ const ChatReports = props => {
 	const authTokens = useContext(TokenContext);
 
 	useEffect(async () => {
-		const result = await authTokens.tokenFetch(`${process.env.CHAT_URI}/admin/reports`, {
+		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()}`;
@@ -59,8 +54,7 @@ const deleteReportsFor = (chatlogIndex, tokenFetch, setReports) => {
 	tokenFetch(`${process.env.CHAT_URI}/admin/reports`, {
 		method: 'DELETE',
 		headers: {
-			'Content-Type': 'application/json',
+			'Content-Type': 'application/json'
-			'Access-Control-Allow-Origin': '*'
 		},
 		body: JSON.stringify({ chatlogIndex })
 	});

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

@@ -51,8 +51,7 @@ const handleButtonPress = async (username, tokenFetch, method) => {
 	const result = await tokenFetch(`${process.env.AUTH_URI}/admin/admin`, {
 		method: method,
 		headers: {
-			'Content-Type': 'application/json',
+			'Content-Type': 'application/json'
-			'Access-Control-Allow-Origin': '*'
 		},
 		body: JSON.stringify({
 			username

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

@@ -51,8 +51,7 @@ const handleButtonPress = async (username, tokenFetch, method) => {
 	const result = await tokenFetch(`${process.env.AUTH_URI}/admin/mod`, {
 		method: method,
 		headers: {
-			'Content-Type': 'application/json',
+			'Content-Type': 'application/json'
-			'Access-Control-Allow-Origin': '*'
 		},
 		body: JSON.stringify({
 			username

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

@@ -21,8 +21,7 @@ const NewsEditor = props => {
 		const result = await fetch(`${process.env.NEWS_URI}/news/metadata?limit=999`, {
 			method: 'GET',
 			headers: {
-				'Content-Type': 'application/json',
+				'Content-Type': 'application/json'
-				'Access-Control-Allow-Origin': '*'
 			},
 		});
 
@@ -42,11 +41,7 @@ const NewsEditor = props => {
 				options={articles.map(article => { return { label: article.title, index: article.index }; })}
 				onChange={async ({index}) => {
 					//fetch this article
-					const result = await fetch(`${process.env.NEWS_URI}/news/archive/${index}`, {
+					const result = await fetch(`${process.env.NEWS_URI}/news/archive/${index}`);
-						headers: {
-							'Access-Control-Allow-Origin': '*'
-						}
-					});
 
 					if (!result.ok) {
 						const err = `${result.status}: ${await result.text()}`;
@@ -107,8 +102,7 @@ const handleSubmit = async (title, author, body, index, tokenFetch) => {
 	const result = await tokenFetch(`${process.env.NEWS_URI}/news/${index}`, {
 		method: 'PATCH',
 		headers: {
-			'Content-Type': 'application/json',
+			'Content-Type': 'application/json'
-			'Access-Control-Allow-Origin': '*'
 		},
 		body: JSON.stringify({
 			title,

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

@@ -46,8 +46,7 @@ const handleSubmit = async (title, author, body, tokenFetch) => {
 		{
 			method: 'POST',
 			headers: {
-				'Content-Type': 'application/json',
+				'Content-Type': 'application/json'
-				'Access-Control-Allow-Origin': '*'
 			},
 			body: JSON.stringify({
 				title,

client/pages/panels/footer.jsx

@@ -13,7 +13,7 @@ const Break = () => {
 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>
+			<p className='text centered'>© <a href='https://krgamestudios.com'>KR Game Studios</a> 2020-2022<Break /><Link to='/privacypolicy'>Privacy Policy</Link><Break /><Link to='/credits'>Credits</Link></p>
 		</footer>
 	);
 };

client/pages/panels/news-feed.jsx

@@ -10,8 +10,7 @@ const NewsFeed = props => {
 		fetch(`${process.env.NEWS_URI}/news`, {
 			method: 'GET',
 			headers: {
-				'Content-Type': 'application/json',
+				'Content-Type': 'application/json'
-				'Access-Control-Allow-Origin': '*'
 			},
 			signal: aborter.current.signal //oh dear
 		})

client/pages/panels/popup-chat.jsx

@@ -78,7 +78,7 @@ const handleSend = (inputRef, pushChatlog, username, accessToken) => {
 	});
 
 	if (!inputRef.current.value.startsWith('/')) {
-		pushChatlog({ username: username, text: inputRef.current.value });
+		pushChatlog({ createdAt: (new Date(Date.now())).toISOString(), username: username, text: inputRef.current.value });
 	}
 
 	inputRef.current.value = '';
@@ -86,7 +86,36 @@ const handleSend = (inputRef, pushChatlog, username, accessToken) => {
 
 //render each line
 const processLine = (line, index, accessToken) => {
-	let content = <div className='content'>{line.username ? <span className='username'>{line.username}: </span> : ''}{line.text ? <span className='text'>{line.text}</span> : ''}</div>;
+	//utility functions
+	const isValidDate = d => {
+		return d instanceof Date && !isNaN(d);
+	};
+
+	const isToday = d => {
+		const now = new Date(Date.now());
+		return d.getDate() == now.getDate() && d.getMonth() == now.getMonth() && d.getFullYear() == now.getFullYear();
+	};
+
+	const isThisYear = d => {
+		const now = new Date(Date.now());
+		return d.getFullYear() == now.getFullYear();
+	};
+
+	//parse the date
+	const date = new Date(line.createdAt);
+
+	//split it up so we can format each field individually
+	const year = `${date.getFullYear()}`;
+	const month = `${date.getMonth() + 1}`;
+	const day = `${date.getDate()}`;
+	const hours = `${date.getHours()}`;
+	const minutes = `${date.getMinutes()}`.padStart(2, '0');
+
+	//combine into the final timestamp
+	const timestamp = !isValidDate(date) ? '' : isToday(date) ? `${hours}:${minutes}` : isThisYear(date) ? `${month}/${day}` : `${year}`;
+
+	//generate the content string
+	let content = <div className='content row'>{timestamp.length > 0 ? <span className='timestamp col'>{timestamp}</span> : null }<span className='inner col'>{line.username ? <span className='username'>{line.username}: </span> : ''}{line.text ? <span className='text'>{line.text}</span> : ''}</span></div>;
 
 	//decorators
 	if (line.emphasis) {
@@ -97,7 +126,8 @@ const processLine = (line, index, accessToken) => {
 		content = <strong>{content}</strong>;
 	}
 
-	return <li key={index} className='line'>{content}<a className='report' onClick={() => processReport(line, accessToken)}>!!!</a></li>;
+
+	return <li key={index} className='line table noCollapse'>{content}<a className='report' onClick={() => processReport(line, accessToken)}>!!!</a></li>;
 };
 
 const processReport = (line, accessToken) => {

client/pages/utilities/token-provider.jsx

@@ -37,7 +37,6 @@ const TokenProvider = props => {
 					method: 'DELETE',
 					headers: {
 						'Content-Type': 'application/json',
-						'Access-Control-Allow-Origin': '*',
 						'Authorization': `Bearer ${bearer}`
 					},
 					body: JSON.stringify({
@@ -50,8 +49,7 @@ const TokenProvider = props => {
 			const response = await fetch(`${process.env.AUTH_URI}/auth/token`, {
 				method: 'POST',
 				headers: {
-					'Content-Type': 'application/json',
+					'Content-Type': 'application/json'
-					'Access-Control-Allow-Origin': '*'
 				},
 				body: JSON.stringify({
 					token: refreshToken
@@ -91,8 +89,7 @@ const TokenProvider = props => {
 			const response = await fetch(`${process.env.AUTH_URI}/auth/token`, {
 				method: 'POST',
 				headers: {
-					'Content-Type': 'application/json',
+					'Content-Type': 'application/json'
-					'Access-Control-Allow-Origin': '*'
 				},
 				body: JSON.stringify({
 					token: refreshToken

client/styles/popup-chat.css

@@ -77,6 +77,16 @@
 	display: flex;
 }
 
+.chat .timestamp {
+	max-width: 44px;
+}
+
+.chat .inner {
+	flex: 1 !important;
+	display: inline-block !important;
+	flex-direction: row !important;
+}
+
 .chat .username {
 	font-weight: bold;
 }

configure-script.js

@@ -46,6 +46,14 @@ See https://github.com/krgamestudios/MERN-template/wiki for help.
 `
 );
 
+	//determine local computer address for mac user vs everyone else
+	let macUser = '';
+	while (macUser.toLowerCase() !== 'yes' && macUser.toLowerCase() !== 'no') {
+		macUser = await question('Will the MERN Template be running locally on a MacOS system? (yes or no)', '');
+	}
+
+	const localAddress = macUser ? 'localhost' : '%';
+
 	//project configuration
 	const projectName = await question('Project Name', 'template');
 	const projectWebAddress = await question('Project Web Address', 'example.com');
@@ -284,24 +292,25 @@ CMD ["sleep 10 && npm start"]
 
 	const sqlfile = `
 CREATE DATABASE IF NOT EXISTS ${projectName};
-CREATE USER IF NOT EXISTS '${projectDBUser}'@'%' IDENTIFIED BY '${projectDBPass}';
+CREATE USER IF NOT EXISTS '${projectDBUser}'@'${localAddress}' IDENTIFIED BY '${projectDBPass}';
-GRANT ALL PRIVILEGES ON ${projectName}.* TO '${projectDBUser}'@'%';
+GRANT ALL PRIVILEGES ON ${projectName}.* TO '${projectDBUser}'@'${localAddress}';
 
 CREATE DATABASE IF NOT EXISTS ${newsName};
-CREATE USER IF NOT EXISTS '${newsDBUser}'@'%' IDENTIFIED BY '${newsDBPass}';
+CREATE USER IF NOT EXISTS '${newsDBUser}'@'${localAddress}' IDENTIFIED BY '${newsDBPass}';
-GRANT ALL PRIVILEGES ON ${newsName}.* TO '${newsDBUser}'@'%';
+GRANT ALL PRIVILEGES ON ${newsName}.* TO '${newsDBUser}'@'${localAddress}';
 
 CREATE DATABASE IF NOT EXISTS ${authName};
-CREATE USER IF NOT EXISTS '${authDBUser}'@'%' IDENTIFIED BY '${authDBPass}';
+CREATE USER IF NOT EXISTS '${authDBUser}'@'${localAddress}' IDENTIFIED BY '${authDBPass}';
-GRANT ALL PRIVILEGES ON ${authName}.* TO '${authDBUser}'@'%';
+GRANT ALL PRIVILEGES ON ${authName}.* TO '${authDBUser}'@'${localAddress}';
 
 CREATE DATABASE IF NOT EXISTS ${chatName};
-CREATE USER IF NOT EXISTS '${chatDBUser}'@'%' IDENTIFIED BY '${chatDBPass}';
+CREATE USER IF NOT EXISTS '${chatDBUser}'@'${localAddress}' IDENTIFIED BY '${chatDBPass}';
-GRANT ALL PRIVILEGES ON ${chatName}.* TO '${chatDBUser}'@'%';
+GRANT ALL PRIVILEGES ON ${chatName}.* TO '${chatDBUser}'@'${localAddress}';
 
 FLUSH PRIVILEGES;
 `;
 
+
 	fs.writeFileSync('docker-compose.yml', ymlfile);
 	fs.writeFileSync('Dockerfile', dockerfile);
 	fs.writeFileSync('startup.sql', sqlfile);

package.json

@@ -9,10 +9,10 @@
     "build:server": "exit 0",
     "build:client": "webpack --env=production --config webpack.config.js",
     "dev": "concurrently npm:dev:server npm:dev:client",
-    "dev:server": "nodemon ./* --ext js,jsx,json --ignore 'node_modules/*'",
+    "dev:server": "nodemon --ext js,jsx,json --ignore 'node_modules/*'",
     "dev:client": "webpack serve --env=development --config webpack.config.js",
     "local": "concurrently npm:local:server npm:local:client",
-    "local:server": "nodemon ./* --ext js,jsx,json --ignore 'node_modules/*'",
+    "local:server": "nodemon --ext js,jsx,json --ignore 'node_modules/*'",
     "local:client": "webpack serve --env=local --config webpack.config.js",
     "analyze": "webpack --env=production --env=analyze --config webpack.config.js"
   },
@@ -43,13 +43,11 @@
     "jwt-decode": "^3.1.2",
     "mariadb": "^2.5.4",
     "query-string": "^7.0.1",
-    "raw-loader": "^4.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-select": "^5.2.1",
-    "rehype-raw": "^5.1.0",
     "sequelize": "^6.6.5",
     "socket.io-client": "^4.1.3",
     "style-loader": "^3.2.1",

webpack.config.js

@@ -42,14 +42,6 @@ module.exports = ({ production, development, local, analyze }) => {
 					test: /\.(css)$/,
 					use: ['style-loader', 'css-loader']
 				},
-				{
-					test: /\.(md)$/,
-					use: [
-						{
-							loader: 'raw-loader'
-						},
-					],
-				},
 			]
 		},
 		plugins: [