Merge branch 'master' into Delete-Recent-Items

client/homebrew/homebrew.jsx

@@ -11,6 +11,7 @@ const SharePage = require('./pages/sharePage/sharePage.jsx');
 const NewPage = require('./pages/newPage/newPage.jsx');
 //const ErrorPage = require('./pages/errorPage/errorPage.jsx');
 const PrintPage = require('./pages/printPage/printPage.jsx');
+const AccountPage = require('./pages/accountPage/accountPage.jsx');
 
 const WithRoute = (props)=>{
 	const params = useParams();
@@ -61,24 +62,27 @@ const Homebrew = createClass({
 	},
 
 	render : function (){
-		return <Router location={this.props.url}>
-			<div className='homebrew'>
-				<Routes>
-					<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={this.props.brew} />} />
-					<Route path='/share/:id' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
-					<Route path='/new/:id' element={<WithRoute el={NewPage} brew={this.props.brew} />} />
-					<Route path='/new' element={<WithRoute el={NewPage}/>} />
-					<Route path='/user/:username' element={<WithRoute el={UserPage} brews={this.props.brews} />} />
-					<Route path='/print/:id' element={<WithRoute el={PrintPage} brew={this.props.brew} />} />
-					<Route path='/print' element={<WithRoute el={PrintPage} />} />
-					<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
-					<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
-					<Route path='/legacy' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-					<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-					<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-				</Routes>
-			</div>
-		</Router>;
+		return (
+			<Router location={this.props.url}>
+				<div className='homebrew'>
+					<Routes>
+						<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={this.props.brew} />} />
+						<Route path='/share/:id' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
+						<Route path='/new/:id' element={<WithRoute el={NewPage} brew={this.props.brew} />} />
+						<Route path='/new' element={<WithRoute el={NewPage}/>} />
+						<Route path='/user/:username' element={<WithRoute el={UserPage} brews={this.props.brews} />} />
+						<Route path='/print/:id' element={<WithRoute el={PrintPage} brew={this.props.brew} />} />
+						<Route path='/print' element={<WithRoute el={PrintPage} />} />
+						<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
+						<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
+						<Route path='/account' element={<WithRoute el={AccountPage} brew={this.props.brew} uiItems={this.props.brew.uiItems} />} />
+						<Route path='/legacy' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
+					  	<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
+					  	<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
+					</Routes>
+				</div>
+			</Router>
+		);
 	}
 });
 

client/homebrew/navbar/account.navitem.jsx

