Add blocking notification to EditPage

client/homebrew/pages/editPage/editPage.jsx

@@ -20,6 +20,8 @@ const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
+const LockNotification = require('./lockNotification/lockNotification.jsx');
+
 const Markdown = require('naturalcrit/markdown.js');
 
 const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
@@ -51,7 +53,8 @@ const EditPage = createClass({
 			autoSave               : true,
 			autoSaveWarning        : false,
 			unsavedTime            : new Date(),
-			currentEditorPage      : 0
+			currentEditorPage      : 0,
+			displayLockMessage     : this.props.brew.lock || false
 		};
 	},
 	savedBrew : null,
@@ -390,26 +393,30 @@ const EditPage = createClass({
 			{this.renderNavbar()}
 
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
-					<Editor
-						ref='editor'
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						onStyleChange={this.handleStyleChange}
-						onMetaChange={this.handleMetaChange}
-						reportError={this.errorReported}
-						renderer={this.state.brew.renderer}
-					/>
-					<BrewRenderer
-						text={this.state.brew.text}
-						style={this.state.brew.style}
-						renderer={this.state.brew.renderer}
-						theme={this.state.brew.theme}
-						errors={this.state.htmlErrors}
-						lang={this.state.brew.lang}
-						currentEditorPage={this.state.currentEditorPage}
-					/>
-				</SplitPane>
+				{this.state.displayLockMessage ?
+					<LockNotification message={this.props.brew.lock.message} disableLock={()=>this.setState({ displayLockMessage: false })}/>
+					:
+					<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+						<Editor
+							ref='editor'
+							brew={this.state.brew}
+							onTextChange={this.handleTextChange}
+							onStyleChange={this.handleStyleChange}
+							onMetaChange={this.handleMetaChange}
+							reportError={this.errorReported}
+							renderer={this.state.brew.renderer}
+						/>
+						<BrewRenderer
+							text={this.state.brew.text}
+							style={this.state.brew.style}
+							renderer={this.state.brew.renderer}
+							theme={this.state.brew.theme}
+							errors={this.state.htmlErrors}
+							lang={this.state.brew.lang}
+							currentEditorPage={this.state.currentEditorPage}
+						/>
+					</SplitPane>
+				}
 			</div>
 		</div>;
 	}

client/homebrew/pages/editPage/lockNotification/lockNotification.jsx

@@ -0,0 +1,22 @@
+require('./lockNotification.less');
+const React = require('react');
+const createClass = require('create-react-class');
+
+const LockNotification = createClass({
+	displayName     : 'LockNotification',
+	getInitialState : function() {
+		return {
+			disableLock : ()=>{}
+		};
+	},
+
+	render : function(){
+		return <div className='lockNotification'>
+			<h1>BREW LOCKED</h1>
+			<p>{this.props.message || 'Unable to retrieve Lock Message'}</p>
+			<button onClick={()=>{this.props.disableLock();}}>CLICK TO UNLOCK</button>
+		</div>;
+	}
+});
+
+module.exports = LockNotification;

client/homebrew/pages/editPage/lockNotification/lockNotification.less

@@ -0,0 +1,17 @@
+.lockNotification {
+	background-color: #ccc;
+	color: black;
+	padding: 10px;
+	margin: 25px 100px;
+	text-align: center;
+
+	button {
+		background-color: #333;
+		color: white;
+		margin-top: 10px;
+
+		&:hover {
+			background-color: #777;
+		}
+	}
+}