update ui to include invitedAuthors array

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -250,6 +250,8 @@ const MetadataEditor = createClass({
 
 	render : function(){
 		return <div className='metadataEditor'>
+			<h1 className='sectionHead'>Brew</h1>
+
 			<div className='field title'>
 				<label>title</label>
 				<input type='text' className='value'
@@ -283,8 +285,6 @@ const MetadataEditor = createClass({
 				values={this.props.metadata.tags}
 				onChange={(e)=>this.handleFieldChange('tags', e)}/>
 
-			{this.renderAuthors()}
-
 			<div className='field systems'>
 				<label>systems</label>
 				<div className='value'>
@@ -296,6 +296,23 @@ const MetadataEditor = createClass({
 
 			{this.renderRenderOptions()}
 
+			<hr/>
+
+			<h1 className='sectionHead'>Authors</h1>
+
+			{this.renderAuthors()}
+
+			<StringArrayEditor label='invited authors' valuePatterns={[/.+/]}
+				validators={[(v)=>!this.props.metadata.authors.includes(v)]}
+				placeholder='invite author' unique={true}
+				values={this.props.metadata.invitedAuthors}
+				notes={['Invited authors are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']}
+				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}/>
+
+			<hr/>
+
+			<h1 className='sectionHead'>Privacy</h1>
+
 			<div className='field publish'>
 				<label>publish</label>
 				<div className='value'>

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -10,6 +10,15 @@
 	height           : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar.  probably a better way to dynamic get this.
 	overflow-y       : auto;
 
+	.sectionHead {
+		font-weight: 1000;
+		margin: 20px 0;
+
+		&:first-of-type {
+			margin-top: 0;
+		}
+	}
+
 	& > div {
 		margin-bottom: 10px;
 	}
@@ -30,6 +39,7 @@
 	}
 	.field{
 		display       : flex;
+		flex-wrap     : wrap;
 		width         : 100%;
 		min-width     : 200px;
 		&>label{
@@ -78,6 +88,11 @@
 				font-size   : 0.8em;
 			}
 		}
+
+		small {
+			font-size  : 0.6em;
+			font-style : italic;
+		}
 	}
 
 
@@ -128,10 +143,6 @@
 		button.unpublish{
 			.button(@silver);
 		}
-		small{
-			font-size  : 0.6em;
-			font-style : italic;
-		}
 	}
 
 	.delete.field .value{
@@ -196,6 +207,7 @@
 	}
 	.field .list {
 		display: flex;
+		flex: 1 0;
 		flex-wrap: wrap;
 
 		> * {