Revert "renamed client to src"

This reverts commit c28736bd01.

client/admin/admin.jsx

@@ -0,0 +1,52 @@
+import './admin.less';
+import React, { useEffect, useState } from 'react';
+import BrewUtils from './brewUtils/brewUtils.jsx';
+import NotificationUtils from './notificationUtils/notificationUtils.jsx';
+import AuthorUtils from './authorUtils/authorUtils.jsx';
+import LockTools  from './lockTools/lockTools.jsx';
+
+const tabGroups = ['brew', 'notifications', 'authors', 'locks'];
+
+const ADMIN_TAB = 'HB_adminPage_currentTab';
+
+const Admin = ()=>{
+	const [currentTab, setCurrentTab] = useState('');
+
+	useEffect(()=>{
+		setCurrentTab(localStorage.getItem(ADMIN_TAB) || 'brew');
+	}, []);
+
+	useEffect(()=>{
+		localStorage.setItem(ADMIN_TAB, currentTab);
+	}, [currentTab]);
+
+	return (
+		<div className='admin'>
+			<header>
+				<div className='container'>
+					<i className='fas fa-rocket' />
+					The Homebrewery Admin Page
+					<a href='/'>back to homepage</a>
+				</div>
+			</header>
+			<main className='container'>
+				<nav className='tabs'>
+					{tabGroups.map((tab, idx)=>(
+						<button
+							className={tab === currentTab ? 'active' : ''}
+							key={idx}
+							onClick={()=>setCurrentTab(tab)}>
+							{tab.toUpperCase()}
+						</button>
+					))}
+				</nav>
+				{currentTab === 'brew' && <BrewUtils />}
+				{currentTab === 'notifications' && <NotificationUtils />}
+				{currentTab === 'authors' && <AuthorUtils />}
+        		{currentTab === 'locks' && <LockTools />}
+			</main>
+		</div>
+	);
+};
+
+export default Admin;

client/admin/admin.less

