Merge branch 'master' into Images-Snippet-Menu

client/homebrew/editor/snippetbar/snippets/snippets.js

@@ -57,7 +57,6 @@ module.exports = [
 							`https://homebrewery.naturalcrit.com/share/${brew.shareId}` +
 							`&size=100x100) {width:100px;mix-blend-mode:multiply}`;
 				}
-
 			},
 			{
 				name : 'Page Number',
@@ -121,13 +120,23 @@ module.exports = [
 				name : 'Image',
 				icon : 'fas fa-image',
 				gen  : dedent`
-					![cat warrior](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:325px}
-					Credit: Kyounghwan Kim`
+					![cat warrior](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:325px,mix-blend-mode:multiply}
+
+					{{artist,position:relative,top:-230px,left:-100px,margin-bottom:-30px
+					##### Cat Warrior
+					[Kyoung Hwan Kim](https://www.artstation.com/tahra)
+					}}`
 			},
 			{
 				name : 'Background Image',
 				icon : 'fas fa-tree',
-				gen  : `![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,top:50px,right:30px,width:280px}`
+				gen  : dedent`
+					![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,top:50px,right:30px,width:280px}
+
+					{{artist,top:90px,right:30px
+					##### Homebrew Mug
+					[naturalcrit](https://homebrew.naturalcrit.com)
+					}}`
 			},
 			{
 				name : 'Class Table Decoration',
@@ -217,6 +226,18 @@ module.exports = [
 				icon : 'fas fa-hat-wizard',
 				gen  : MagicGen.item,
 			},
+			{
+				name : 'Artist Credit',
+				icon : 'fas fa-signature',
+				gen  : function(){
+					return dedent`
+						{{artist,top:90px,right:30px
+						##### Starry Night
+						[Van Gogh](https://www.vangoghmuseum.nl/en)
+						}}
+						\n`;
+				},
+			},
 		]
 	},
 

client/homebrew/editor/snippetbar/snippetsLegacy/snippets.js

@@ -171,6 +171,14 @@ module.exports = [
 				icon : 'far fa-file-word',
 				gen  : CoverPageGen,
 			},
+			{
+				name : 'Artist Credit',
+				icon : 'fas fa-signature',
+				gen  : '<div class=\'artist\' style=\'top:90px;right:30px;\'>\n' +
+						'##### Starry Night\n' +
+						'[Van Gogh](https://www.vangoghmuseum.nl/en)\n' +
+						'</div>\n'
+			},
 		]
 	},
 

client/homebrew/pages/editPage/editPage.jsx

@@ -322,7 +322,9 @@ const EditPage = createClass({
 			let errMsg = '';
 			try {
 				errMsg += `${this.state.errors.toString()}\n\n`;
-				errMsg += `\`\`\`\n${JSON.stringify(this.state.errors.response.error, null, '  ')}\n\`\`\``;
+				errMsg += `\`\`\`\n${this.state.errors.stack}\n`;
+				errMsg += `${JSON.stringify(this.state.errors.response.error, null, '  ')}\n\`\`\``;
+				console.log(errMsg);
 			} catch (e){}
 
 			if(this.state.errors.status == '401'){
@@ -344,6 +346,27 @@ const EditPage = createClass({
 				</Nav.item>;
 			}
 
+			if(this.state.errors.status == '403' && this.state.errors.response.body.errors[0].reason == 'insufficientPermissions'){
+				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+					Oops!
+					<div className='errorContainer' onClick={this.clearErrors}>
+					Looks like your Google credentials have
+					expired! Visit the log in page to sign out
+					and sign back in with Google
+					to save this to Google Drive!
+						<a target='_blank' rel='noopener noreferrer'
+							href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
+							<div className='confirm'>
+								Sign In
+							</div>
+						</a>
+						<div className='deny'>
+							Not Now
+						</div>
+					</div>
+				</Nav.item>;
+			}
+
 			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 				Oops!
 				<div className='errorContainer'>

client/homebrew/pages/newPage/newPage.jsx

@@ -61,7 +61,7 @@ const NewPage = createClass({
 
 			isSaving   : false,
 			saveGoogle : (global.account && global.account.googleId ? true : false),
-			errors     : [],
+			errors     : null,
 			htmlErrors : Markdown.validate(this.props.brew.text)
 		};
 	},
@@ -138,6 +138,14 @@ const NewPage = createClass({
 		}));
 	},
 
+	clearErrors : function(){
+		this.setState({
+			errors   : null,
+			isSaving : false
+
+		});
+	},
+
 	save : async function(){
 		this.setState({
 			isSaving : true
@@ -161,7 +169,7 @@ const NewPage = createClass({
 				console.log(err.status === 401
 					? 'Not signed in!'
 					: 'Error Creating New Google Brew!');
-				this.setState({ isSaving: false });
+				this.setState({ isSaving: false, errors: err });
 				return;
 			});
 
@@ -191,12 +199,73 @@ const NewPage = createClass({
 	},
 
 	renderSaveButton : function(){
+		if(this.state.errors){
+			let errMsg = '';
+			try {
+				errMsg += `${this.state.errors.toString()}\n\n`;
+				errMsg += `\`\`\`\n${this.state.errors.stack}\n`;
+				errMsg += `${JSON.stringify(this.state.errors.response.error, null, '  ')}\n\`\`\``;
+				console.log(errMsg);
+			} catch (e){}
+
+			if(this.state.errors.status == '401'){
+				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+					Oops!
+					<div className='errorContainer' onClick={this.clearErrors}>
+					You must be signed in to a Google account
+						to save this to<br />Google Drive!<br />
+						<a target='_blank' rel='noopener noreferrer'
+							href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
+							<div className='confirm'>
+								Sign In
+							</div>
+						</a>
+						<div className='deny'>
+							Not Now
+						</div>
+					</div>
+				</Nav.item>;
+			}
+
+			if(this.state.errors.status == '403' && this.state.errors.response.body.errors[0].reason == 'insufficientPermissions'){
+				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+					Oops!
+					<div className='errorContainer' onClick={this.clearErrors}>
+					Looks like your Google credentials have
+					expired! Visit the log in page to sign out
+					and sign back in with Google
+					to save this to Google Drive!
+						<a target='_blank' rel='noopener noreferrer'
+							href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
+							<div className='confirm'>
+								Sign In
+							</div>
+						</a>
+						<div className='deny'>
+							Not Now
+						</div>
+					</div>
+				</Nav.item>;
+			}
+
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer'>
+					Looks like there was a problem saving. <br />
+					Report the issue <a target='_blank' rel='noopener noreferrer'
+						href={`https://github.com/naturalcrit/homebrewery/issues/new?body=${encodeURIComponent(errMsg)}`}>
+						here
+					</a>.
+				</div>
+			</Nav.item>;
+		}
+
 		if(this.state.isSaving){
-			return <Nav.item icon='fas fa-spinner fa-spin' className='saveButton'>
+			return <Nav.item icon='fas fa-spinner fa-spin' className='save'>
 				save...
 			</Nav.item>;
 		} else {
-			return <Nav.item icon='fas fa-save' className='saveButton' onClick={this.save}>
+			return <Nav.item icon='fas fa-save' className='save' onClick={this.save}>
 				save
 			</Nav.item>;
 		}

client/homebrew/pages/newPage/newPage.less

@@ -1,10 +1,82 @@
 .newPage{
-
-	.saveButton{
+	.navItem.save{
 		background-color: @orange;
 		&:hover{
 			background-color: @green;
 		}
+		&.error{
+			position         : relative;
+			background-color : @red;
+		}
 	}
-
-}
+	.errorContainer{
+		animation-name: glideDown;
+		animation-duration: 0.4s;
+		position         : absolute;
+		top              : 100%;
+		left             : 50%;
+		z-index          : 100000;
+		width            : 140px;
+		padding          : 3px;
+		color            : white;
+		background-color : #333;
+		border           : 3px solid #444;
+		border-radius    : 5px;
+		transform        : translate(-50% + 3px, 10px);
+		text-align       : center;
+		font-size        : 10px;
+		font-weight      : 800;
+		text-transform   : uppercase;
+		a{
+			color : @teal;
+		}
+		&:before {
+			content: "";
+			width: 0px;
+			height: 0px;
+			position: absolute;
+			border-left: 10px solid transparent;
+			border-right: 10px solid transparent;
+			border-top: 10px solid transparent;
+			border-bottom: 10px solid #444;
+			left: 53px;
+			top: -23px;
+		}
+		&:after {
+			content: "";
+			width: 0px;
+			height: 0px;
+			position: absolute;
+			border-left: 10px solid transparent;
+			border-right: 10px solid transparent;
+			border-top: 10px solid transparent;
+			border-bottom: 10px solid #333;
+			left: 53px;
+			top: -19px;
+		}
+		.deny {
+			width            : 48%;
+			margin           : 1px;
+			padding          : 5px;
+			background-color : #333;
+			display          : inline-block;
+			border-left      : 1px solid #666;
+			.animate(background-color);
+			&:hover{
+				background-color : red;
+			}
+		}
+		.confirm {
+			width            : 48%;
+			margin           : 1px;
+			padding          : 5px;
+			background-color : #333;
+			display          : inline-block;
+			color            : white;
+			.animate(background-color);
+			&:hover{
+				background-color : teal;
+			}
+		}
+	}
+}