Updated libraries, docker engine version, docker distro version

Also updated copyright year, since it's nearly time.

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2021 Kayne Ruse, KR Game Studios
+Copyright (c) 2021-2023 Kayne Ruse, KR Game Studios
 
 This software is provided 'as-is', without any express or implied warranty. In no event will the authors be held liable for any damages arising from the use of this software.
 

client/pages/accounts/recover.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from 'react';
-import { Link, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 import ApplyToBody from '../utilities/apply-to-body';
 
@@ -9,12 +9,15 @@ import { TokenContext } from '../utilities/token-provider';
 const validateEmail = require('../../../common/utilities/validate-email');
 
 const Recover = props => {
+	//history
+	const navigate = useNavigate();
+
 	//context
 	const authTokens = useContext(TokenContext);
 
 	//misplaced?
 	if (authTokens.accessToken) {
-		return <Navigate to='/' />;
+		navigate("/");
 	}
 
 	//refs
@@ -39,7 +42,7 @@ const Recover = props => {
 
 							//redirect
 							if (redirect) {
-								props.history.push('/');
+								navigate("/");
 							}
 						}
 					}>

client/pages/accounts/reset.jsx

@@ -1,21 +1,23 @@
 import React, { useContext, useRef } from 'react';
-import { Link, Navigate } from 'react-router-dom';
+import { Link, useNavigate, useSearchParams } 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 => {
+	//params
+	const [params, setParams] = useSearchParams(); //the URLSearchParams API
+
+	//history
+	const navigate = useNavigate();
+
 	//context
 	const authTokens = useContext(TokenContext);
 
-	//query
-	const query = queryString.parse(props.location.search);
-
 	//misplaced?
-	if (authTokens.accessToken || !query.email || !query.token) {
+	if (authTokens.accessToken || !params.has('email') || !params.has('token')) {
-		return <Navigate to='/' />;
+		navigate("/");
 	}
 
 	//refs
@@ -31,7 +33,7 @@ const Reset = props => {
 					<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);
+						const [err, redirect] = await update(passwordRef.current.value, retypeRef.current.value, params);
 
 						if (err) {
 							alert(err);
@@ -42,7 +44,7 @@ const Reset = props => {
 
 						//redirect
 						if (redirect) {
-							props.history.push('/');
+							navigate("/");
 						}
 					}}>
 						<input type='password' name='password' placeholder='New Password' ref={passwordRef} />
@@ -56,7 +58,7 @@ const Reset = props => {
 	);
 };
 
-const update = async (password, retype, query) => {
+const update = async (password, retype, params) => {
 	if (password != retype) {
 		return ['Passwords do not match'];
 	}
@@ -65,7 +67,7 @@ const update = async (password, retype, query) => {
 		return ['Password is too short'];
 	}
 
-	const result = await fetch(`${process.env.AUTH_URI}/auth/reset?email=${query.email}&token=${query.token}`, {
+	const result = await fetch(`${process.env.AUTH_URI}/auth/reset?email=${params.get('email')}&token=${params.get('token')}`, {
 		method: 'PATCH',
 		headers: {
 			'Content-Type': 'application/json'

client/pages/accounts/signup.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from 'react';
-import { Link, Navigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 import ApplyToBody from '../utilities/apply-to-body';
 
@@ -10,12 +10,15 @@ const validateEmail = require('../../../common/utilities/validate-email');
 const validateUsername = require('../../../common/utilities/validate-username');
 
 const Signup = props => {
+	//history
+	const navigate = useNavigate();
+
 	//context
 	const authTokens = useContext(TokenContext);
 
 	//misplaced?
 	if (authTokens.accessToken) {
-		return <Navigate to='/' />;
+		navigate("/");
 	}
 
 	//refs
@@ -44,7 +47,7 @@ const Signup = props => {
 
 							//redirect
 							if (redirect) {
-								props.history.push('/');
+								navigate("/");
 							}
 						}
 					}>

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

@@ -7,16 +7,13 @@ const ChatReports = props => {
 
 	const authTokens = useContext(TokenContext);
 
-	useEffect(async () => {
+	useEffect(() => {
-		const result = await authTokens.tokenFetch(`${process.env.CHAT_URI}/admin/reports`);
+		authTokens.tokenFetch(`${process.env.CHAT_URI}/admin/reports`)
-
+			.then(res => res.json())
-		if (!result.ok) {
+			.then(json => {
-			const err = `${result.status}: ${await result.text()}`;
+				setReports(json);
-			console.log(err);
+			})
-			alert(err);
+		;
-		} else {
-			setReports(await result.json());
-		}
 	}, []);
 
 	return (

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

@@ -17,16 +17,13 @@ const NewsEditor = props => {
 	const [index, setIndex] = useState(null);
 
 	//run once
-	useEffect(async () => {
+	useEffect(() => {
-		const result = await fetch(`${process.env.NEWS_URI}/news/metadata?limit=999`);
+		fetch(`${process.env.NEWS_URI}/news/metadata?limit=999`)
-
+			.then(res => res.json())
-		if (!result.ok) {
+			.then(json => {
-			const err = `${result.status}: ${await result.text()}`;
+				setArticles(json)
-			console.log(err);
+			})
-			alert(err);
+		;
-		} else {
-			setArticles(await result.json());
-		}
 	}, []);
 
 	return (

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-2022<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-2024<Break /><Link to='/privacypolicy'>Privacy Policy</Link><Break /><Link to='/credits'>Credits</Link></p>
 		</footer>
 	);
 };

client/pages/utilities/token-provider.jsx

@@ -9,6 +9,12 @@ const TokenProvider = props => {
 	//state to be used
 	const [accessToken, setAccessToken] = useState('');
 
+	//force a logout under certain conditions
+	const forceLogout = () => {
+		localStorage.removeItem("accessToken");
+		setAccessToken("");
+	};
+
 	//make the access token persist between reloads
 	useEffect(() => {
 		setAccessToken(localStorage.getItem("accessToken") || '');
@@ -47,6 +53,9 @@ const TokenProvider = props => {
 
 			//any errors, throw them
 			if (!response.ok) {
+				if (response.status == 403) {
+					forceLogout();
+				}
 				throw `${response.status}: ${await response.text()}`;
 			}
 
@@ -82,6 +91,9 @@ const TokenProvider = props => {
 
 			//any errors, throw them
 			if (!response.ok) {
+				if (response.status == 403) {
+					forceLogout();
+				}
 				throw `${response.status}: ${await response.text()}`;
 			}
 

configure-script.js

@@ -119,7 +119,7 @@ See https://github.com/krgamestudios/MERN-template/wiki for help.
 	const chatPort = 3300;
 
 const ymlfile = `
-version: "3.6"
+version: "3.8"
 services:
   ${projectName}:
     build: .
@@ -278,7 +278,7 @@ networks:
 `;
 
 	const dockerfile = `
-FROM node:18
+FROM node:21-bookworm-slim
 WORKDIR "/app"
 COPY . /app
 RUN mkdir /app/public

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mern-template",
-  "version": "1.3.3",
+  "version": "1.5.0",
   "description": "A website template using the MERN stack.",
   "main": "server/server.js",
   "scripts": {
@@ -27,35 +27,34 @@
   },
   "homepage": "https://github.com/KRGameStudios/MERN-template#readme",
   "dependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.23.6",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-env": "^7.23.6",
-    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-react": "^7.23.3",
-    "babel-loader": "^8.3.0",
+    "babel-loader": "^9.1.3",
     "clean-webpack-plugin": "^4.0.0",
     "compression-webpack-plugin": "^10.0.0",
-    "concurrently": "^7.5.0",
+    "concurrently": "^7.6.0",
-    "css-loader": "^6.7.1",
+    "css-loader": "^6.8.1",
     "dateformat": "^5.0.3",
-    "dotenv": "^16.0.3",
+    "dotenv": "^16.3.1",
     "express": "^4.18.2",
-    "html-webpack-plugin": "^5.5.0",
+    "html-webpack-plugin": "^5.6.0",
     "jwt-decode": "^3.1.2",
-    "mariadb": "^3.0.2",
+    "mariadb": "^3.2.3",
-    "query-string": "^7.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.3.0",
-    "react-router-dom": "^6.4.3",
+    "react-router-dom": "^6.21.1",
-    "react-select": "^5.6.0",
+    "react-select": "^5.8.0",
-    "sequelize": "^6.25.5",
+    "sequelize": "^6.35.2",
-    "socket.io-client": "^4.5.3",
+    "socket.io-client": "^4.7.2",
-    "style-loader": "^3.3.1",
+    "style-loader": "^3.3.3",
-    "webpack": "^5.75.0",
+    "webpack": "^5.89.0",
-    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-bundle-analyzer": "^4.10.1",
-    "webpack-cli": "^4.10.0"
+    "webpack-cli": "^5.1.4"
   },
   "devDependencies": {
-    "nodemon": "^2.0.20",
+    "nodemon": "^3.0.2",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-dev-server": "^4.15.1"
   }
 }