@@ -76,6 +76,14 @@ const Account = createClass({
 				>
 					brews
 				</Nav.item>
+				<Nav.item
+					className='account'
+					color='orange'
+					icon='fas fa-user'
+					href='/account'
+				>
+					account
+				</Nav.item>
 				<Nav.item
 					className='logout'
 					color='red'

client/homebrew/pages/accountPage/accountPage.jsx

@@ -0,0 +1,71 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _     = require('lodash');
+const cx    = require('classnames');
+const moment = require('moment');
+
+const UIPage = require('../basePages/uiPage/uiPage.jsx');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+const Navbar = require('../../navbar/navbar.jsx');
+
+const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
+const Account = require('../../navbar/account.navitem.jsx');
+const NewBrew = require('../../navbar/newbrew.navitem.jsx');
+const HelpNavItem = require('../../navbar/help.navitem.jsx');
+
+const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
+
+const AccountPage = createClass({
+	displayName     : 'AccountPage',
+	getDefaultProps : function() {
+		return {
+			brew    : {},
+			uiItems : {}
+		};
+	},
+	getInitialState : function() {
+		return {
+			uiItems : this.props.uiItems
+		};
+	},
+
+	renderNavItems : function() {
+		return <Navbar>
+			<Nav.section>
+				<NewBrew />
+				<HelpNavItem />
+				<RecentNavItem />
+				<Account />
+			</Nav.section>
+		</Navbar>;
+	},
+
+	renderUiItems : function() {
+		// console.log(this.props.uiItems);
+		return 	<>
+			<div className='dataGroup'>
+				<h1>Account Information  <i className='fas fa-user'></i></h1>
+				<p><strong>Username: </strong> {this.props.uiItems.username || 'No user currently logged in'}</p>
+				<p><strong>Last Login: </strong> {moment(this.props.uiItems.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}</p>
+			</div>
+			<div className='dataGroup'>
+				<h3>Homebrewery Information <NaturalCritIcon /></h3>
+				<p><strong>Brews on Homebrewery: </strong> {this.props.uiItems.mongoCount || '-'}</p>
+			</div>
+			<div className='dataGroup'>
+				<h3>Google Information <i className='fab fa-google-drive'></i></h3>
+				<p><strong>Linked to Google: </strong> {this.props.uiItems.googleId ? 'YES' : 'NO'}</p>
+				{this.props.uiItems.googleId ? <p><strong>Brews on Google Drive: </strong> {this.props.uiItems.fileCount || '-'}</p> : '' }
+			</div>
+		</>;
+	},
+
+	render : function(){
+		return <UIPage brew={this.props.brew}>
+			{this.renderUiItems()}
+		</UIPage>;
+	}
+});
+
+module.exports = AccountPage;

client/homebrew/pages/basePages/listPage/listPage.less

@@ -26,7 +26,29 @@
 				font-size  : 1.3em;
 				font-style : italic;
 			}
-
+			.brewCollection {
+				h1:hover{
+					cursor: pointer;
+				}
+				.active::before, .inactive::before {
+					font-family: 'Font Awesome 5 Free';
+					font-weight: 900;
+					font-size: 0.6cm;
+					padding-right: 0.5em;
+				}
+				.active {
+					color: var(--HB_Color_HeaderText);
+				}
+				.active::before {
+					content: '\f107';
+				}
+				.inactive {
+					color: #707070;
+				}
+				.inactive::before {
+					content: '\f105';
+				}
+			}
 		}
 	}
 	.sort-container{

client/homebrew/pages/basePages/uiPage/uiPage.jsx

@@ -0,0 +1,38 @@
+require('./uiPage.less');
+const React = require('react');
+const createClass = require('create-react-class');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+const Navbar = require('../../../navbar/navbar.jsx');
+const NewBrewItem = require('../../../navbar/newbrew.navitem.jsx');
+const HelpNavItem = require('../../../navbar/help.navitem.jsx');
+const RecentNavItem = require('../../../navbar/recent.navitem.jsx').both;
+const Account = require('../../../navbar/account.navitem.jsx');
+
+
+const UIPage = createClass({
+	displayName : 'UIPage',
+
+	render : function(){
+		return <div className='uiPage sitePage'>
+			<Navbar>
+				<Nav.section>
+					<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
+				</Nav.section>
+
+				<Nav.section>
+					<NewBrewItem />
+					<HelpNavItem />
+					<RecentNavItem />
+					<Account />
+				</Nav.section>
+			</Navbar>
+
+			<div className='content'>
+				{this.props.children}
+			</div>
+		</div>;
+	}
+});
+
+module.exports = UIPage;

client/homebrew/pages/basePages/uiPage/uiPage.less

@@ -0,0 +1,47 @@
+.uiPage{
+	.content{
+		overflow-y : hidden;
+		width : 90vw;
+		background-color: #f0f0f0;
+		font-family: 'Open Sans';
+		margin-left: auto;
+		margin-right: auto;
+		margin-top: 25px;
+		padding: 2% 4%;
+		font-size: 0.8em;
+		line-height: 1.8em;
+		.dataGroup{
+			padding: 6px 20px 15px;
+			border: 2px solid black;
+			border-radius: 5px;
+			margin: 5px 0px;
+		}
+		h1, h2, h3, h4{
+			font-weight: 900;
+			text-transform: uppercase;
+			margin: 0.5em 30% 0.25em 0;
+			border-bottom: 2px solid slategrey;
+		}
+		h1 {
+			font-size: 2em;
+			border-bottom: 2px solid darkslategrey;
+			margin-bottom: 0.5em;
+			margin-right: 0;
+		}
+		h2 {
+			font-size: 1.75em;
+		}
+		h3 {
+			font-size: 1.5em;
+			svg {
+				width: 19px;
+			}
+		}
+		h4 {
+			font-size: 1.25em;
+		}
+		strong {
+			font-weight: bold;
+		}
+	}
+}

client/homebrew/pages/editPage/editPage.jsx

@@ -78,7 +78,7 @@ const EditPage = createClass({
 
 		this.savedBrew = JSON.parse(JSON.stringify(this.props.brew)); //Deep copy
 
-		this.setState({ autoSave: JSON.parse(localStorage.getItem('AUTOSAVE_ON')) }, ()=>{
+		this.setState({ autoSave: JSON.parse(localStorage.getItem('AUTOSAVE_ON')) ?? true }, ()=>{
 			if(this.state.autoSave){
 				this.trySave();
 			} else {

client/template.js

@@ -1,28 +1,30 @@
-module.exports = async(name, title = '', props = {})=>{
-	const HOMEBREWERY_PUBLIC_URL=props.config.publicUrl;
+const template = async function(name, title='', props = {}){
+	const ogTags = [];
+	Object.entries(props.ogMeta).forEach(([key, value])=>{
+		if(!value) return;
+		const tag = `<meta property="og:${key}" content="${value}">`;
+		ogTags.push(tag);
+	});
+	const ogMetaTags = ogTags.join('\n');
 
-	return `
-<!DOCTYPE html>
-<html>
-	<head>
-		<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
-		<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
-		<link href=${`/${name}/bundle.css`} rel='stylesheet' />
-		<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
-		<meta property="og:title" content="${props.brew?.title || 'Homebrewery - Untitled Brew'}">
-		<meta property="og:url" content="${HOMEBREWERY_PUBLIC_URL}/${props.brew?.shareId ? `share/${props.brew.shareId}` : ''}">
-		<meta property="og:image" content="${props.brew?.thumbnail || `${HOMEBREWERY_PUBLIC_URL}/thumbnail.png`}">
-		<meta property="og:description" content="${props.brew?.description || 'No description.'}">
-		<meta property="og:site_name" content="The Homebrewery - Make your Homebrew content look legit!">
-		<meta property="og:type" content="article">
-		<meta name="twitter:card" content="summary">
-		<title>${title.length ? `${title} - The Homebrewery`: 'The Homebrewery - NaturalCrit'}</title>
-	</head>
-	<body>
-		<main id="reactRoot">${require(`../build/${name}/ssr.js`)(props)}</main>
-		<script src=${`/${name}/bundle.js`}></script>
-		<script>start_app(${JSON.stringify(props)})</script>
-	</body>
-</html>
-`;
+	return `<!DOCTYPE html>
+	<html>
+		<head>
+			<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
+			<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
+			<link href=${`/${name}/bundle.css`} rel='stylesheet' />
+			<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
+			${ogMetaTags}
+			<meta name="twitter:card" content="summary">
+			<title>${title.length ? `${title} - The Homebrewery`: 'The Homebrewery - NaturalCrit'}</title>
+		</head>
+		<body>
+			<main id="reactRoot">${require(`../build/${name}/ssr.js`)(props)}</main>
+			<script src=${`/${name}/bundle.js`}></script>
+			<script>start_app(${JSON.stringify(props)})</script>
+		</body>
+	</html>
+	`;
 };
+
+module.exports = template;