@@ -0,0 +1,136 @@
+@import './shared/naturalcrit/styles/reset.less';
+@import './shared/naturalcrit/styles/elements.less';
+@import './shared/naturalcrit/styles/animations.less';
+@import './shared/naturalcrit/styles/colors.less';
+@import './shared/naturalcrit/styles/tooltip.less';
+@import './themes/fonts/iconFonts/fontAwesome.less';
+
+html,body, #reactContainer, .naturalCrit { min-height : 100%; }
+
+@sidebarWidth : 250px;
+
+body {
+	height           : 100%;
+	padding          : 0;
+	margin           : 0;
+	font-family      : 'Open Sans', sans-serif;
+	font-weight      : 100;
+	color            : #4B5055;
+	background-color : #EEEEEE;
+	text-rendering   : optimizeLegibility;
+}
+
+:where(.admin) {
+	padding-bottom : 50px;
+	header {
+		padding          : 20px 0px;
+		margin-bottom    : 30px;
+		font-size        : 2em;
+		color            : white;
+		background-color : @red;
+		i { margin-right : 30px; }
+		a { float : right; }
+	}
+
+	hr { margin : 30px 0px; }
+
+	:where(.container) {
+		input {
+			height        : 33px;
+			padding       : 0px 10px;
+			margin-bottom : 20px;
+			font-family   : monospace;
+		}
+
+		button {
+			height         : 37px;
+			vertical-align : middle;
+		}
+
+		dl {
+			display               : grid;
+			grid-template-columns : 120px 1fr;
+			row-gap               : 10px;
+			align-items           : center;
+			justify-items         : start;
+			padding-top           : 0.5em;
+			dt {
+				float       : left;
+				clear       : left;
+				height      : fit-content;
+				font-weight : 900;
+				text-align  : right;
+				&::after { content : ' : '; }
+			}
+			dd { height      : fit-content; }
+		}
+		
+		.tabs button {
+			margin-right     : 3px;
+			margin-left      : 3px;
+			color            : black;
+			background-color : #EEEEEE;
+			border           : 1px solid #444444;
+			border-radius    : 5px;
+			&:hover {
+				color            : #EEEEEE;
+				background-color : #444444;
+			}
+			&.active {
+				margin-right     : 2px;
+				margin-left      : 2px;
+				text-decoration  : underline;
+				background-color : #CCCCCC;
+				border           : 2px solid #444444;
+			}
+		}
+
+		.notificationUtils {
+			display         : flex;
+			gap             : 50px;
+			justify-content : space-between;
+		}
+	}
+
+	table {
+		padding    : 10px;
+
+		tr {
+			border-bottom : 1px solid;
+			&:last-of-type { border : none; }
+			&:nth-child(even) { background : #DDDDDD; }
+		}
+
+		thead {
+			background    : rgb(193,236,230);
+			border-bottom : 2px solid;
+		}
+        
+		th, td {
+			padding        : 5px 10px;
+			vertical-align : middle;
+			text-align     : center;
+			border-right   : 1px solid;
+
+			&:last-child { border-right : none; }
+		}
+
+		th { font-weight : 900; }
+
+		td {
+			&:first-child {
+				font-weight  : 900;
+				text-align   : left;
+			}
+		}
+	}
+
+	.error {
+		float        : right;
+		padding      : 10px;
+		margin-block : 10px;
+		font-weight  : 900;
+		color        : white;
+		background   : rgb(178, 54, 54);
+	}
+}

client/admin/authorUtils/authorLookup/authorLookup.jsx

@@ -0,0 +1,87 @@
+import './authorLookup.less';
+
+import React from 'react';
+import request from 'superagent';
+
+const authorLookup = ()=>{
+	const [author, setAuthor] = React.useState('');
+	const [searching, setSearching] = React.useState(false);
+	const [results, setResults] = React.useState([]);
+
+	const lookup = async ()=>{
+		if(!author) return;
+
+		setSearching(true);
+		setResults([]);
+
+		const brews = await request.get(`/admin/user/list/${author}`);
+		setResults(brews.body);
+		setSearching(false);
+	};
+
+	const renderResults = ()=>{
+		if(results.length == 0) return <>
+			<h2>Results</h2>
+			<p>None found.</p>
+		</>;
+
+		return <>
+			<h2>{`Results - ${results.length} brews` }</h2>
+			<table className='resultsTable'>
+				<thead>
+					<tr>
+						<th>Title</th>
+						<th>Share</th>
+						<th>Edit</th>
+						<th>Last Update</th>
+						<th>Storage</th>
+					</tr>
+				</thead>
+				<tbody>
+					{results
+						.sort((a, b)=>{         // Sort brews from most recently updated
+							if(a.updatedAt > b.updatedAt) return -1;
+							return 1;
+						})
+						.map((brew, idx)=>{
+							return <tr key={idx}>
+								<td><strong>{brew.title}</strong></td>
+								<td><a href={`/share/${brew.shareId}`}>{brew.shareId}</a></td>
+								<td>{brew.editId}</td>
+								<td style={{ width: '200px' }}>{brew.updatedAt}</td>
+								<td>{brew.googleId ? 'Google' : 'Homebrewery'}</td>
+							</tr>;
+						})}
+				</tbody>
+			</table>
+		</>;
+	};
+
+	const handleKeyPress = (evt)=>{
+		if(evt.key === 'Enter') return lookup();
+	};
+
+	const handleChange = (evt)=>{
+		setAuthor(evt.target.value);
+	};
+
+	return (
+		<div className='authorLookup'>
+			<div className='authorLookupInputs'>
+				<h2>Author Lookup</h2>
+				<label className='field'>
+					Author Name:
+					<input className='fieldInput' value={author} onKeyDown={handleKeyPress} onChange={handleChange} />
+					<button onClick={lookup}>
+						<i className={`fas ${searching ? 'fa-spin fa-spinner' : 'fa-search'}`} />
+					</button>
+				</label>
+			</div>
+			<div className='authorLookupResults'>
+				{renderResults()}
+			</div>
+		</div>
+	);
+};
+
+export default authorLookup;

client/admin/authorUtils/authorLookup/authorLookup.less

@@ -0,0 +1,29 @@
+.authorLookup {
+	position       : relative;
+	display        : flex;
+	flex-direction : column;
+
+	.field {
+		display               : flex;
+		gap                   : 5px;
+		align-items           : center;
+		justify-items         : stretch;
+		width                 : 100%;
+		margin-bottom         : 20px;
+   
+	
+		input {
+			height        : 33px;
+			padding       : 0px 10px;
+			margin-bottom : unset;
+			font-family   : monospace;
+		}
+	
+		button {
+			width : 50px;
+				
+			i { margin-right : 10px; }
+		}
+	}
+
+}

client/admin/authorUtils/authorUtils.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import AuthorLookup from './authorLookup/authorLookup.jsx';
+
+const authorUtils = ()=>{
+	return (
+		<section className='authorUtils'>
+			<AuthorLookup />
+		</section>
+	);
+};
+
+export default authorUtils;

client/admin/brewUtils/brewCleanup/brewCleanup.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import createReactClass from 'create-react-class';
+import request from 'superagent';
+
+const BrewCleanup = createReactClass({
+	displayName : 'BrewCleanup',
+	getDefaultProps(){
+		return {};
+	},
+	getInitialState() {
+		return {
+			count : 0,
+
+			pending : false,
+			primed  : false,
+			err     : null
+		};
+	},
+	prime(){
+		this.setState({ pending: true });
+
+		request.get('/admin/cleanup')
+			.then((res)=>this.setState({ count: res.body.count, primed: true }))
+			.catch((err)=>this.setState({ error: err }))
+			.finally(()=>this.setState({ pending: false }));
+	},
+	cleanup(){
+		this.setState({ pending: true });
+
+		request.post('/admin/cleanup')
+			.then((res)=>this.setState({ count: res.body.count }))
+			.catch((err)=>this.setState({ error: err }))
+			.finally(()=>this.setState({ pending: false, primed: false }));
+	},
+	renderPrimed(){
+		if(!this.state.primed) return;
+
+		if(!this.state.count){
+			return <div className='result noBrews'>No Matching Brews found.</div>;
+		}
+		return <div className='result'>
+			<button onClick={this.cleanup} className='remove'>
+				{this.state.pending
+					? <i className='fas fa-spin fa-spinner' />
+					: <span><i className='fas fa-times' /> Remove</span>
+				}
+			</button>
+			<span>Found {this.state.count} Brews that could be removed. </span>
+		</div>;
+	},
+	render(){
+		return <div className='brewUtil brewCleanup'>
+			<h2> Brew Cleanup </h2>
+			<p>Removes very short brews to tidy up the database</p>
+
+			<button onClick={this.prime} className='query'>
+				{this.state.pending
+					? <i className='fas fa-spin fa-spinner' />
+					: 'Query Brews'
+				}
+			</button>
+			{this.renderPrimed()}
+
+			{this.state.error
+				&& <div className='error noBrews'>{this.state.error.toString()}</div>
+			}
+		</div>;
+	}
+});
+
+export default BrewCleanup;

client/admin/brewUtils/brewCompress/brewCompress.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import createReactClass from 'create-react-class';
+import request from 'superagent';
+
+const BrewCompress = createReactClass({
+	displayName : 'BrewCompress',
+	getDefaultProps(){
+		return {};
+	},
+	getInitialState() {
+		return {
+			count      : 0,
+			batchRange : 0,
+
+			pending : false,
+			primed  : false,
+			err     : null,
+			ids     : null
+		};
+	},
+	prime(){
+		this.setState({ pending: true });
+
+		request.get('/admin/finduncompressed')
+			.then((res)=>this.setState({ count: res.body.count, primed: true, ids: res.body.ids }))
+			.catch((err)=>this.setState({ error: err }))
+			.finally(()=>this.setState({ pending: false }));
+	},
+	cleanup(){
+		const brews = this.state.ids;
+		const compressBatches = ()=>{
+			if(brews.length == 0){
+				this.setState({ pending: false, primed: false });
+				return;
+			}
+			const batch = brews.splice(0, 1000);	// Process brews in batches of 1000
+			this.setState({ batchRange: this.state.count - brews.length });
+			batch.forEach((id, idx)=>{
+				request.put(`/admin/compress/${id}`)
+					.catch((err)=>this.setState({ error: err }));
+			});
+			setTimeout(compressBatches, 10000);		//Wait 10 seconds between batches
+		};
+
+		this.setState({ pending: true });
+
+		compressBatches();
+	},
+	renderPrimed(){
+		if(!this.state.primed) return;
+
+		if(!this.state.count){
+			return <div className='result noBrews'>No Matching Brews found.</div>;
+		}
+		return <div className='result'>
+			<button onClick={this.cleanup} className='remove'>
+				{this.state.pending
+					? <i className='fas fa-spin fa-spinner' />
+					: <span><i className='fas fa-compress' /> compress </span>
+				}
+			</button>
+			{this.state.pending
+				? <span>Compressing {this.state.batchRange} brews. </span>
+				: <span>Found {this.state.count} Brews that could be compressed. </span>
+			}
+		</div>;
+	},
+	render(){
+		return <div className='brewUtil brewCompress'>
+			<h2> Brew Compression </h2>
+			<p>Compresses the text in brews to binary</p>
+
+			<button onClick={this.prime} className='query'>
+				{this.state.pending
+					? <i className='fas fa-spin fa-spinner' />
+					: 'Query Brews'
+				}
+			</button>
+			{this.renderPrimed()}
+
+			{this.state.error
+				&& <div className='error'>{this.state.error.toString()}</div>
+			}
+		</div>;
+	}
+});
+
+export default BrewCompress;

client/admin/brewUtils/brewLookup/brewLookup.jsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import createReactClass from 'create-react-class';
+import request from 'superagent';
+import cx from 'classnames';
+
+import Moment from 'moment';
+
+const BrewLookup = createReactClass({
+	getDefaultProps() {
+		return {};
+	},
+	getInitialState() {
+		return {
+			query       : '',
+			foundBrew   : null,
+			searching   : false,
+			error       : null,
+			scriptCount : 0
+		};
+	},
+	handleChange(e){
+		this.setState({ query: e.target.value });
+	},
+	lookup(){
+		this.setState({ searching: true, error: null, scriptCount: 0 });
+
+		request.get(`/admin/lookup/${this.state.query}`)
+			.then((res)=>{
+				const foundBrew = res.body;
+				const scriptCheck = foundBrew?.text.match(/(<\/?s)cript/g);
+				this.setState({
+					foundBrew   : foundBrew,
+					scriptCount : scriptCheck?.length || 0,
+				});
+			})
+			.catch((err)=>this.setState({ error: err }))
+			.finally(()=>{
+				this.setState({
+					searching : false
+				});
+			});
+	},
+
+	async cleanScript(){
+		if(!this.state.foundBrew?.shareId) return;
+
+		await request.put(`/admin/clean/script/${this.state.foundBrew.shareId}`)
+			.catch((err)=>{ this.setState({ error: err }); return; });
+
+		this.lookup();
+	},
+
+	renderFoundBrew(){
+		const brew = this.state.foundBrew;
+		return <div className='result'>
+			<dl>
+				<dt>Title</dt>
+				<dd>{brew.title}</dd>
+
+				<dt>Authors</dt>
+				<dd>{brew.authors.join(', ')}</dd>
+
+				<dt>Edit Link</dt>
+				<dd><a href={`/edit/${brew.editId}`} target='_blank' rel='noopener noreferrer'>/edit/{brew.editId}</a></dd>
+
+				<dt>Share Link</dt>
+				<dd><a href={`/share/${brew.shareId}`} target='_blank' rel='noopener noreferrer'>/share/{brew.shareId}</a></dd>
+
+				<dt>Created Time</dt>
+				<dd>{brew.createdAt ? Moment(brew.createdAt).toLocaleString() : 'No creation date'}</dd>
+
+				<dt>Last Updated</dt>
+				<dd>{Moment(brew.updatedAt).fromNow()}</dd>
+
+				<dt>Num of Views</dt>
+				<dd>{brew.views}</dd>
+
+				<dt>SCRIPT tags detected</dt>
+				<dd>{this.state.scriptCount}</dd>
+			</dl>
+			{this.state.scriptCount > 0 &&
+				<div className='cleanButton'>
+					<button onClick={this.cleanScript}>CLEAN BREW</button>
+				</div>
+			}
+		</div>;
+	},
+
+	render(){
+		return <div className='brewUtil brewLookup'>
+			<h2>Brew Lookup</h2>
+			<input type='text' value={this.state.query} onChange={this.handleChange} placeholder='edit or share id' />
+			<button onClick={this.lookup}>
+				<i className={cx('fas', {
+					'fa-search'          : !this.state.searching,
+					'fa-spin fa-spinner' : this.state.searching,
+				})} />
+			</button>
+
+			{this.state.error
+				&& <div className='error'>{this.state.error.toString()}</div>
+			}
+
+			{this.state.foundBrew
+				? this.renderFoundBrew()
+				: <div className='result noBrew'>No brew found.</div>
+			}
+		</div>;
+	}
+});
+
+export default BrewLookup;

client/admin/brewUtils/brewUtils.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import './brewUtils.less';
+
+import BrewCleanup from './brewCleanup/brewCleanup.jsx';
+import BrewLookup from './brewLookup/brewLookup.jsx';
+import BrewCompress from './brewCompress/brewCompress.jsx';
+import Stats from './stats/stats.jsx';
+
+const BrewUtils = ()=>{
+	return (
+		<>
+			<Stats />
+			<hr />
+			<BrewLookup />
+			<hr />
+			<BrewCleanup />
+			<hr />
+			<BrewCompress />
+		</>
+	);
+};
+export default BrewUtils;

client/admin/brewUtils/brewUtils.less

@@ -0,0 +1,31 @@
+@import '../../../shared/naturalcrit/styles/colors.less';
+
+.brewUtil {
+	.result {
+		margin-top : 20px;
+		button {
+			margin-right     : 10px;
+			background-color : @red;
+		}
+	}
+	.cleanButton {
+		display : inline-block;
+		width   : 100%;
+	}
+}
+
+.stats {
+	position : relative;
+	
+	.pending {
+		position : absolute;
+		top      : 0.5em;
+		left     : 100px;
+		width    : 100%;
+		height   : 100%;
+	}
+
+	&:has(.pending) { opacity : 0.5; }
+
+	dl { grid-template-columns : 200px 250px; }
+}

client/admin/brewUtils/stats/stats.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import createReactClass from 'create-react-class';
+import request from 'superagent';
+
+const Stats = createReactClass({
+	displayName : 'Stats',
+	getDefaultProps(){
+		return {};
+	},
+	getInitialState(){
+		return {
+			stats : {
+				totalBrews          : 0,
+				totalPublishedBrews : 0
+			},
+			fetching : false
+		};
+	},
+	componentDidMount(){
+		this.fetchStats();
+	},
+	fetchStats(){
+		this.setState({ fetching: true });
+		request.get('/admin/stats')
+			.then((res)=>this.setState({ stats: res.body }))
+			.finally(()=>this.setState({ fetching: false }));
+	},
+	render(){
+		return <div className='brewUtil stats'>
+			<h2> Stats </h2>
+			<dl>
+				<dt>Total Brew Count</dt>
+				<dd>{this.state.stats.totalBrews}</dd>
+				<dt>Total Brews Published</dt>
+				<dd>{this.state.stats.totalPublishedBrews}</dd>
+			</dl>
+
+			{this.state.fetching
+				&& <div className='pending'><i className='fas fa-spin fa-spinner' /></div>
+			}
+		</div>;
+	}
+});
+
+export default Stats;

client/admin/lockTools/lockTools.jsx

@@ -0,0 +1,342 @@
+/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
+import './lockTools.less';
+import React from 'react';
+import createReactClass from 'create-react-class';
+
+import request from '../../homebrew/utils/request-middleware.js';
+
+const LockTools = createReactClass({
+	displayName     : 'LockTools',
+	getInitialState : function() {
+		return {
+			fetching    : false,
+			reviewCount : 0
+		};
+	},
+
+	componentDidMount : function() {
+		this.updateReviewCount();
+	},
+
+	updateReviewCount : async function() {
+		const newCount = await request.get('/api/lock/count')
+            .then((res)=>{return res.body?.count || 'Unknown';});
+		if(newCount != this.state.reviewCount){
+			this.setState({
+				reviewCount : newCount
+			});
+		}
+	},
+
+	updateLockData : function(lock){
+		this.setState({
+			lock : lock
+		});
+	},
+
+	render : function() {
+		return <div className='lockTools'>
+			<h2>Lock Count</h2>
+			<p>Number of brews currently locked: {this.state.reviewCount}</p>
+			<button onClick={this.updateReviewCount}>REFRESH</button>
+			<hr />
+			<LockTable title='Locked Brews' text='Total Locked Brews' resultName='lockedDocuments' fetchURL='/api/locks' propertyNames={['shareId', 'title']} loadBrew={this.updateLockData} ></LockTable>
+			<hr />
+			<LockTable title='Brews Awaiting Review' text='Total Reviews Waiting' resultName='reviewDocuments' fetchURL='/api/lock/reviews' propertyNames={['shareId', 'title']} loadBrew={this.updateLockData} ></LockTable>
+			<hr />
+			<LockBrew key={this.state.lock?.key || 0} lock={this.state.lock}></LockBrew>
+			<hr />
+			<div style={{ columns: 2 }}>
+				<LockLookup title='Unlock Brew' fetchURL='/api/unlock' updateFn={this.updateReviewCount}></LockLookup>
+				<LockLookup title='Clear Review Request' fetchURL='/api/lock/review/remove'></LockLookup>
+			</div>
+			<hr />
+		</div>;
+	}
+});
+
+const LockBrew = createReactClass({
+	displayName     : 'LockBrew',
+	getInitialState : function() {
+		// Default values
+		return {
+			brewId       : this.props.lock?.shareId || '',
+			code         : this.props.lock?.code || 455,
+			editMessage  : this.props.lock?.editMessage || '',
+			shareMessage : this.props.lock?.shareMessage || 'This Brew has been locked.',
+			result       : {},
+			overwrite    : false,
+		};
+	},
+
+	handleChange : function(e, varName) {
+		const output = {};
+		output[varName] = e.target.value;
+		this.setState(output);
+	},
+
+	submit : function(e){
+		e.preventDefault();
+		if(!this.state.editMessage) return;
+		const newLock = {
+			overwrite    : this.state.overwrite,
+			code         : parseInt(this.state.code) || 100,
+			editMessage  : this.state.editMessage,
+			shareMessage : this.state.shareMessage,
+			applied      : new Date
+		};
+
+		request.post(`/api/lock/${this.state.brewId}`)
+			.send(newLock)
+			.set('Content-Type', 'application/json')
+			.then((response)=>{
+				this.setState({ result: response.body });
+			})
+			.catch((err)=>{
+				this.setState({ result: err.response.body });
+			});
+	},
+
+	renderInput : function (name) {
+		return <input type='text' name={name} value={this.state[name]} onChange={(e)=>this.handleChange(e, name)} autoComplete='off' required/>;
+	},
+
+	renderResult : function(){
+		return <>
+			<h3>Result:</h3>
+			<table>
+				<tbody>
+					{Object.keys(this.state.result).map((key, idx)=>{
+						return <tr key={`${idx}-row`}>
+							<td key={`${idx}-key`}>{key}</td>
+							<td key={`${idx}-value`}>{this.state.result[key].toString()}
+							</td>
+						</tr>;
+					})}
+				</tbody>
+			</table>
+		</>;
+	},
+
+	render : function() {
+		return <div className='lockBrew'>
+			<div className='lockForm'>
+				<h2>Lock Brew</h2>
+				<form onSubmit={this.submit}>
+					<label>
+						ID:
+						{this.renderInput('brewId')}
+					</label>
+					<br />
+					<label>
+						Error Code:
+						{this.renderInput('code')}
+					</label>
+					<br />
+					<label>
+						Private Message:
+						{this.renderInput('editMessage')}
+					</label>
+					<br />
+					<label>
+						Public Message:
+						{this.renderInput('shareMessage')}
+					</label>
+					<br />
+					<label className='checkbox'>
+						Overwrite
+						<input name='overwrite' className='checkbox' type='checkbox' value={this.state.overwrite} onClick={()=>{return this.setState((prevState)=>{return { overwrite: !prevState.overwrite };});}} />
+					</label>
+					<label>
+						<input type='submit' />
+					</label>
+				</form>
+				{this.state.result && this.renderResult()}
+			</div>
+			<div className='lockSuggestions'>
+				<h2>Suggestions</h2>
+				<div className='lockCodes'>
+					<h3>Codes</h3>
+					<ul>
+						<li>455 - Generic Lock</li>
+						<li>456 - Copyright issues</li>
+						<li>457 - Confidential Information Leakage</li>
+						<li>458 - Sensitive Personal Information</li>
+						<li>459 - Defamation or Libel</li>
+						<li>460 - Hate Speech or Discrimination</li>
+						<li>461 - Illegal Activities</li>
+						<li>462 - Malware or Phishing</li>
+						<li>463 - Plagiarism</li>
+						<li>465 - Misrepresentation</li>
+						<li>466 - Inappropriate Content</li>
+					</ul>
+				</div>
+				<div className='lockMessages'>
+					<h3>Messages</h3>
+					<ul>
+						<li><b>Private Message:</b> This is the private message that is ONLY displayed to the authors of the locked brew. This message MUST specify exactly what actions must be taken in order to have the brew unlocked.</li>
+						<li><b>Public Message:</b> This is the public message that is displayed to the EVERYONE that attempts to view the locked brew.</li>
+					</ul>
+				</div>
+			</div>
+		</div>;
+	}
+});
+
+const LockTable = createReactClass({
+	displayName     : 'LockTable',
+	getDefaultProps : function() {
+		return {
+			title         : '',
+			text          : '',
+			fetchURL      : '/api/locks',
+			resultName    : '',
+			propertyNames : ['shareId'],
+			loadBrew      : ()=>{}
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			result    : '',
+			error     : '',
+			searching : false
+		};
+	},
+
+	lockKey : React.createRef(0),
+
+	clickFn : function (){
+		this.setState({ searching: true, error: null });
+
+		request.get(this.props.fetchURL)
+			.then((res)=>this.setState({ result: res.body }))
+			.catch((err)=>this.setState({ result: err.response.body }))
+			.finally(()=>{
+				this.setState({ searching: false });
+			});
+	},
+
+	updateBrewLockData : function (lockData){
+		this.lockKey.current++;
+		const brewData = {
+			key          : this.lockKey.current,
+			shareId      : lockData.shareId,
+			code         : lockData.lock.code,
+			editMessage  : lockData.lock.editMessage,
+			shareMessage : lockData.lock.shareMessage
+		};
+		this.props.loadBrew(brewData);
+	},
+
+	render : function () {
+		return <>
+			<div className='brewsAwaitingReview'>
+				<div className='brewBlock'>
+					<h2>{this.props.title}</h2>
+					<button onClick={this.clickFn}>
+						REFRESH
+						<i className={`fas ${!this.state.searching ? 'fa-search' : 'fa-spin fa-spinner'}`} />
+					</button>
+				</div>
+				{this.state.result[this.props.resultName] &&
+				<>
+					<p>{this.props.text}: {this.state.result[this.props.resultName].length}</p>
+					<table className='lockTable'>
+						<thead>
+							<tr>
+								{this.props.propertyNames.map((name, idx)=>{
+									return <th key={idx}>{name}</th>;
+								})}
+								<th>clip</th>
+								<th>load</th>
+							</tr>
+						</thead>
+						<tbody>
+							{this.state.result[this.props.resultName].map((result, resultIdx)=>{
+								return <tr className='row' key={`${resultIdx}-row`}>
+									{this.props.propertyNames.map((name, nameIdx)=>{
+										return <td key={`${resultIdx}-${nameIdx}`}>
+											{result[name].toString()}
+										</td>;
+									})}
+									<td className='icon' title='Copy ID to Clipboard' onClick={()=>{navigator.clipboard.writeText(result.shareId.toString());}}><i className='fa-regular fa-clipboard'></i></td>
+									<td className='icon' title='View Lock details' onClick={()=>{this.updateBrewLockData(result);}}><i className='fa-regular fa-circle-down'></i></td>
+								</tr>;
+							})}
+						</tbody>
+					</table>
+				</>
+				}
+			</div>
+		</>;
+	}
+});
+
+const LockLookup = createReactClass({
+	displayName     : 'LockLookup',
+	getDefaultProps : function() {
+		return {
+			fetchURL : '/api/lookup'
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			query     : '',
+			result    : '',
+			error     : '',
+			searching : false
+		};
+	},
+
+	handleChange(e){
+		this.setState({ query: e.target.value });
+	},
+
+	clickFn(){
+		this.setState({ searching: true, error: null });
+
+		request.put(`${this.props.fetchURL}/${this.state.query}`)
+			.then((res)=>this.setState({ result: res.body }))
+			.catch((err)=>this.setState({ result: err.response.body }))
+			.finally(()=>{
+				this.setState({ searching: false });
+			});
+	},
+
+	renderResult : function(){
+		return <div className='lockLookup'>
+			<h3>Result:</h3>
+			<table>
+				<tbody>
+					{Object.keys(this.state.result).map((key, idx)=>{
+						return <tr key={`${idx}-row`}>
+							<td key={`${idx}-key`}>{key}</td>
+							<td key={`${idx}-value`}>{this.state.result[key].toString()}
+							</td>
+						</tr>;
+					})}
+				</tbody>
+			</table>
+		</div>;
+	},
+
+	render : function() {
+		return <div className='brewLookup'>
+			<h2>{this.props.title}</h2>
+			<input type='text' value={this.state.query} onChange={this.handleChange} placeholder='share id' />
+			<button onClick={this.clickFn}>
+				<i className={`fas ${!this.state.searching ? 'fa-search' : 'fa-spin fa-spinner'}`} />
+			</button>
+
+			{this.state.error
+				&& <div className='error'>{this.state.error.toString()}</div>
+			}
+
+			{this.state.result && this.renderResult()}
+		</div>;
+	}
+});
+
+export default LockTools;

client/admin/lockTools/lockTools.less

@@ -0,0 +1,66 @@
+.lockTools {
+	.lockBrew { 
+		columns : 2;
+
+		.lockForm {
+			break-inside : avoid;
+
+			label {
+				display     : inline-block;
+				width       : 100%;
+				line-height : 2.25em;
+				text-align  : right;
+				input {
+					float       : right;
+					width       : 65%;
+					margin-left : 10px;
+				}
+				&.checkbox {
+					line-height: 1.5em;
+					input {
+						width  : 1.5em;
+						height : 1.5em;
+					}
+				}
+			}
+		}
+
+		.lockSuggestions {
+			line-height  : 1.2em;
+			break-inside : avoid;
+			columns      : 2;
+			h2 { column-span : all; }
+			h3 { margin-top : 0px; }
+			b { font-weight : 600; }
+
+			.lockCodes { break-inside : avoid; }
+		}
+	}
+
+	.lockTable {
+		cursor       : default;
+		break-inside : avoid;
+		.row:hover {
+			color            : #000000;
+			background-color : #CCCCCC;
+		}
+		.icon {
+			cursor : pointer;
+			&:hover { text-shadow : 0px 0px 6px black; }
+		}
+	}
+    
+	th, td {
+		padding    : 4px 10px;
+		text-align : center;
+	}
+	table, td { border : 1px solid #333333; }
+
+	.brewLookup {
+		min-height   : 175px;
+		break-inside : avoid;
+		h2 { margin-top : 0px; }
+	}
+
+	button i { padding-left : 5px; }
+}

client/admin/notificationUtils/notificationAdd/notificationAdd.jsx

@@ -0,0 +1,108 @@
+import './notificationAdd.less';
+import React, { useState, useRef } from 'react';
+import request from 'superagent';
+
+const NotificationAdd = ()=>{
+	const [notificationResult, setNotificationResult] = useState(null);
+	const [searching, setSearching] = useState(false);
+	const [error, setError] = useState(null);
+
+	const dismissKeyRef = useRef(null);
+	const titleRef = useRef(null);
+	const textRef = useRef(null);
+	const startAtRef = useRef(null);
+	const stopAtRef = useRef(null);
+
+	const saveNotification = async ()=>{
+		const dismissKey = dismissKeyRef.current.value;
+		const title = titleRef.current.value;
+		const text = textRef.current.value;
+		const startAt = new Date(startAtRef.current.value);
+		const stopAt = new Date(stopAtRef.current.value);
+
+		// Basic validation
+		if(!dismissKey || !title || !text || isNaN(startAt.getTime()) || isNaN(stopAt.getTime())) {
+			setError('All fields are required');
+			return;
+		}
+		if(startAt >= stopAt) {
+			setError('End date must be after the start date!');
+			return;
+		}
+
+		const data = {
+			dismissKey,
+			title,
+			text,
+			startAt : startAt?.toISOString() ?? '',
+			stopAt  : stopAt?.toISOString() ?? '',
+		};
+
+		try {
+			setSearching(true);
+			setError(null);
+			const response = await request.post('/admin/notification/add').send(data);
+			console.log(response.body);
+
+			// Reset form fields
+			dismissKeyRef.current.value = '';
+			titleRef.current.value = '';
+			textRef.current.value = '';
+
+			setNotificationResult('Notification successfully created.');
+			setSearching(false);
+		} catch (err) {
+			console.log(err.response.body.message);
+			setError(`Error saving notification: ${err.response.body.message}`);
+			setSearching(false);
+		}
+	};
+
+	return (
+		<div className='notificationAdd'>
+			<h2>Add Notification</h2>
+
+			<label className='field'>
+				Dismiss Key:
+				<input className='fieldInput' type='text' ref={dismissKeyRef} required
+					placeholder='dismiss_notif_drive'
+				/>
+			</label>
+
+			<label className='field'>
+				Title:
+				<input className='fieldInput' type='text' ref={titleRef} required
+					placeholder='Stop using Google Drive as image host'
+				/>
+			</label>
+
+			<label className='field'>
+				Text:
+				<textarea className='fieldInput' type='text' ref={textRef} required
+					placeholder='Google Drive is not an image hosting site, you should not use it as such.'
+				>
+				</textarea>
+			</label>
+
+			<label className='field'>
+				Start Date:
+				<input type='date' className='fieldInput' ref={startAtRef} required/>
+			</label>
+
+			<label className='field'>
+				End Date:
+				<input type='date' className='fieldInput' ref={stopAtRef} required/>
+			</label>
+
+			<div className='notificationResult'>{notificationResult}</div>
+
+			<button className='notificationSave' onClick={saveNotification} disabled={searching}>
+				<i className={`fas ${searching ? 'fa-spin fa-spinner' : 'fa-save'}`}/>
+				Save Notification
+			</button>
+			{error && <div className='error'>{error}</div>}
+		</div>
+	);
+};
+
+export default NotificationAdd;

client/admin/notificationUtils/notificationAdd/notificationAdd.less

@@ -0,0 +1,38 @@
+.notificationAdd {
+	position       : relative;
+	display        : flex;
+	flex-direction : column;
+	width          : 500px;
+
+	.field {
+		display               : grid;
+		grid-template-columns : 120px 200px;
+		align-items           : center;
+		justify-items         : stretch;
+		width                 : 100%;
+		margin-bottom         : 20px;
+
+		input {
+			height        : 33px;
+			padding       : 0px 10px;
+			margin-bottom : unset;
+			font-family   : monospace;
+
+			&[type='date'] { width : 14ch; }
+		}
+	
+		textarea {
+			width      : 50ch;
+			min-height : 7em;
+			max-height : 20em;
+			padding	   : 10px;
+			resize     : vertical;
+		}
+	}
+
+	button {
+		width : 200px;
+		
+		i { margin-right : 10px; }
+	}
+}

client/admin/notificationUtils/notificationLookup/notificationLookup.jsx

@@ -0,0 +1,103 @@
+import './notificationLookup.less';
+import React, { useState } from 'react';
+import request from 'superagent';
+import Moment from 'moment';
+
+const NotificationDetail = ({ notification, onDelete })=>(
+	<>
+		<dl>
+			<dt>Key</dt>
+			<dd>{notification.dismissKey}</dd>
+
+			<dt>Title</dt>
+			<dd>{notification.title || 'No Title'}</dd>
+
+			<dt>Created</dt>
+			<dd>{Moment(notification.createdAt).format('LLLL')}</dd>
+
+			<dt>Start</dt>
+			<dd>{Moment(notification.startAt).format('LLLL') || 'No Start Time'}</dd>
+
+			<dt>Stop</dt>
+			<dd>{Moment(notification.stopAt).format('LLLL') || 'No End Time'}</dd>
+
+			<dt>Text</dt>
+			<dd>{notification.text || 'No Text'}</dd>
+		</dl>
+		<button onClick={()=>onDelete(notification.dismissKey)}>DELETE</button>
+	</>
+);
+
+const NotificationLookup = ()=>{
+	const [searching, setSearching] = useState(false);
+	const [error, setError] = useState(null);
+	const [notifications, setNotifications] = useState([]);
+
+	const lookupAll = async ()=>{
+		setSearching(true);
+		setError(null);
+
+		try {
+			const res = await request.get('/admin/notification/all');
+			setNotifications(res.body || []);
+		} catch (err) {
+			console.log(err);
+			setError(`Error looking up notifications: ${err.response.body.message}`);
+		} finally {
+			setSearching(false);
+		}
+	};
+
+	const deleteNotification = async (dismissKey)=>{
+		if(!dismissKey) return;
+
+		const confirmed = window.confirm(
+			`Really delete notification ${dismissKey}?`
+		);
+		if(!confirmed) {
+			console.log('Delete notification cancelled');
+			return;
+		}
+		console.log('Delete notification confirm');
+		try {
+			await request.delete(`/admin/notification/delete/${dismissKey}`);
+			lookupAll();
+		} catch (err) {
+			console.log(err);
+			setError(`Error deleting notification: ${err.response.body.message}`);
+		};
+	};
+
+	const renderNotificationsList = ()=>{
+		if(error)
+			return <div className='error'>{error}</div>;
+
+		if(notifications.length === 0)
+			return <div className='noNotification'>No notifications available.</div>;
+
+		return (
+			<ul className='notificationList'>
+				{notifications.map((notification)=>(
+					<li key={notification.dismissKey} >
+						<details>
+							<summary>{notification.title || 'No Title'}</summary>
+							<NotificationDetail notification={notification} onDelete={deleteNotification} />
+						</details>
+					</li>
+				))}
+			</ul>
+		);
+	};
+
+	return (
+		<div className='notificationLookup'>
+			<h2>Check all Notifications</h2>
+			<button onClick={lookupAll}>
+				<i className={`fas ${searching ? 'fa-spin fa-spinner' : 'fa-search'}`} />
+			</button>
+			{renderNotificationsList()}
+		</div>
+	);
+};
+
+export default NotificationLookup;

client/admin/notificationUtils/notificationLookup/notificationLookup.less

@@ -0,0 +1,35 @@
+.notificationLookup {
+	width     : 450px;
+	height    : fit-content;
+
+	.noNotification { margin-block : 20px; }
+	.notificationList {
+		display        : flex;
+		flex-direction : column;
+		max-height     : 500px;
+		margin-block   : 20px;
+		overflow       : auto;
+		border         : 1px solid;
+		border-radius  : 5px;
+		
+		li {
+			padding    : 10px;
+			background : #CCCCCC;
+				
+			&:nth-child(even) { background : #DDDDDD; }
+			&:first-child {
+				border-top-left-radius  : 5px;
+				border-top-right-radius : 5px;
+			}
+			&:last-child {
+				border-bottom-right-radius : 5px;
+				border-bottom-left-radius  : 5px;
+			}
+				
+			summary {
+				font-size   : 20px;
+				font-weight : 900;
+			}
+		}
+	}
+}

client/admin/notificationUtils/notificationUtils.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import NotificationLookup from './notificationLookup/notificationLookup.jsx';
+import NotificationAdd from './notificationAdd/notificationAdd.jsx';
+
+const NotificationUtils = ()=>{
+	return (
+		<section className='notificationUtils'>
+			<NotificationAdd />
+			<NotificationLookup />
+		</section>
+	);
+};
+
+export default NotificationUtils;