Compare commits

..

71 Commits

Author SHA1 Message Date
Kayne Ruse 45cf281c91 Updated dependencies 2022-11-13 02:07:15 +00:00
Kayne Ruse 2794b4c724 Updated dependencies 2022-11-13 01:56:14 +00:00
Kayne Ruse b1f49a4166 Removed a dependency 2022-08-01 11:09:35 +01:00
Kayne Ruse 4cbf67dcbb Updated dependencies 2022-08-01 10:34:35 +01:00
Kayne Ruse fd29385cf8 Update README.md 2022-07-28 03:47:23 +10:00
Kayne Ruse 8e81dccef6 Added cookies 2022-07-26 10:18:49 +01:00
Kayne Ruse adeb8c4267 Updated dependencies 2022-07-23 11:45:33 +01:00
Kayne Ruse eb6c3a40d7 Added hook array to auth config 2022-06-15 23:50:58 +01:00
Kayne Ruse 4d4a0b5401 Updated dependencies 2022-06-10 17:07:56 +01:00
Kayne Ruse 490860159e Cleaned up usage of fetch 2022-06-10 16:53:42 +01:00
Kayne Ruse ed01fe6db5 Addressed #34 2022-05-30 06:16:10 +01:00
Kayne Ruse cfb8d20ad2 Merge remote-tracking branch 'refs/remotes/origin/main' 2022-05-30 06:10:20 +01:00
Kayne Ruse d44cae397d Updated dependencies, addressed #33 2022-05-30 06:10:01 +01:00
Kayne Ruse b97fff05b3 Added FUNDING.yml 2022-02-13 07:49:49 +11:00
Kayne Ruse 22703bfbcb Swapped day and month around 2022-01-09 15:02:06 +00:00
Kayne Ruse 14a3c9eabe Added timestamps to the chatbox 2022-01-09 06:39:13 +00:00
Kayne Ruse 8e90a4a540 Trying a fix 2022-01-08 04:59:21 +00:00
Kayne Ruse 1d3c94a1aa Shortened the code with a ternary 2022-01-06 14:26:30 +00:00
Kayne Ruse ca5e79ccf3 Merge pull request #32 from kcampbelljr/macos-docs
Macos docs
2022-01-07 01:15:36 +11:00
Kayne Ruse 03acce1907 Removed an unused dependency 2022-01-06 14:00:51 +00:00
Keith Campbell c0b7280533 removed macos, updated code on original configure script, testing.. 2022-01-05 23:23:09 -05:00
Keith Campbell 2925cce7ca created a copy of the configure script and made the changes needed for now, should we add a macos check to the original configure script instead? 2022-01-04 23:51:02 -05:00
Kayne Ruse b90670b922 Tweaked credits 2022-01-03 19:21:57 +00:00
Kayne Ruse 290f25f898 Added prox to the credits 2022-01-03 08:45:27 +00:00
Kayne Ruse 3cdef433f9 Tweaked moderator privileges 2022-01-02 18:11:11 +00:00
Kayne Ruse 53c8ddab54 Removed rehype-raw 2021-12-30 14:28:10 +00:00
Kayne Ruse 4e94c5338d Removed client-side markdown rendering 2021-12-30 13:21:34 +00:00
Kayne Ruse 55ff5765c6 Swapped out a library 2021-12-27 03:34:00 +00:00
Kayne Ruse d486059430 Updated webpack.config.js 2021-12-26 16:12:23 +00:00
Kayne Ruse 9d8c948dbb Updated dependencies 2021-12-24 07:37:43 +00:00
Kayne Ruse b21fa8db9e Tweaked webpack.config.js 2021-12-20 13:52:43 +00:00
Kayne Ruse c130b74e2d Added an example proxy route to webpack.config.js 2021-12-20 07:33:01 +00:00
Kayne Ruse d37b93d5f7 Updated webpack-dev-server to 4.6.0 2021-12-20 07:07:36 +00:00
Kayne Ruse 829cb2e3da Disabled source map in prod 2021-12-20 06:19:23 +00:00
Kayne Ruse 29f0dbb1ca Fixed HTTPS redirection 2021-12-15 18:39:37 +00:00
Kayne Ruse 13ad7d2435 Updated README.md 2021-12-11 16:57:48 +00:00
Kayne Ruse e30853e0cd Updated configure-script.js 2021-12-11 11:38:17 +00:00
Kayne Ruse 1e16a96f86 Updated README.md 2021-12-11 05:01:10 +00:00
Kayne Ruse cff73107b2 Updated package-lock.json 2021-11-17 06:13:41 +00:00
Kayne Ruse 76417747b3 Bumped node to version 16 LTS 2021-11-17 04:58:08 +00:00
Kayne Ruse b8323723ed Updated package-lock.json 2021-11-15 22:37:51 +00:00
Kayne Ruse 415b2f32f1 Bumped version number 2021-08-24 08:02:17 +01:00
Kayne Ruse a0dbe0aee1 Imported the directory structure from egg trainer 2021-08-22 02:22:28 +10:00
Kayne Ruse f415a7ece2 Fixed analyzer 2021-08-20 21:21:18 +01:00
Kayne Ruse 9c863f309f Fixed webpack config 2021-08-21 05:49:01 +10:00
Kayne Ruse 7547b1717e Added gzip compression for JS files 2021-08-21 05:36:23 +10:00
Kayne Ruse 22e6286e0a Webpack config tweak 2021-08-16 07:44:32 +10:00
Kayne Ruse c766c43223 No longer needs the refreshToken to logout 2021-08-15 00:54:28 +10:00
Kayne Ruse bb1590bae7 Bumped version number 2021-08-10 17:39:09 +10:00
Kayne Ruse 5f7b9dda3a Tweaked README.md 2021-08-07 13:54:39 +10:00
Kayne Ruse 051f3dfb2a Updated README.md 2021-07-30 10:20:14 +10:00
Kayne Ruse 85456e0892 Minor markdown tweak 2021-07-30 03:36:40 +10:00
Kayne Ruse 6130337846 Fixed classNames 2021-07-30 01:34:06 +10:00
Kayne Ruse ac99f3bf38 Fixed CSS classes 2021-07-29 22:13:17 +10:00
Kayne Ruse 20e94db628 I really hate these line endings 2021-07-29 21:15:32 +10:00
Kayne Ruse bcb4a37f5a Tweak 2021-07-29 21:13:53 +10:00
Kayne Ruse 3b0d3c87b1 Tweak 2021-07-28 15:52:50 +01:00
Kayne Ruse 51a116503d Bumped version number 2021-07-28 15:43:09 +01:00
Kayne Ruse eb370663d2 Tweaked some display 2021-07-29 00:37:23 +10:00
Kayne Ruse 462116d980 Fixed whitespace 2021-07-28 23:18:22 +10:00
Kayne Ruse af06ddc06d Working on password recovery 2021-07-28 23:01:41 +10:00
Kayne Ruse f937ee47db Removed universal-cookie, fixed package.json versioning 2021-07-26 05:05:39 +01:00
Kayne Ruse 6d0dd419ca Fixed #22 2021-07-26 13:48:08 +10:00
Kayne Ruse 2919467dff Fixed #23 2021-07-26 13:38:33 +10:00
Kayne Ruse 269caac88c Tweaked README.md 2021-07-25 20:35:34 +01:00
Kayne Ruse 69c297fa74 Stupid line endings 2021-07-25 19:22:17 +10:00
Kayne Ruse 0f538be3e5 Fixed #20 2021-07-25 18:53:14 +10:00
Kayne Ruse f85b6e8793 Fixed passwords 2021-07-25 18:52:46 +10:00
Kayne Ruse 2af9532930 Fixed deploy bug, properly 2021-07-24 14:01:20 +01:00
Kayne Ruse 191da50740 Deploy bug 2021-07-24 22:20:17 +10:00
Kayne Ruse f24c7990f6 Fixed line-endings 2021-07-24 20:23:18 +10:00
54 changed files with 4327 additions and 16147 deletions
+5
View File
@@ -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"]
+119 -118
View File
@@ -1,118 +1,119 @@
# Logs # Logs
logs logs
*.log *.log
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
lerna-debug.log* lerna-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html) # Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data # Runtime data
pids pids
*.pid *.pid
*.seed *.seed
*.pid.lock *.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover # Directory for instrumented libs generated by jscoverage/JSCover
lib-cov lib-cov
# Coverage directory used by tools like istanbul # Coverage directory used by tools like istanbul
coverage coverage
*.lcov *.lcov
# nyc test coverage # nyc test coverage
.nyc_output .nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt .grunt
# Bower dependency directory (https://bower.io/) # Bower dependency directory (https://bower.io/)
bower_components bower_components
# node-waf configuration # node-waf configuration
.lock-wscript .lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html) # Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release build/Release
# Dependency directories # Dependency directories
node_modules/ node_modules/
jspm_packages/ jspm_packages/
# TypeScript v1 declaration files # TypeScript v1 declaration files
typings/ typings/
# TypeScript cache # TypeScript cache
*.tsbuildinfo *.tsbuildinfo
# Optional npm cache directory # Optional npm cache directory
.npm .npm
# Optional eslint cache # Optional eslint cache
.eslintcache .eslintcache
# Microbundle cache # Microbundle cache
.rpt2_cache/ .rpt2_cache/
.rts2_cache_cjs/ .rts2_cache_cjs/
.rts2_cache_es/ .rts2_cache_es/
.rts2_cache_umd/ .rts2_cache_umd/
# Optional REPL history # Optional REPL history
.node_repl_history .node_repl_history
# Output of 'npm pack' # Output of 'npm pack'
*.tgz *.tgz
# Yarn Integrity file # Yarn Integrity file
.yarn-integrity .yarn-integrity
# dotenv environment variables file # dotenv environment variables file
.env .env
.env.test .env.test
# parcel-bundler cache (https://parceljs.org/) # parcel-bundler cache (https://parceljs.org/)
.cache .cache
# Next.js build output # Next.js build output
.next .next
# Nuxt.js build / generate output # Nuxt.js build / generate output
.nuxt .nuxt
dist dist
# Gatsby files # Gatsby files
.cache/ .cache/
# Comment in the public line in if your project uses Gatsby and *not* Next.js # Comment in the public line in if your project uses Gatsby and *not* Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support # https://nextjs.org/blog/next-9-1#public-directory-support
# public # public
# vuepress build output # vuepress build output
.vuepress/dist .vuepress/dist
# Serverless directories # Serverless directories
.serverless/ .serverless/
# FuseBox cache # FuseBox cache
.fusebox/ .fusebox/
# DynamoDB Local files # DynamoDB Local files
.dynamodb/ .dynamodb/
# TernJS port file # TernJS port file
.tern-port .tern-port
# Output files # Output files
public/*.html public/*.html
public/*.js public/*.js
public/*.css public/*.css
public/*.map public/*.map
public/*.gz public/*.gz
public/*.txt
letsencrypt/
mysql/ letsencrypt/
Dockerfile mysql/
docker-compose.yml Dockerfile
startup.sql docker-compose.yml
startup.sql
+10 -4
View File
@@ -1,6 +1,8 @@
# MERN-template # MERN-template
A website template using the MERN stack. The primary technology involved is: A website template using the MERN stack. It is geared towards Persistent Browser Based Games (think neopets), but is flexible enough for a number of different uses.
The primary technology involved is:
* React * React
* Nodejs * Nodejs
@@ -27,6 +29,7 @@ A clean install is this easy:
``` ```
git clone https://github.com/krgamestudios/MERN-template.git git clone https://github.com/krgamestudios/MERN-template.git
cd MERN-template
node configure-script.js node configure-script.js
docker-compose up --build docker-compose up --build
``` ```
@@ -36,7 +39,7 @@ docker-compose up --build
To set up this template in development mode: To set up this template in development mode:
1. Ensure mariadb is running in your development environment 1. Ensure mariadb is running in your development environment
2. Run `mariadb sql/create_database.sql` as the root user 2. Run `mariadb tools/create_database.sql` as the root user
3. Run `npm install` 3. Run `npm install`
4. Run `cp .envdev .env` and enter your details into the `.env` file 4. Run `cp .envdev .env` and enter your details into the `.env` file
5. Execute `npm run dev` 5. Execute `npm run dev`
@@ -53,6 +56,8 @@ To set up this template in development mode:
- Account deletion - Account deletion
- Password management - Password management
- JSON web token authentication - JSON web token authentication
- HttpOnly cookies for security
- Optional post validation hook
- Fully Featured News Blog (as a microservice) - Fully Featured News Blog (as a microservice)
- Publish, edit or delete articles as needed - Publish, edit or delete articles as needed
- Secured via admin panel - Secured via admin panel
@@ -72,6 +77,8 @@ To set up this template in development mode:
- Full documentation - Full documentation
- Modding tutorials - Modding tutorials
- Fully Featured News Blog (as a microservice)
- Individual pages for news articles
# Coming Eventually # Coming Eventually
@@ -83,7 +90,6 @@ To set up this template in development mode:
- Private messaging - Private messaging
- Broadcasting to all channels - Broadcasting to all channels
- Badges next to usernames - Badges next to usernames
- Better compression for client files
- Backend for leaderboards (modding tutorial?) - Backend for leaderboards (modding tutorial?)
- Backend for energy systems (modding tutorial?) - Backend for energy systems (modding tutorial?)
- Backend for items, shops, trading and currency - Backend for items, shops, trading and currency (modding tutorial?)
+11 -9
View File
@@ -2,14 +2,16 @@
import 'regenerator-runtime/runtime'; import 'regenerator-runtime/runtime';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom/client';
import App from './components/app'; import App from './pages/app';
import TokenProvider from './components/utilities/token-provider'; import TokenProvider from './pages/utilities/token-provider';
ReactDOM.render( ReactDOM
<TokenProvider> .createRoot(document.getElementById('root'))
<App /> .render(
</TokenProvider>, <TokenProvider>
document.querySelector('#root') <App />
); </TokenProvider>
)
;
-46
View File
@@ -1,46 +0,0 @@
//react
import React, { useContext } from 'react';
import { BrowserRouter, Switch } from 'react-router-dom';
import { TokenContext } from './utilities/token-provider';
//library components
import LazyRoute from './utilities/lazy-route';
import Markdown from './panels/markdown';
//styling
//import a styling template here
//common components
import Header from './panels/header';
import Footer from './panels/footer';
import PopupChat from './panels/popup-chat';
const App = props => {
const authTokens = useContext(TokenContext);
//default render
return (
<BrowserRouter>
<Header />
<Switch>
<LazyRoute exact path='/' component={() => import('./pages/homepage')} />
<LazyRoute path='/signup' component={() => import('./pages/signup')} />
<LazyRoute path='/login' component={() => import('./pages/login')} />
<LazyRoute path='/account' component={() => import('./pages/account')} />
<LazyRoute path='/admin' component={() => import('./pages/admin')} />
<LazyRoute path='/mod' component={() => import('./pages/mod')} />
<LazyRoute path='/privacypolicy' component={async () => () => <Markdown content={require('../markdown/privacy-policy.md').default} />} />
<LazyRoute path='/credits' component={async () => () => <Markdown content={require('../markdown/credits.md').default} />} />
<LazyRoute path='*' component={() => import('./pages/not-found')} />
</Switch>
{ authTokens.accessToken ? <PopupChat /> : <></> }
<Footer />
</BrowserRouter>
);
};
export default App;
-105
View File
@@ -1,105 +0,0 @@
import React, { useEffect, useContext, useRef } from 'react';
import { Redirect } from 'react-router-dom';
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 (
<div className='page'>
<h1 className='centered'>Account</h1>
<form className='constricted' 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 = '';
}}>
<div>
<div>
<label htmlFor='password'>Change Password:</label>
<input type='password' name='password' ref={passwordRef} />
</div>
<div>
<label htmlFor='retype'>Retype Password:</label>
<input type='password' name='retype' ref={retypeRef} />
</div>
<div>
<label htmlFor='contact'>Allow Promotional Emails:</label>
<input type='checkbox' name='contact' ref={contactRef} />
</div>
</div>
<button type='submit'>Update Information</button>
</form>
<DeleteAccount className='constricted' />
</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;
-32
View File
@@ -1,32 +0,0 @@
import React, { useContext } from 'react';
import { Redirect } from 'react-router-dom';
import { TokenContext } from '../utilities/token-provider';
import NewsPublisher from '../panels/news-publisher';
import NewsEditor from '../panels/news-editor';
import GrantAdmin from '../panels/grant-admin';
import GrantMod from '../panels/grant-mod';
const Admin = props => {
//context
const authTokens = useContext(TokenContext);
//misplaced? (admin only)
if (!authTokens.accessToken || !authTokens.getPayload().admin) {
return <Redirect to='/' />;
}
return (
<div className='page'>
<h1 className='centered'>Administration Tools</h1>
<NewsPublisher />
<NewsEditor />
<GrantAdmin />
<GrantMod />
</div>
);
};
export default Admin;
-14
View File
@@ -1,14 +0,0 @@
import React from 'react';
import NewsFeed from '../panels/news-feed';
const HomePage = props => {
return (
<div className='page'>
<p>This is the MERN template homepage.</p>
<NewsFeed />
</div>
);
};
export default HomePage;
-107
View File
@@ -1,107 +0,0 @@
import React, { useContext, useRef } from 'react';
import { Redirect } from 'react-router-dom';
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 (
<div className='page'>
<h1 className='centered'>Login</h1>
<form className='constricted' 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('/');
}
}
}>
<div>
<label htmlFor="email">Email:</label>
<input type="email" name="email" ref={emailRef} />
</div>
<div>
<label htmlFor="password">Password:</label>
<input type="password" name="password" ref={passwordRef} />
</div>
<button type='submit'>Login</button>
</form>
</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;
-27
View File
@@ -1,27 +0,0 @@
import React, { useContext } from 'react';
import { Redirect } from 'react-router-dom';
import { TokenContext } from '../utilities/token-provider';
import ChatReports from '../panels/chat-reports';
import BanUser from '../panels/ban-user';
const Mod = props => {
//context
const authTokens = useContext(TokenContext);
//misplaced? (admin only)
if (!authTokens.accessToken || !(authTokens.getPayload().admin || authTokens.getPayload().mod)) {
return <Redirect to='/' />;
}
return (
<div className='page'>
<h1 className='centered'>Moderation Tools</h1>
<ChatReports />
<BanUser />
</div>
);
};
export default Mod;
-11
View File
@@ -1,11 +0,0 @@
import React from 'react';
const NotFound = props => {
return (
<div className='page'>
<h1 className='middle centered'>Page Not Found</h1>
</div>
);
};
export default NotFound;
-129
View File
@@ -1,129 +0,0 @@
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 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();
return (
<div className='page'>
<h1 className='centered'>Signup</h1>
<form className='constricted' onSubmit={
async evt => { //on submit
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);
}
//redirect
if (redirect) {
props.history.push('/');
}
}
}>
<div>
<label htmlFor='email'>Email:</label>
<input type='email' name='email' ref={emailRef} />
</div>
<div>
<label htmlFor='username'>Username:</label>
<input type='text' name='username' ref={usernameRef} />
</div>
<div>
<label htmlFor='password'>Password:</label>
<input type='password' name='password' ref={passwordRef} />
</div>
<div>
<label htmlFor='retype'>Retype Password:</label>
<input type='password' name='retype' ref={retypeRef} />
</div>
<div>
<label htmlFor='contact'>Allow Promotional Emails:</label>
<input type='checkbox' name='contact' ref={contactRef} />
</div>
<button type='submit'>Signup</button>
</form>
</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;
-67
View File
@@ -1,67 +0,0 @@
import React, { useState, useEffect, useContext } from 'react';
import { TokenContext } from '../utilities/token-provider';
import dateFormat from 'dateformat';
const ChatReports = props => {
const [reports, setReports] = useState([]);
const authTokens = useContext(TokenContext);
useEffect(async () => {
const result = await authTokens.tokenFetch(`${process.env.CHAT_URI}/admin/reports`, {
method: 'GET',
headers: {
'Access-Control-Allow-Origin': '*'
}
});
if (!result.ok) {
const err = `${result.status}: ${await result.text()}`;
console.log(err);
alert(err);
} else {
setReports(await result.json());
}
}, []);
return (
<table>
<thead>
<tr>
<th>Date</th>
<th>Username</th>
<th>Room Name</th>
<th>Content</th>
<th>Reported By</th>
</tr>
</thead>
<tbody>
{reports.map((report, index) => (
<tr key={index}>
<td>{dateFormat(report.chatlog.createdAt, 'yyyy-mm-dd, H:MM:ss')}</td>
<td>{report.chatlog.username}</td>
<td>{report.chatlog.room}</td>
<td>{report.chatlog.text}</td>
<td>{report.reporter.join(', ')}</td>
<td><button onClick={() => deleteReportsFor(report.chatlogIndex, authTokens.tokenFetch, setReports)}>Delete</button></td>
</tr>
))}
</tbody>
</table>
);
};
const deleteReportsFor = (chatlogIndex, tokenFetch, setReports) => {
tokenFetch(`${process.env.CHAT_URI}/admin/reports`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
},
body: JSON.stringify({ chatlogIndex })
});
setReports(reports => reports.filter(report => report.chatlogIndex != chatlogIndex));
};
export default ChatReports;
-12
View File
@@ -1,12 +0,0 @@
import React from 'react';
import { Link } from 'react-router-dom';
const Footer = () => {
return (
<footer>
<p className='centered'>MERN template designed by <a href='https://krgamestudios.com'>Kayne Ruse, KR Game Studios</a> - <Link to='/privacypolicy'>Privacy Policy</Link> - <Link to='/credits'>Credits</Link></p>
</footer>
);
};
export default Footer;
-76
View File
@@ -1,76 +0,0 @@
import React, { useContext } from 'react';
import { Link } from 'react-router-dom';
import { TokenContext } from '../utilities/token-provider';
const Visitor = () => {
return (
<div>
<Link to='/signup'>Sign Up</Link>
<span> - </span>
<Link to='/login'>Log In</Link>
</div>
);
};
const Member = () => {
const authTokens = useContext(TokenContext);
return (
<div>
<Link to='/account'>Account</Link>
<span> - </span>
{ authTokens.getPayload().admin ?
<span>
<Link to='/admin'>Admin</Link>
<span> - </span>
</span>:
<span />
}
{ authTokens.getPayload().mod ?
<span>
<Link to='/mod'>Moderation</Link>
<span> - </span>
</span>:
<span />
}
{ /* Logout button logs you out of the server too */ }
<Link to='/' onClick={async () => {
const result = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/logout`, { //NOTE: this gets overwritten as a bugfix
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
},
body: JSON.stringify({
token: authTokens.refreshToken
})
});
//any problems?
if (!result.ok) {
console.error(await result.text());
} else {
authTokens.setAccessToken('');
authTokens.setRefreshToken('');
}
}}>Log out</Link>
</div>
);
};
const Header = () => {
const authTokens = useContext(TokenContext);
return (
<header>
<h1><Link to='/'>MERN Template</Link></h1>
{ authTokens.accessToken ? <Member /> : <Visitor /> }
</header>
);
};
export default Header;
-35
View File
@@ -1,35 +0,0 @@
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))
;
}, []);
} else
//assume raw info
if (!contentHook) {
setContentHook(props.content);
}
return (
<ReactMarkdown rehypePlugins={[rehypeRaw]} escapeHtml={false} props={{...props}}>{contentHook}</ReactMarkdown>
);
};
export default Markdown;
@@ -1,13 +0,0 @@
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;
-6
View File
@@ -1,6 +0,0 @@
# Credits
MERN Template developed by Kayne Ruse, KR Game Studios
[https://github.com/krgamestudios/MERN-template](https://github.com/krgamestudios/MERN-template)
-2
View File
@@ -1,2 +0,0 @@
# Privacy Policy
+101
View File
@@ -0,0 +1,101 @@
import React, { useEffect, useContext, useRef } from 'react';
import { Link, Navigate } 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 <Navigate 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`)
.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: {
'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;
+109
View File
@@ -0,0 +1,109 @@
import React, { useContext, useRef } from 'react';
import { Link, Navigate } 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 <Navigate 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, accessToken] = await handleSubmit(emailRef.current.value, passwordRef.current.value);
if (err) {
alert(err);
}
//save auth tokens and redirect
if (accessToken) {
authTokens.setAccessToken(accessToken);
return <Navigate to='/' />;
}
}
}>
<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'
},
body: JSON.stringify({
email,
password,
}),
credentials: 'include'
});
//handle errors
if (!result.ok) {
const err = `${result.status}: ${await result.text()}`;
console.error(err);
return [err, false];
}
//return the new auth tokens
const accessToken = await result.text();
return [null, accessToken];
};
//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;
@@ -1,6 +1,6 @@
import React, { useState, useContext, useRef } from 'react'; import React, { useState, useContext, useRef } from 'react';
import { TokenContext } from '../utilities/token-provider'; import { TokenContext } from '../../utilities/token-provider';
//DOCS: isolated the delete account button into it's own panel, so it can be easily moved as needed //DOCS: isolated the delete account button into it's own panel, so it can be easily moved as needed
const DeleteAccount = props => { const DeleteAccount = props => {
@@ -9,25 +9,27 @@ const DeleteAccount = props => {
const passwordRef = useRef(); const passwordRef = useRef();
if (!open) { if (!open) {
return <button onClick={() => setOpen(true)} className={props.className}>Delete Account</button> return (
<button onClick={() => setOpen(true)}>Delete Account</button>
);
} }
return ( return (
<form className={props.className} onSubmit={async evt => { <div className='panel centered middle'>
evt.preventDefault(); <h2 className='text centered'>Delete Your Account?</h2>
const [err] = await handleSubmit(passwordRef.current.value, authTokens); <form className='constrained' onSubmit={async evt => {
if (err) { evt.preventDefault();
alert(err); const [err] = await handleSubmit(passwordRef.current.value, authTokens);
} if (err) {
}}> alert(err);
<div> }
<label htmlFor="password">Password:</label> }}>
<input type="password" name="password" ref={passwordRef} /> <input type="password" name="password" placeholder='Password' ref={passwordRef} />
</div>
<button type='submit'>Delete Account</button> <button type='submit' style={{backgroundColor: 'red'}}>Delete Account</button>
<button type='cancel' onClick={() => { passwordRef.current.value = ''; setOpen(false); }}>Cancel</button> <button type='cancel' onClick={() => { passwordRef.current.value = ''; setOpen(false); }}>Cancel</button>
</form> </form>
</div>
); );
}; };
@@ -36,7 +38,6 @@ const handleSubmit = async (password, authTokens) => {
const result = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/account`, { const result = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/account`, {
method: 'DELETE', method: 'DELETE',
headers: { headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify({ body: JSON.stringify({
@@ -50,14 +51,7 @@ const handleSubmit = async (password, authTokens) => {
//force a logout //force a logout
const result2 = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/logout`, { const result2 = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/logout`, {
method: 'DELETE', method: 'DELETE'
headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json'
},
body: JSON.stringify({
token: authTokens.refreshToken
})
}); });
if (!result2.ok) { if (!result2.ok) {
@@ -65,7 +59,6 @@ const handleSubmit = async (password, authTokens) => {
} }
authTokens.setAccessToken(''); authTokens.setAccessToken('');
authTokens.setRefreshToken('');
return [null]; return [null];
}; };
+29
View File
@@ -0,0 +1,29 @@
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'
});
//any problems?
if (!result.ok) {
console.error(await result.text());
} else {
authTokens.setAccessToken('');
}
}}>Logout</Link>
</>
);
};
export default Logout;
+94
View File
@@ -0,0 +1,94 @@
import React, { useContext, useRef } from 'react';
import { Link, Navigate } 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 <Navigate 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'
},
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;
+85
View File
@@ -0,0 +1,85 @@
import React, { useContext, useRef } from 'react';
import { Link, Navigate } 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 <Navigate 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: {
'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;
+126
View File
@@ -0,0 +1,126 @@
import React, { useContext, useRef } from 'react';
import { Link, Navigate } 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 <Navigate 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'
},
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;
+37
View File
@@ -0,0 +1,37 @@
import React, { useContext } from 'react';
import { Link, Navigate } from 'react-router-dom';
import ApplyToBody from '../utilities/apply-to-body';
import { TokenContext } from '../utilities/token-provider';
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 <Navigate to='/' />;
}
return (
<>
<ApplyToBody className='dashboard' />
<div className='page panel'>
<div className='central panel'>
<h1 className='text centered'>Administration Tools</h1>
<br />
<GrantAdmin />
<br />
<GrantMod />
<Link to='/' className='text centered'>Return Home</Link>
</div>
</div>
</>
);
};
export default Admin;
+43
View File
@@ -0,0 +1,43 @@
import React, { useContext } from 'react';
import { Link, Navigate } 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 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 <Navigate to='/' />;
}
return (
<>
<ApplyToBody className='dashboard' />
<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>
</div>
</>
);
};
export default Mod;
@@ -1,6 +1,6 @@
import React, { useRef, useContext } from 'react'; import React, { useRef, useContext } from 'react';
import { TokenContext } from '../utilities/token-provider'; import { TokenContext } from '../../utilities/token-provider';
const BanUser = props => { const BanUser = props => {
//context //context
@@ -10,13 +10,10 @@ const BanUser = props => {
const usernameRef = useRef(); const usernameRef = useRef();
return ( return (
<div> <div className='panel'>
<h2 className='centered'>Permanently Ban User</h2> <h2 className='text centered'>Permanently Ban User</h2>
<form> <form className='constrained'>
<div> <input type='text' name='username' placeholder='Username' ref={usernameRef} />
<label htmlFor='username'>Username:</label>
<input type='text' name='username' ref={usernameRef} />
</div>
<button type='button' onClick={async evt => { <button type='button' onClick={async evt => {
evt.preventDefault(); evt.preventDefault();
@@ -45,8 +42,7 @@ const handleButtonPress = async (username, tokenFetch) => {
const result = await tokenFetch(`${process.env.AUTH_URI}/admin/banuser`, { const result = await tokenFetch(`${process.env.AUTH_URI}/admin/banuser`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json'
'Access-Control-Allow-Origin': '*'
}, },
body: JSON.stringify({ body: JSON.stringify({
username username
@@ -0,0 +1,65 @@
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`);
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'
},
body: JSON.stringify({ chatlogIndex })
});
setReports(reports => reports.filter(report => report.chatlogIndex != chatlogIndex));
};
export default ChatReports;
@@ -1,6 +1,6 @@
import React, { useRef, useContext } from 'react'; import React, { useRef, useContext } from 'react';
import { TokenContext } from '../utilities/token-provider'; import { TokenContext } from '../../utilities/token-provider';
const GrantAdmin = props => { const GrantAdmin = props => {
//context //context
@@ -10,13 +10,10 @@ const GrantAdmin = props => {
const usernameRef = useRef(); const usernameRef = useRef();
return ( return (
<div> <div className='panel'>
<h2 className='centered'>Grant Admin Privileges</h2> <h2 className='text centered'>Grant Admin Privileges</h2>
<form> <form className='constrained'>
<div> <input type='text' name='username' placeholder='Username' ref={usernameRef} />
<label htmlFor='username'>Username:</label>
<input type='text' name='username' ref={usernameRef} />
</div>
<button type='button' onClick={async evt => { <button type='button' onClick={async evt => {
evt.preventDefault(); evt.preventDefault();
@@ -54,8 +51,7 @@ const handleButtonPress = async (username, tokenFetch, method) => {
const result = await tokenFetch(`${process.env.AUTH_URI}/admin/admin`, { const result = await tokenFetch(`${process.env.AUTH_URI}/admin/admin`, {
method: method, method: method,
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json'
'Access-Control-Allow-Origin': '*'
}, },
body: JSON.stringify({ body: JSON.stringify({
username username
@@ -1,6 +1,6 @@
import React, { useRef, useContext } from 'react'; import React, { useRef, useContext } from 'react';
import { TokenContext } from '../utilities/token-provider'; import { TokenContext } from '../../utilities/token-provider';
const GrantMod = props => { const GrantMod = props => {
//context //context
@@ -10,13 +10,10 @@ const GrantMod = props => {
const usernameRef = useRef(); const usernameRef = useRef();
return ( return (
<div> <div className='panel'>
<h2 className='centered'>Grant Moderation Privileges</h2> <h2 className='text centered'>Grant Moderation Privileges</h2>
<form> <form className='constrained'>
<div> <input type='text' name='username' placeholder='Username' ref={usernameRef} />
<label htmlFor='username'>Username:</label>
<input type='text' name='username' ref={usernameRef} />
</div>
<button type='button' onClick={async evt => { <button type='button' onClick={async evt => {
evt.preventDefault(); evt.preventDefault();
@@ -54,8 +51,7 @@ const handleButtonPress = async (username, tokenFetch, method) => {
const result = await tokenFetch(`${process.env.AUTH_URI}/admin/mod`, { const result = await tokenFetch(`${process.env.AUTH_URI}/admin/mod`, {
method: method, method: method,
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json'
'Access-Control-Allow-Origin': '*'
}, },
body: JSON.stringify({ body: JSON.stringify({
username username
@@ -1,7 +1,7 @@
import React, { useState, useEffect, useContext, useRef } from 'react'; import React, { useState, useEffect, useContext, useRef } from 'react';
import Select from 'react-dropdown-select'; import Select from 'react-select';
import { TokenContext } from '../utilities/token-provider'; import { TokenContext } from '../../utilities/token-provider';
const NewsEditor = props => { const NewsEditor = props => {
//context //context
@@ -18,13 +18,7 @@ const NewsEditor = props => {
//run once //run once
useEffect(async () => { useEffect(async () => {
const result = await fetch(`${process.env.NEWS_URI}/news/metadata?limit=999`, { 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) { if (!result.ok) {
const err = `${result.status}: ${await result.text()}`; const err = `${result.status}: ${await result.text()}`;
@@ -36,38 +30,30 @@ const NewsEditor = props => {
}, []); }, []);
return ( return (
<div> <div className='panel'>
<h2 className='centered'>News Editor</h2> <h2 className='text centered'>News Editor</h2>
<div> <Select
<label htmlFor='article'>Article: </label> options={articles.map(article => { return { label: article.title, index: article.index }; })}
<Select onChange={async ({index}) => {
options={articles.map(article => { return { label: article.title, value: article.index }; })} //fetch this article
onChange={async values => { const result = await fetch(`${process.env.NEWS_URI}/news/archive/${index}`);
//fetch this article
const index = values[0].value;
const result = await fetch(`${process.env.NEWS_URI}/news/archive/${index}`, { if (!result.ok) {
headers: { const err = `${result.status}: ${await result.text()}`;
'Access-Control-Allow-Origin': '*' 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'
/>
if (!result.ok) { <form className='constrained' onSubmit={async evt => {
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);
}
}}
/>
</div>
<form onSubmit={async evt => {
//onSubmit //onSubmit
evt.preventDefault(); evt.preventDefault();
const [err] = await handleSubmit(titleRef.current.value, authorRef.current.value, bodyRef.current.value, index, authTokens.tokenFetch); const [err] = await handleSubmit(titleRef.current.value, authorRef.current.value, bodyRef.current.value, index, authTokens.tokenFetch);
@@ -78,20 +64,9 @@ const NewsEditor = props => {
alert(`Edited as article index ${index}`); alert(`Edited as article index ${index}`);
} }
}}> }}>
<div> <input type='text' name='title' placeholder='Title' ref={titleRef} />
<label htmlFor='title'>Title: </label> <input type='text' name='author' placeholder='Author' ref={authorRef} />
<input type='text' name='title' ref={titleRef} /> <textarea name='body' rows='10' cols='150' placeholder='Body of the article goes here...' ref={bodyRef} />
</div>
<div>
<label htmlFor='author'>Author: </label>
<input type='text' name='author' ref={authorRef} />
</div>
<div>
<label htmlFor='body'>Body: </label>
<textarea name='body' rows='10' cols='150' ref={bodyRef} />
</div>
<button type='submit'>Update</button> <button type='submit'>Update</button>
<button type='button' onClick={async evt => { <button type='button' onClick={async evt => {
@@ -122,8 +97,7 @@ const handleSubmit = async (title, author, body, index, tokenFetch) => {
const result = await tokenFetch(`${process.env.NEWS_URI}/news/${index}`, { const result = await tokenFetch(`${process.env.NEWS_URI}/news/${index}`, {
method: 'PATCH', method: 'PATCH',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json'
'Access-Control-Allow-Origin': '*'
}, },
body: JSON.stringify({ body: JSON.stringify({
title, title,
@@ -1,6 +1,6 @@
import React, { useContext, useRef } from 'react'; import React, { useContext, useRef } from 'react';
import { TokenContext } from '../utilities/token-provider'; import { TokenContext } from '../../utilities/token-provider';
const NewsPublisher = props => { const NewsPublisher = props => {
//context //context
@@ -12,33 +12,22 @@ const NewsPublisher = props => {
const bodyRef = useRef(); const bodyRef = useRef();
return ( return (
<div> <div className='panel'>
<h2 className='centered'>News Publisher</h2> <h2 className='text centered'>News Publisher</h2>
<form onSubmit={async evt => { <form className='constrained' onSubmit={async evt => {
//on submit //on submit
evt.preventDefault(); evt.preventDefault();
const [err, index] = await handleSubmit(titleRef.current.value, authorRef.current.value, bodyRef.current.value, authTokens.tokenFetch); const [err, index] = await handleSubmit(titleRef.current.value, authorRef.current.value, bodyRef.current.value, authTokens.tokenFetch);
if (err) { if (err) {
alert(err); alert(err);
} else { } else {
titleRef.current.value = authorRef.current.value = bodyRef.current.value = ''; titleRef.current.value = authorRef.current.value = bodyRef.current.value = ''; //TODO: null bug here?
alert(`Published as article index ${index}`); alert(`Published as article index ${index}`);
} }
}}> }}>
<div> <input type='text' name='title' placeholder='Title' ref={titleRef} />
<label htmlFor='title'>Title: </label> <input type='text' name='author' placeholder='Author' ref={authorRef} />
<input type='text' name='title' ref={titleRef} /> <textarea name='body' rows='10' cols='150' placeholder='Body of the article goes here...' ref={bodyRef} />
</div>
<div>
<label htmlFor='author'>Author: </label>
<input type='text' name='author' ref={authorRef} />
</div>
<div>
<label htmlFor='body'>Body: </label>
<textarea name='body' rows='10' cols='150' ref={bodyRef} />
</div>
<button type='submit'>Publish</button> <button type='submit'>Publish</button>
</form> </form>
@@ -57,8 +46,7 @@ const handleSubmit = async (title, author, body, tokenFetch) => {
{ {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json'
'Access-Control-Allow-Origin': '*'
}, },
body: JSON.stringify({ body: JSON.stringify({
title, title,
+60
View File
@@ -0,0 +1,60 @@
//react
import React, { useContext, Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { TokenContext } from './utilities/token-provider';
//styling
import '../styles/styles.css';
//common components
import Footer from './panels/footer';
import PopupChat from './panels/popup-chat';
//lazy wrappers
const Homepage = lazy(() => import('./homepage'));
const Signup = lazy(() => import('./accounts/signup'));
const Login = lazy(() => import('./accounts/login'));
const Account = lazy(() => import('./accounts/account'));
const Dashboard = lazy(() => import('./dashboard'));
const Recover = lazy(() => import('./accounts/recover'));
const Reset = lazy(() => import('./accounts/reset'));
const Admin = lazy(() => import('./administration/admin'));
const Mod = lazy(() => import('./administration/mod'));
const PrivacyPolicy = lazy(() => import('./static/privacy-policy'));
const Credits = lazy(() => import('./static/credits'));
const NotFound = lazy(() => import('./not-found'));
const App = props => {
const authTokens = useContext(TokenContext);
//default render
return (
<BrowserRouter>
<Suspense>
<Routes>
<Route exact path='/' element={<Homepage />} />
<Route path='/signup' element={<Signup />} />
<Route path='/login' element={<Login />} />
<Route path='/account' element={<Account />} />
<Route path='/dashboard' element={<Dashboard />} />
<Route path='/recover' element={<Recover />} />
<Route path='/reset' element={<Reset />} />
<Route path='/admin' element={<Admin />} />
<Route path='/mod' element={<Mod />} />
<Route path='/privacypolicy' element={<PrivacyPolicy />} />
<Route path='/credits' element={<Credits />} />
<Route path='*' element={<NotFound />} />
</Routes>
</Suspense>
{ authTokens.accessToken ? <PopupChat /> : <></> }
<Footer />
</BrowserRouter>
);
};
export default App;
+34
View File
@@ -0,0 +1,34 @@
import React, { useContext } from 'react';
import { Link, Navigate } from 'react-router-dom';
import ApplyToBody from './utilities/apply-to-body';
import { TokenContext } from './utilities/token-provider';
import Logout from './accounts/panels/logout';
const Dashboard = props => {
//context
const authTokens = useContext(TokenContext);
//misplaced?
if (!authTokens.accessToken) {
return <Navigate 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;
+45
View File
@@ -0,0 +1,45 @@
import React, { useContext } from 'react';
import { Link, Navigate } from 'react-router-dom';
import ApplyToBody from './utilities/apply-to-body';
import { TokenContext } from './utilities/token-provider';
import NewsFeed from './panels/news-feed';
const HomePage = props => {
//context
const authTokens = useContext(TokenContext);
//misplaced?
if (authTokens.accessToken) {
return <Navigate 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;
+21
View File
@@ -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;
+21
View File
@@ -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-2022<Break /><Link to='/privacypolicy'>Privacy Policy</Link><Break /><Link to='/credits'>Credits</Link></p>
</footer>
);
};
export default Footer;
@@ -8,11 +8,6 @@ const NewsFeed = props => {
useEffect(() => { useEffect(() => {
//this... um... //this... um...
fetch(`${process.env.NEWS_URI}/news`, { fetch(`${process.env.NEWS_URI}/news`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
},
signal: aborter.current.signal //oh dear signal: aborter.current.signal //oh dear
}) })
.then(blob => blob.json()) .then(blob => blob.json())
@@ -24,19 +19,21 @@ const NewsFeed = props => {
}, []); }, []);
return ( return (
<div> <div className='panel'>
<h1 className='centered'>News Feed</h1> <h1 className='text centered'>News Feed</h1>
{articles.map((article, index) => { {articles.map((article, index) => {
return ( return (
<div key={index}> <div key={index} className='panel'>
<hr /> <hr />
<h2>{article.title}</h2> <h2>{article.title}</h2>
<p>Written by <strong>{article.author}</strong>, { <br />
<p><em>Written by <strong>{article.author}</strong>, {
article.edits > 0 ? article.edits > 0 ?
<span>Last Updated {dateFormat(article.updatedAt, 'fullDate')} ({`${article.edits} edit${article.edits > 1 ? 's': ''}`})</span> : <span>Last Updated {dateFormat(article.updatedAt, 'fullDate')} ({`${article.edits} edit${article.edits > 1 ? 's': ''}`})</span> :
<span>Published {dateFormat(article.createdAt, 'fullDate')}</span> <span>Published {dateFormat(article.createdAt, 'fullDate')}</span>
}</p> }</em></p>
<p style={{whiteSpace: 'pre-wrap'}}>{article.body}</p> <br />
<div dangerouslySetInnerHTML={{ __html: article.rendered }} />
</div> </div>
); );
})} })}
@@ -4,11 +4,12 @@ import { io } from 'socket.io-client';
import '../../styles/popup-chat.css'; 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 socket = io(`${process.env.CHAT_URI}/chat`);
const PopupChat = props => { const PopupChat = props => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [chatlog, setChatlog] = useState([]); const [chatlog, setChatlog] = useState([{ emphasis: true, text: 'If chat doesn\'t load, reload the page' }]);
const inputRef = useRef(); const inputRef = useRef();
const sendRef = useRef(); const sendRef = useRef();
@@ -77,7 +78,7 @@ const handleSend = (inputRef, pushChatlog, username, accessToken) => {
}); });
if (!inputRef.current.value.startsWith('/')) { 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 = ''; inputRef.current.value = '';
@@ -85,7 +86,36 @@ const handleSend = (inputRef, pushChatlog, username, accessToken) => {
//render each line //render each line
const processLine = (line, index, accessToken) => { 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 //decorators
if (line.emphasis) { if (line.emphasis) {
@@ -96,7 +126,8 @@ const processLine = (line, index, accessToken) => {
content = <strong>{content}</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>;
return <li key={index} className='line table noCollapse'>{content}<a className='report' onClick={() => processReport(line, accessToken)}>!!!</a></li>;
}; };
const processReport = (line, accessToken) => { const processReport = (line, accessToken) => {
+18
View File
@@ -0,0 +1,18 @@
import React from 'react';
import { Link } from 'react-router-dom';
const Static = props => {
return (
<div className='page central'>
<header>
<h1 className='text centered'>Credits</h1>
</header>
<h2 className='text centered'>MERN-template</h2>
<p>The <a href='https://github.com/krgamestudios/MERN-template'>MERN-template</a> developed by Kayne Ruse, KR Game Studios</p>
<Link className='text centered' to='/'>Return Home</Link>
</div>
);
};
export default Static;
+16
View File
@@ -0,0 +1,16 @@
import React from 'react';
import { Link } from 'react-router-dom';
const Static = props => {
return (
<div className='page central'>
<header>
<h1 className="text centered">Privacy Policy</h1>
<Link className='text centered' to='/'>Return Home</Link>
</header>
</div>
);
};
export default Static;
+19
View File
@@ -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;
@@ -3,20 +3,21 @@ import decode from 'jwt-decode';
export const TokenContext = createContext(); export const TokenContext = createContext();
const TokenProvider = props => { //DOCS: tokenFetch() and tokenCallback() are actually closures here
const [accessToken, setAccessToken] = useState('');
const [refreshToken, setRefreshToken] = useState('');
//make the access and refresh tokens persist between reloads const TokenProvider = props => {
//state to be used
const [accessToken, setAccessToken] = useState('');
//make the access token persist between reloads
useEffect(() => { useEffect(() => {
setAccessToken(localStorage.getItem("accessToken") || ''); setAccessToken(localStorage.getItem("accessToken") || '');
setRefreshToken(localStorage.getItem("refreshToken") || '');
}, []); }, []);
//update the stored copies
useEffect(() => { useEffect(() => {
localStorage.setItem("accessToken", accessToken); localStorage.setItem("accessToken", accessToken);
localStorage.setItem("refreshToken", refreshToken); }, [accessToken]);
}, [accessToken, refreshToken]);
//wrap the default fetch function //wrap the default fetch function
const tokenFetch = async (url, options) => { const tokenFetch = async (url, options) => {
@@ -27,16 +28,21 @@ const TokenProvider = props => {
const expired = new Date(decode(accessToken).exp * 1000) < Date.now(); const expired = new Date(decode(accessToken).exp * 1000) < Date.now();
if (expired) { if (expired) {
//ping the auth server for a new token //BUGFIX: if logging out, just skip over the refresh token
if (url === `${process.env.AUTH_URI}/auth/logout`) {
return fetch(url, {
method: 'DELETE',
headers: {
'Authorization': `Bearer ${bearer}`
},
credentials: 'include'
});
}
//ping the auth server for a new access token
const response = await fetch(`${process.env.AUTH_URI}/auth/token`, { const response = await fetch(`${process.env.AUTH_URI}/auth/token`, {
method: 'POST', method: 'POST',
headers: { credentials: 'include'
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
},
body: JSON.stringify({
token: refreshToken
})
}); });
//any errors, throw them //any errors, throw them
@@ -48,23 +54,7 @@ const TokenProvider = props => {
const newAuth = await response.json(); const newAuth = await response.json();
setAccessToken(newAuth.accessToken); setAccessToken(newAuth.accessToken);
setRefreshToken(newAuth.refreshToken);
bearer = newAuth.accessToken; bearer = newAuth.accessToken;
//BUGFIX: logging out correctly requires the new refresh token
if (url == `${process.env.AUTH_URI}/auth/logout`) {
return fetch(`${process.env.AUTH_URI}/auth/logout`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Authorization': `Bearer ${bearer}`
},
body: JSON.stringify({
token: newAuth.refreshToken
})
});
}
} }
//finally, delegate to fetch //finally, delegate to fetch
@@ -73,7 +63,8 @@ const TokenProvider = props => {
headers: { headers: {
...(options || { headers: {} }).headers, ...(options || { headers: {} }).headers,
'Authorization': `Bearer ${bearer}` 'Authorization': `Bearer ${bearer}`
} },
credentials: 'include'
}); });
}; };
@@ -86,13 +77,7 @@ const TokenProvider = props => {
//ping the auth server for a new token //ping the auth server for a new token
const response = await fetch(`${process.env.AUTH_URI}/auth/token`, { const response = await fetch(`${process.env.AUTH_URI}/auth/token`, {
method: 'POST', method: 'POST',
headers: { credentials: 'include'
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
},
body: JSON.stringify({
token: refreshToken
})
}); });
//any errors, throw them //any errors, throw them
@@ -104,7 +89,6 @@ const TokenProvider = props => {
const newAuth = await response.json(); const newAuth = await response.json();
setAccessToken(newAuth.accessToken); setAccessToken(newAuth.accessToken);
setRefreshToken(newAuth.refreshToken);
//finally //finally
return cb(newAuth.accessToken); return cb(newAuth.accessToken);
@@ -114,7 +98,7 @@ const TokenProvider = props => {
}; };
return ( return (
<TokenContext.Provider value={{ accessToken, refreshToken, setAccessToken, setRefreshToken, tokenFetch, tokenCallback, getPayload: () => decode(accessToken) }}> <TokenContext.Provider value={{ accessToken, setAccessToken, tokenFetch, tokenCallback, getPayload: () => decode(accessToken) }}>
{props.children} {props.children}
</TokenContext.Provider> </TokenContext.Provider>
) )
+51 -18
View File
@@ -1,6 +1,14 @@
/* clear from the rest of the CSS files */
.chat button, .chat input {
border-radius: unset !important;
font-size: unset !important;
margin: unset !important;
}
.chat { .chat {
position: fixed; position: fixed;
bottom: 23px; bottom: 3.6em; /* Allow space for the footer */
right: 28px; right: 28px;
width: 280px; width: 280px;
border: solid; border: solid;
@@ -8,71 +16,86 @@
border-width: 2px; border-width: 2px;
background-color: #CCC; background-color: #CCC;
display: inline-block; display: inline-block;
max-height: calc(50vh - 23px);
} }
.chat > button.open { .chat button.open {
color: white; color: white;
background-color: grey; background-color: grey;
} }
.chat > button.send { .chat button.send {
color: white; color: white;
background-color: green; background-color: green;
border-style: solid;
border-width: 2px;
border-color: darkslategray;
} }
.chat > button.close { .chat button.close {
color: black; color: black;
background-color: red; background-color: red;
border-color: maroon;
border-width: 2px;
} }
.chat > button { .chat button {
width: 100%; width: 100%;
height: 2em; height: 2em;
opacity: 0.8; opacity: 0.8;
border: unset;
} }
.chat > button:hover { .chat button:hover {
opacity: 1; opacity: 1;
} }
.chat > .input { .chat .input {
width: calc(100% - 10px); width: 100%;
height: 2em; height: 2em;
} }
.chat > .log { .chat .log {
min-height: 300px; min-height: 280px;
} }
.chat > .log > .scrollable > .line { .chat .line {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} }
.chat > .log > .scrollable > .line > .report { .chat .report {
color: red; color: red;
display: none; display: none;
} }
.chat > .log > .scrollable > .line:hover { .chat .line:hover {
background-color: #BBB; background-color: #BBB;
} }
.chat > .log > .scrollable > .line:hover > .report { .chat .line:hover .report {
display: flex; display: flex;
} }
.chat > .log > .scrollable > .line > .content > .username { .chat .timestamp {
max-width: 44px;
}
.chat .inner {
flex: 1 !important;
display: inline-block !important;
flex-direction: row !important;
}
.chat .username {
font-weight: bold; font-weight: bold;
} }
.chat > .log > .scrollable { .chat .scrollable {
margin: 0; margin: 0;
padding: 10px; padding: 10px;
min-height: 280px; min-height: 280px;
max-height: calc(50vh - 23px - 20px - 6em); max-height: 180px;
overflow-x: wrap; overflow-x: wrap;
overflow-y: scroll; overflow-y: scroll;
} }
@@ -80,3 +103,13 @@
.chat ul { .chat ul {
list-style: none; list-style: none;
} }
@media screen and (max-width: 768px) {
.chat {
position: unset;
bottom: unset;
right: unset;
width: calc(100% + 20px);
margin-left: -10px;
}
}
+323
View File
@@ -0,0 +1,323 @@
/* global defaults */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body, #root {
font: 12pt Helvetica, Arial;
min-width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
background-color: #fefefe;
color: #010101;
}
h1 {
font-size: 40pt;
font-weight: bold;
}
h2 {
font-size: 24pt;
font-weight: bold;
}
h3 {
font-size: 16pt;
font-weight: bold;
}
ul {
list-style-type: disc;
list-style-position: inside;
padding-bottom: .5em;
}
p {
margin-bottom: 0 !important;
padding-bottom: 1em;
}
pre {
padding: 5px;
margin-bottom: 1em;
background-color: lightgray;
overflow-x: scroll;
}
a {
color: blue;
text-decoration: none;
}
blockquote {
padding-top: 0.5em;
padding-left: 1em;
margin-bottom: 1em;
border-left: 3px solid #ccc;
}
.text.left {
text-align: left;
}
.text.centered {
text-align: center;
}
.text.right {
text-align: right;
}
.centered {
justify-content: center;
}
.middle {
align-items: center;
}
/* header */
header {
flex: 0 1 auto;
margin-top: 1em;
margin-bottom: 1em;
justify-self: flex-start;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* footer */
footer {
padding-top: 0.5em;
flex: 0 1 auto;
justify-self: flex-end;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
/* central display */
.central {
padding: 0 10px;
margin: 0 20%;
min-height: calc(100vh - 3.6em);
}
@media screen and (max-width: 768px) {
.central {
margin: 0;
}
}
/* components */
.page {
flex: 1 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.page.centered {
justify-content: center;
}
.page.middle {
align-items: center;
}
.panel {
flex: 0 1 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-bottom: 1em;
}
.panel.centered {
justify-content: center;
}
.panel.middle {
align-items: middle;
}
button:disabled {
opacity: 0.5;
}
input, button {
text-indent: 0.3em;
border-radius: 0.2em;
font-size: 1.8em;
margin: 0.2em;
padding: 0.2em 0;
}
textarea {
margin-left: 0.5em;
margin-right: -0.4em;
max-height: none !important;
resize: vertical;
overflow: auto;
}
/* "constrained" means reusable input area */
.constrained {
flex: 0 1 auto;
align-self: center;
max-width: 480px;
display: flex;
flex-direction: column;
margin-bottom: 1em;
}
.constrained > * {
flex: 1 0 auto;
max-height: 2em;
display: flex;
flex-direction: row;
}
.constrained button, button.constrained {
display: inline-block;
}
.constrained label {
font-size: 1.8em;
text-indent: 0.4em;
}
@media screen and (max-width: 480px) {
.constrained {
max-width: 100vw;
}
}
/* flexbox tables */
.table {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.table .row {
flex: 1;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
@media screen and (max-width: 480px) {
.table .row {
flex-direction: column;
}
}
@media screen and (max-width: 768px) {
.table .row.tabletCollapse {
flex-direction: column;
}
}
.table .row .col {
flex: 1 1 1%;
display: flex;
flex-direction: column;
min-width: 0;
}
.table .row .col.double {
flex: 2 1 2%;
}
.table .row .col.half {
flex: 0.5 1 0.5%;
}
@media screen and (max-width: 480px) {
.table .row .col.double {
flex: 2 1 2.5%;
}
}
.table.noCollapse .row, .table .row.noCollapse {
flex-direction: row;
}
/* mobile control */
.mobile.show {
display: none;
}
@media screen and (max-width: 480px) {
.mobile.centered {
text-align: initial;
}
.mobile.show {
display: inline-block;
}
.mobile.hide {
display: none;
}
.mobile.centered {
text-align: center;
}
/* hybrid of table and mobile control */
.mobile.hide.col {
display: none;
}
.mobile.col.half {
flex: 0.5;
}
}
/* tablet control */
.tablet.show {
display: none;
}
@media screen and (max-width: 768px) {
.tablet.centered {
text-align: initial;
}
.tablet.show {
display: inline-block;
}
.tablet.hide {
display: none;
}
.tablet.centered {
text-align: center;
}
/* hybrid of table and tablet control */
.tablet.hide.col {
display: none;
}
.tablet.col.half {
flex: 0.5;
}
}
+1 -1
View File
@@ -22,6 +22,6 @@
<meta property="og:description" content="" /> <meta property="og:description" content="" />
</head> </head>
<body> <body>
<div id = "root"></div> <div id="root"></div>
</body> </body>
</html> </html>
+32 -14
View File
@@ -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 //project configuration
const projectName = await question('Project Name', 'template'); const projectName = await question('Project Name', 'template');
const projectWebAddress = await question('Project Web Address', 'example.com'); const projectWebAddress = await question('Project Web Address', 'example.com');
@@ -57,13 +65,15 @@ See https://github.com/krgamestudios/MERN-template/wiki for help.
const newsName = await question('News Name', 'news'); const newsName = await question('News Name', 'news');
const newsWebAddress = await question('News Web Address', `${newsName}.${projectWebAddress}`); const newsWebAddress = await question('News Web Address', `${newsName}.${projectWebAddress}`);
const newsDBUser = await question('News DB Username', newsName); 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 //auth configuration
const authName = await question('Auth Name', 'auth'); const authName = await question('Auth Name', 'auth');
const authWebAddress = await question('Auth Web Address', `${authName}.${projectWebAddress}`); const authWebAddress = await question('Auth Web Address', `${authName}.${projectWebAddress}`);
const authPostValidationHookArray = await question('Auth Post Validation Hook Array', '');
const authResetAddress = await question('Auth Reset Addr', `${projectWebAddress}/reset`);
const authDBUser = await question('Auth DB Username', authName); 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 emailSMTP = await question('Email SMTP', 'smtp.example.com');
const emailUser = await question('Email Address', 'foobar@example.com'); const emailUser = await question('Email Address', 'foobar@example.com');
@@ -179,6 +189,8 @@ services:
environment: environment:
- WEB_PROTOCOL=https - WEB_PROTOCOL=https
- WEB_ADDRESS=${authWebAddress} - WEB_ADDRESS=${authWebAddress}
- HOOK_POST_VALIDATION_ARRAY=${authPostValidationHookArray}
- WEB_RESET_ADDRESS=${authResetAddress}
- WEB_PORT=${authPort} - WEB_PORT=${authPort}
- DB_HOSTNAME=database - DB_HOSTNAME=database
- DB_DATABASE=${authName} - DB_DATABASE=${authName}
@@ -243,11 +255,14 @@ services:
- --api.insecure=false - --api.insecure=false
- --providers.docker=true - --providers.docker=true
- --providers.docker.exposedbydefault=false - --providers.docker.exposedbydefault=false
- --entrypoints.web.address=:80
- --entrypoints.web.http.redirections.entryPoint.to=websecure
- --entrypoints.web.http.redirections.entryPoint.scheme=https
- --entrypoints.web.http.redirections.entrypoint.permanent=true
- --entrypoints.websecure.address=:443 - --entrypoints.websecure.address=:443
- --certificatesresolvers.myresolver.acme.tlschallenge=true - --certificatesresolvers.myresolver.acme.tlschallenge=true
- --certificatesresolvers.myresolver.acme.email=${supportEmail} - --certificatesresolvers.myresolver.acme.email=${supportEmail}
- --certificatesresolvers.myresolver.acme.storage=/letsencrypt/acme.json - --certificatesresolvers.myresolver.acme.storage=/letsencrypt/acme.json
- traefik.docker.network=app-network
ports: ports:
- 80:80 - 80:80
- 443:443 - 443:443
@@ -263,36 +278,39 @@ networks:
`; `;
const dockerfile = ` const dockerfile = `
FROM node:15 FROM node:18
WORKDIR "/app" WORKDIR "/app"
COPY package*.json ./
RUN npm install
COPY . /app COPY . /app
RUN mkdir /app/public
RUN chown node:node /app/public
RUN npm install --production
EXPOSE ${projectPort} EXPOSE ${projectPort}
USER node
ENTRYPOINT ["bash", "-c"] ENTRYPOINT ["bash", "-c"]
CMD ["sleep 10 && npm start"] CMD ["sleep 10 && npm start"]
`; `;
const sqlfile = ` const sqlfile = `
CREATE DATABASE IF NOT EXISTS ${projectName}; 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 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 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 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; FLUSH PRIVILEGES;
`; `;
fs.writeFileSync('docker-compose.yml', ymlfile); fs.writeFileSync('docker-compose.yml', ymlfile);
fs.writeFileSync('Dockerfile', dockerfile); fs.writeFileSync('Dockerfile', dockerfile);
fs.writeFileSync('startup.sql', sqlfile); fs.writeFileSync('startup.sql', sqlfile);
+2552 -14959
View File
File diff suppressed because it is too large Load Diff
+36 -36
View File
@@ -1,6 +1,6 @@
{ {
"name": "mern-template", "name": "mern-template",
"version": "1.0.2", "version": "1.3.3",
"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": {
@@ -8,10 +8,13 @@
"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:dev:server npm:dev:client",
"watch:server": "nodemon ./* --ext js,jsx,json --ignore 'node_modules/*'", "dev:server": "nodemon --ext js,jsx,json --ignore 'node_modules/*'",
"watch:client": "webpack serve --env=development --config webpack.config.js", "dev:client": "webpack serve --env=development --config webpack.config.js",
"analyzer": "webpack --env=production --analyzer --config webpack.config.js" "local": "concurrently npm:local:server npm:local:client",
"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"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@@ -24,38 +27,35 @@
}, },
"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.20.2",
"@babel/preset-env": ">=7.12.11", "@babel/preset-env": "^7.20.2",
"@babel/preset-react": ">=7.12.10", "@babel/preset-react": "^7.18.6",
"@loadable/component": ">=5.14.1", "babel-loader": "^8.3.0",
"babel-loader": ">=8.2.2", "clean-webpack-plugin": "^4.0.0",
"clean-webpack-plugin": ">=3.0.0", "compression-webpack-plugin": "^10.0.0",
"concurrently": ">=5.3.0", "concurrently": "^7.5.0",
"css-loader": ">=5.1.3", "css-loader": "^6.7.1",
"dateformat": ">=4.5.1", "dateformat": "^5.0.3",
"dotenv": ">=8.2.0", "dotenv": "^16.0.3",
"express": ">=4.17.1", "express": "^4.18.2",
"html-webpack-plugin": ">=5.0.0-alpha.14", "html-webpack-plugin": "^5.5.0",
"jwt-decode": ">=3.1.2", "jwt-decode": "^3.1.2",
"mariadb": ">=2.5.2", "mariadb": "^3.0.2",
"raw-loader": ">=4.0.2", "query-string": "^7.1.1",
"react": ">=17.0.1", "react": "^18.2.0",
"react-dom": ">=17.0.1", "react-dom": "^18.2.0",
"react-dropdown-select": ">=4.7.4", "react-router": "^6.3.0",
"react-markdown": ">=5.0.3", "react-router-dom": "^6.4.3",
"react-router": ">=5.2.0", "react-select": "^5.6.0",
"react-router-dom": ">=5.2.0", "sequelize": "^6.25.5",
"rehype-raw": "^5.1.0", "socket.io-client": "^4.5.3",
"sequelize": ">=6.4.0", "style-loader": "^3.3.1",
"socket.io-client": ">=4.0.0", "webpack": "^5.75.0",
"style-loader": ">=2.0.0", "webpack-bundle-analyzer": "^4.7.0",
"universal-cookie": ">=4.0.4", "webpack-cli": "^4.10.0"
"webpack": ">=5.15.0",
"webpack-cli": ">=4.3.1"
}, },
"devDependencies": { "devDependencies": {
"nodemon": ">=2.0.7", "nodemon": "^2.0.20",
"webpack-bundle-analyzer": ">=4.3.0", "webpack-dev-server": "^4.11.1"
"webpack-dev-server": ">=1.16.5"
} }
} }
+16 -2
View File
@@ -8,10 +8,24 @@ const path = require('path');
const express = require('express'); const express = require('express');
const app = express(); const app = express();
const server = require('http').Server(app); const server = require('http').Server(app);
const bodyParser = require('body-parser');
//config //config
app.use(bodyParser.json()); app.use(express.json());
//handle compressed files (middleware)
app.get('*.js', (req, res, next) => {
req.url = req.url + '.gz';
res.set('Content-Encoding', 'gzip');
res.set('Content-Type', 'text/javascript');
next();
});
app.get('*.css', (req, res, next) => {
req.url = req.url + '.gz';
res.set('Content-Encoding', 'gzip');
res.set('Content-Type', 'text/css');
next();
});
//database connection //database connection
const database = require('./database'); const database = require('./database');
+105 -116
View File
@@ -1,116 +1,105 @@
//plugins //plugins
const { DefinePlugin } = require('webpack'); const { DefinePlugin } = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const CompressionPlugin = require('compression-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
//libraries
const path = require('path'); //libraries
const path = require('path');
//the exported config function
module.exports = ({ production, analyzer }) => { //the exported config function
module.exports = ({ production, development, local, analyze }) => {
return { return {
mode: production ? "production" : "development", mode: production ? "production" : "development",
entry: path.resolve(__dirname, 'client', 'client.jsx'), entry: path.resolve(__dirname, 'client', 'client.jsx'),
output: { output: {
path: path.resolve(__dirname, 'public'), path: path.resolve(__dirname, 'public'),
filename: '[name].[chunkhash].js', publicPath: '/',
sourceMapFilename: '[name].[chunkhash].js.map' filename: '[name].[chunkhash].js',
}, sourceMapFilename: '[name].[chunkhash].js.map'
devtool: production ? 'source-map' : 'eval-source-map', },
resolve: { devtool: production ? false : 'eval-source-map',
extensions: ['.js', '.jsx'] resolve: {
}, extensions: ['.js', '.jsx']
module: { },
rules: [ module: {
{ rules: [
test: /\.(js|jsx)$/, {
exclude: /(node_modules)/, test: /\.(js|jsx)$/,
use: [ exclude: /(node_modules)/,
{ use: [
loader: 'babel-loader', {
options: { loader: 'babel-loader',
presets: ['@babel/preset-env', '@babel/preset-react'], options: {
plugins: ['@babel/plugin-syntax-dynamic-import'] presets: ['@babel/preset-env', '@babel/preset-react'],
} plugins: ['@babel/plugin-syntax-dynamic-import']
} }
] }
}, ]
{ },
test: /\.(css)$/, {
use: ['style-loader', 'css-loader'] test: /\.(css)$/,
}, use: ['style-loader', 'css-loader']
{ },
test: /\.(md)$/, ]
use: [ },
{ plugins: [
loader: 'raw-loader' new DefinePlugin({
}, 'process.env': {
], 'PRODUCTION': production,
}, 'NEWS_URI': production ? `"${process.env.NEWS_URI}"` : development ? '"https://dev-news.krgamestudios.com"' : '"http://localhost:3100"',
] 'AUTH_URI': production ? `"${process.env.AUTH_URI}"` : development ? '"https://dev-auth.krgamestudios.com"' : '"http://localhost:3200"',
}, 'CHAT_URI': production ? `"${process.env.CHAT_URI}"` : development ? '"https://dev-chat.krgamestudios.com"' : '"http://localhost:3300"',
plugins: [ }
new DefinePlugin({ }),
'process.env': { new CleanWebpackPlugin({
'PRODUCTION': production, cleanOnceBeforeBuildPatterns: ['*', '!content*']
'NEWS_URI': production ? `"${process.env.NEWS_URI}"` : '"https://dev-news.krgamestudios.com"', }),
'AUTH_URI': production ? `"${process.env.AUTH_URI}"` : '"https://dev-auth.krgamestudios.com"', new HtmlWebpackPlugin({
'CHAT_URI': production ? `"${process.env.CHAT_URI}"` : '"https://dev-chat.krgamestudios.com"', template: './client/template.html',
} minify: {
}), collapseWhitespace: production,
new CleanWebpackPlugin({ removeComments: production,
cleanOnceBeforeBuildPatterns: ['*', '!content*'] removeAttributeQuotes: production
}), }
new HtmlWebpackPlugin({ }),
template: './client/template.html', new CompressionPlugin({
minify: { filename: "[path][base].gz[query]",
collapseWhitespace: production, algorithm: "gzip",
removeComments: production, test: /\.js$|\.css$/,
removeAttributeQuotes: production minRatio: 0.8
} }),
}), new BundleAnalyzerPlugin({
new BundleAnalyzerPlugin({ analyzerMode: analyze ? 'server' : 'disabled'
analyzerMode: analyzer ? 'server' : 'disabled' })
}) ],
], devServer: {
devServer: { hot: true,
contentBase: path.resolve(__dirname, 'public'), host: 'localhost',
compress: true, port: 3001,
port: 3001, client: {
proxy: { overlay: {
'/api/': 'http://localhost:3000/' errors: true,
}, warnings: true,
overlay: { },
errors: true },
},
stats: { watchFiles: {
colors: true, options: {
hash: false, ignored: ['node_modules/**']
version: false, }
timings: false, },
assets: false,
chunks: false, proxy: {
modules: false, '/api': {
reasons: false, target: 'http://localhost:3000'
children: false, }
source: false, },
errors: true,
errorDetails: false, static: '/public',
warnings: true,
publicPath: false historyApiFallback: true
}, }
host: '0.0.0.0', }
disableHostCheck: true, };
clientLogLevel: 'silent',
historyApiFallback: true,
hot: true,
injectHot: true
},
watchOptions: {
ignored: /(node_modules)/
}
}
};